robindoc 3.7.5 → 3.7.7

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 +722 -722
  2. package/package.json +8 -8
package/lib/styles.css CHANGED
@@ -11,6 +11,20 @@
11
11
  scrollbar-width: thin;
12
12
  scrollbar-color: var(--r-main-200) transparent;
13
13
  box-sizing: border-box;
14
+ }.r-code-span {
15
+ font-family: var(--monospace-font, monospace, monospace);
16
+ background-color: var(--r-main-100);
17
+ border: 1px solid var(--r-main-200);
18
+ color: var(--r-main-950);
19
+ border-radius: 4px;
20
+ padding: 2px 6px;
21
+ font-size: inherit;
22
+ font-weight: 500;
23
+ letter-spacing: 0.5px;
24
+ }
25
+
26
+ .r-code-span + .r-content-link-external {
27
+ margin-left: -12px;
14
28
  }.r-header {
15
29
  position: sticky;
16
30
  background-color: var(--r-main-50);
@@ -154,28 +168,6 @@
154
168
  }
155
169
  .r-powered-link:hover {
156
170
  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
171
  }.r-root {
180
172
  --r-header-height: 60px;
181
173
  position: relative;
@@ -409,10 +401,28 @@
409
401
  --r-cl-60: #86181d;
410
402
  --r-cl-61: #144620;
411
403
  --r-cl-62: #c24e00;
412
- }.r-page-container {
404
+ }.r-docs-container {
413
405
  min-height: calc(100dvh - var(--r-header-height));
414
406
  overflow-wrap: break-word;
415
407
  box-sizing: border-box;
408
+ }
409
+ @media screen and (width >= 768px) {
410
+ .r-docs-container {
411
+ display: grid;
412
+ justify-content: center;
413
+ column-gap: 32px;
414
+ grid-template-areas: "sidebar breadcrumbs" "sidebar contents" "sidebar content" "sidebar pagination";
415
+ grid-template-columns: 1fr calc(100% - 248px);
416
+ grid-template-rows: auto auto 1fr auto;
417
+ }
418
+ }
419
+ @media screen and (width >= 1180px) {
420
+ .r-docs-container {
421
+ column-gap: 40px;
422
+ grid-template-areas: "sidebar breadcrumbs contents" "sidebar content contents" "sidebar pagination contents";
423
+ grid-template-columns: 200px 640px 238px;
424
+ grid-template-rows: auto 1fr auto;
425
+ }
416
426
  }.r-blog-container {
417
427
  min-height: calc(100dvh - var(--r-header-height));
418
428
  overflow-wrap: break-word;
@@ -427,811 +437,801 @@
427
437
  grid-template-columns: 760px 220px;
428
438
  grid-template-rows: auto 1fr auto;
429
439
  }
430
- }.r-keylink.keylink-to-navigation:focus {
431
- margin-top: -40px;
440
+ }.r-page-container {
441
+ min-height: calc(100dvh - var(--r-header-height));
442
+ overflow-wrap: break-word;
443
+ box-sizing: border-box;
432
444
  }.keylink-to-content {
433
445
  position: absolute !important;
434
446
  top: 8px;
435
447
  left: 12px;
436
448
  z-index: 1001;
437
- }.r-code-span {
438
- font-family: var(--monospace-font, monospace, monospace);
439
- background-color: var(--r-main-100);
440
- border: 1px solid var(--r-main-200);
441
- color: var(--r-main-950);
442
- border-radius: 4px;
443
- padding: 2px 6px;
444
- font-size: inherit;
445
- font-weight: 500;
446
- letter-spacing: 0.5px;
447
- }
448
-
449
- .r-code-span + .r-content-link-external {
450
- margin-left: -12px;
451
- }.r-header-menu {
452
- display: flex;
453
- justify-content: flex-end;
454
- order: 1;
449
+ }.r-keylink.keylink-to-navigation:focus {
450
+ margin-top: -40px;
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);
614
- }
615
-
616
- .r-dropdown-link._active {
617
- color: var(--r-primary-700);
618
- }.r-search-btn {
619
- position: relative;
620
- border-radius: 6px;
621
- background-color: var(--r-main-100);
622
- color: var(--r-main-600);
623
- padding: 8px 16px;
624
- border: 1px solid var(--r-main-200);
625
- width: 100%;
626
- text-align: left;
627
- cursor: text;
628
- box-sizing: border-box;
576
+ @media screen and (width < 768px) {
577
+ .r-sidebar-nav {
578
+ padding: 12px;
579
+ }
629
580
  }
630
581
  @media screen and (width >= 768px) {
631
- .r-search-btn {
632
- width: 220px;
633
- padding: 8px 96px 8px 16px;
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));
634
590
  }
635
591
  }
