react-autoql 3.5.1 → 3.5.4

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.
@@ -1,3 +1,75 @@
1
+ .chat-voice-record-button {
2
+ width: 40px;
3
+ height: 40px;
4
+ border-radius: 24px;
5
+ margin: 10px;
6
+ margin-left: 0;
7
+ font-size: 18px;
8
+ line-height: 24px;
9
+ outline: none !important;
10
+ position: relative;
11
+ cursor: pointer;
12
+ overflow: hidden;
13
+ background: var(--react-autoql-accent-color);
14
+ color: white;
15
+ border: none;
16
+ flex-shrink: 0;
17
+ flex-grow: 0; }
18
+
19
+ .chat-voice-record-button:hover {
20
+ box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); }
21
+
22
+ .chat-voice-record-button.listening {
23
+ background: #ff471a; }
24
+
25
+ .chat-voice-record-icon {
26
+ vertical-align: top; }
27
+
28
+ .react-autoql-tooltip {
29
+ font-family: inherit;
30
+ letter-spacing: 0.04em;
31
+ padding: 7px 15px;
32
+ opacity: 1 !important;
33
+ z-index: 99999 !important; }
34
+
35
+ @-webkit-keyframes slide {
36
+ 0% {
37
+ transform: translateX(-100%); }
38
+ 100% {
39
+ transform: translateX(100%); } }
40
+
41
+ @keyframes slide {
42
+ 0% {
43
+ transform: translateX(-100%); }
44
+ 100% {
45
+ transform: translateX(100%); } }
46
+
47
+ @-webkit-keyframes move {
48
+ 0% {
49
+ left: 0;
50
+ opacity: 0; }
51
+ 5% {
52
+ opacity: 0; }
53
+ 48% {
54
+ opacity: 0.2; }
55
+ 80% {
56
+ opacity: 0; }
57
+ 100% {
58
+ left: 82%; } }
59
+
60
+ @keyframes move {
61
+ 0% {
62
+ left: 0;
63
+ opacity: 0; }
64
+ 5% {
65
+ opacity: 0; }
66
+ 48% {
67
+ opacity: 0.2; }
68
+ 80% {
69
+ opacity: 0; }
70
+ 100% {
71
+ left: 82%; } }
72
+
1
73
  @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
2
74
  .react-autoql-response-content-container:not(.html-content) {
3
75
  position: relative;
@@ -269,7 +341,7 @@
269
341
  text-decoration: none;
270
342
  white-space: nowrap;
271
343
  cursor: pointer;
272
- color: var(--react-autoql-accent-color); }
344
+ color: var(--react-autoql-accent-color) !important; }
273
345
  .react-autoql-condition-link:hover {
274
346
  opacity: 0.9; }
275
347
 
@@ -277,7 +349,7 @@
277
349
  text-decoration: none;
278
350
  white-space: nowrap;
279
351
  cursor: pointer;
280
- color: var(--react-autoql-accent-color); }
352
+ color: var(--react-autoql-accent-color) !important; }
281
353
  .react-autoql-condition-link-filtered .react-autoql-custom-icon {
282
354
  font-size: 14px;
283
355
  vertical-align: middle;
@@ -297,6 +369,50 @@
297
369
  min-height: 26px;
298
370
  min-width: 300px; }
299
371
 
372
+ .loading-container-centered {
373
+ height: 100%;
374
+ width: 100%;
375
+ display: flex;
376
+ flex-direction: column;
377
+ justify-content: center;
378
+ align-items: center; }
379
+
380
+ .response-loading {
381
+ display: inline-block;
382
+ position: relative;
383
+ width: 64px;
384
+ height: 64px; }
385
+
386
+ .response-loading div {
387
+ position: absolute;
388
+ top: 27px;
389
+ width: 11px;
390
+ height: 11px;
391
+ border-radius: 50%;
392
+ background: #e2e2e2;
393
+ -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
394
+ animation-timing-function: cubic-bezier(0, 1, 1, 0); }
395
+
396
+ .response-loading div:nth-child(1) {
397
+ left: 6px;
398
+ -webkit-animation: response-loading1 0.6s infinite;
399
+ animation: response-loading1 0.6s infinite; }
400
+
401
+ .response-loading div:nth-child(2) {
402
+ left: 6px;
403
+ -webkit-animation: response-loading2 0.6s infinite;
404
+ animation: response-loading2 0.6s infinite; }
405
+
406
+ .response-loading div:nth-child(3) {
407
+ left: 26px;
408
+ -webkit-animation: response-loading2 0.6s infinite;
409
+ animation: response-loading2 0.6s infinite; }
410
+
411
+ .response-loading div:nth-child(4) {
412
+ left: 45px;
413
+ -webkit-animation: response-loading3 0.6s infinite;
414
+ animation: response-loading3 0.6s infinite; }
415
+
300
416
  .react-autoql-bar-container {
301
417
  position: relative;
302
418
  display: flex;
@@ -443,77 +559,66 @@
443
559
  left: 30px;
444
560
  top: 15px; }
445
561
 
446
- .chat-voice-record-button {
447
- width: 40px;
448
- height: 40px;
449
- border-radius: 24px;
450
- margin: 10px;
451
- margin-left: 0;
452
- font-size: 18px;
453
- line-height: 24px;
454
- outline: none !important;
455
- position: relative;
456
- cursor: pointer;
457
- overflow: hidden;
458
- background: var(--react-autoql-accent-color);
459
- color: white;
460
- border: none;
461
- flex-shrink: 0;
462
- flex-grow: 0; }
562
+ .react-autoql-dashboard-container {
563
+ background: var(--react-autoql-background-color-secondary);
564
+ height: 100%;
565
+ width: 100%;
566
+ overflow: hidden; }
463
567
 
464
- .chat-voice-record-button:hover {
465
- box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); }
568
+ .react-autoql-dashboard-container.edit-mode {
569
+ padding-bottom: 200px; }
466
570
 
467
- .chat-voice-record-button.listening {
468
- background: #ff471a; }
571
+ .dashboard-drilldown-modal .ReactModal__Content {
572
+ top: unset !important;
573
+ margin-top: 20px !important;
574
+ max-height: 93vh !important; }
469
575
 
470
- .chat-voice-record-icon {
471
- vertical-align: top; }
576
+ .dashboard-drilldown-modal .react-autoql-modal-body {
577
+ padding: 0; }
472
578
 
473
- .react-autoql-tooltip {
474
- font-family: inherit;
475
- letter-spacing: 0.04em;
476
- padding: 7px 15px;
477
- opacity: 1 !important;
478
- z-index: 99999 !important; }
579
+ .dashboard-drilldown-modal .react-autoql-table {
580
+ opacity: 0.9;
581
+ font-size: 11px; }
479
582
 
480
- @-webkit-keyframes slide {
481
- 0% {
482
- transform: translateX(-100%); }
483
- 100% {
484
- transform: translateX(100%); } }
583
+ .dashboard-drilldown-modal .splitter-layout {
584
+ height: calc(100% - 55px); }
485
585
 
486
- @keyframes slide {
487
- 0% {
488
- transform: translateX(-100%); }
489
- 100% {
490
- transform: translateX(100%); } }
586
+ .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
587
+ padding: 20px;
588
+ padding-bottom: 10px; }
491
589
 
492
- @-webkit-keyframes move {
493
- 0% {
494
- left: 0;
495
- opacity: 0; }
496
- 5% {
497
- opacity: 0; }
498
- 48% {
499
- opacity: 0.2; }
500
- 80% {
501
- opacity: 0; }
502
- 100% {
503
- left: 82%; } }
590
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn {
591
+ text-align: right;
592
+ width: 100%;
593
+ padding-right: 20px; }
594
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn.bottom {
595
+ position: absolute;
596
+ bottom: 5px;
597
+ width: 100px;
598
+ right: 0; }
599
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn.top {
600
+ padding-top: 10px;
601
+ margin-bottom: -8px; }
504
602
 
505
- @keyframes move {
506
- 0% {
507
- left: 0;
508
- opacity: 0; }
509
- 5% {
510
- opacity: 0; }
511
- 48% {
512
- opacity: 0.2; }
513
- 80% {
514
- opacity: 0; }
515
- 100% {
516
- left: 82%; } }
603
+ .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
604
+ padding: 20px;
605
+ padding-top: 10px;
606
+ overflow: hidden;
607
+ height: 100%; }
608
+
609
+ .empty-dashboard-message-container {
610
+ font-family: var(--react-autoql-font-family);
611
+ color: var(--react-autoql-text-color-primary);
612
+ letter-spacing: 0.02em;
613
+ text-align: center;
614
+ padding: 100px;
615
+ height: 100%;
616
+ width: 100%; }
617
+
618
+ .empty-dashboard-new-tile-btn {
619
+ color: var(--react-autoql-accent-color);
620
+ font-weight: bold;
621
+ cursor: pointer; }
517
622
 
518
623
  .react-autoql-icon {
519
624
  position: relative;
@@ -561,177 +666,476 @@ span.react-autoql-icon {
561
666
  border-radius: 50%;
562
667
  box-sizing: content-box; }
563
668
 
564
- .loading-container-centered {
565
- height: 100%;
566
- width: 100%;
567
- display: flex;
568
- flex-direction: column;
569
- justify-content: center;
570
- align-items: center; }
669
+ .react-autoql-condition-lock-menu {
670
+ min-width: 400px !important; }
571
671
 
572
- .response-loading {
672
+ .react-autoql-filter-locking-title-container {
573
673
  display: inline-block;
574
- position: relative;
575
- width: 64px;
576
- height: 64px; }
577
-
578
- .response-loading div {
579
- position: absolute;
580
- top: 27px;
581
- width: 11px;
582
- height: 11px;
583
- border-radius: 50%;
584
- background: #e2e2e2;
585
- -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
586
- animation-timing-function: cubic-bezier(0, 1, 1, 0); }
674
+ width: 100%;
675
+ padding-top: 4px;
676
+ padding-left: 6px; }
677
+ .react-autoql-filter-locking-title-container h3 {
678
+ width: 95%;
679
+ float: left;
680
+ color: var(--react-autoql-text-color-primary);
681
+ margin-bottom: 0;
682
+ margin-top: 0;
683
+ display: block;
684
+ font-size: 1.17em !important;
685
+ font-weight: bold; }
686
+ .react-autoql-filter-locking-title-container h3 span {
687
+ color: var(--react-autoql-accent-color); }
688
+ .react-autoql-filter-locking-title-container button {
689
+ width: 5%;
690
+ float: right; }
691
+ .react-autoql-filter-locking-title-container button :hover {
692
+ cursor: pointer;
693
+ color: var(--react-autoql-hover-color); }
587
694
 
588
- .response-loading div:nth-child(1) {
589
- left: 6px;
590
- -webkit-animation: response-loading1 0.6s infinite;
591
- animation: response-loading1 0.6s infinite; }
695
+ #react-autoql-filter-description-id {
696
+ visibility: hidden;
697
+ color: var(--react-autoql-text-color-primary);
698
+ background-color: var(--react-autoql-background-color-secondary);
699
+ border-radius: 5px;
700
+ padding: 2px 6px 2px 6px;
701
+ margin: 4px 10px 4px 10px;
702
+ display: inline-block;
703
+ position: absolute;
704
+ top: 20px;
705
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4);
706
+ z-index: 999999; }
707
+ #react-autoql-filter-description-id span {
708
+ color: var(--react-autoql-accent-color); }
709
+ #react-autoql-filter-description-id p {
710
+ width: 96%;
711
+ float: right;
712
+ margin-bottom: 0; }
592
713
 
593
- .response-loading div:nth-child(2) {
594
- left: 6px;
595
- -webkit-animation: response-loading2 0.6s infinite;
596
- animation: response-loading2 0.6s infinite; }
714
+ #react-autoql-filter-description-id.show {
715
+ visibility: visible;
716
+ -webkit-animation: fadeIn 1s;
717
+ animation: fadeIn 1s; }
597
718
 
