@mantine-vue/code-highlight 3.5.0 → 3.7.0

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.
package/styles.layer.css CHANGED
@@ -354,5 +354,567 @@
354
354
  padding-bottom: 0;
355
355
  gap: var(--mantine-spacing-xs);
356
356
  }
357
+ ._root_z2quo_1 {
358
+ --jv-radius: var(--mantine-radius-sm);
359
+ --jv-fz: calc(0.8125rem * var(--mantine-scale));
360
+ --jv-indent: calc(1rem * var(--mantine-scale));
361
+
362
+ position: relative;
363
+ direction: ltr;
364
+ font-family: var(--mantine-font-family-monospace);
365
+ font-size: var(--jv-fz);
366
+ line-height: 1.55;
367
+ border-radius: var(--jv-radius);
368
+ }
369
+
370
+ :where([data-mantine-color-scheme='light']) ._root_z2quo_1 {
371
+ background-color: var(--mantine-color-gray-0);
372
+ }
373
+
374
+ :where([data-mantine-color-scheme='dark']) ._root_z2quo_1 {
375
+ background-color: var(--mantine-color-dark-8);
376
+ }
377
+
378
+ ._root_z2quo_1[data-with-border] {
379
+ border: calc(0.0625rem * var(--mantine-scale)) solid;
380
+ }
381
+
382
+ :where([data-mantine-color-scheme='light']) ._root_z2quo_1[data-with-border] {
383
+ border-color: var(--mantine-color-gray-3);
384
+ }
385
+
386
+ :where([data-mantine-color-scheme='dark']) ._root_z2quo_1[data-with-border] {
387
+ border-color: var(--mantine-color-dark-4);
388
+ }
389
+
390
+ ._controls_z2quo_34 {
391
+ display: flex;
392
+ flex-wrap: wrap;
393
+ gap: var(--mantine-spacing-xs);
394
+ padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
395
+ border-bottom: calc(0.0625rem * var(--mantine-scale)) solid;
396
+ }
397
+
398
+ ._copyAllButton_z2quo_41 ~ ._controls_z2quo_34 {
399
+ padding-right: calc(44px + var(--mantine-spacing-xs));
400
+ }
401
+
402
+ :where([data-mantine-color-scheme='light']) ._controls_z2quo_34 {
403
+ border-color: var(--mantine-color-gray-3);
404
+ }
405
+
406
+ :where([data-mantine-color-scheme='dark']) ._controls_z2quo_34 {
407
+ border-color: var(--mantine-color-dark-4);
408
+ }
409
+
410
+ ._control_z2quo_34 {
411
+ font-size: var(--mantine-font-size-xs);
412
+ white-space: nowrap;
413
+ padding: calc(0.125rem * var(--mantine-scale)) calc(0.5rem * var(--mantine-scale));
414
+ border-radius: var(--mantine-radius-sm);
415
+ }
416
+
417
+ :where([data-mantine-color-scheme='light']) ._control_z2quo_34 {
418
+ background-color: var(--mantine-color-gray-1);
419
+ color: var(--mantine-color-gray-7);
420
+ }
421
+
422
+ :where([data-mantine-color-scheme='dark']) ._control_z2quo_34 {
423
+ background-color: var(--mantine-color-dark-6);
424
+ color: var(--mantine-color-dark-1);
425
+ }
426
+
427
+ @media (hover: hover) {
428
+ :where([data-mantine-color-scheme='light']) ._control_z2quo_34:hover {
429
+ background-color: var(--mantine-color-gray-2);
430
+ }
431
+
432
+ :where([data-mantine-color-scheme='dark']) ._control_z2quo_34:hover {
433
+ background-color: var(--mantine-color-dark-5);
434
+ }
435
+ }
436
+
437
+ @media (hover: none) {
438
+ :where([data-mantine-color-scheme='light']) ._control_z2quo_34:active {
439
+ background-color: var(--mantine-color-gray-2);
440
+ }
441
+
442
+ :where([data-mantine-color-scheme='dark']) ._control_z2quo_34:active {
443
+ background-color: var(--mantine-color-dark-5);
444
+ }
445
+ }
446
+
447
+ ._scrollarea_z2quo_81 {
448
+ max-width: 100%;
449
+ }
450
+
451
+ ._content_z2quo_85 {
452
+ padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
453
+ overflow: hidden;
454
+ }
455
+
456
+ ._wrapper_z2quo_89 > ._content_z2quo_85 {
457
+ flex: 1;
458
+ min-width: min-content;
459
+ }
460
+
461
+ ._lineNumbers_z2quo_95 {
462
+ display: flex;
463
+ flex-direction: column;
464
+ user-select: none;
465
+ text-align: right;
466
+ padding: var(--mantine-spacing-xs) var(--mantine-spacing-xs);
467
+ padding-left: var(--mantine-spacing-sm);
468
+ margin-right: var(--mantine-spacing-xs);
469
+ border-right: calc(0.0625rem * var(--mantine-scale)) solid;
470
+ box-sizing: content-box;
471
+ min-width: 2ch;
472
+ }
473
+
474
+ :where([data-mantine-color-scheme='light']) ._lineNumbers_z2quo_95 {
475
+ color: var(--mantine-color-gray-7);
476
+ border-color: var(--mantine-color-gray-3);
477
+ }
478
+
479
+ :where([data-mantine-color-scheme='dark']) ._lineNumbers_z2quo_95 {
480
+ color: var(--mantine-color-dark-2);
481
+ border-color: var(--mantine-color-dark-4);
482
+ }
483
+
484
+ ._lineNumbers_z2quo_95 > div {
485
+ padding: calc(0.0625rem * var(--mantine-scale)) 0;
486
+ line-height: 1.55;
487
+ display: flex;
488
+ align-items: flex-start;
489
+ justify-content: flex-end;
490
+ box-sizing: border-box;
491
+ }
492
+
493
+ ._wrapper_z2quo_89 {
494
+ display: flex;
495
+ align-items: stretch;
496
+ }
497
+
498
+ ._node_z2quo_132 {
499
+ position: relative;
500
+ }
501
+
502
+ ._node_z2quo_132[data-highlight] > ._row_z2quo_135 {
503
+ position: relative;
504
+ }
505
+
506
+ ._node_z2quo_132[data-highlight] > ._row_z2quo_135 > * {
507
+ z-index: 1;
508
+ }
509
+
510
+ ._node_z2quo_132[data-highlight] > ._row_z2quo_135 > :not(._toggle_z2quo_142) {
511
+ position: relative;
512
+ }
513
+
514
+ ._node_z2quo_132[data-highlight] > ._row_z2quo_135::before {
515
+ content: '';
516
+ position: absolute;
517
+ top: 0;
518
+ bottom: 0;
519
+ left: calc(-62.5rem * var(--mantine-scale));
520
+ right: calc(-62.5rem * var(--mantine-scale));
521
+ z-index: 0;
522
+ pointer-events: none;
523
+ }
524
+
525
+ :where([data-mantine-color-scheme='light']) ._node_z2quo_132[data-highlight='added'] > ._row_z2quo_135::before {
526
+ background-color: var(--mantine-color-green-1);
527
+ }
528
+
529
+ :where([data-mantine-color-scheme='dark']) ._node_z2quo_132[data-highlight='added'] > ._row_z2quo_135::before {
530
+ background-color: rgba(64, 192, 87, 0.15);
531
+ }
532
+
533
+ :where([data-mantine-color-scheme='light']) ._node_z2quo_132[data-highlight='removed'] > ._row_z2quo_135::before {
534
+ background-color: var(--mantine-color-red-1);
535
+ }
536
+
537
+ :where([data-mantine-color-scheme='dark']) ._node_z2quo_132[data-highlight='removed'] > ._row_z2quo_135::before {
538
+ background-color: rgba(250, 82, 82, 0.15);
539
+ }
540
+
541
+ ._row_z2quo_135 {
542
+ display: flex;
543
+ align-items: flex-start;
544
+ gap: calc(0.375rem * var(--mantine-scale));
545
+ min-height: calc(1.5rem * var(--mantine-scale));
546
+ padding: calc(0.0625rem * var(--mantine-scale)) calc(0.25rem * var(--mantine-scale));
547
+ border-radius: var(--mantine-radius-sm);
548
+ width: 100%;
549
+ text-align: left;
550
+ font-family: inherit;
551
+ font-size: inherit;
552
+ line-height: inherit;
553
+ }
554
+
555
+ ._row_z2quo_135:focus-visible {
556
+ outline: 2px solid var(--mantine-primary-color-filled);
557
+ outline-offset: calc(-0.125rem * var(--mantine-scale));
558
+ }
559
+
560
+ ._row_z2quo_135 ._copyButton_z2quo_197 {
561
+ opacity: 0;
562
+ transition: opacity 100ms ease;
563
+ }
564
+
565
+ ._row_z2quo_135:focus-within ._copyButton_z2quo_197 {
566
+ opacity: 1;
567
+ }
568
+
569
+ @media (hover: hover) {
570
+ ._row_z2quo_135[data-hoverable]:hover ._copyButton_z2quo_197 {
571
+ opacity: 1;
572
+ }
573
+ }
574
+
575
+ @media (hover: none) {
576
+ ._row_z2quo_135[data-hoverable]:active ._copyButton_z2quo_197 {
577
+ opacity: 1;
578
+ }
579
+ }
580
+
581
+ ._row_z2quo_135[data-hoverable]:not([data-root]) {
582
+ cursor: default;
583
+ }
584
+
585
+ @media (hover: hover) {
586
+ :where([data-mantine-color-scheme='light']) ._row_z2quo_135[data-hoverable]:not([data-root]):hover {
587
+ background-color: var(--mantine-color-gray-1);
588
+ }
589
+
590
+ :where([data-mantine-color-scheme='dark']) ._row_z2quo_135[data-hoverable]:not([data-root]):hover {
591
+ background-color: var(--mantine-color-dark-6);
592
+ }
593
+ }
594
+
595
+ @media (hover: none) {
596
+ :where([data-mantine-color-scheme='light']) ._row_z2quo_135[data-hoverable]:not([data-root]):active {
597
+ background-color: var(--mantine-color-gray-1);
598
+ }
599
+
600
+ :where([data-mantine-color-scheme='dark']) ._row_z2quo_135[data-hoverable]:not([data-root]):active {
601
+ background-color: var(--mantine-color-dark-6);
602
+ }
603
+ }
604
+
605
+ ._toggle_z2quo_142 {
606
+ position: absolute;
607
+ left: calc(var(--mantine-spacing-sm) * -1 - 4px);
608
+ display: inline-flex;
609
+ align-items: center;
610
+ justify-content: center;
611
+ width: calc(1rem * var(--mantine-scale));
612
+ height: calc(1.5rem * var(--mantine-scale));
613
+ flex-shrink: 0;
614
+ cursor: pointer;
615
+ }
616
+
617
+ :where([data-mantine-color-scheme='light']) ._toggle_z2quo_142 {
618
+ color: var(--mantine-color-gray-6);
619
+ }
620
+
621
+ :where([data-mantine-color-scheme='dark']) ._toggle_z2quo_142 {
622
+ color: var(--mantine-color-dark-3);
623
+ }
624
+
625
+ ._toggle_z2quo_142[data-expanded] {
626
+ transform: rotate(90deg);
627
+ }
628
+
629
+ :where([data-mantine-color-scheme='light']) ._key_z2quo_253 {
630
+ color: var(--mantine-color-violet-7);
631
+ }
632
+
633
+ :where([data-mantine-color-scheme='dark']) ._key_z2quo_253 {
634
+ color: var(--mantine-color-violet-4);
635
+ }
636
+
637
+ ._key_z2quo_253 {
638
+
639
+ white-space: nowrap;
640
+ line-height: 1.55;
641
+ }
642
+
643
+ ._value_z2quo_266 {
644
+ white-space: pre;
645
+ line-height: 1.55;
646
+ }
647
+
648
+ ._value_z2quo_266[data-wrap] {
649
+ min-width: 20ch;
650
+ white-space: pre-wrap;
651
+ overflow-wrap: anywhere;
652
+ }
653
+
654
+ :where([data-mantine-color-scheme='light']) ._value_z2quo_266[data-value-type='string'] {
655
+ color: var(--mantine-color-teal-8);
656
+ }
657
+
658
+ :where([data-mantine-color-scheme='dark']) ._value_z2quo_266[data-value-type='string'] {
659
+ color: var(--mantine-color-teal-4);
660
+ }
661
+
662
+ :where([data-mantine-color-scheme='light']) ._value_z2quo_266[data-value-type='number'] {
663
+ color: var(--mantine-color-blue-7);
664
+ }
665
+
666
+ :where([data-mantine-color-scheme='dark']) ._value_z2quo_266[data-value-type='number'] {
667
+ color: var(--mantine-color-blue-4);
668
+ }
669
+
670
+ :where([data-mantine-color-scheme='light']) ._value_z2quo_266[data-value-type='boolean'] {
671
+ color: var(--mantine-color-orange-7);
672
+ }
673
+
674
+ :where([data-mantine-color-scheme='dark']) ._value_z2quo_266[data-value-type='boolean'] {
675
+ color: var(--mantine-color-orange-4);
676
+ }
677
+
678
+ :where([data-mantine-color-scheme='light']) ._value_z2quo_266[data-value-type='null'], :where([data-mantine-color-scheme='light']) ._value_z2quo_266[data-value-type='undefined'] {
679
+ color: var(--mantine-color-red-7);
680
+ }
681
+
682
+ :where([data-mantine-color-scheme='dark']) ._value_z2quo_266[data-value-type='null'], :where([data-mantine-color-scheme='dark']) ._value_z2quo_266[data-value-type='undefined'] {
683
+ color: var(--mantine-color-red-4);
684
+ }
685
+
686
+ :where([data-mantine-color-scheme='light']) ._value_z2quo_266[data-value-type='bigint'] {
687
+ color: var(--mantine-color-blue-7);
688
+ }
689
+
690
+ :where([data-mantine-color-scheme='dark']) ._value_z2quo_266[data-value-type='bigint'] {
691
+ color: var(--mantine-color-blue-4);
692
+ }
693
+
694
+ ._value_z2quo_266[data-value-type='circular'] {
695
+ font-style: italic;
696
+ }
697
+
698
+ :where([data-mantine-color-scheme='light']) ._value_z2quo_266[data-value-type='circular'] {
699
+ color: var(--mantine-color-gray-7);
700
+ }
701
+
702
+ :where([data-mantine-color-scheme='dark']) ._value_z2quo_266[data-value-type='circular'] {
703
+ color: var(--mantine-color-dark-2);
704
+ }
705
+
706
+ :where([data-mantine-color-scheme='light']) ._bracket_z2quo_340 {
707
+ color: var(--mantine-color-gray-7);
708
+ }
709
+
710
+ :where([data-mantine-color-scheme='dark']) ._bracket_z2quo_340 {
711
+ color: var(--mantine-color-dark-2);
712
+ }
713
+
714
+ ._type_z2quo_350 {
715
+ font-size: calc(var(--jv-fz) * 0.85);
716
+ padding: 0 calc(0.25rem * var(--mantine-scale));
717
+ border-radius: var(--mantine-radius-xs);
718
+ white-space: nowrap;
719
+ flex-shrink: 0;
720
+ align-self: center;
721
+ }
722
+
723
+ :where([data-mantine-color-scheme='light']) ._type_z2quo_350[data-value-type='string'] {
724
+ background-color: var(--mantine-color-teal-0);
725
+ color: var(--mantine-color-teal-8);
726
+ }
727
+
728
+ :where([data-mantine-color-scheme='dark']) ._type_z2quo_350[data-value-type='string'] {
729
+ background-color: rgba(18, 184, 134, 0.15);
730
+ color: var(--mantine-color-teal-4);
731
+ }
732
+
733
+ :where([data-mantine-color-scheme='light']) ._type_z2quo_350[data-value-type='number'], :where([data-mantine-color-scheme='light']) ._type_z2quo_350[data-value-type='bigint'] {
734
+ background-color: var(--mantine-color-blue-0);
735
+ color: var(--mantine-color-blue-7);
736
+ }
737
+
738
+ :where([data-mantine-color-scheme='dark']) ._type_z2quo_350[data-value-type='number'], :where([data-mantine-color-scheme='dark']) ._type_z2quo_350[data-value-type='bigint'] {
739
+ background-color: rgba(34, 139, 230, 0.15);
740
+ color: var(--mantine-color-blue-4);
741
+ }
742
+
743
+ :where([data-mantine-color-scheme='light']) ._type_z2quo_350[data-value-type='boolean'] {
744
+ background-color: var(--mantine-color-orange-0);
745
+ color: var(--mantine-color-orange-7);
746
+ }
747
+
748
+ :where([data-mantine-color-scheme='dark']) ._type_z2quo_350[data-value-type='boolean'] {
749
+ background-color: rgba(253, 126, 20, 0.15);
750
+ color: var(--mantine-color-orange-4);
751
+ }
752
+
753
+ :where([data-mantine-color-scheme='light']) ._type_z2quo_350[data-value-type='null'], :where([data-mantine-color-scheme='light']) ._type_z2quo_350[data-value-type='undefined'] {
754
+ background-color: var(--mantine-color-red-0);
755
+ color: var(--mantine-color-red-7);
756
+ }
757
+
758
+ :where([data-mantine-color-scheme='dark']) ._type_z2quo_350[data-value-type='null'], :where([data-mantine-color-scheme='dark']) ._type_z2quo_350[data-value-type='undefined'] {
759
+ background-color: rgba(250, 82, 82, 0.15);
760
+ color: var(--mantine-color-red-4);
761
+ }
762
+
763
+ :where([data-mantine-color-scheme='light']) ._type_z2quo_350[data-value-type='circular'] {
764
+ background-color: var(--mantine-color-gray-1);
765
+ color: var(--mantine-color-gray-7);
766
+ }
767
+
768
+ :where([data-mantine-color-scheme='dark']) ._type_z2quo_350[data-value-type='circular'] {
769
+ background-color: var(--mantine-color-dark-6);
770
+ color: var(--mantine-color-dark-2);
771
+ }
772
+
773
+ :where([data-mantine-color-scheme='light']) ._type_z2quo_350[data-value-type='array'] {
774
+ background-color: var(--mantine-color-cyan-0);
775
+ color: var(--mantine-color-cyan-8);
776
+ }
777
+
778
+ :where([data-mantine-color-scheme='dark']) ._type_z2quo_350[data-value-type='array'] {
779
+ background-color: rgba(21, 170, 191, 0.15);
780
+ color: var(--mantine-color-cyan-4);
781
+ }
782
+
783
+ :where([data-mantine-color-scheme='light']) ._type_z2quo_350[data-value-type='object'] {
784
+ background-color: var(--mantine-color-grape-0);
785
+ color: var(--mantine-color-grape-8);
786
+ }
787
+
788
+ :where([data-mantine-color-scheme='dark']) ._type_z2quo_350[data-value-type='object'] {
789
+ background-color: rgba(190, 75, 219, 0.15);
790
+ color: var(--mantine-color-grape-4);
791
+ }
792
+
793
+ ._size_z2quo_445 {
794
+ font-size: calc(var(--jv-fz) * 0.85);
795
+ white-space: nowrap;
796
+ flex-shrink: 0;
797
+ align-self: center;
798
+ }
799
+
800
+ :where([data-mantine-color-scheme='light']) ._size_z2quo_445 {
801
+ color: var(--mantine-color-gray-7);
802
+ }
803
+
804
+ :where([data-mantine-color-scheme='dark']) ._size_z2quo_445 {
805
+ color: var(--mantine-color-dark-3);
806
+ }
807
+
808
+ :where([data-mantine-color-scheme='light']) ._ellipsis_z2quo_460 {
809
+ color: var(--mantine-color-gray-7);
810
+ }
811
+
812
+ :where([data-mantine-color-scheme='dark']) ._ellipsis_z2quo_460 {
813
+ color: var(--mantine-color-dark-3);
814
+ }
815
+
816
+ ._ellipsis_z2quo_460[data-clickable] {
817
+ font-size: calc(var(--jv-fz) * 0.85);
818
+ cursor: pointer;
819
+ text-decoration: underline;
820
+ text-decoration-style: dotted;
821
+ white-space: nowrap;
822
+ flex-shrink: 0;
823
+ }
824
+
825
+ @media (hover: hover) {
826
+
827
+ ._ellipsis_z2quo_460[data-clickable]:hover {
828
+ text-decoration-style: solid;
829
+ }
830
+ }
831
+
832
+ @media (hover: none) {
833
+
834
+ ._ellipsis_z2quo_460[data-clickable]:active {
835
+ text-decoration-style: solid;
836
+ }
837
+ }
838
+
839
+ ._copyButton_z2quo_197 {
840
+ display: inline-flex;
841
+ align-items: center;
842
+ justify-content: center;
843
+ width: calc(1.25rem * var(--mantine-scale));
844
+ height: calc(1.25rem * var(--mantine-scale));
845
+ flex-shrink: 0;
846
+ cursor: pointer;
847
+ border-radius: var(--mantine-radius-xs);
848
+ }
849
+
850
+ :where([data-mantine-color-scheme='light']) ._copyButton_z2quo_197 {
851
+ color: var(--mantine-color-gray-6);
852
+ }
853
+
854
+ :where([data-mantine-color-scheme='dark']) ._copyButton_z2quo_197 {
855
+ color: var(--mantine-color-dark-3);
856
+ }
857
+
858
+ @media (hover: hover) {
859
+ :where([data-mantine-color-scheme='light']) ._copyButton_z2quo_197:hover {
860
+ color: var(--mantine-color-gray-7);
861
+ background-color: var(--mantine-color-gray-2);
862
+ }
863
+
864
+ :where([data-mantine-color-scheme='dark']) ._copyButton_z2quo_197:hover {
865
+ color: var(--mantine-color-dark-1);
866
+ background-color: var(--mantine-color-dark-5);
867
+ }
868
+ }
869
+
870
+ @media (hover: none) {
871
+ :where([data-mantine-color-scheme='light']) ._copyButton_z2quo_197:active {
872
+ color: var(--mantine-color-gray-7);
873
+ background-color: var(--mantine-color-gray-2);
874
+ }
875
+
876
+ :where([data-mantine-color-scheme='dark']) ._copyButton_z2quo_197:active {
877
+ color: var(--mantine-color-dark-1);
878
+ background-color: var(--mantine-color-dark-5);
879
+ }
880
+ }
881
+
882
+ ._copyAllButton_z2quo_41 {
883
+ position: absolute;
884
+ top: calc(0.5rem * var(--mantine-scale));
885
+ right: calc(0.5rem * var(--mantine-scale));
886
+ z-index: 1;
887
+ display: flex;
888
+ align-items: center;
889
+ justify-content: center;
890
+ width: calc(1.75rem * var(--mantine-scale));
891
+ height: calc(1.75rem * var(--mantine-scale));
892
+ border-radius: var(--mantine-radius-sm);
893
+ opacity: 0.5;
894
+ }
895
+
896
+ :where([data-mantine-color-scheme='light']) ._copyAllButton_z2quo_41 {
897
+ color: var(--mantine-color-gray-7);
898
+ background-color: var(--mantine-color-gray-0);
899
+ }
900
+
901
+ :where([data-mantine-color-scheme='dark']) ._copyAllButton_z2quo_41 {
902
+ color: var(--mantine-color-dark-1);
903
+ background-color: var(--mantine-color-dark-8);
904
+ }
905
+
906
+ @media (hover: hover) {
907
+
908
+ ._copyAllButton_z2quo_41:hover {
909
+ opacity: 1;
910
+ }
911
+ }
912
+
913
+ @media (hover: none) {
914
+
915
+ ._copyAllButton_z2quo_41:active {
916
+ opacity: 1;
917
+ }
918
+ }
357
919
  /*$vite$:1*/
358
920
  }