636
- .r-search-btn:hover {
637
- border-color: var(--r-main-600);
638
- }
639
- .r-search-btn:hover .r-search-kbd {
640
- color: var(--r-main-950);
641
- }
642
592
 
643
- .r-search-title {
644
- display: block;
645
- overflow: hidden;
646
- text-overflow: ellipsis;
647
- white-space: nowrap;
593
+ .r-sidebar-space {
594
+ box-sizing: border-box;
595
+ }
596
+ @media screen and (width < 768px) {
597
+ .r-sidebar-space {
598
+ display: block;
599
+ height: 40px;
600
+ }
648
601
  }
649
602
 
650
- .r-search-kbd {
651
- display: none;
652
- position: absolute;
653
- right: 6px;
654
- top: 50%;
655
- transform: translateY(-50%);
603
+ .r-sidebar-btn {
604
+ position: sticky;
605
+ top: 0;
606
+ display: flex;
607
+ width: 100%;
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;
616
+ box-sizing: border-box;
656
617
  }
657
618
  @media screen and (width >= 768px) {
658
- .r-search-kbd {
659
- display: flex;
619
+ .r-sidebar-btn {
620
+ display: none;
660
621
  }
661
622
  }
662
623
 
663
- .r-search-dialog {
664
- width: 100%;
665
- height: 100%;
666
- background: none;
667
- max-width: none;
668
- max-height: none;
669
- border: none;
670
- padding: unset;
671
- transition: opacity 0.3s ease, overlay 0.4s ease-out allow-discrete, display 0.4s ease-out allow-discrete;
672
- opacity: 0;
624
+ .r-sidebar-chevron {
625
+ display: inline;
626
+ margin-right: 6px;
627
+ transition: transform 0.2s;
628
+ box-sizing: border-box;
673
629
  }
674
- .r-search-dialog::backdrop {
675
- backdrop-filter: blur(0);
676
- background: color-mix(in srgb, var(--r-main-900) 0%, transparent 100%);
677
- transition: backdrop-filter 0.4s ease-out, background 0.4s ease-out;
630
+
631
+ .r-sidebar-input:checked ~ .r-sidebar-btn .r-sidebar-chevron {
632
+ transform: rotate(90deg);
678
633
  }
679
634
 
680
- .r-search-dialog[open] {
681
- opacity: 1;
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;
682
642
  }
683
- @starting-style {
684
- .r-search-dialog[open] {
685
- opacity: 0;
686
- }
643
+
644
+ .r-sidebar-drop::details-content {
645
+ overflow: hidden;
646
+ transition: content-visibility 0.4s allow-discrete;
647
+ box-sizing: border-box;
687
648
  }
688
- .r-search-dialog[open]::backdrop {
689
- backdrop-filter: blur(4px);
690
- background: color-mix(in srgb, var(--r-main-900) 40%, transparent 100%);
649
+
650
+ .r-sidebar-sublist {
651
+ margin-left: 12px;
691
652
  }
692
653
 
693
- .r-search-popup {
694
- position: fixed;
695
- left: 50%;
696
- transform: translateX(-50%);
697
- top: calc(var(--r-header-height) + 20px);
698
- z-index: 200;
699
- width: 100%;
700
- max-width: 540px;
701
- background-color: color-mix(in srgb, var(--r-main-50) 95%, transparent);
702
- border: 2px solid var(--r-main-200);
703
- border-bottom-width: 0;
704
- border-radius: 12px 12px 0 0;
654
+ .r-sidebar-drop > .r-sidebar-sublist {
705
655
  opacity: 0;
706
- transform: translateX(-50%) translateY(-20px);
707
- transition: opacity 0.2s, transform 0.2s;
656
+ transition: opacity 0.2s ease;
708
657
  }
709
658
 
710
- .r-search-dialog[open] .r-search-popup {
659
+ .r-sidebar-drop[open] > .r-sidebar-sublist {
711
660
  opacity: 1;
712
- transform: translateX(-50%) translateY(0);
713
- }
714
- @starting-style {
715
- .r-search-dialog[open] .r-search-popup {
716
- opacity: 0;
717
- transform: translateX(-50%) translateY(-20px);
718
- }
719
661
  }
720
662
 
721
- .r-search-dialog._active .r-search-popup {
722
- border-radius: 12px;
723
- border-bottom-width: 2px;
663
+ .r-sidebar-drop > .r-sidebar-sublist > .r-sidebar-li {
664
+ margin-top: -4rem;
665
+ transition: margin-top 0.3s ease;
724
666
  }
725
667
 
726
- .r-search-popup:has(.r-search-input:focus) {
727
- border-color: var(--r-main-300);
668
+ @starting-style {
669
+ .r-sidebar-drop[open]._starting-style > .r-sidebar-sublist > .r-sidebar-li {
670
+ margin-top: -4rem;
671
+ }
728
672
  }
729
673
 
730
- .r-search-popup-header {
731
- position: relative;
732
- border-bottom: 1px solid var(--r-main-200);
674
+ .r-sidebar-drop[open] > .r-sidebar-sublist > .r-sidebar-li {
675
+ margin-top: 0;
733
676
  }
734
677
 
735
- .r-search-input {
736
- background: none;
737
- padding: 16px 20px;
738
- border: none;
739
- border-bottom: 2px solid var(--r-main-100);
740
- width: 100%;
741
- font-size: 16px;
678
+ .r-sidebar-sublist .r-sidebar-link {
679
+ position: relative;
680
+ border-top-left-radius: 0;
681
+ border-bottom-left-radius: 0;
742
682
  box-sizing: border-box;
743
683
  }
744
- @media screen and (width >= 768px) {
745
- .r-search-input {
746
- padding: 16px 72px 16px 20px;
747
- }
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;
748
694
  }
749
- .r-search-input:hover {
750
- border-bottom-color: var(--r-main-300);
695
+
696
+ .r-sidebar-li {
697
+ position: relative;
698
+ line-height: 1.5;
751
699
  }
752
- .r-search-input:focus {
753
- outline: none;
754
- border-bottom-color: var(--r-primary-600);
700
+
701
+ .r-sidebar-li._separator {
702
+ background: var(--r-main-200);
703
+ padding: 1px;
755
704
  }
756
- .r-search-input::placeholder {
757
- color: var(--r-main-500);
705
+
706
+ .r-sidebar-li._droppable > a {
707
+ padding-right: 32px;
758
708
  }
759
709
 
760
- .r-search-popup-kbd {
761
- color: var(--r-main-600);
762
- right: 20px;
710
+ .r-sidebar-li-d0 {
711
+ margin-left: -8px;
763
712
  }
764
713
 
765
- .r-search-results {
766
- padding: 2px 8px 8px;
767
- max-height: min(400px, 100dvh - 200px);
768
- overflow-y: auto;
769
- list-style: none;
770
- scrollbar-width: thin;
771
- scrollbar-color: var(--r-main-200) transparent;
714
+ .r-sidebar-p {
772
715
  margin: 0;
773
- box-sizing: border-box;
716
+ padding: 4px 10px;
774
717
  }
775
718
 
776
- .r-search-item {
777
- display: block;
719
+ .r-sidebar-heading {
720
+ color: var(--r-main-900);
721
+ font-weight: 600;
722
+ margin-block-end: 4px;
723
+ }
724
+ .r-sidebar-heading:not(:first-child) {
725
+ margin-block-start: 12px;
726
+ }
727
+
728
+ .r-sidebar-link {
729
+ padding: 4px 10px;
730
+ color: inherit;
731
+ border-bottom: 2px solid transparent;
732
+ border-radius: 2px;
778
733
  text-decoration: none;
779
- color: var(--r-main-700);
780
- padding: 8px 12px;
781
- border: 1px solid var(--r-main-100);
782
- border-radius: 10px;
783
- width: 100%;
784
- margin-top: 6px;
785
- box-sizing: border-box;
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;
786
739
  }
787
- .r-search-item:hover, .r-search-item:focus {
788
- color: var(--r-main-950);
740
+
741
+ .r-sidebar-link._target {
742
+ color: var(--r-primary-950);
789
743
  background-color: var(--r-main-50);
790
- border-color: var(--r-main-200);
791
744
  }
792
745
 
793
- .r-search-item-title {
794
- margin: 0;
746
+ .r-sidebar-link:hover {
747
+ color: var(--r-primary-800);
748
+ background-color: var(--r-main-100);
749
+ transition-delay: initial;
750
+ }
751
+ .r-sidebar-link:hover::before {
752
+ background-color: currentColor;
753
+ transition-delay: initial;
795
754
  }
796
755
 
797
- .r-search-item-desc {
798
- font-size: 14px;
799
- color: var(--r-main-600);
800
- margin: 12px 0 0;
801
- }.r-header-social {
802
- display: flex;
803
- flex: 1;
804
- justify-content: flex-end;
756
+ .r-sidebar-link._active {
757
+ color: var(--r-primary-700);
758
+ background-color: var(--r-main-50);
805
759
  }
806
- @media screen and (width >= 1024px) {
807
- .r-header-social {
808
- flex: none;
809
- justify-content: unset;
810
- }
760
+ .r-sidebar-link._active::before {
761
+ background-color: currentColor;
811
762
  }
812
763
 
813
- .r-header-social-git {
814
- color: var(--r-main-700);
815
- transition: color 0.2s;
764
+ .r-sidebar-drop-btn {
765
+ position: absolute;
766
+ right: 3px;
767
+ top: 5px;
768
+ border-radius: 4px;
769
+ padding: 4px;
770
+ list-style: none;
771
+ cursor: pointer;
772
+ transition: color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
816
773
  }
817
- .r-header-social-git:hover, .r-header-social-git:focus {
818
- color: var(--r-main-950);
819
- }.r-container {
820
- max-width: 1180px;
821
- padding-right: 12px;
822
- padding-left: 12px;
823
- margin-right: auto;
824
- margin-left: auto;
825
- box-sizing: border-box;
826
- }.r-theme-switcher {
827
- position: relative;
828
- display: flex;
829
- gap: 4px;
830
- width: 109px;
831
- height: 37px;
832
- padding: 2px;
833
- background-color: var(--r-main-100);
834
- border: 1px solid var(--r-main-200);
835
- border-radius: 100px;
836
- box-sizing: border-box;
774
+ .r-sidebar-drop-btn:hover {
775
+ color: var(--r-primary-500);
776
+ transition-delay: initial;
837
777
  }
838
- .r-theme-switcher::before {
778
+ .r-sidebar-drop-btn::before {
839
779
  content: "";
840
780
  position: absolute;
841
- display: block;
842
- height: 32px;
843
- width: 32px;
844
- top: 2px;
845
- left: 2px;
846
- background-color: var(--r-main-50);
847
- border: 1px solid var(--r-main-200);
848
- border-radius: 100px;
849
- transition: left 0.2s;
850
- box-sizing: border-box;
851
- }
852
-
853
- .r-theme-switcher-btn {
854
- padding: 8px;
855
- background: none;
856
- border: 0;
857
- border-radius: 100px;
858
- cursor: pointer;
859
- color: var(--r-main-700);
860
- fill: transparent;
861
- z-index: 1;
862
- transition: color 0.2s 0.1s, fill 0.2s;
781
+ inset: -4px;
863
782
  }
864
- .r-theme-switcher-btn:hover {
865
- color: var(--r-main-950);
866
- fill: var(--r-main-600);
783
+ .r-sidebar-drop-btn::-webkit-details-marker {
784
+ display: none;
867
785
  }
868
786
 
869
- .r-theme-dark:not(.r-theme-system) .r-theme-switcher::before {
870
- left: 2px;
787
+ .r-sidebar-drop-icon {
788
+ display: block;
789
+ transition: transform 0.2s;
871
790
  }
872
791
 
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;
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;
879
798
  }
880
-
881
- .r-theme-switcher::before,
882
- .r-theme-system .r-theme-switcher::before {
883
- left: 38px;
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;
940
- }
941
-
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
- }
866
+ .r-burger-line._top {
867
+ transform: translateY(-3px);
962
868
  }
963
869
 
964
- .r-sidebar-top-mock {
965
- grid-row-start: 1;
966
- grid-column-start: 1;
870
+ .r-header-input:checked ~ .r-header-burger .r-burger-line._top {
871
+ transform: translateY(0) rotate(45deg);
872
+ margin-top: 0;
967
873
  }
968
874
 
969
- @media screen and (width < 768px) {
970
- .r-sidebar-input:not(:checked) ~ .r-sidebar-btn ~ .r-sidebar-nav {
971
- display: none;
972
- }
875
+ .r-burger-line._bottom {
876
+ transform: translateY(3px);
973
877
  }
974
878
 
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));
922
+ .r-search-kbd {
923
+ display: flex;
1031
924
  }
1032
925
  }
1033
926
 
1034
- .r-sidebar-space {
1035
- box-sizing: border-box;
927
+ .r-search-dialog {
928
+ width: 100%;
929
+ height: 100%;
930
+ background: none;
931
+ max-width: none;
932
+ max-height: none;
933
+ border: none;
934
+ padding: unset;
935
+ transition: opacity 0.3s ease, overlay 0.4s ease-out allow-discrete, display 0.4s ease-out allow-discrete;
936
+ opacity: 0;
1036
937
  }
1037
- @media screen and (width < 768px) {
1038
- .r-sidebar-space {
1039
- display: block;
1040
- height: 40px;
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;
942
+ }
943
+
944
+ .r-search-dialog[open] {
945
+ opacity: 1;
946
+ }
947
+ @starting-style {
948
+ .r-search-dialog[open] {
949
+ opacity: 0;
1041
950
  }
1042
951
  }
952
+ .r-search-dialog[open]::backdrop {
953
+ backdrop-filter: blur(4px);
954
+ background: color-mix(in srgb, var(--r-main-900) 40%, transparent 100%);
955
+ }
1043
956
 
1044
- .r-sidebar-btn {
1045
- position: sticky;
1046
- top: 0;
1047
- display: flex;
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;
1048
963
  width: 100%;
1049
- font-size: 14px;
1050
- border: 0;
1051
- padding: 12px;
1052
- 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;
964
+ max-width: 540px;
965
+ background-color: color-mix(in srgb, var(--r-main-50) 95%, transparent);
966
+ border: 2px solid var(--r-main-200);
967
+ border-bottom-width: 0;
968
+ border-radius: 12px 12px 0 0;
969
+ opacity: 0;
970
+ transform: translateX(-50%) translateY(-20px);
971
+ transition: opacity 0.2s, transform 0.2s;
1058
972
  }
1059
- @media screen and (width >= 768px) {
1060
- .r-sidebar-btn {
1061
- display: none;
973
+
974
+ .r-search-dialog[open] .r-search-popup {
975
+ opacity: 1;
976
+ transform: translateX(-50%) translateY(0);
977
+ }
978
+ @starting-style {
979
+ .r-search-dialog[open] .r-search-popup {
980
+ opacity: 0;
981
+ transform: translateX(-50%) translateY(-20px);
1062
982
  }
1063
983
  }
1064
984
 
1065
- .r-sidebar-chevron {
1066
- display: inline;
1067
- margin-right: 6px;
1068
- transition: transform 0.2s;
1069
- box-sizing: border-box;
985
+ .r-search-dialog._active .r-search-popup {
986
+ border-radius: 12px;
987
+ border-bottom-width: 2px;
1070
988
  }
1071
989
 
1072
- .r-sidebar-input:checked ~ .r-sidebar-btn .r-sidebar-chevron {
1073
- transform: rotate(90deg);
990
+ .r-search-popup:has(.r-search-input:focus) {
991
+ border-color: var(--r-main-300);
1074
992
  }
1075
993
 
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;
994
+ .r-search-popup-header {
995
+ position: relative;
996
+ border-bottom: 1px solid var(--r-main-200);
1083
997
  }
1084
998
 
1085
- .r-sidebar-drop::details-content {
1086
- overflow: hidden;
1087
- transition: content-visibility 0.4s allow-discrete;
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;
1088
1006
  box-sizing: border-box;
1089
1007
  }
1090
-
1091
- .r-sidebar-sublist {
1092
- margin-left: 12px;
1008
+ @media screen and (width >= 768px) {
1009
+ .r-search-input {
1010
+ padding: 16px 72px 16px 20px;
1011
+ }
1093
1012
  }
1094
-
1095
- .r-sidebar-drop > .r-sidebar-sublist {
1096
- opacity: 0;
1097
- transition: opacity 0.2s ease;
1013
+ .r-search-input:hover {
1014
+ border-bottom-color: var(--r-main-300);
1098
1015
  }
1099
-
1100
- .r-sidebar-drop[open] > .r-sidebar-sublist {
1101
- opacity: 1;
1016
+ .r-search-input:focus {
1017
+ outline: none;
1018
+ border-bottom-color: var(--r-primary-600);
1102
1019
  }
1103
-
1104
- .r-sidebar-drop > .r-sidebar-sublist > .r-sidebar-li {
1105
- margin-top: -4rem;
1106
- transition: margin-top 0.3s ease;
1020
+ .r-search-input::placeholder {
1021
+ color: var(--r-main-500);
1107
1022
  }
1108
1023
 
1109
- @starting-style {
1110
- .r-sidebar-drop[open]._starting-style > .r-sidebar-sublist > .r-sidebar-li {
1111
- margin-top: -4rem;
1112
- }
1024
+ .r-search-popup-kbd {
1025
+ color: var(--r-main-600);
1026
+ right: 20px;
1113
1027
  }
1114
1028
 
1115
- .r-sidebar-drop[open] > .r-sidebar-sublist > .r-sidebar-li {
1116
- margin-top: 0;
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;
1117
1038
  }
1118
1039
 
1119
- .r-sidebar-sublist .r-sidebar-link {
1120
- position: relative;
1121
- border-top-left-radius: 0;
1122
- border-bottom-left-radius: 0;
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;
1123
1049
  box-sizing: border-box;
1124
1050
  }
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;
1051
+ .r-search-item:hover, .r-search-item:focus {
1052
+ color: var(--r-main-950);
1053
+ background-color: var(--r-main-50);
1054
+ border-color: var(--r-main-200);
1135
1055
  }
1136
1056
 
1137
- .r-sidebar-li {
1138
- position: relative;
1139
- line-height: 1.5;
1057
+ .r-search-item-title {
1058
+ margin: 0;
1140
1059
  }
1141
1060
 
1142
- .r-sidebar-li._separator {
1143
- background: var(--r-main-200);
1144
- padding: 1px;
1061
+ .r-search-item-desc {
1062
+ font-size: 14px;
1063
+ color: var(--r-main-600);
1064
+ margin: 12px 0 0;
1065
+ }.r-dropdown {
1066
+ position: relative;
1067
+ color: var(--r-main-600);
1068
+ transition: color 0.2s 0.1s;
1069
+ }
1070
+ .r-dropdown:hover, .r-dropdown:focus-within {
1071
+ color: var(--r-main-950);
1072
+ }
1073
+ .r-dropdown:hover .r-dropdown-drop, .r-dropdown:focus-within .r-dropdown-drop {
1074
+ visibility: visible;
1075
+ pointer-events: all;
1076
+ transform: translateY(20px);
1077
+ opacity: 1;
1078
+ }
1079
+ .r-dropdown:hover .r-dropdown-chevron, .r-dropdown:focus-within .r-dropdown-chevron {
1080
+ transform: rotate(180deg);
1145
1081
  }
1146
1082
 
1147
- .r-sidebar-li._droppable > a {
1148
- padding-right: 32px;
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;
1149
1097
  }
1150
1098
 
1151
- .r-sidebar-li-d0 {
1152
- margin-left: -8px;
1099
+ .r-dropdown-chevron {
1100
+ display: block;
1101
+ margin-left: 6px;
1102
+ transition: transform 0.3s 0.1s;
1103
+ box-sizing: border-box;
1153
1104
  }
1154
1105
 
1155
- .r-sidebar-p {
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;
1156
1118
  margin: 0;
1157
- padding: 4px 10px;
1119
+ padding: 2px 6px;
1120
+ min-width: 120px;
1121
+ max-width: 180px;
1122
+ box-sizing: border-box;
1158
1123
  }
1159
1124
 
1160
- .r-sidebar-heading {
1161
- color: var(--r-main-900);
1162
- font-weight: 600;
1163
- margin-block-end: 4px;
1125
+ .r-dropdown-link {
1126
+ display: block;
1127
+ width: 100%;
1128
+ text-decoration: none;
1129
+ color: var(--r-main-700);
1130
+ padding: 4px 8px;
1131
+ margin-top: 4px;
1132
+ margin-bottom: 4px;
1133
+ border-radius: 4px;
1134
+ transition: background-color 0.2s;
1135
+ box-sizing: border-box;
1164
1136
  }
1165
- .r-sidebar-heading:not(:first-child) {
1166
- margin-block-start: 12px;
1137
+ .r-dropdown-link:hover {
1138
+ color: var(--r-main-900);
1139
+ background-color: var(--r-main-100);
1167
1140
  }
1168
1141
 
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;
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;
1180
1148
  }
1181
-
1182
- .r-sidebar-link._target {
1183
- color: var(--r-primary-950);
1184
- background-color: var(--r-main-50);
1149
+ @media screen and (width >= 1024px) {
1150
+ .r-header-social {
1151
+ flex: none;
1152
+ justify-content: unset;
1153
+ }
1185
1154
  }
1186
1155
 
1187
- .r-sidebar-link:hover {
1188
- color: var(--r-primary-800);
1189
- background-color: var(--r-main-100);
1190
- transition-delay: initial;
1156
+ .r-header-social-git {
1157
+ color: var(--r-main-700);
1158
+ transition: color 0.2s;
1191
1159
  }
1192
- .r-sidebar-link:hover::before {
1193
- background-color: currentColor;
1194
- transition-delay: initial;
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;
1195
1180
  }
1196
-
1197
- .r-sidebar-link._active {
1198
- color: var(--r-primary-700);
1181
+ .r-theme-switcher::before {
1182
+ content: "";
1183
+ position: absolute;
1184
+ display: block;
1185
+ height: 32px;
1186
+ width: 32px;
1187
+ top: 2px;
1188
+ left: 2px;
1199
1189
  background-color: var(--r-main-50);
1200
- }
1201
- .r-sidebar-link._active::before {
1202
- background-color: currentColor;
1190
+ border: 1px solid var(--r-main-200);
1191
+ border-radius: 100px;
1192
+ transition: left 0.2s;
1193
+ box-sizing: border-box;
1203
1194
  }
1204
1195
 
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;
1196
+ .r-theme-switcher-btn {
1197
+ padding: 8px;
1198
+ background: none;
1199
+ border: 0;
1200
+ border-radius: 100px;
1212
1201
  cursor: pointer;
1213
- transition: color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
1202
+ color: var(--r-main-700);
1203
+ fill: transparent;
1204
+ z-index: 1;
1205
+ transition: color 0.2s 0.1s, fill 0.2s;
1214
1206
  }
1215
- .r-sidebar-drop-btn:hover {
1216
- color: var(--r-primary-500);
1217
- transition-delay: initial;
1207
+ .r-theme-switcher-btn:hover {
1208
+ color: var(--r-main-950);
1209
+ fill: var(--r-main-600);
1218
1210
  }
1219
- .r-sidebar-drop-btn::before {
1220
- content: "";
1221
- position: absolute;
1222
- inset: -4px;
1211
+
1212
+ .r-theme-dark:not(.r-theme-system) .r-theme-switcher::before {
1213
+ left: 2px;
1223
1214
  }
1224
- .r-sidebar-drop-btn::-webkit-details-marker {
1225
- display: none;
1215
+
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;
1226
1222
  }
1227
1223
 
1228
- .r-sidebar-drop-icon {
1229
- display: block;
1230
- transition: transform 0.2s;
1224
+ .r-theme-switcher::before,
1225
+ .r-theme-system .r-theme-switcher::before {
1226
+ left: 38px;
1231
1227
  }
1232
1228
 
1233
- .r-sidebar-drop[open] > .r-sidebar-drop-btn > .r-sidebar-drop-icon {
1234
- transform: rotate(90deg);
1229
+ .r-theme-light:not(.r-theme-system) .r-theme-switcher::before {
1230
+ left: 74px;
1231
+ }
1232
+
1233
+ .r-theme-switcher-svg {
1234
+ display: block;
1235
1235
  }.r-keylink {
1236
1236
  display: block;
1237
1237
  position: relative;
@@ -1252,55 +1252,6 @@
1252
1252
  user-select: none;
1253
1253
  pointer-events: none;
1254
1254
  box-sizing: border-box;
1255
- }.r-backdrop {
1256
- position: fixed;
1257
- top: 0;
1258
- right: 0;
1259
- bottom: 0;
1260
- left: 0;
1261
- opacity: 0;
1262
- visibility: hidden;
1263
- pointer-events: none;
1264
- z-index: 100;
1265
- }
1266
-
1267
- .r-backdrop._visible {
1268
- opacity: 1;
1269
- visibility: visible;
1270
- pointer-events: all;
1271
- }.r-git-logo {
1272
- display: block;
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
1255
  }.r-breadcrumbs {
1305
1256
  grid-area: breadcrumbs;
1306
1257
  list-style: none;
@@ -1581,6 +1532,9 @@
1581
1532
  }
1582
1533
  .r-contents-git:hover {
1583
1534
  color: var(--r-main-900);
1535
+ }.r-last-modified {
1536
+ color: var(--r-main-700);
1537
+ margin-block-start: 16px;
1584
1538
  }.r-pagination {
1585
1539
  grid-area: pagination;
1586
1540
  display: grid;
@@ -1653,16 +1607,54 @@
1653
1607
 
1654
1608
  .r-pagination-svg {
1655
1609
  display: block;
1656
- }.r-last-modified {
1657
- color: var(--r-main-700);
1658
- margin-block-start: 16px;
1659
- }.r-kbd-key {
1660
- background-color: var(--r-main-200);
1661
- font-size: 12px;
1662
- border-radius: 4px;
1663
- padding: 5px 8px;
1664
- min-width: 24px;
1665
- text-align: center;
1610
+ }.r-backdrop {
1611
+ position: fixed;
1612
+ top: 0;
1613
+ right: 0;
1614
+ bottom: 0;
1615
+ left: 0;
1616
+ opacity: 0;
1617
+ visibility: hidden;
1618
+ pointer-events: none;
1619
+ z-index: 100;
1620
+ }
1621
+
1622
+ .r-backdrop._visible {
1623
+ opacity: 1;
1624
+ visibility: visible;
1625
+ pointer-events: all;
1626
+ }.r-git-logo {
1627
+ display: block;
1628
+ }.r-external-mark {
1629
+ position: relative;
1630
+ vertical-align: text-top;
1631
+ display: inline-block;
1632
+ margin-left: -4px;
1633
+ margin-right: 2px;
1634
+ width: 6px;
1635
+ height: 6px;
1636
+ box-sizing: border-box;
1637
+ }
1638
+ .r-external-mark::after {
1639
+ content: "";
1640
+ position: absolute;
1641
+ top: 0;
1642
+ right: 0;
1643
+ width: 100%;
1644
+ height: 100%;
1645
+ border-top: 1px solid currentColor;
1646
+ border-right: 1px solid currentColor;
1647
+ box-sizing: border-box;
1648
+ }
1649
+ .r-external-mark::before {
1650
+ content: "";
1651
+ position: absolute;
1652
+ top: 0;
1653
+ right: 0;
1654
+ width: 3px;
1655
+ height: 3px;
1656
+ background-color: currentColor;
1657
+ border-radius: 0 0 0 4px;
1666
1658
  box-sizing: border-box;
1667
1659
  }.r-kbd-container {
1668
1660
  display: flex;
@@ -1672,6 +1664,14 @@
1672
1664
  }
1673
1665
  .r-kbd-container:hover {
1674
1666
  color: var(--r-main-950);
1667
+ }.r-kbd-key {
1668
+ background-color: var(--r-main-200);
1669
+ font-size: 12px;
1670
+ border-radius: 4px;
1671
+ padding: 5px 8px;
1672
+ min-width: 24px;
1673
+ text-align: center;
1674
+ box-sizing: border-box;
1675
1675
  }.r-anchor-heading:hover .r-anchor-heading-link {
1676
1676
  visibility: visible;
1677
1677
  opacity: 1;
@@ -1742,16 +1742,6 @@
1742
1742
 
1743
1743
  .r-code-section-filename {
1744
1744
  font-family: var(--monospace-font, monospace, monospace);
1745
- }.r-block {
1746
- position: relative;
1747
- width: 100%;
1748
- overflow: auto;
1749
- margin-block-start: 12px;
1750
- margin-block-end: 12px;
1751
- scrollbar-width: thin;
1752
- scrollbar-color: var(--r-main-200) transparent;
1753
- box-sizing: border-box;
1754
- z-index: 1;
1755
1745
  }.r-blockquote {
1756
1746
  padding: 4px 12px 4px 20px;
1757
1747
  border: 4px solid var(--r-main-100);
@@ -1809,6 +1799,16 @@
1809
1799
  }
1810
1800
  .r-blockquote-caution .r-blockquote-title {
1811
1801
  color: var(--r-caution);
1802
+ }.r-block {
1803
+ position: relative;
1804
+ width: 100%;
1805
+ overflow: auto;
1806
+ margin-block-start: 12px;
1807
+ margin-block-end: 12px;
1808
+ scrollbar-width: thin;
1809
+ scrollbar-color: var(--r-main-200) transparent;
1810
+ box-sizing: border-box;
1811
+ z-index: 1;
1812
1812
  }.r-h1 {
1813
1813
  font-size: 32px;
1814
1814
  line-height: 1.4;
@@ -1940,34 +1940,6 @@
1940
1940
 
1941
1941
  .r-copy-button-svg {
1942
1942
  display: block;
1943
- }.r-copy-text {
1944
- position: relative;
1945
- cursor: pointer;
1946
- background: none;
1947
- border: 0;
1948
- padding: 0;
1949
- font: inherit;
1950
- padding: 6px 0;
1951
- }
1952
- .r-copy-text:hover {
1953
- color: var(--r-main-950);
1954
- }
1955
- .r-copy-text::before {
1956
- content: "";
1957
- position: absolute;
1958
- bottom: 0;
1959
- left: 0;
1960
- width: 100%;
1961
- height: 1px;
1962
- background: linear-gradient(to right, currentColor 30%, transparent 0%, transparent 80%, currentColor 80%) repeat-x 0px/8px;
1963
- transition: background 0.2s;
1964
- box-sizing: border-box;
1965
- opacity: 0.6;
1966
- }
1967
-
1968
- .r-copy-text:active,
1969
- .r-copy-text._active {
1970
- color: var(--r-success);
1971
1943
  }.r-content-link {
1972
1944
  text-decoration: none;
1973
1945
  color: inherit;
@@ -2017,6 +1989,34 @@
2017
1989
  background-color: currentColor;
2018
1990
  border-radius: 0 0 0 4px;
2019
1991
  box-sizing: border-box;
1992
+ }.r-copy-text {
1993
+ position: relative;
1994
+ cursor: pointer;
1995
+ background: none;
1996
+ border: 0;
1997
+ padding: 0;
1998
+ font: inherit;
1999
+ padding: 6px 0;
2000
+ }
2001
+ .r-copy-text:hover {
2002
+ color: var(--r-main-950);
2003
+ }
2004
+ .r-copy-text::before {
2005
+ content: "";
2006
+ position: absolute;
2007
+ bottom: 0;
2008
+ left: 0;
2009
+ width: 100%;
2010
+ height: 1px;
2011
+ background: linear-gradient(to right, currentColor 30%, transparent 0%, transparent 80%, currentColor 80%) repeat-x 0px/8px;
2012
+ transition: background 0.2s;
2013
+ box-sizing: border-box;
2014
+ opacity: 0.6;
2015
+ }
2016
+
2017
+ .r-copy-text:active,
2018
+ .r-copy-text._active {
2019
+ color: var(--r-success);
2020
2020
  }.r-li {
2021
2021
  line-height: 1.8;
2022
2022
  margin-block-start: 6px;