598
- .response-loading div:nth-child(3) {
599
- left: 26px;
600
- -webkit-animation: response-loading2 0.6s infinite;
601
- animation: response-loading2 0.6s infinite; }
719
+ .react-autoql-condition-locking-input {
720
+ padding: 5px;
721
+ padding-left: 20px;
722
+ margin: 8px;
723
+ height: 32px;
724
+ box-sizing: border-box;
725
+ border-radius: 24px;
726
+ font-size: 12px;
727
+ font-family: inherit;
728
+ letter-spacing: 0.04em;
729
+ outline: none !important;
730
+ width: calc(100% - 20px);
731
+ font-family: inherit;
732
+ /* Default styles outside of data messenger */
733
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
734
+ background: var(--react-autoql-background-color-primary);
735
+ color: var(--react-autoql-text-color-primary); }
736
+ .react-autoql-condition-locking-input::-moz-placeholder {
737
+ color: rgba(var(--react-autoql-text-color-placeholder), 2) !important; }
738
+ .react-autoql-condition-locking-input:-ms-input-placeholder {
739
+ color: rgba(var(--react-autoql-text-color-placeholder), 2) !important; }
740
+ .react-autoql-condition-locking-input::placeholder {
741
+ color: rgba(var(--react-autoql-text-color-placeholder), 2) !important; }
602
742
 
603
- .response-loading div:nth-child(4) {
604
- left: 45px;
605
- -webkit-animation: response-loading3 0.6s infinite;
606
- animation: response-loading3 0.6s infinite; }
743
+ .react-autoql-condition-locking-input:hover {
744
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
607
745
 
608
- .react-autoql-dashboard-container {
609
- background: var(--react-autoql-background-color-secondary);
610
- height: 100%;
746
+ .react-autoql-condition-table {
747
+ min-width: 95%;
748
+ margin: 10px auto;
749
+ table-layout: fixed; }
750
+
751
+ .react-autoql-condition-table thead {
752
+ padding-left: 10px;
753
+ display: table-header-group;
611
754
  width: 100%;
612
- overflow: hidden; }
755
+ flex: 1 1 auto; }
613
756
 
614
- .react-autoql-dashboard-container.edit-mode {
615
- padding-bottom: 200px; }
757
+ .react-autoql-condition-table .react-autoql-condition-table-list-item {
758
+ text-overflow: ellipsis;
759
+ white-space: nowrap;
760
+ overflow: hidden;
761
+ width: 60%; }
616
762
 
617
- .dashboard-drilldown-modal .ReactModal__Content {
618
- top: unset !important;
619
- margin-top: 20px !important;
620
- max-height: 93vh !important; }
763
+ .react-autoql-condition-lock-menu-footer {
764
+ bottom: 0;
765
+ right: 0; }
766
+ .react-autoql-condition-lock-menu-footer button {
767
+ float: right;
768
+ margin: 6px !important; }
621
769
 
622
- .dashboard-drilldown-modal .react-autoql-modal-body {
623
- padding: 0; }
770
+ .react-autoql-condition-lock-menu-footer {
771
+ bottom: 0;
772
+ right: 0; }
773
+ .react-autoql-condition-lock-menu-footer button {
774
+ float: right;
775
+ margin: 6px !important; }
624
776
 
625
- .dashboard-drilldown-modal .react-autoql-table {
626
- opacity: 0.9;
627
- font-size: 11px; }
777
+ .react-autoql-accept-conditions-button {
778
+ text-align: right;
779
+ margin-bottom: 12px;
780
+ padding-right: 10px;
781
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
782
+ transition: color 0.1s ease; }
783
+ .react-autoql-accept-conditions-button span {
784
+ opacity: 0.8;
785
+ cursor: pointer; }
786
+ .react-autoql-accept-conditions-button span:hover {
787
+ opacity: 1; }
628
788
 
629
- .dashboard-drilldown-modal .splitter-layout {
630
- height: calc(100% - 55px); }
789
+ .react-autoql-condition-list {
790
+ padding: 0;
791
+ margin: 0 auto;
792
+ min-height: 182px; }
631
793
 
632
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
633
- padding: 20px;
634
- padding-bottom: 10px; }
794
+ tbody::-webkit-scrollbar {
795
+ -webkit-appearance: none;
796
+ width: 7px; }
635
797
 
636
- .dashboard-drilldown-modal .drilldown-hide-chart-btn {
637
- text-align: right;
798
+ tbody::-webkit-scrollbar-thumb {
799
+ border-radius: 5px;
800
+ background-color: rgba(0, 0, 0, 0.5);
801
+ box-shadow: 0 0 1px rgba(255, 255, 255, 0.5); }
802
+
803
+ .react-autoql-condition-list .react-autoql-condition-table thead {
804
+ text-align: left;
638
805
  width: 100%;
639
- padding-right: 20px; }
640
- .dashboard-drilldown-modal .drilldown-hide-chart-btn.bottom {
641
- position: absolute;
642
- bottom: 5px;
643
- width: 100px;
644
- right: 0; }
645
- .dashboard-drilldown-modal .drilldown-hide-chart-btn.top {
646
- padding-top: 10px;
647
- margin-bottom: -8px; }
806
+ margin: 0 10px 0 10px;
807
+ font-weight: 800; }
808
+ .react-autoql-condition-list .react-autoql-condition-table thead span {
809
+ color: var(--react-autoql-accent-color);
810
+ padding: 5px; }
648
811
 
649
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
650
- padding: 20px;
651
- padding-top: 10px;
652
- overflow: hidden;
653
- height: 100%; }
812
+ .react-autoql-condition-list .react-autoql-condition-table tbody {
813
+ display: block;
814
+ overflow-y: scroll;
815
+ max-height: 260px;
816
+ width: 100%;
817
+ flex: 1 1 auto;
818
+ padding-left: 10px; }
654
819
 
655
- .empty-dashboard-message-container {
656
- font-family: var(--react-autoql-font-family);
657
- color: var(--react-autoql-text-color-primary);
658
- letter-spacing: 0.02em;
659
- text-align: center;
660
- padding: 100px;
661
- height: 100%;
820
+ .react-autoql-condition-list .react-autoql-condition-table tr {
821
+ display: table;
822
+ table-layout: fixed;
662
823
  width: 100%; }
663
824
 
664
- .empty-dashboard-new-tile-btn {
665
- color: var(--react-autoql-accent-color);
666
- font-weight: bold;
667
- cursor: pointer; }
668
-
669
- .react-autoql-drawer {
670
- font-family: var(--react-autoql-font-family), sans-serif;
671
- line-height: 22px; }
672
-
673
- .react-autoql-drawer.disable-selection {
674
- -webkit-user-select: none;
675
- -moz-user-select: none;
676
- -ms-user-select: none;
677
- user-select: none; }
825
+ .react-autoql-condition-list .react-autoql-condition-table th {
826
+ display: table-cell;
827
+ padding-left: 10px; }
678
828
 
679
- .react-autoql-drawer .react-autoql-drawer-content-container {
680
- width: 100%;
681
- height: 100%;
682
- display: flex;
683
- background: var(--react-autoql-background-color-secondary);
684
- overflow: hidden;
685
- border-radius: 4px;
686
- flex-direction: column;
687
- justify-content: stretch; }
829
+ .react-autoql-condition-list td {
830
+ display: table-cell;
831
+ padding: 2px;
832
+ padding-left: 10px; }
688
833
 
689
- .react-autoql-drawer .chat-header-container {
834
+ .react-autoql-condition-list-loading-container {
690
835
  display: flex;
691
- justify-content: space-between;
836
+ height: 180px;
692
837
  width: 100%;
693
- height: 60px;
694
- background: var(--react-autoql-accent-color);
695
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
696
- flex-grow: 0;
697
- flex-shrink: 0;
698
- z-index: 1; }
838
+ padding: 20px;
839
+ align-items: center;
840
+ justify-content: center; }
699
841
 
700
- .react-autoql-drawer .react-autoql-header-right-container {
701
- display: flex;
702
- justify-content: right;
703
- width: 100px; }
842
+ .react-autoql-empty-condition-list {
843
+ text-align: center;
844
+ padding: 20px;
845
+ height: 140px; }
846
+ .react-autoql-empty-condition-list p {
847
+ margin-top: 20px !important;
848
+ vertical-align: middle; }
704
849
 
705
- .react-autoql-drawer .react-autoql-header-center-container {
706
- position: relative;
707
- color: #fff;
708
- line-height: 60px;
709
- font-size: 18px;
710
- letter-spacing: 0.05em;
711
- font-weight: 600;
712
- overflow: hidden;
713
- text-overflow: ellipsis;
714
- white-space: nowrap; }
850
+ .autoql-close-button {
851
+ background-color: inherit;
852
+ border: none;
853
+ text-align: left;
854
+ font-size: 20px;
855
+ margin-top: -20px;
856
+ float: none !important;
857
+ color: inherit; }
715
858
 
716
- .react-autoql-drawer .header-title {
717
- -webkit-animation: fadeIn 0.3s;
718
- animation: fadeIn 0.3s; }
859
+ .react-tiny-popover-container {
860
+ background: var(--react-autoql-background-color-primary); }
719
861
 
720
- .react-autoql-drawer .react-autoql-header-left-container {
721
- width: 100px; }
862
+ .autoql-condition-locking-menu-container .react-autosuggest__container {
863
+ flex-grow: 1;
864
+ display: inline;
865
+ width: 90%;
866
+ height: 100%; }
722
867
 
723
- .react-autoql-drawer .react-autoql-drawer-header-btn {
724
- line-height: 1em;
725
- font-weight: normal;
726
- float: none;
727
- opacity: 1; }
728
- .react-autoql-drawer .react-autoql-drawer-header-btn.close span.react-autoql-icon svg {
729
- width: 30px;
730
- height: 30px;
731
- padding-top: 3px; }
732
- .react-autoql-drawer .react-autoql-drawer-header-btn.clear-all {
733
- position: absolute;
734
- right: 10px;
868
+ .autoql-condition-locking-menu-container
869
+ .react-autosuggest__suggestions-container--open {
870
+ background-color: var(--react-autoql-background-color-primary);
871
+ border: 1px solid var(--react-autoql-border-color);
872
+ color: var(--react-autoql-text-color-primary);
873
+ position: absolute;
874
+ top: unset;
875
+ bottom: unset;
876
+ overflow-y: scroll !important;
877
+ padding-top: 5px;
878
+ padding-bottom: 5px;
879
+ display: block;
880
+ font-family: inherit;
881
+ font-size: 15px;
882
+ font-weight: normal;
883
+ z-index: 2;
884
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
885
+ text-align: left;
886
+ border-radius: 4px;
887
+ margin: -8px auto;
888
+ height: auto;
889
+ max-height: 80vh;
890
+ overflow-y: scroll !important;
891
+ transform: translateX(4%);
892
+ width: 92% !important; }
893
+
894
+ .autoql-condition-locking-menu-list {
895
+ table-layout: fixed;
896
+ width: 100%; }
897
+
898
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
899
+ color: var(--react-autoql-text-color-primary); }
900
+
901
+ .autoql-condition-locking-menu-container input::-moz-placeholder {
902
+ opacity: 0.5; }
903
+
904
+ .autoql-condition-locking-menu-container input:-ms-input-placeholder {
905
+ opacity: 0.5; }
906
+
907
+ .autoql-condition-locking-menu-container input::placeholder {
908
+ opacity: 0.5; }
909
+
910
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
911
+ margin: 0;
912
+ padding: 0;
913
+ list-style-type: none; }
914
+
915
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
916
+ cursor: pointer;
917
+ padding: 2px;
918
+ padding-left: 18px;
919
+ letter-spacing: 0.05em;
920
+ line-height: 22.5px; }
921
+
922
+ .autoql-condition-locking-menu-container
923
+ .react-autosuggest__suggestion--highlighted {
924
+ background-color: rgba(0, 0, 0, 0.1) !important; }
925
+
926
+ .autoql-condition-locking-menu-container .react-autosuggest__section-title {
927
+ padding: 10px 0 0 10px;
928
+ font-size: 12px;
929
+ color: #777; }
930
+
931
+ #react-autoql-filter-setting-info-card {
932
+ visibility: hidden;
933
+ color: var(--react-autoql-text-color-primary);
934
+ background-color: var(--react-autoql-background-color-secondary);
935
+ border-radius: 5px;
936
+ padding: 2px 6px 2px 6px;
937
+ margin: 4px 10px 4px 10px;
938
+ display: inline-block;
939
+ position: absolute;
940
+ top: 40px;
941
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4);
942
+ z-index: 9999; }
943
+ #react-autoql-filter-setting-info-card span {
944
+ color: var(--react-autoql-accent-color); }
945
+ #react-autoql-filter-setting-info-card p {
946
+ margin-bottom: 0 !important; }
947
+ #react-autoql-filter-setting-info-card p span {
948
+ color: var(--react-autoql-accent-color); }
949
+
950
+ .react-autoql-highlight-row {
951
+ background-color: var(--react-autoql-accent-color);
952
+ color: white;
953
+ -webkit-animation-name: highlightIn, highlightOut;
954
+ animation-name: highlightIn, highlightOut;
955
+ -webkit-animation-duration: 400ms, 400ms;
956
+ animation-duration: 400ms, 400ms;
957
+ -webkit-animation-delay: 0ms, 1500ms;
958
+ animation-delay: 0ms, 1500ms;
959
+ -webkit-animation-timing-function: ease-in, ease-out;
960
+ animation-timing-function: ease-in, ease-out;
961
+ -webkit-animation-iteration-count: 1, 1;
962
+ animation-iteration-count: 1, 1; }
963
+
964
+ #react-autoql-filter-setting-info-card.show {
965
+ visibility: visible;
966
+ -webkit-animation: fadeIn 1s;
967
+ animation: fadeIn 1s; }
968
+
969
+ #react-autoql-condition-show-message {
970
+ visibility: hidden;
971
+ min-width: 200px;
972
+ line-height: 1 !important;
973
+ font-size: 14px !important;
974
+ background-color: var(--react-autoql-background-color-secondary);
975
+ text-align: center;
976
+ border-radius: 4px;
977
+ padding: 6px;
978
+ position: fixed;
979
+ top: 20px;
980
+ display: block;
981
+ z-index: 999999999;
982
+ left: 50%;
983
+ transform: translate(-50%, -50%);
984
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
985
+ #react-autoql-condition-show-message span {
986
+ color: var(--react-autoql-accent-color); }
987
+
988
+ #react-autoql-condition-show-message.show {
989
+ visibility: visible;
990
+ -webkit-animation: snackbarFadein 1s, snackbarFadeout 1s 2s;
991
+ animation: snackbarFadein 1s, snackbarFadeout 1s 2s; }
992
+
993
+ @-webkit-keyframes snackbarFadein {
994
+ from {
995
+ top: 0;
996
+ opacity: 0; }
997
+ to {
998
+ top: 20px;
999
+ opacity: 1; } }
1000
+
1001
+ @keyframes snackbarFadein {
1002
+ from {
1003
+ top: 0;
1004
+ opacity: 0; }
1005
+ to {
1006
+ top: 20px;
1007
+ opacity: 1; } }
1008
+
1009
+ @-webkit-keyframes snackbarFadeout {
1010
+ from {
1011
+ top: 20px;
1012
+ opacity: 1; }
1013
+ to {
1014
+ top: 0;
1015
+ opacity: 0; } }
1016
+
1017
+ @keyframes snackbarFadeout {
1018
+ from {
1019
+ top: 20px;
1020
+ opacity: 1; }
1021
+ to {
1022
+ top: 0;
1023
+ opacity: 0; } }
1024
+
1025
+ @-webkit-keyframes fadeIn {
1026
+ from {
1027
+ opacity: 0;
1028
+ transform: translate3d(0, -20%, 0); }
1029
+ to {
1030
+ opacity: 1;
1031
+ transform: translate3d(0, 0, 0); } }
1032
+
1033
+ @keyframes fadeIn {
1034
+ from {
1035
+ opacity: 0;
1036
+ transform: translate3d(0, -20%, 0); }
1037
+ to {
1038
+ opacity: 1;
1039
+ transform: translate3d(0, 0, 0); } }
1040
+
1041
+ @-webkit-keyframes highlightOut {
1042
+ 100% {
1043
+ background-color: var(--react-autoql-background-color-primary);
1044
+ color: var(--react-autoql-text-color-primary); }
1045
+ 0% {
1046
+ background-color: var(--react-autoql-accent-color);
1047
+ color: white; } }
1048
+
1049
+ @keyframes highlightOut {
1050
+ 100% {
1051
+ background-color: var(--react-autoql-background-color-primary);
1052
+ color: var(--react-autoql-text-color-primary); }
1053
+ 0% {
1054
+ background-color: var(--react-autoql-accent-color);
1055
+ color: white; } }
1056
+
1057
+ @-webkit-keyframes highlightIn {
1058
+ 100% {
1059
+ background-color: var(--react-autoql-accent-color);
1060
+ color: white; }
1061
+ 0% {
1062
+ background-color: var(--react-autoql-background-color-primary);
1063
+ color: var(--react-autoql-text-color-primary); } }
1064
+
1065
+ @keyframes highlightIn {
1066
+ 100% {
1067
+ background-color: var(--react-autoql-accent-color);
1068
+ color: white; }
1069
+ 0% {
1070
+ background-color: var(--react-autoql-background-color-primary);
1071
+ color: var(--react-autoql-text-color-primary); } }
1072
+
1073
+ .react-autoql-drawer {
1074
+ font-family: var(--react-autoql-font-family), sans-serif;
1075
+ line-height: 22px; }
1076
+
1077
+ .react-autoql-drawer.disable-selection {
1078
+ -webkit-user-select: none;
1079
+ -moz-user-select: none;
1080
+ -ms-user-select: none;
1081
+ user-select: none; }
1082
+
1083
+ .react-autoql-drawer .react-autoql-drawer-content-container {
1084
+ width: 100%;
1085
+ height: 100%;
1086
+ display: flex;
1087
+ background: var(--react-autoql-background-color-secondary);
1088
+ overflow: hidden;
1089
+ border-radius: 4px;
1090
+ flex-direction: column;
1091
+ justify-content: stretch; }
1092
+
1093
+ .react-autoql-drawer .chat-header-container {
1094
+ display: flex;
1095
+ justify-content: space-between;
1096
+ width: 100%;
1097
+ height: 60px;
1098
+ background: var(--react-autoql-accent-color);
1099
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
1100
+ flex-grow: 0;
1101
+ flex-shrink: 0;
1102
+ z-index: 1; }
1103
+
1104
+ .react-autoql-drawer .react-autoql-header-right-container {
1105
+ display: flex;
1106
+ justify-content: right;
1107
+ width: 100px; }
1108
+
1109
+ .react-autoql-drawer .react-autoql-header-center-container {
1110
+ position: relative;
1111
+ color: #fff;
1112
+ line-height: 60px;
1113
+ font-size: 18px;
1114
+ letter-spacing: 0.05em;
1115
+ font-weight: 600;
1116
+ overflow: hidden;
1117
+ text-overflow: ellipsis;
1118
+ white-space: nowrap; }
1119
+
1120
+ .react-autoql-drawer .header-title {
1121
+ -webkit-animation: fadeIn 0.3s;
1122
+ animation: fadeIn 0.3s; }
1123
+
1124
+ .react-autoql-drawer .react-autoql-header-left-container {
1125
+ width: 100px; }
1126
+
1127
+ .react-autoql-drawer .react-autoql-drawer-header-btn {
1128
+ line-height: 1em;
1129
+ font-weight: normal;
1130
+ float: none;
1131
+ opacity: 1; }
1132
+ .react-autoql-drawer .react-autoql-drawer-header-btn.close span.react-autoql-icon svg {
1133
+ width: 30px;
1134
+ height: 30px;
1135
+ padding-top: 3px; }
1136
+ .react-autoql-drawer .react-autoql-drawer-header-btn.clear-all {
1137
+ position: absolute;
1138
+ right: 10px;
735
1139
  -webkit-animation: fadeIn 0.3s;
736
1140
  animation: fadeIn 0.3s; }
737
1141
  .react-autoql-drawer .react-autoql-drawer-header-btn.clear-all span.react-autoql-icon svg {
@@ -1349,230 +1753,13 @@ span.react-autoql-icon {
1349
1753
  opacity: 1;
1350
1754
  top: 0; } }
1351
1755
 
1352
- .react-autoql-notification-list-item {
1353
- display: flex;
1354
- flex-direction: column;
1355
- flex-basis: auto;
1356
- --accent-color: #26a7df;
1357
- position: relative;
1358
- overflow: hidden;
1359
- background: var(--react-autoql-background-color-primary, #fff);
1360
- border-radius: 4px;
1361
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1362
- margin-bottom: 8px;
1363
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6));
1364
- font-family: var(--react-autoql-font-family), sans-serif;
1365
- transition: all 1s ease;
1366
- transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1);
1367
- -webkit-animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
1368
- animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
1369
- -webkit-animation-fill-mode: both;
1370
- animation-fill-mode: both;
1371
- -webkit-animation-delay: 0s;
1372
- animation-delay: 0s; }
1373
- .react-autoql-notification-list-item .single-value-response {
1374
- font-size: 32px;
1375
- margin-top: -6px;
1376
- opacity: 0.9; }
1377
- .react-autoql-notification-list-item .viz-toolbar {
1378
- position: relative;
1379
- border: none; }
1380
- .react-autoql-notification-list-item .viz-toolbar .react-autoql-toolbar-btn {
1381
- height: 33px; }
1382
- .react-autoql-notification-list-item .react-autoql-notification-details-title {
1383
- font-weight: 600;
1384
- padding-top: 20px;
1385
- padding-bottom: 5px; }
1386
- .react-autoql-notification-list-item.expanded .react-autoql-notification-list-item-header {
1387
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.04)); }
1388
- .react-autoql-notification-list-item .react-autoql-notification-details {
1389
- overflow: hidden; }
1390
- .react-autoql-notification-list-item.animation-complete .react-autoql-notification-details {
1391
- overflow: auto; }
1392
- .react-autoql-notification-list-item:hover:not(.expanded) {
1393
- background-color: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.01)); }
1394
- .react-autoql-notification-list-item:hover .react-autoql-notification-delete-icon {
1395
- opacity: 1; }
1396
- .react-autoql-notification-list-item.triggered .react-autoql-notification-display-name {
1397
- color: var(--react-autoql-accent-color, #26a7df) !important; }
1398
- .react-autoql-notification-list-item.triggered .react-autoql-notification-dismiss-btn {
1399
- margin-top: 3px;
1400
- color: var(--react-autoql-accent-color, #26a7df); }
1401
- .react-autoql-notification-list-item.triggered .react-autoql-notification-alert-strip {
1402
- opacity: 1; }
1403
- .react-autoql-notification-list-item .react-autoql-notification-expanded-content {
1404
- display: flex;
1405
- flex-direction: column;
1406
- justify-content: stretch;
1407
- transition: height 0.2s ease;
1408
- height: 0;
1409
- opacity: 0; }
1410
- .react-autoql-notification-list-item .react-autoql-notification-expanded-content.visible {
1411
- height: 400px;
1412
- opacity: 1; }
1413
- .react-autoql-notification-list-item .react-autoql-notification-extra-content {
1414
- flex: 0;
1415
- flex-basis: 55px;
1416
- text-align: center;
1417
- padding: 8px;
1418
- border-top: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1419
- .react-autoql-notification-list-item .react-autoql-notification-extra-content .notification-deleted-text {
1420
- line-height: 40px;
1421
- opacity: 0.6;
1422
- font-style: italic; }
1423
- .react-autoql-notification-list-item .react-autoql-notification-description {
1424
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6));
1425
- opacity: 0.8;
1426
- font-size: 14px; }
1427
- .react-autoql-notification-list-item .react-autoql-notification-list-item-header {
1428
- display: flex;
1429
- flex-direction: row;
1430
- justify-content: space-between;
1431
- padding-left: 22px;
1432
- cursor: pointer; }
1433
- .react-autoql-notification-list-item .react-autoql-notification-query-title {
1434
- flex: 0 0 auto;
1435
- font-size: 14px;
1436
- font-family: inherit;
1437
- color: currentcolor;
1438
- opacity: 0.9;
1439
- font-weight: 600;
1440
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
1441
- text-align: center;
1442
- margin: 0 10px;
1443
- padding-top: 20px;
1444
- padding-bottom: 7px; }
1445
- .react-autoql-notification-list-item .react-autoql-notification-details-container {
1446
- flex: 1;
1447
- display: flex;
1448
- flex-direction: row;
1449
- align-items: stretch;
1450
- justify-content: stretch;
1451
- overflow: hidden; }
1452
- .react-autoql-notification-list-item .react-autoql-notification-details-container .react-autoql-notification-details {
1453
- flex: 1 1;
1454
- padding: 20px;
1455
- padding-top: 0;
1456
- opacity: 0.9;
1457
- border-left: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1458
- .react-autoql-notification-list-item .react-autoql-notification-data-container {
1459
- display: flex;
1460
- flex-direction: row;
1461
- justify-content: stretch;
1462
- flex: 3 3 0px;
1463
- overflow: hidden; }
1464
- .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-notificaton-chart-container {
1465
- flex: 1;
1466
- height: 100%;
1467
- width: 0;
1468
- display: flex;
1469
- flex-direction: column;
1470
- padding: 0px 20px 10px 20px; }
1471
- .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-table-container {
1472
- width: 100%;
1473
- padding: 0 10px; }
1474
- .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-table {
1475
- opacity: 0.9;
1476
- color: currentColor;
1477
- font-size: 11px; }
1478
- .react-autoql-notification-list-item .react-autoql-notification-data-title {
1479
- line-height: 22px;
1480
- font-size: 12px;
1481
- text-align: right;
1482
- color: var(--react-autoql-text-color-primary);
1483
- opacity: 0.5;
1484
- padding: 8px 20px; }
1485
- .react-autoql-notification-list-item .react-autoql-notification-data-title span.react-autoql-icon svg {
1486
- margin-top: -3px;
1487
- vertical-align: middle; }
1488
- .react-autoql-notification-list-item .react-autoql-notification-dismiss-icon {
1489
- font-size: 21px;
1490
- margin: 11px;
1491
- width: 40px;
1492
- height: 40px;
1493
- padding: 10px;
1494
- border-radius: 26px;
1495
- display: inline-block;
1496
- line-height: 20px;
1497
- background-color: transparent;
1498
- transition: background-color 0.2s ease;
1499
- cursor: pointer; }
1500
- .react-autoql-notification-list-item .react-autoql-notification-dismiss-icon:hover {
1501
- background-color: var(--react-autoql-background-color-secondary, #ececec); }
1502
- .react-autoql-notification-list-item .react-autoql-notification-delete-icon {
1503
- font-size: 18px;
1504
- margin-top: 3px;
1505
- margin-right: 3px;
1506
- opacity: 0;
1507
- width: 36px;
1508
- height: 36px;
1509
- padding: 9px;
1510
- border-radius: 20px;
1511
- display: inline-block;
1512
- line-height: 20px;
1513
- background-color: transparent;
1514
- transition: all 0.2s ease;
1515
- cursor: pointer; }
1516
- .react-autoql-notification-list-item .react-autoql-notification-delete-icon:hover {
1517
- background-color: var(--react-autoql-background-color-secondary, #ececec); }
1518
- .react-autoql-notification-list-item .react-autoql-notification-alert-icon {
1519
- position: absolute;
1520
- top: -7px;
1521
- left: -7px;
1522
- color: var(--react-autoql-accent-color, #26a7df);
1523
- line-height: 10px;
1524
- background: var(--react-autoql-background-color-primary, #fff);
1525
- border-radius: 10px;
1526
- font-size: 17px; }
1527
- .react-autoql-notification-list-item .react-autoql-notification-alert-strip {
1528
- height: 100%;
1529
- opacity: 0;
1530
- position: absolute;
1531
- left: 0px;
1532
- top: 0;
1533
- width: 4px;
1534
- background: var(--react-autoql-accent-color, #26a7df);
1535
- transition-property: opacity;
1536
- transition-duration: 0.2s;
1537
- transition-timing-function: ease; }
1538
- .react-autoql-notification-list-item .react-autoql-notification-viz-switcher {
1539
- flex: 0 0 50px;
1540
- padding: 10px;
1541
- border-left: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1542
- .react-autoql-notification-list-item .react-autoql-notification-img-container {
1543
- flex: 0 0 60px; }
1544
- .react-autoql-notification-list-item .react-autoql-notification-img-container .react-autoql-notification-img {
1545
- border-radius: 50px;
1546
- height: 45px;
1547
- width: 45px;
1548
- line-height: 45px;
1549
- font-size: 22px;
1550
- color: white;
1551
- background-color: var(--react-autoql-accent-color, #26a7df);
1552
- text-align: center;
1553
- margin-top: 13px;
1554
- margin-right: 17px; }
1555
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container {
1556
- flex: 1;
1557
- line-height: 23px;
1558
- padding: 13px 0px;
1559
- transition: color 0.2s ease; }
1560
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-display-name {
1561
- font-size: 18px;
1562
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.7)); }
1563
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp {
1564
- font-size: 12px;
1565
- opacity: 0.5; }
1566
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
1567
- margin-bottom: -1px; }
1568
-
1569
- .notification-modal-content .react-autoql-step-content p {
1570
- margin-bottom: 0.5em;
1571
- margin-top: 0.5em;
1572
- padding-left: 8px; }
1573
-
1574
- .notification-modal-content .step-btn-container {
1575
- text-align: right;
1756
+ .notification-modal-content .react-autoql-step-content p {
1757
+ margin-bottom: 0.5em;
1758
+ margin-top: 0.5em;
1759
+ padding-left: 8px; }
1760
+
1761
+ .notification-modal-content .step-btn-container {
1762
+ text-align: right;
1576
1763
  display: flex;
1577
1764
  min-height: 50px; }
1578
1765
 
@@ -1622,6 +1809,18 @@ span.react-autoql-icon {
1622
1809
  .data-alerts-container.read-only .react-autoql-notification-group-container {
1623
1810
  border: none; }
1624
1811
 
1812
+ .notification-rule-outer-container {
1813
+ position: relative;
1814
+ border: 1px solid transparent;
1815
+ border-radius: 4px;
1816
+ padding-bottom: 5px; }
1817
+
1818
+ .expression-error-message {
1819
+ padding-left: 5px; }
1820
+
1821
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
1822
+ border: none; }
1823
+
1625
1824
  .react-autoql-notification-settings {
1626
1825
  background-color: var(--react-autoql-background-color-secondary);
1627
1826
  color: var(--react-autoql-text-color-primary);
@@ -1714,18 +1913,6 @@ span.react-autoql-icon {
1714
1913
  align-items: center;
1715
1914
  margin-top: -25px; }
1716
1915
 
1717
- .notification-rule-outer-container {
1718
- position: relative;
1719
- border: 1px solid transparent;
1720
- border-radius: 4px;
1721
- padding-bottom: 5px; }
1722
-
1723
- .expression-error-message {
1724
- padding-left: 5px; }
1725
-
1726
- .data-alerts-container.read-only .react-autoql-notification-group-container {
1727
- border: none; }
1728
-
1729
1916
  .react-autoql-step-container a {
1730
1917
  color: var(--react-autoql-accent-color, #26a7df); }
1731
1918
 
@@ -2249,31 +2436,372 @@ span.react-autoql-icon {
2249
2436
  .dashboard-tile-response-container .dashboard-tile-split-pane-container {
2250
2437
  background: inherit; }
2251
2438
 
2252
- .react-autoql-table-container {
2253
- height: 100%;
2254
- max-width: 100%;
2255
- background-color: inherit; }
2256
-
2257
- .react-autoql-table {
2258
- margin-bottom: 0; }
2259
-
2260
- /* tabulator */
2261
- .react-autoql-table.tabulator,
2262
- .react-autoql-table.tabulator .tabulator-row,
2263
- .react-autoql-table.tabulator .tabulator-header,
2264
- .react-autoql-table.tabulator .tabulator-headers,
2265
- .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2266
- .react-autoql-table.tabulator .tabulator-tableHolder .tabulator-table {
2267
- background-color: inherit; }
2268
-
2269
- .react-autoql-table-container.supports-drilldown
2270
- .react-autoql-table.tabulator
2271
- .tabulator-row.tabulator-unselectable:hover {
2272
- cursor: pointer !important;
2273
- background-color: var(--react-autoql-hover-color) !important; }
2274
-
2275
- .react-autoql-table.tabulator
2276
- .tabulator-header
2439
+ .react-autoql-notification-list-item {
2440
+ display: flex;
2441
+ flex-direction: column;
2442
+ flex-basis: auto;
2443
+ --accent-color: #26a7df;
2444
+ position: relative;
2445
+ overflow: hidden;
2446
+ background: var(--react-autoql-background-color-primary, #fff);
2447
+ border-radius: 4px;
2448
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
2449
+ margin-bottom: 8px;
2450
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6));
2451
+ font-family: var(--react-autoql-font-family), sans-serif;
2452
+ transition: all 1s ease;
2453
+ transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1);
2454
+ -webkit-animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
2455
+ animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
2456
+ -webkit-animation-fill-mode: both;
2457
+ animation-fill-mode: both;
2458
+ -webkit-animation-delay: 0s;
2459
+ animation-delay: 0s; }
2460
+ .react-autoql-notification-list-item .single-value-response {
2461
+ font-size: 32px;
2462
+ margin-top: -6px;
2463
+ opacity: 0.9; }
2464
+ .react-autoql-notification-list-item .viz-toolbar {
2465
+ position: relative;
2466
+ border: none; }
2467
+ .react-autoql-notification-list-item .viz-toolbar .react-autoql-toolbar-btn {
2468
+ height: 33px; }
2469
+ .react-autoql-notification-list-item .react-autoql-notification-details-title {
2470
+ font-weight: 600;
2471
+ padding-top: 20px;
2472
+ padding-bottom: 5px; }
2473
+ .react-autoql-notification-list-item.expanded .react-autoql-notification-list-item-header {
2474
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.04)); }
2475
+ .react-autoql-notification-list-item .react-autoql-notification-details {
2476
+ overflow: hidden; }
2477
+ .react-autoql-notification-list-item.animation-complete .react-autoql-notification-details {
2478
+ overflow: auto; }
2479
+ .react-autoql-notification-list-item:hover:not(.expanded) {
2480
+ background-color: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.01)); }
2481
+ .react-autoql-notification-list-item:hover .react-autoql-notification-delete-icon {
2482
+ opacity: 1; }
2483
+ .react-autoql-notification-list-item.triggered .react-autoql-notification-display-name {
2484
+ color: var(--react-autoql-accent-color, #26a7df) !important; }
2485
+ .react-autoql-notification-list-item.triggered .react-autoql-notification-dismiss-btn {
2486
+ margin-top: 3px;
2487
+ color: var(--react-autoql-accent-color, #26a7df); }
2488
+ .react-autoql-notification-list-item.triggered .react-autoql-notification-alert-strip {
2489
+ opacity: 1; }
2490
+ .react-autoql-notification-list-item .react-autoql-notification-expanded-content {
2491
+ display: flex;
2492
+ flex-direction: column;
2493
+ justify-content: stretch;
2494
+ transition: height 0.2s ease;
2495
+ height: 0;
2496
+ opacity: 0; }
2497
+ .react-autoql-notification-list-item .react-autoql-notification-expanded-content.visible {
2498
+ height: 400px;
2499
+ opacity: 1; }
2500
+ .react-autoql-notification-list-item .react-autoql-notification-extra-content {
2501
+ flex: 0;
2502
+ flex-basis: 55px;
2503
+ text-align: center;
2504
+ padding: 8px;
2505
+ border-top: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
2506
+ .react-autoql-notification-list-item .react-autoql-notification-extra-content .notification-deleted-text {
2507
+ line-height: 40px;
2508
+ opacity: 0.6;
2509
+ font-style: italic; }
2510
+ .react-autoql-notification-list-item .react-autoql-notification-description {
2511
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6));
2512
+ opacity: 0.8;
2513
+ font-size: 14px; }
2514
+ .react-autoql-notification-list-item .react-autoql-notification-list-item-header {
2515
+ display: flex;
2516
+ flex-direction: row;
2517
+ justify-content: space-between;
2518
+ padding-left: 22px;
2519
+ cursor: pointer; }
2520
+ .react-autoql-notification-list-item .react-autoql-notification-query-title {
2521
+ flex: 0 0 auto;
2522
+ font-size: 14px;
2523
+ font-family: inherit;
2524
+ color: currentcolor;
2525
+ opacity: 0.9;
2526
+ font-weight: 600;
2527
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
2528
+ text-align: center;
2529
+ margin: 0 10px;
2530
+ padding-top: 20px;
2531
+ padding-bottom: 7px; }
2532
+ .react-autoql-notification-list-item .react-autoql-notification-details-container {
2533
+ flex: 1;
2534
+ display: flex;
2535
+ flex-direction: row;
2536
+ align-items: stretch;
2537
+ justify-content: stretch;
2538
+ overflow: hidden; }
2539
+ .react-autoql-notification-list-item .react-autoql-notification-details-container .react-autoql-notification-details {
2540
+ flex: 1 1;
2541
+ padding: 20px;
2542
+ padding-top: 0;
2543
+ opacity: 0.9;
2544
+ border-left: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
2545
+ .react-autoql-notification-list-item .react-autoql-notification-data-container {
2546
+ display: flex;
2547
+ flex-direction: row;
2548
+ justify-content: stretch;
2549
+ flex: 3 3 0px;
2550
+ overflow: hidden; }
2551
+ .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-notificaton-chart-container {
2552
+ flex: 1;
2553
+ height: 100%;
2554
+ width: 0;
2555
+ display: flex;
2556
+ flex-direction: column;
2557
+ padding: 0px 20px 10px 20px; }
2558
+ .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-table-container {
2559
+ width: 100%;
2560
+ padding: 0 10px; }
2561
+ .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-table {
2562
+ opacity: 0.9;
2563
+ color: currentColor;
2564
+ font-size: 11px; }
2565
+ .react-autoql-notification-list-item .react-autoql-notification-data-title {
2566
+ line-height: 22px;
2567
+ font-size: 12px;
2568
+ text-align: right;
2569
+ color: var(--react-autoql-text-color-primary);
2570
+ opacity: 0.5;
2571
+ padding: 8px 20px; }
2572
+ .react-autoql-notification-list-item .react-autoql-notification-data-title span.react-autoql-icon svg {
2573
+ margin-top: -3px;
2574
+ vertical-align: middle; }
2575
+ .react-autoql-notification-list-item .react-autoql-notification-dismiss-icon {
2576
+ font-size: 21px;
2577
+ margin: 11px;
2578
+ width: 40px;
2579
+ height: 40px;
2580
+ padding: 10px;
2581
+ border-radius: 26px;
2582
+ display: inline-block;
2583
+ line-height: 20px;
2584
+ background-color: transparent;
2585
+ transition: background-color 0.2s ease;
2586
+ cursor: pointer; }
2587
+ .react-autoql-notification-list-item .react-autoql-notification-dismiss-icon:hover {
2588
+ background-color: var(--react-autoql-background-color-secondary, #ececec); }
2589
+ .react-autoql-notification-list-item .react-autoql-notification-delete-icon {
2590
+ font-size: 18px;
2591
+ margin-top: 3px;
2592
+ margin-right: 3px;
2593
+ opacity: 0;
2594
+ width: 36px;
2595
+ height: 36px;
2596
+ padding: 9px;
2597
+ border-radius: 20px;
2598
+ display: inline-block;
2599
+ line-height: 20px;
2600
+ background-color: transparent;
2601
+ transition: all 0.2s ease;
2602
+ cursor: pointer; }
2603
+ .react-autoql-notification-list-item .react-autoql-notification-delete-icon:hover {
2604
+ background-color: var(--react-autoql-background-color-secondary, #ececec); }
2605
+ .react-autoql-notification-list-item .react-autoql-notification-alert-icon {
2606
+ position: absolute;
2607
+ top: -7px;
2608
+ left: -7px;
2609
+ color: var(--react-autoql-accent-color, #26a7df);
2610
+ line-height: 10px;
2611
+ background: var(--react-autoql-background-color-primary, #fff);
2612
+ border-radius: 10px;
2613
+ font-size: 17px; }
2614
+ .react-autoql-notification-list-item .react-autoql-notification-alert-strip {
2615
+ height: 100%;
2616
+ opacity: 0;
2617
+ position: absolute;
2618
+ left: 0px;
2619
+ top: 0;
2620
+ width: 4px;
2621
+ background: var(--react-autoql-accent-color, #26a7df);
2622
+ transition-property: opacity;
2623
+ transition-duration: 0.2s;
2624
+ transition-timing-function: ease; }
2625
+ .react-autoql-notification-list-item .react-autoql-notification-viz-switcher {
2626
+ flex: 0 0 50px;
2627
+ padding: 10px;
2628
+ border-left: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
2629
+ .react-autoql-notification-list-item .react-autoql-notification-img-container {
2630
+ flex: 0 0 60px; }
2631
+ .react-autoql-notification-list-item .react-autoql-notification-img-container .react-autoql-notification-img {
2632
+ border-radius: 50px;
2633
+ height: 45px;
2634
+ width: 45px;
2635
+ line-height: 45px;
2636
+ font-size: 22px;
2637
+ color: white;
2638
+ background-color: var(--react-autoql-accent-color, #26a7df);
2639
+ text-align: center;
2640
+ margin-top: 13px;
2641
+ margin-right: 17px; }
2642
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container {
2643
+ flex: 1;
2644
+ line-height: 23px;
2645
+ padding: 13px 0px;
2646
+ transition: color 0.2s ease; }
2647
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-display-name {
2648
+ font-size: 18px;
2649
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.7)); }
2650
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp {
2651
+ font-size: 12px;
2652
+ opacity: 0.5; }
2653
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
2654
+ margin-bottom: -1px; }
2655
+
2656
+ .react-autoql-btn {
2657
+ border-radius: 4px;
2658
+ cursor: pointer;
2659
+ outline: none !important;
2660
+ transition: all 0.2s ease;
2661
+ width: auto;
2662
+ display: inline-block; }
2663
+
2664
+ .react-autoql-btn.disabled {
2665
+ opacity: 0.4;
2666
+ cursor: not-allowed;
2667
+ pointer-events: none; }
2668
+
2669
+ .react-autoql-btn.small {
2670
+ padding: 2px 8px;
2671
+ margin: 2px 3px; }
2672
+
2673
+ .react-autoql-btn.large {
2674
+ padding: 5px 16px;
2675
+ margin: 2px 5px; }
2676
+
2677
+ .react-autoql-btn.default {
2678
+ color: inherit;
2679
+ border: 1px solid var(--react-autoql-border-color);
2680
+ background: inherit; }
2681
+ .react-autoql-btn.default:hover {
2682
+ border-color: var(--react-autoql-accent-color);
2683
+ color: var(--react-autoql-accent-color); }
2684
+
2685
+ .react-autoql-btn.primary {
2686
+ background: var(--react-autoql-accent-color);
2687
+ border: 1px solid var(--react-autoql-accent-color);
2688
+ color: white; }
2689
+ .react-autoql-btn.primary:hover {
2690
+ opacity: 0.8; }
2691
+
2692
+ .react-autoql-btn.danger {
2693
+ color: var(--react-autoql-danger-color, #ca0b00);
2694
+ border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2695
+ background: inherit; }
2696
+ .react-autoql-btn.danger:hover {
2697
+ background-color: var(--react-autoql-danger-color, #ca0b00);
2698
+ color: #fff; }
2699
+
2700
+ .ReactModal__Overlay {
2701
+ background-color: transparent !important;
2702
+ transition: background-color 0.2s ease-in-out;
2703
+ z-index: 9999; }
2704
+
2705
+ .ReactModal__Overlay--after-open {
2706
+ background-color: rgba(0, 0, 0, 0.25) !important; }
2707
+
2708
+ .ReactModal__Overlay--before-close {
2709
+ background-color: transparent !important; }
2710
+
2711
+ .ReactModal__Content {
2712
+ display: flex;
2713
+ flex-direction: column;
2714
+ transform: scale(0);
2715
+ transition: all 0.2s ease-in-out;
2716
+ color: var(--react-autoql-text-color-primary);
2717
+ border: 1px solid var(--react-autoql-border-color) !important;
2718
+ background: var(--react-autoql-background-color-primary) !important;
2719
+ box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
2720
+ padding: 0 !important;
2721
+ margin: auto auto;
2722
+ max-width: 90vw;
2723
+ max-height: calc(100vh - 90px); }
2724
+ .ReactModal__Content input.react-autoql-input,
2725
+ .ReactModal__Content textarea.react-autoql-input,
2726
+ .ReactModal__Content textarea {
2727
+ border-color: var(--react-autoql-border-color);
2728
+ color: var(--react-autoql-text-color-primary);
2729
+ background: var(--react-autoql-background-color-primary, white); }
2730
+ .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
2731
+ color: var(--react-autoql-text-color-placeholder); }
2732
+ .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
2733
+ color: var(--react-autoql-text-color-placeholder); }
2734
+ .ReactModal__Content input.react-autoql-input::placeholder,
2735
+ .ReactModal__Content textarea.react-autoql-input::placeholder,
2736
+ .ReactModal__Content textarea::placeholder {
2737
+ color: var(--react-autoql-text-color-placeholder); }
2738
+
2739
+ .ReactModal__Overlay--after-open .ReactModal__Content {
2740
+ transform: scale(1); }
2741
+
2742
+ .ReactModal__Overlay--before-close .ReactModal__Content {
2743
+ transform: scale(0); }
2744
+
2745
+ .react-autoql-modal-header {
2746
+ position: relative;
2747
+ text-align: center;
2748
+ flex: 0 0 52px;
2749
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
2750
+ padding: 14px 60px;
2751
+ font-size: 16px; }
2752
+
2753
+ .react-autoql-modal-footer {
2754
+ position: relative;
2755
+ flex: 0 0 52px;
2756
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
2757
+ text-align: right;
2758
+ padding: 8px 10px; }
2759
+
2760
+ .react-autoql-modal-body {
2761
+ display: flex;
2762
+ flex-direction: column;
2763
+ padding: 25px;
2764
+ flex: 1;
2765
+ overflow: hidden; }
2766
+ .react-autoql-modal-body h3 {
2767
+ color: var(--react-autoql-text-color-primary); }
2768
+
2769
+ .react-autoql-modal-close-btn {
2770
+ position: absolute !important;
2771
+ top: 10px;
2772
+ right: 18px;
2773
+ font-size: 22px;
2774
+ opacity: 0.6 !important;
2775
+ cursor: pointer; }
2776
+
2777
+ .react-autoql-modal-close-btn:hover {
2778
+ opacity: 1 !important; }
2779
+
2780
+ .react-autoql-table-container {
2781
+ height: 100%;
2782
+ max-width: 100%;
2783
+ background-color: inherit; }
2784
+
2785
+ .react-autoql-table {
2786
+ margin-bottom: 0; }
2787
+
2788
+ /* tabulator */
2789
+ .react-autoql-table.tabulator,
2790
+ .react-autoql-table.tabulator .tabulator-row,
2791
+ .react-autoql-table.tabulator .tabulator-header,
2792
+ .react-autoql-table.tabulator .tabulator-headers,
2793
+ .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2794
+ .react-autoql-table.tabulator .tabulator-tableHolder .tabulator-table {
2795
+ background-color: inherit; }
2796
+
2797
+ .react-autoql-table-container.supports-drilldown
2798
+ .react-autoql-table.tabulator
2799
+ .tabulator-row.tabulator-unselectable:hover {
2800
+ cursor: pointer !important;
2801
+ background-color: var(--react-autoql-hover-color) !important; }
2802
+
2803
+ .react-autoql-table.tabulator
2804
+ .tabulator-header
2277
2805
  .tabulator-col.tabulator-sortable:hover {
2278
2806
  background-color: var(--react-autoql-hover-color) !important; }
2279
2807
 
@@ -2410,137 +2938,13 @@ the whole table when the filter button is clicked */
2410
2938
  font-size: 10px;
2411
2939
  margin-right: 5px;
2412
2940
  vertical-align: top;
2413
- line-height: 21px; }
2414
-
2415
- .comparison-value-positive {
2416
- color: #2ecc40; }
2417
-
2418
- .comparison-value-negative {
2419
- color: #e80000; }
2420
-
2421
- .react-autoql-btn {
2422
- border-radius: 4px;
2423
- cursor: pointer;
2424
- outline: none !important;
2425
- transition: all 0.2s ease;
2426
- width: auto;
2427
- display: inline-block; }
2428
-
2429
- .react-autoql-btn.disabled {
2430
- opacity: 0.4;
2431
- cursor: not-allowed;
2432
- pointer-events: none; }
2433
-
2434
- .react-autoql-btn.small {
2435
- padding: 2px 8px;
2436
- margin: 2px 3px; }
2437
-
2438
- .react-autoql-btn.large {
2439
- padding: 5px 16px;
2440
- margin: 2px 5px; }
2441
-
2442
- .react-autoql-btn.default {
2443
- color: inherit;
2444
- border: 1px solid var(--react-autoql-border-color);
2445
- background: inherit; }
2446
- .react-autoql-btn.default:hover {
2447
- border-color: var(--react-autoql-accent-color);
2448
- color: var(--react-autoql-accent-color); }
2449
-
2450
- .react-autoql-btn.primary {
2451
- background: var(--react-autoql-accent-color);
2452
- border: 1px solid var(--react-autoql-accent-color);
2453
- color: white; }
2454
- .react-autoql-btn.primary:hover {
2455
- opacity: 0.8; }
2456
-
2457
- .react-autoql-btn.danger {
2458
- color: var(--react-autoql-danger-color, #ca0b00);
2459
- border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2460
- background: inherit; }
2461
- .react-autoql-btn.danger:hover {
2462
- background-color: var(--react-autoql-danger-color, #ca0b00);
2463
- color: #fff; }
2464
-
2465
- .ReactModal__Overlay {
2466
- background-color: transparent !important;
2467
- transition: background-color 0.2s ease-in-out;
2468
- z-index: 9999; }
2469
-
2470
- .ReactModal__Overlay--after-open {
2471
- background-color: rgba(0, 0, 0, 0.25) !important; }
2472
-
2473
- .ReactModal__Overlay--before-close {
2474
- background-color: transparent !important; }
2475
-
2476
- .ReactModal__Content {
2477
- display: flex;
2478
- flex-direction: column;
2479
- transform: scale(0);
2480
- transition: all 0.2s ease-in-out;
2481
- color: var(--react-autoql-text-color-primary);
2482
- border: 1px solid var(--react-autoql-border-color) !important;
2483
- background: var(--react-autoql-background-color-primary) !important;
2484
- box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
2485
- padding: 0 !important;
2486
- margin: auto auto;
2487
- max-width: 90vw;
2488
- max-height: calc(100vh - 90px); }
2489
- .ReactModal__Content input.react-autoql-input,
2490
- .ReactModal__Content textarea.react-autoql-input,
2491
- .ReactModal__Content textarea {
2492
- border-color: var(--react-autoql-border-color);
2493
- color: var(--react-autoql-text-color-primary);
2494
- background: var(--react-autoql-background-color-primary, white); }
2495
- .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
2496
- color: var(--react-autoql-text-color-placeholder); }
2497
- .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
2498
- color: var(--react-autoql-text-color-placeholder); }
2499
- .ReactModal__Content input.react-autoql-input::placeholder,
2500
- .ReactModal__Content textarea.react-autoql-input::placeholder,
2501
- .ReactModal__Content textarea::placeholder {
2502
- color: var(--react-autoql-text-color-placeholder); }
2503
-
2504
- .ReactModal__Overlay--after-open .ReactModal__Content {
2505
- transform: scale(1); }
2506
-
2507
- .ReactModal__Overlay--before-close .ReactModal__Content {
2508
- transform: scale(0); }
2509
-
2510
- .react-autoql-modal-header {
2511
- position: relative;
2512
- text-align: center;
2513
- flex: 0 0 52px;
2514
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
2515
- padding: 14px 60px;
2516
- font-size: 16px; }
2517
-
2518
- .react-autoql-modal-footer {
2519
- position: relative;
2520
- flex: 0 0 52px;
2521
- border-top: 1px solid rgba(0, 0, 0, 0.05);
2522
- text-align: right;
2523
- padding: 8px 10px; }
2524
-
2525
- .react-autoql-modal-body {
2526
- display: flex;
2527
- flex-direction: column;
2528
- padding: 25px;
2529
- flex: 1;
2530
- overflow: hidden; }
2531
- .react-autoql-modal-body h3 {
2532
- color: var(--react-autoql-text-color-primary); }
2533
-
2534
- .react-autoql-modal-close-btn {
2535
- position: absolute !important;
2536
- top: 10px;
2537
- right: 18px;
2538
- font-size: 22px;
2539
- opacity: 0.6 !important;
2540
- cursor: pointer; }
2941
+ line-height: 21px; }
2541
2942
 
2542
- .react-autoql-modal-close-btn:hover {
2543
- opacity: 1 !important; }
2943
+ .comparison-value-positive {
2944
+ color: #2ecc40; }
2945
+
2946
+ .comparison-value-negative {
2947
+ color: #e80000; }
2544
2948
 
2545
2949
  .autoql-options-toolbar {
2546
2950
  position: absolute;
@@ -2841,6 +3245,7 @@ the whole table when the filter button is clicked */
2841
3245
  display: flex;
2842
3246
  justify-content: flex-start;
2843
3247
  padding-left: 20px;
3248
+ height: unset !important;
2844
3249
  -webkit-animation: scale-up-bl 0.6s ease;
2845
3250
  animation: scale-up-bl 0.6s ease; }
2846
3251
 
@@ -2881,445 +3286,150 @@ the whole table when the filter button is clicked */
2881
3286
  color: var(--react-autoql-text-color-primary);
2882
3287
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2883
3288
 
2884
- .chat-single-message-container.response .chat-message-bubble:not(.text) {
2885
- min-width: 125px;
2886
- padding-bottom: 15px; }
2887
-
2888
- .chat-single-message-container.request .chat-message-bubble {
2889
- background: var(--react-autoql-accent-color);
2890
- color: white;
2891
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2892
-
2893
- /* Increase height of message to include table filters,
2894
- so we dont have to redraw the whole table */
2895
- .chat-single-message-container.response.filtering-table {
2896
- max-height: calc(85% + 35px) !important; }
2897
-
2898
- .chat-message-toolbar,
2899
- .chat-message-toolbar.autoql-options-toolbar {
2900
- display: none;
2901
- position: absolute;
2902
- background: inherit;
2903
- top: -31px;
2904
- padding: 5px;
2905
- border-radius: 6px;
2906
- line-height: 28px;
2907
- background: var(--react-autoql-background-color-primary);
2908
- border: 1px solid var(--react-autoql-border-color);
2909
- color: var(--react-autoql-accent-color); }
2910
-
2911
- .chat-message-toolbar.right {
2912
- right: -9px; }
2913
-
2914
- .chat-message-toolbar.left {
2915
- left: -9px; }
2916
-
2917
- .chat-message-bubble:hover .chat-message-toolbar,
2918
- .chat-message-bubble .chat-message-toolbar.active {
2919
- display: block; }
2920
-
2921
- .report-problem-text-area {
2922
- border-radius: 4px;
2923
- border: 1px solid rgba(0, 0, 0, 0.15);
2924
- margin-top: 10px;
2925
- padding: 5px 10px;
2926
- outline: none !important; }
2927
-
2928
- .data-limit-warning-icon {
2929
- color: var(--react-autoql-warning-color) !important;
2930
- position: absolute !important;
2931
- bottom: 2px;
2932
- right: 4px;
2933
- font-size: 20px; }
2934
-
2935
- .condition-info-icon-left-align {
2936
- color: var(--react-autoql-accent-color) !important;
2937
- position: absolute !important;
2938
- bottom: 2px;
2939
- right: 10px;
2940
- font-size: 20px; }
2941
-
2942
- .condition-info-icon {
2943
- color: var(--react-autoql-accent-color) !important;
2944
- position: absolute !important;
2945
- bottom: 2px;
2946
- right: 4px;
2947
- font-size: 20px; }
2948
-
2949
- .more-options-menu,
2950
- .report-problem-menu {
2951
- background: var(--react-autoql-background-color-primary);
2952
- padding: 10px 0; }
2953
- .more-options-menu span.react-autoql-icon svg,
2954
- .report-problem-menu span.react-autoql-icon svg {
2955
- margin-right: 3px; }
2956
-
2957
- .interpretation-icon {
2958
- vertical-align: top;
2959
- height: 26px;
2960
- margin: 0 3px;
2961
- font-size: 18px; }
2962
-
2963
- /* Chart icon styles */
2964
- .chart-icon-svg-0,
2965
- .react-autoql-icon-svg-0 {
2966
- fill: currentColor; }
2967
-
2968
- .hm0 {
2969
- opacity: 0.5;
2970
- fill: currentColor;
2971
- enable-background: new; }
2972
-
2973
- .hm1 {
2974
- fill: currentColor; }
2975
-
2976
- .hm2 {
2977
- opacity: 0.15;
2978
- fill: currentColor;
2979
- enable-background: new; }
2980
-
2981
- .hm3 {
2982
- opacity: 0.6;
2983
- fill: currentColor;
2984
- enable-background: new; }
2985
-
2986
- .hm4 {
2987
- opacity: 0.65;
2988
- fill: currentColor;
2989
- enable-background: new; }
2990
-
2991
- .hm5 {
2992
- fill: currentColor; }
2993
-
2994
- .hm6 {
2995
- fill: currentColor; }
2996
-
2997
- /* animations */
2998
- @-webkit-keyframes scale-up-br {
2999
- 0% {
3000
- transform: scale(0.5);
3001
- transform-origin: 100% 100%; }
3002
- 100% {
3003
- transform: scale(1);
3004
- transform-origin: 100% 100%; } }
3005
- @keyframes scale-up-br {
3006
- 0% {
3007
- transform: scale(0.5);
3008
- transform-origin: 100% 100%; }
3009
- 100% {
3010
- transform: scale(1);
3011
- transform-origin: 100% 100%; } }
3012
-
3013
- @-webkit-keyframes scale-up-bl {
3014
- 0% {
3015
- transform: scale(0.5);
3016
- transform-origin: 0% 100%; }
3017
- 100% {
3018
- transform: scale(1);
3019
- transform-origin: 0% 100%; } }
3020
-
3021
- @keyframes scale-up-bl {
3022
- 0% {
3023
- transform: scale(0.5);
3024
- transform-origin: 0% 100%; }
3025
- 100% {
3026
- transform: scale(1);
3027
- transform-origin: 0% 100%; } }
3028
-
3029
- .react-autoql-filter-locking-title-container {
3030
- display: inline-block;
3031
- width: 100%;
3032
- padding-top: 4px;
3033
- padding-left: 6px; }
3034
- .react-autoql-filter-locking-title-container h3 {
3035
- width: 95%;
3036
- float: left;
3037
- color: var(--react-autoql-text-color-primary);
3038
- margin-bottom: 0;
3039
- display: block;
3040
- font-size: 1.17em !important;
3041
- font-weight: bold; }
3042
- .react-autoql-filter-locking-title-container h3 span {
3043
- color: var(--react-autoql-accent-color); }
3044
- .react-autoql-filter-locking-title-container button {
3045
- width: 5%;
3046
- float: right; }
3047
- .react-autoql-filter-locking-title-container button :hover {
3048
- cursor: pointer;
3049
- color: var(--react-autoql-hover-color); }
3050
-
3051
- .react-autoql-filter-locking-empty-list {
3052
- color: var(--react-autoql-text-color-primary);
3053
- background-color: var(--react-autoql-background-color-secondary);
3054
- border-radius: 5px;
3055
- padding: 2px 6px 2px 6px;
3056
- margin: 4px 10px 4px 10px;
3057
- display: inline-block;
3058
- position: absolute;
3059
- top: 20px;
3060
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4);
3061
- z-index: 999999; }
3062
- .react-autoql-filter-locking-empty-list span {
3063
- color: var(--react-autoql-accent-color); }
3064
- .react-autoql-filter-locking-empty-list p {
3065
- width: 96%;
3066
- float: right;
3067
- margin-bottom: 0; }
3068
-
3069
- .react-autoql-condition-locking-input {
3070
- padding: 5px;
3071
- padding-left: 20px;
3072
- margin: 8px;
3073
- height: 32px;
3074
- box-sizing: border-box;
3075
- border-radius: 24px;
3076
- font-size: 12px;
3077
- font-family: inherit;
3078
- letter-spacing: 0.04em;
3079
- outline: none !important;
3080
- width: calc(100% - 20px);
3081
- font-family: inherit;
3082
- /* Default styles outside of data messenger */
3083
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3084
- background: var(--react-autoql-background-color-secondary);
3085
- color: var(--react-autoql-text-color-primary); }
3086
- .react-autoql-condition-locking-input::-moz-placeholder {
3087
- color: var(--react-autoql-text-color-placeholder) !important; }
3088
- .react-autoql-condition-locking-input:-ms-input-placeholder {
3089
- color: var(--react-autoql-text-color-placeholder) !important; }
3090
- .react-autoql-condition-locking-input::placeholder {
3091
- color: var(--react-autoql-text-color-placeholder) !important; }
3092
-
3093
- .react-autoql-condition-locking-input:hover {
3094
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
3095
-
3096
- .react-autoql-condition-table {
3097
- min-width: 95%;
3098
- margin: 10px auto; }
3099
-
3100
- .react-autoql-condition-table thead {
3101
- padding-left: 10px; }
3102
-
3103
- .react-autoql-condition-table th {
3104
- text-align: left;
3105
- padding: 4px;
3106
- margin: 0 10px 0 10px;
3107
- font-weight: 800; }
3108
- .react-autoql-condition-table th span {
3109
- color: var(--react-autoql-accent-color); }
3110
-
3111
- .react-autoql-condition-table .react-autoql-condition-table-list-item {
3112
- text-overflow: ellipsis;
3113
- white-space: nowrap;
3114
- overflow: hidden; }
3115
-
3116
- .react-autoql-condition-lock-menu-footer {
3117
- bottom: 0;
3118
- right: 0; }
3119
- .react-autoql-condition-lock-menu-footer button {
3120
- float: right;
3121
- margin: 6px !important; }
3122
-
3123
- .react-autoql-condition-lock-menu-footer {
3124
- bottom: 0;
3125
- right: 0; }
3126
- .react-autoql-condition-lock-menu-footer button {
3127
- float: right;
3128
- margin: 6px !important; }
3129
-
3130
- .react-autoql-accept-conditions-button {
3131
- text-align: right;
3132
- margin-bottom: 12px;
3133
- padding-right: 10px;
3134
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
3135
- transition: color 0.1s ease; }
3136
- .react-autoql-accept-conditions-button span {
3137
- opacity: 0.8;
3138
- cursor: pointer; }
3139
- .react-autoql-accept-conditions-button span:hover {
3140
- opacity: 1; }
3141
-
3142
- .react-autoql-condition-table td {
3143
- text-align: left;
3144
- padding: 4px;
3145
- margin: 0 10px 0 10px;
3146
- padding-left: 10px; }
3289
+ .chat-single-message-container.response .chat-message-bubble:not(.text) {
3290
+ min-width: 125px;
3291
+ padding-bottom: 15px; }
3147
3292
 
3148
- .react-autoql-condition-list {
3149
- padding: 0;
3150
- margin: 0 auto;
3151
- overflow-y: scroll;
3152
- min-height: 182px; }
3293
+ .chat-single-message-container.request .chat-message-bubble {
3294
+ background: var(--react-autoql-accent-color);
3295
+ color: white;
3296
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
3153
3297
 
3154
- .react-autoql-condition-list-loading-container {
3155
- display: flex;
3156
- height: 180px;
3157
- width: 100%;
3158
- padding: 20px;
3159
- align-items: center;
3160
- justify-content: center; }
3298
+ /* Increase height of message to include table filters,
3299
+ so we dont have to redraw the whole table */
3300
+ .chat-single-message-container.response.filtering-table {
3301
+ max-height: calc(85% + 35px) !important; }
3161
3302
 
3162
- .react-autoql-empty-condition-list {
3163
- text-align: center;
3164
- padding: 20px;
3165
- height: 140px; }
3166
- .react-autoql-empty-condition-list p {
3167
- margin-top: 20px !important;
3168
- vertical-align: middle; }
3303
+ .chat-message-toolbar,
3304
+ .chat-message-toolbar.autoql-options-toolbar {
3305
+ display: none;
3306
+ position: absolute;
3307
+ background: inherit;
3308
+ top: -31px;
3309
+ padding: 5px;
3310
+ border-radius: 6px;
3311
+ line-height: 28px;
3312
+ background: var(--react-autoql-background-color-primary);
3313
+ border: 1px solid var(--react-autoql-border-color);
3314
+ color: var(--react-autoql-accent-color); }
3169
3315
 
3170
- .autoql-close-button {
3171
- background-color: inherit;
3172
- border: none;
3173
- text-align: left;
3174
- font-size: 20px;
3175
- margin-top: -20px;
3176
- float: none !important;
3177
- color: inherit; }
3316
+ .chat-message-toolbar.right {
3317
+ right: -9px; }
3178
3318
 
3179
- .react-tiny-popover-container {
3180
- background: var(--react-autoql-background-color-primary); }
3319
+ .chat-message-toolbar.left {
3320
+ left: -9px; }
3181
3321
 
3182
- .autoql-condition-locking-menu-container .react-autosuggest__container {
3183
- flex-grow: 1;
3184
- display: inline;
3185
- width: 90%;
3186
- height: 100%; }
3322
+ .chat-message-bubble:hover .chat-message-toolbar,
3323
+ .chat-message-bubble .chat-message-toolbar.active {
3324
+ display: block; }
3187
3325
 
3188
- .autoql-condition-locking-menu-container
3189
- .react-autosuggest__suggestions-container--open {
3190
- background-color: var(--react-autoql-background-color-primary);
3191
- border: 1px solid var(--react-autoql-border-color);
3192
- color: var(--react-autoql-text-color-primary);
3193
- position: absolute;
3194
- top: unset;
3195
- bottom: unset;
3196
- overflow-y: scroll !important;
3197
- padding-top: 5px;
3198
- padding-bottom: 5px;
3199
- display: block;
3200
- font-family: inherit;
3201
- font-size: 15px;
3202
- font-weight: normal;
3203
- z-index: 2;
3204
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
3205
- text-align: left;
3326
+ .report-problem-text-area {
3206
3327
  border-radius: 4px;
3207
- margin: -8px auto;
3208
- height: auto;
3209
- max-height: 80vh;
3210
- overflow-y: scroll !important;
3211
- transform: translateX(4%);
3212
- width: 92% !important; }
3328
+ border: 1px solid rgba(0, 0, 0, 0.15);
3329
+ margin-top: 10px;
3330
+ padding: 5px 10px;
3331
+ outline: none !important; }
3213
3332
 
3214
- .autoql-condition-locking-menu-list {
3215
- table-layout: fixed;
3216
- width: 100%; }
3333
+ .data-limit-warning-icon {
3334
+ color: var(--react-autoql-warning-color) !important;
3335
+ position: absolute !important;
3336
+ bottom: 2px;
3337
+ right: 4px;
3338
+ font-size: 20px; }
3217
3339
 
3218
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
3219
- color: var(--react-autoql-text-color-primary); }
3340
+ .condition-info-icon-left-align {
3341
+ color: var(--react-autoql-accent-color) !important;
3342
+ position: absolute !important;
3343
+ bottom: 2px;
3344
+ right: 10px;
3345
+ font-size: 20px; }
3220
3346
 
3221
- .autoql-condition-locking-menu-container input::-moz-placeholder {
3222
- opacity: 0.5; }
3347
+ .condition-info-icon {
3348
+ color: var(--react-autoql-accent-color) !important;
3349
+ position: absolute !important;
3350
+ bottom: 2px;
3351
+ right: 4px;
3352
+ font-size: 20px; }
3223
3353
 
3224
- .autoql-condition-locking-menu-container input:-ms-input-placeholder {
3225
- opacity: 0.5; }
3354
+ .more-options-menu,
3355
+ .report-problem-menu {
3356
+ background: var(--react-autoql-background-color-primary);
3357
+ padding: 10px 0; }
3358
+ .more-options-menu span.react-autoql-icon svg,
3359
+ .report-problem-menu span.react-autoql-icon svg {
3360
+ margin-right: 3px; }
3226
3361
 
3227
- .autoql-condition-locking-menu-container input::placeholder {
3228
- opacity: 0.5; }
3362
+ .interpretation-icon {
3363
+ vertical-align: top;
3364
+ height: 26px;
3365
+ margin: 0 3px;
3366
+ font-size: 18px; }
3229
3367
 
3230
- .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
3231
- margin: 0;
3232
- padding: 0;
3233
- list-style-type: none; }
3368
+ /* Chart icon styles */
3369
+ .chart-icon-svg-0,
3370
+ .react-autoql-icon-svg-0 {
3371
+ fill: currentColor; }
3234
3372
 
3235
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
3236
- cursor: pointer;
3237
- padding: 2px;
3238
- padding-left: 18px;
3239
- letter-spacing: 0.05em;
3240
- line-height: 22.5px; }
3373
+ .hm0 {
3374
+ opacity: 0.5;
3375
+ fill: currentColor;
3376
+ enable-background: new; }
3241
3377
 
3242
- .autoql-condition-locking-menu-container
3243
- .react-autosuggest__suggestion--highlighted {
3244
- background-color: rgba(0, 0, 0, 0.1) !important; }
3378
+ .hm1 {
3379
+ fill: currentColor; }
3245
3380
 
3246
- .autoql-condition-locking-menu-container .react-autosuggest__section-title {
3247
- padding: 10px 0 0 10px;
3248
- font-size: 12px;
3249
- color: #777; }
3381
+ .hm2 {
3382
+ opacity: 0.15;
3383
+ fill: currentColor;
3384
+ enable-background: new; }
3250
3385
 
3251
- .react-autoql-filter-setting-info-card {
3252
- color: var(--react-autoql-text-color-primary);
3253
- background-color: var(--react-autoql-background-color-secondary);
3254
- border-radius: 5px;
3255
- padding: 2px 6px 2px 6px;
3256
- margin: 4px 10px 4px 10px;
3257
- display: inline-block;
3258
- position: absolute;
3259
- top: 40px;
3260
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4);
3261
- z-index: 9999; }
3262
- .react-autoql-filter-setting-info-card span {
3263
- color: var(--react-autoql-accent-color); }
3264
- .react-autoql-filter-setting-info-card p {
3265
- margin-bottom: 0 !important; }
3266
- .react-autoql-filter-setting-info-card p span {
3267
- color: var(--react-autoql-accent-color); }
3386
+ .hm3 {
3387
+ opacity: 0.6;
3388
+ fill: currentColor;
3389
+ enable-background: new; }
3268
3390
 
3269
- #react-autoql-condition-show-message {
3270
- visibility: hidden;
3271
- min-width: 200px;
3272
- line-height: 1 !important;
3273
- font-size: 14px !important;
3274
- background-color: var(--react-autoql-background-color-secondary);
3275
- text-align: center;
3276
- border-radius: 4px;
3277
- padding: 6px;
3278
- position: fixed;
3279
- top: 20px;
3280
- display: block;
3281
- z-index: 999999999;
3282
- transform: translateX(85%);
3283
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
3284
- #react-autoql-condition-show-message span {
3285
- color: var(--react-autoql-accent-color); }
3391
+ .hm4 {
3392
+ opacity: 0.65;
3393
+ fill: currentColor;
3394
+ enable-background: new; }
3286
3395
 
3287
- #react-autoql-condition-show-message.show {
3288
- visibility: visible;
3289
- -webkit-animation: snackbarFadein 1s, snackbarFadeout 1s 2s;
3290
- animation: snackbarFadein 1s, snackbarFadeout 1s 2s; }
3396
+ .hm5 {
3397
+ fill: currentColor; }
3291
3398
 
3292
- @-webkit-keyframes snackbarFadein {
3293
- from {
3294
- top: 0;
3295
- opacity: 0; }
3296
- to {
3297
- top: 20px;
3298
- opacity: 1; } }
3399
+ .hm6 {
3400
+ fill: currentColor; }
3299
3401
 
3300
- @keyframes snackbarFadein {
3301
- from {
3302
- top: 0;
3303
- opacity: 0; }
3304
- to {
3305
- top: 20px;
3306
- opacity: 1; } }
3402
+ /* animations */
3403
+ @-webkit-keyframes scale-up-br {
3404
+ 0% {
3405
+ transform: scale(0.5);
3406
+ transform-origin: 100% 100%; }
3407
+ 100% {
3408
+ transform: scale(1);
3409
+ transform-origin: 100% 100%; } }
3410
+ @keyframes scale-up-br {
3411
+ 0% {
3412
+ transform: scale(0.5);
3413
+ transform-origin: 100% 100%; }
3414
+ 100% {
3415
+ transform: scale(1);
3416
+ transform-origin: 100% 100%; } }
3307
3417
 
3308
- @-webkit-keyframes snackbarFadeout {
3309
- from {
3310
- top: 20px;
3311
- opacity: 1; }
3312
- to {
3313
- top: 0;
3314
- opacity: 0; } }
3418
+ @-webkit-keyframes scale-up-bl {
3419
+ 0% {
3420
+ transform: scale(0.5);
3421
+ transform-origin: 0% 100%; }
3422
+ 100% {
3423
+ transform: scale(1);
3424
+ transform-origin: 0% 100%; } }
3315
3425
 
3316
- @keyframes snackbarFadeout {
3317
- from {
3318
- top: 20px;
3319
- opacity: 1; }
3320
- to {
3321
- top: 0;
3322
- opacity: 0; } }
3426
+ @keyframes scale-up-bl {
3427
+ 0% {
3428
+ transform: scale(0.5);
3429
+ transform-origin: 0% 100%; }
3430
+ 100% {
3431
+ transform: scale(1);
3432
+ transform-origin: 0% 100%; } }
3323
3433
 
3324
3434
  .react-autoql-chart-container {
3325
3435
  position: relative;
@@ -3420,58 +3530,6 @@ so we dont have to redraw the whole table */
3420
3530
  background: var(--react-autoql-background-color-primary);
3421
3531
  padding: 5px; }
3422
3532
 
3423
-
3424
- .react-autoql-input-container {
3425
- position: relative;
3426
- margin: 2px 5px;
3427
- display: inline-block; }
3428
- .react-autoql-input-container .react-autoql-input {
3429
- border: 1px solid rgba(0, 0, 0, 0.1);
3430
- border-radius: 4px;
3431
- line-height: 32px;
3432
- min-height: 34px;
3433
- padding: 0 10px;
3434
- width: 100%;
3435
- outline: none !important;
3436
- transition: all 0.2s ease;
3437
- transition-property: border-color, color, opacity; }
3438
- .react-autoql-input-container .react-autoql-input.with-icon {
3439
- padding-left: 38px; }
3440
- .react-autoql-input-container .react-autoql-input::-moz-placeholder {
3441
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3442
- color: rgba(0, 0, 0, 0.2);
3443
- opacity: 1;
3444
- /* Firefox */
3445
- font-style: italic; }
3446
- .react-autoql-input-container .react-autoql-input:-ms-input-placeholder {
3447
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3448
- color: rgba(0, 0, 0, 0.2);
3449
- opacity: 1;
3450
- /* Firefox */
3451
- font-style: italic; }
3452
- .react-autoql-input-container .react-autoql-input::placeholder {
3453
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3454
- color: rgba(0, 0, 0, 0.2);
3455
- opacity: 1;
3456
- /* Firefox */
3457
- font-style: italic; }
3458
- .react-autoql-input-container .react-autoql-input-icon {
3459
- position: absolute;
3460
- left: 12px;
3461
- top: 8px;
3462
- opacity: 0.4;
3463
- transition: all 0.2s ease; }
3464
- .react-autoql-input-container .react-autoql-input-icon span.react-autoql-icon svg {
3465
- height: 17px;
3466
- width: 17px; }
3467
- .react-autoql-input-container:hover .react-autoql-input,
3468
- .react-autoql-input-container .react-autoql-input:focus {
3469
- border-color: var(--react-autoql-accent-color, #26a7df); }
3470
- .react-autoql-input-container:hover .react-autoql-input-icon,
3471
- .react-autoql-input-container .react-autoql-input-icon.focus {
3472
- opacity: 1;
3473
- color: var(--react-autoql-accent-color, #26a7df); }
3474
-
3475
3533
  .react-autoql-steps-container {
3476
3534
  margin: 10px; }
3477
3535
 
@@ -3541,36 +3599,57 @@ so we dont have to redraw the whole table */
3541
3599
  transition-duration: 0.5s;
3542
3600
  opacity: 1; }
3543
3601
 
3544
- .viz-toolbar {
3545
- position: absolute;
3546
- background: inherit;
3547
- padding: 5px;
3548
- border-radius: 6px;
3549
- line-height: 28px;
3550
- border: 1px solid #d3d3d352; }
3551
- .viz-toolbar.vertical .react-autoql-toolbar-btn {
3552
- display: block; }
3553
-
3554
- .react-autoql-toolbar-btn {
3555
- height: 28px;
3556
- width: 28px;
3557
- background: none;
3558
- border: none;
3559
- font-size: 16px;
3560
- line-height: 28px;
3561
- vertical-align: top;
3562
- color: var(--react-autoql-accent-color);
3563
- cursor: pointer;
3564
- outline: none !important; }
3565
-
3566
- .react-autoql-toolbar-btn.green {
3567
- color: #2ecc40; }
3568
-
3569
- .react-autoql-toolbar-btn.red {
3570
- color: #e80000; }
3602
+ .react-autoql-input-container {
3603
+ position: relative;
3604
+ margin: 2px 5px;
3605
+ display: inline-block; }
3606
+ .react-autoql-input-container .react-autoql-input {
3607
+ border: 1px solid rgba(0, 0, 0, 0.1);
3608
+ border-radius: 4px;
3609
+ line-height: 32px;
3610
+ min-height: 34px;
3611
+ padding: 0 10px;
3612
+ width: 100%;
3613
+ outline: none !important;
3614
+ transition: all 0.2s ease;
3615
+ transition-property: border-color, color, opacity; }
3616
+ .react-autoql-input-container .react-autoql-input.with-icon {
3617
+ padding-left: 38px; }
3618
+ .react-autoql-input-container .react-autoql-input::-moz-placeholder {
3619
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3620
+ color: rgba(0, 0, 0, 0.2);
3621
+ opacity: 1;
3622
+ /* Firefox */
3623
+ font-style: italic; }
3624
+ .react-autoql-input-container .react-autoql-input:-ms-input-placeholder {
3625
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3626
+ color: rgba(0, 0, 0, 0.2);
3627
+ opacity: 1;
3628
+ /* Firefox */
3629
+ font-style: italic; }
3630
+ .react-autoql-input-container .react-autoql-input::placeholder {
3631
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3632
+ color: rgba(0, 0, 0, 0.2);
3633
+ opacity: 1;
3634
+ /* Firefox */
3635
+ font-style: italic; }
3636
+ .react-autoql-input-container .react-autoql-input-icon {
3637
+ position: absolute;
3638
+ left: 12px;
3639
+ top: 8px;
3640
+ opacity: 0.4;
3641
+ transition: all 0.2s ease; }
3642
+ .react-autoql-input-container .react-autoql-input-icon span.react-autoql-icon svg {
3643
+ height: 17px;
3644
+ width: 17px; }
3645
+ .react-autoql-input-container:hover .react-autoql-input,
3646
+ .react-autoql-input-container .react-autoql-input:focus {
3647
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3648
+ .react-autoql-input-container:hover .react-autoql-input-icon,
3649
+ .react-autoql-input-container .react-autoql-input-icon.focus {
3650
+ opacity: 1;
3651
+ color: var(--react-autoql-accent-color, #26a7df); }
3571
3652
 
3572
- .react-autoql-toolbar-btn:hover {
3573
- opacity: 0.7; }
3574
3653
 
3575
3654
  .react-autoql-radio-btn-container {
3576
3655
  display: inline-block;
@@ -3775,6 +3854,37 @@ so we dont have to redraw the whole table */
3775
3854
  .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
3776
3855
  background: var(--react-autoql-accent-color); }
3777
3856
 
3857
+ .viz-toolbar {
3858
+ position: absolute;
3859
+ background: inherit;
3860
+ padding: 5px;
3861
+ border-radius: 6px;
3862
+ line-height: 28px;
3863
+ border: 1px solid #d3d3d352; }
3864
+ .viz-toolbar.vertical .react-autoql-toolbar-btn {
3865
+ display: block; }
3866
+
3867
+ .react-autoql-toolbar-btn {
3868
+ height: 28px;
3869
+ width: 28px;
3870
+ background: none;
3871
+ border: none;
3872
+ font-size: 16px;
3873
+ line-height: 28px;
3874
+ vertical-align: top;
3875
+ color: var(--react-autoql-accent-color);
3876
+ cursor: pointer;
3877
+ outline: none !important; }
3878
+
3879
+ .react-autoql-toolbar-btn.green {
3880
+ color: #2ecc40; }
3881
+
3882
+ .react-autoql-toolbar-btn.red {
3883
+ color: #e80000; }
3884
+
3885
+ .react-autoql-toolbar-btn:hover {
3886
+ opacity: 0.7; }
3887
+
3778
3888
  .notification-read-only-group {
3779
3889
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3780
3890
  border-radius: 4px;
@@ -3946,7 +4056,6 @@ so we dont have to redraw the whole table */
3946
4056
  padding: 0 10px;
3947
4057
  color: var(--react-autoql-warning-color); }
3948
4058
 
3949
-
3950
4059
  .spinner-loader {
3951
4060
  display: inline-block;
3952
4061
  width: 14px;
@@ -3977,45 +4086,6 @@ so we dont have to redraw the whole table */
3977
4086
  100% {
3978
4087
  transform: rotate(360deg); } }
3979
4088
 
3980
-
3981
- .react-autoql-select {
3982
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3983
- border-radius: 4px;
3984
- background: var(--react-autoql-background-color-primary, white);
3985
- display: inline-block;
3986
- font-size: 13px;
3987
- line-height: 32px;
3988
- height: 34px;
3989
- margin: 0 3px;
3990
- padding: 0 11px;
3991
- color: var(--react-autoql-accent-color, #26a7df);
3992
- transition: all 0.2s ease;
3993
- cursor: pointer; }
3994
- .react-autoql-select:hover {
3995
- border-color: var(--react-autoql-accent-color, #26a7df); }
3996
-
3997
- .react-autoql-select-popup-container {
3998
- background: var(--react-autoql-background-color-primary, white);
3999
- padding: 10px 0;
4000
- max-height: 300px;
4001
- overflow-y: auto; }
4002
- .react-autoql-select-popup-container .react-autoql-select-option.active {
4003
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
4004
- .react-autoql-select-popup-container .react-autoql-select-popup {
4005
- list-style-type: none;
4006
- width: 100%;
4007
- margin: 0;
4008
- padding: 0; }
4009
- .react-autoql-select-popup-container .react-autoql-select-popup li {
4010
- color: var(--react-autoql-text-color-primary);
4011
- width: 100%;
4012
- height: 35px;
4013
- line-height: 35px;
4014
- padding: 0 20px;
4015
- cursor: pointer; }
4016
- .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
4017
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
4018
-
4019
4089
  .slack-modal-error-container,
4020
4090
  .slack-modal-empty-list-message {
4021
4091
  display: flex;
@@ -4161,6 +4231,46 @@ so we dont have to redraw the whole table */
4161
4231
  .slack-channel-list-container .connect-channel-btn button {
4162
4232
  width: 200px; }
4163
4233
 
4234
+
4235
+
4236
+ .react-autoql-select {
4237
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
4238
+ border-radius: 4px;
4239
+ background: var(--react-autoql-background-color-primary, white);
4240
+ display: inline-block;
4241
+ font-size: 13px;
4242
+ line-height: 32px;
4243
+ height: 34px;
4244
+ margin: 0 3px;
4245
+ padding: 0 11px;
4246
+ color: var(--react-autoql-accent-color, #26a7df);
4247
+ transition: all 0.2s ease;
4248
+ cursor: pointer; }
4249
+ .react-autoql-select:hover {
4250
+ border-color: var(--react-autoql-accent-color, #26a7df); }
4251
+
4252
+ .react-autoql-select-popup-container {
4253
+ background: var(--react-autoql-background-color-primary, white);
4254
+ padding: 10px 0;
4255
+ max-height: 300px;
4256
+ overflow-y: auto; }
4257
+ .react-autoql-select-popup-container .react-autoql-select-option.active {
4258
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
4259
+ .react-autoql-select-popup-container .react-autoql-select-popup {
4260
+ list-style-type: none;
4261
+ width: 100%;
4262
+ margin: 0;
4263
+ padding: 0; }
4264
+ .react-autoql-select-popup-container .react-autoql-select-popup li {
4265
+ color: var(--react-autoql-text-color-primary);
4266
+ width: 100%;
4267
+ height: 35px;
4268
+ line-height: 35px;
4269
+ padding: 0 20px;
4270
+ cursor: pointer; }
4271
+ .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
4272
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
4273
+
4164
4274
  .react-autoql-list-item {
4165
4275
  padding: 0 20px;
4166
4276
  display: flex;