react-autoql 3.4.3 → 3.4.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,218 +1,263 @@
1
- .react-autoql-bar-container {
1
+ .react-autoql-response-content-container:not(.html-content) {
2
2
  position: relative;
3
3
  display: flex;
4
- flex-direction: row; }
4
+ flex-direction: column;
5
+ justify-content: center;
6
+ align-items: center;
7
+ background-color: inherit;
8
+ font-size: 14px;
9
+ height: 100%;
10
+ width: 100%;
11
+ overflow: hidden;
12
+ color: var(--react-autoql-text-color-primary); }
5
13
 
6
- .react-autoql-chatbar-input {
7
- padding: 10px;
8
- padding-left: 20px;
9
- margin: 10px;
10
- height: 42px;
11
- box-sizing: border-box;
12
- border-radius: 24px;
13
- font-size: 16px;
14
+ .react-autoql-response-content-container.html-content {
15
+ position: relative;
16
+ background-color: inherit;
17
+ text-align: left;
18
+ font-size: 14px;
19
+ height: 100%;
20
+ width: 100%;
21
+ overflow: hidden;
22
+ color: var(--react-autoql-text-color-primary); }
23
+ .react-autoql-response-content-container.html-content table th {
24
+ border-bottom: 2px solid var(--react-autoql-border-color); }
25
+ .react-autoql-response-content-container.html-content table tr:not(:last-child) {
26
+ border-bottom: 1px solid var(--react-autoql-border-color); }
27
+ .react-autoql-response-content-container.html-content table td:not(:last-child) {
28
+ border-right: 1px solid var(--react-autoql-border-color); }
29
+ .react-autoql-response-content-container.html-content table th,
30
+ .react-autoql-response-content-container.html-content table td {
31
+ padding: 5px 10px; }
32
+ .react-autoql-response-content-container.html-content * {
33
+ font-size: inherit; }
34
+ .react-autoql-response-content-container.html-content sup,
35
+ .react-autoql-response-content-container.html-content sub {
36
+ font-size: 10px; }
37
+ .react-autoql-response-content-container.html-content > *:first-child {
38
+ margin-top: 0 !important; }
39
+ .react-autoql-response-content-container.html-content > *:last-child {
40
+ margin-bottom: 0 !important; }
41
+ .react-autoql-response-content-container.html-content caption {
42
+ display: table-caption;
43
+ text-align: -webkit-center;
44
+ padding-top: unset;
45
+ padding-bottom: unset;
46
+ color: unset;
47
+ text-align: unset;
48
+ caption-side: unset; }
49
+
50
+ .react-autoql-response-content-container.table {
51
+ max-height: 100vh !important;
52
+ overflow-y: scroll;
53
+ scrollbar-width: none; }
54
+
55
+ .react-autoql-response-content-container.table::-webkit-scrollbar {
56
+ width: 0;
57
+ height: 0; }
58
+
59
+ .react-autoql-suggestion-btn {
60
+ padding: 6px 14px;
61
+ background: transparent;
14
62
  font-family: inherit;
15
- letter-spacing: 0.04em;
63
+ font-size: 12px;
64
+ margin-bottom: 5px;
16
65
  outline: none !important;
17
- width: calc(100% - 20px);
18
- font-family: inherit;
19
- /* Default styles outside of data messenger */
20
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
21
- background: var(--react-autoql-background-color-primary);
22
- color: #5d5d5d; }
66
+ cursor: pointer;
67
+ letter-spacing: 0.05em;
68
+ transition: all 0.1s ease;
69
+ border: 1px solid rgba(0, 0, 0, 0.15);
70
+ border-radius: 5px;
71
+ color: inherit; }
23
72
 
24
- .react-autoql-chatbar-input.left-padding {
25
- padding-left: 54px; }
73
+ .react-autoql-suggestion-btn:hover {
74
+ border-color: transparent;
75
+ color: white;
76
+ background: var(--react-autoql-accent-color); }
26
77
 
27
- .react-autoql-chatbar-input:disabled {
28
- background: rgba(0, 0, 0, 0.03); }
78
+ .react-autoql-help-link-btn {
79
+ padding: 6px 14px;
80
+ background: transparent;
81
+ border-radius: 5px;
82
+ font-family: inherit;
83
+ font-size: 12px;
84
+ margin-top: 5px;
85
+ outline: none !important;
86
+ cursor: pointer;
87
+ letter-spacing: 0.05em;
88
+ transition: all 0.1s ease;
89
+ border-color: #e2e2e26e;
90
+ color: inherit; }
29
91
 
30
- .react-autoql-chatbar-input:not(:disabled):hover {
31
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
92
+ .react-autoql-help-link-btn:hover {
93
+ opacity: 0.7; }
32
94
 
33
- .react-autoql-chatbar-input::-moz-placeholder {
34
- /* Default color outside of data messenger */
35
- color: #999 !important; }
95
+ .react-autoql-help-link-icon {
96
+ width: 15px;
97
+ height: 15px;
98
+ margin-bottom: -3px;
99
+ margin-right: 3px; }
36
100
 
37
- .react-autoql-chatbar-input:-ms-input-placeholder {
38
- /* Default color outside of data messenger */
39
- color: #999 !important; }
101
+ .qanda-positive-feedback-checkmark.react-autoql-icon svg {
102
+ color: var(--react-autoql-success-color); }
40
103
 
41
- .react-autoql-chatbar-input::placeholder {
42
- /* Default color outside of data messenger */
43
- color: #999 !important; }
104
+ .react-autoql-suggestion-message {
105
+ height: 100%;
106
+ width: 100%;
107
+ word-break: break-word; }
44
108
 
45
- /* autosuggest */
46
- .react-autoql-bar-container .react-autosuggest__container,
47
- .react-autoql-chatbar-input-container {
109
+ .react-autoql-suggestions-select {
48
110
  position: relative;
49
- flex: 1; }
111
+ display: inline-block;
112
+ height: 30px;
113
+ background: none;
114
+ outline: none !important;
115
+ border: 1px solid;
116
+ font-family: inherit;
117
+ letter-spacing: 0.05em;
118
+ color: #28a8e0;
119
+ cursor: pointer;
120
+ font-size: inherit; }
50
121
 
51
- .react-autoql-bar-container .react-autosuggest__input--focused {
52
- outline: none; }
122
+ .no-columns-error-message {
123
+ position: absolute;
124
+ height: 100%;
125
+ width: 100%;
126
+ display: flex;
127
+ justify-content: center;
128
+ flex-direction: column;
129
+ text-align: center;
130
+ padding: 20px;
131
+ font-size: 13px; }
132
+ .no-columns-error-message .warning-icon {
133
+ font-size: 22px;
134
+ display: block;
135
+ margin-bottom: -13px;
136
+ text-align: center; }
137
+ .no-columns-error-message .eye-icon {
138
+ vertical-align: bottom;
139
+ line-height: 18px; }
53
140
 
54
- .react-autoql-bar-container .react-autosuggest__input::-ms-clear {
55
- display: none; }
141
+ /* query validation */
142
+ .react-autoql-query-validation-selector-container {
143
+ display: inline-block;
144
+ position: relative; }
56
145
 
57
- .react-autoql-bar-container .react-autosuggest__suggestions-container {
58
- display: none; }
146
+ .react-autoql-select-popup-container.query-validation-select {
147
+ padding: 5px 0;
148
+ letter-spacing: 0.03em;
149
+ font-family: var(--react-autoql-font-family), sans-serif; }
150
+ .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option {
151
+ height: unset;
152
+ font-size: 14px;
153
+ line-height: 24px;
154
+ padding: 0 15px; }
155
+ .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option:last-of-type {
156
+ color: #d84830; }
59
157
 
60
- .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
61
- position: absolute;
62
- top: 45px;
63
- bottom: unset;
64
- margin: 10px;
65
- padding-top: 5px;
66
- padding-bottom: 5px;
67
- display: block;
68
- width: calc(100% - 20px);
69
- height: unset;
70
- border-radius: 24px;
71
- font-family: inherit;
72
- font-size: 15px;
73
- font-weight: normal;
74
- z-index: 2;
75
- overflow: hidden;
76
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
77
- /* Default styles outside of data messenger */
78
- background-color: white;
79
- color: #5d5d5d; }
158
+ .react-autoql-query-validation-query {
159
+ text-align: center; }
80
160
 
81
- .react-autoql-bar-container.autosuggest-top
82
- .react-autosuggest__suggestions-container--open {
83
- top: unset;
84
- bottom: 45px; }
161
+ .react-autoql-query-validation-execute-btn {
162
+ height: 38px;
163
+ background: none;
164
+ border-radius: 4px;
165
+ margin-top: 24px;
166
+ width: 100%;
167
+ color: inherit;
168
+ cursor: pointer;
169
+ outline: none !important;
170
+ border-color: #e2e2e26e;
171
+ transition: all 0.2s ease; }
85
172
 
86
- .react-autoql-bar-container.autosuggest-bottom
87
- .react-autosuggest__suggestions-container--open {
88
- top: 45px;
89
- bottom: unset; }
173
+ .react-autoql-query-validation-execute-btn:hover {
174
+ border-color: #28a8e0; }
90
175
 
91
- .react-autoql-bar-container .react-autosuggest__suggestions-list {
176
+ .react-autoql-execute-query-icon {
177
+ font-size: 16px;
178
+ vertical-align: middle !important;
179
+ padding-right: 3px !important; }
180
+ .react-autoql-execute-query-icon span.react-autoql-icon svg {
181
+ height: 19px;
182
+ width: 19px;
183
+ margin-top: 3px;
184
+ margin-right: 4px;
185
+ vertical-align: top;
186
+ fill: var(--react-autoql-accent-color); }
187
+
188
+ .react-autoql-query-validation-select {
189
+ position: relative;
190
+ display: inline-block;
191
+ height: 2em;
192
+ background: none;
193
+ outline: none !important;
194
+ border: none;
195
+ letter-spacing: 0.05em;
196
+ font-family: inherit;
197
+ font-size: inherit;
92
198
  margin: 0;
93
199
  padding: 0;
94
- list-style-type: none; }
200
+ border-radius: 0;
201
+ border-bottom: 1px dashed;
202
+ color: var(--react-autoql-accent-color); }
95
203
 
96
- /* Autocomplete styles */
97
- .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
98
- background-color: var(--react-autoql-background-color-primary);
99
- border: 1px solid var(--react-autoql-border-color);
100
- color: var(--react-autoql-text-color-primary); }
101
-
102
- .react-autoql-bar-container .react-autosuggest__suggestion {
103
- color: var(--react-autoql-text-color-primary); }
104
-
105
- .react-autoql-chatbar-input {
106
- border: 1px solid var(--react-autoql-border-color);
107
- color: var(--react-autoql-text-color-primary); }
108
-
109
- .react-autoql-chatbar-input::-moz-placeholder {
110
- color: var(--react-autoql-text-color-placeholder); }
111
-
112
- .react-autoql-chatbar-input:-ms-input-placeholder {
113
- color: var(--react-autoql-text-color-placeholder); }
114
-
115
- .react-autoql-chatbar-input::placeholder {
116
- color: var(--react-autoql-text-color-placeholder); }
117
-
118
- .react-autoql-bar-container .react-autosuggest__suggestion {
119
- cursor: pointer;
120
- padding: 2px;
121
- padding-left: 18px;
122
- letter-spacing: 0.05em;
123
- line-height: 22.5px; }
124
-
125
- .react-autoql-bar-container .react-autosuggest__suggestion--highlighted {
126
- background-color: rgba(0, 0, 0, 0.1) !important; }
127
-
128
- .react-autoql-bar-container .react-autosuggest__section-title {
129
- padding: 10px 0 0 10px;
130
- font-size: 12px;
131
- color: #777; }
132
-
133
- .input-response-loading-container {
134
- position: absolute;
135
- right: 23px;
136
- top: -2px; }
137
-
138
- .chat-bar-input-icon {
139
- position: absolute;
140
- color: #28a8e0;
141
- font-size: 20px;
142
- left: 30px;
143
- top: 15px; }
144
-
145
- .chat-voice-record-button {
146
- width: 40px;
147
- height: 40px;
148
- border-radius: 24px;
149
- margin: 10px;
150
- margin-left: 0;
151
- font-size: 18px;
152
- line-height: 24px;
153
- outline: none !important;
204
+ .react-autoql-query-validation-delete-button {
154
205
  position: relative;
155
206
  cursor: pointer;
156
- overflow: hidden;
157
- background: var(--react-autoql-accent-color);
158
- color: white;
159
- border: none;
160
- flex-shrink: 0;
161
- flex-grow: 0; }
162
-
163
- .chat-voice-record-button:hover {
164
- box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); }
165
-
166
- .chat-voice-record-button.listening {
167
- background: #ff471a; }
168
-
169
- .chat-voice-record-icon {
170
- vertical-align: top; }
207
+ margin-bottom: -2px; }
171
208
 
172
- .react-autoql-tooltip {
173
- font-family: inherit;
209
+ .react-autoql-chart-tooltip {
210
+ font-family: var(--react-autoql-font-family), sans-serif;
174
211
  letter-spacing: 0.04em;
212
+ line-height: 22px;
213
+ font-size: 13px;
175
214
  padding: 7px 15px;
215
+ transition: all 0.2s ease !important;
216
+ text-align: left !important;
176
217
  opacity: 1 !important;
177
- z-index: 99999 !important; }
218
+ z-index: 99999 !important;
219
+ /* necessary to show up on top of rc drawer */ }
178
220
 
179
- @-webkit-keyframes slide {
180
- 0% {
181
- transform: translateX(-100%); }
182
- 100% {
183
- transform: translateX(100%); } }
221
+ .single-value-response {
222
+ color: inherit;
223
+ cursor: unset; }
224
+ .single-value-response:hover {
225
+ color: inherit; }
184
226
 
185
- @keyframes slide {
186
- 0% {
187
- transform: translateX(-100%); }
188
- 100% {
189
- transform: translateX(100%); } }
227
+ .single-value-response.with-drilldown:hover {
228
+ color: inherit;
229
+ text-decoration: underline;
230
+ font-weight: 600;
231
+ cursor: pointer; }
190
232
 
191
- @-webkit-keyframes move {
192
- 0% {
193
- left: 0;
194
- opacity: 0; }
195
- 5% {
196
- opacity: 0; }
197
- 48% {
198
- opacity: 0.2; }
199
- 80% {
200
- opacity: 0; }
201
- 100% {
202
- left: 82%; } }
233
+ .react-autoql-query-validation-container {
234
+ width: 100%; }
203
235
 
204
- @keyframes move {
205
- 0% {
206
- left: 0;
207
- opacity: 0; }
208
- 5% {
209
- opacity: 0; }
210
- 48% {
211
- opacity: 0.2; }
212
- 80% {
213
- opacity: 0; }
214
- 100% {
215
- left: 82%; } }
236
+ .react-autoql-query-validation-description {
237
+ margin-bottom: 14px; }
238
+
239
+ .context-menu {
240
+ background: var(--react-autoql-background-color-primary);
241
+ /* height: 100px; */
242
+ width: 150px;
243
+ padding: 10px 0; }
244
+
245
+ .context-menu-list {
246
+ list-style-type: none;
247
+ width: 100%;
248
+ margin: 0;
249
+ padding: 0; }
250
+
251
+ .context-menu-list li {
252
+ color: var(--react-autoql-text-color-primary);
253
+ width: 100%;
254
+ height: 35px;
255
+ line-height: 35px;
256
+ padding: 0 20px;
257
+ cursor: pointer; }
258
+
259
+ .context-menu-list li:hover {
260
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.05)); }
216
261
 
217
262
  #condition-lock-snackbar-success {
218
263
  visibility: hidden;
@@ -807,74 +852,157 @@
807
852
  top: 30px;
808
853
  opacity: 0; } }
809
854
 
810
- .react-autoql-dashboard-container {
811
- background: var(--react-autoql-background-color-secondary);
812
- height: 100%;
813
- width: 100%;
814
- overflow: hidden; }
815
-
816
- .react-autoql-dashboard-container.edit-mode {
817
- padding-bottom: 200px; }
855
+ .react-autoql-bar-container {
856
+ position: relative;
857
+ display: flex;
858
+ flex-direction: row; }
818
859
 
819
- .dashboard-drilldown-modal .ReactModal__Content {
820
- top: unset !important;
821
- margin-top: 20px !important;
822
- max-height: 93vh !important; }
860
+ .react-autoql-chatbar-input {
861
+ padding: 10px;
862
+ padding-left: 20px;
863
+ margin: 10px;
864
+ height: 42px;
865
+ box-sizing: border-box;
866
+ border-radius: 24px;
867
+ font-size: 16px;
868
+ font-family: inherit;
869
+ letter-spacing: 0.04em;
870
+ outline: none !important;
871
+ width: calc(100% - 20px);
872
+ font-family: inherit;
873
+ /* Default styles outside of data messenger */
874
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
875
+ background: var(--react-autoql-background-color-primary);
876
+ color: #5d5d5d; }
823
877
 
824
- .dashboard-drilldown-modal .react-autoql-modal-body {
825
- padding: 0; }
878
+ .react-autoql-chatbar-input.left-padding {
879
+ padding-left: 54px; }
826
880
 
827
- .dashboard-drilldown-modal .react-autoql-table {
828
- opacity: 0.9;
829
- font-size: 11px; }
881
+ .react-autoql-chatbar-input:disabled {
882
+ background: rgba(0, 0, 0, 0.03); }
830
883
 
831
- .dashboard-drilldown-modal .splitter-layout {
832
- height: calc(100% - 55px); }
884
+ .react-autoql-chatbar-input:not(:disabled):hover {
885
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
833
886
 
834
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
835
- padding: 20px;
836
- padding-bottom: 10px; }
887
+ .react-autoql-chatbar-input::-moz-placeholder {
888
+ /* Default color outside of data messenger */
889
+ color: #999 !important; }
837
890
 
838
- .dashboard-drilldown-modal .drilldown-hide-chart-btn {
839
- text-align: right;
840
- width: 100%;
841
- padding-right: 20px; }
842
- .dashboard-drilldown-modal .drilldown-hide-chart-btn.bottom {
843
- position: absolute;
844
- bottom: 5px;
845
- width: 100px;
846
- right: 0; }
847
- .dashboard-drilldown-modal .drilldown-hide-chart-btn.top {
848
- padding-top: 10px;
849
- margin-bottom: -8px; }
891
+ .react-autoql-chatbar-input:-ms-input-placeholder {
892
+ /* Default color outside of data messenger */
893
+ color: #999 !important; }
850
894
 
851
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
852
- padding: 20px;
853
- padding-top: 10px;
854
- overflow: hidden;
855
- height: 100%; }
895
+ .react-autoql-chatbar-input::placeholder {
896
+ /* Default color outside of data messenger */
897
+ color: #999 !important; }
856
898
 
857
- .empty-dashboard-message-container {
858
- font-family: var(--react-autoql-font-family);
859
- color: var(--react-autoql-text-color-primary);
860
- letter-spacing: 0.02em;
861
- text-align: center;
862
- padding: 100px;
863
- height: 100%;
864
- width: 100%; }
899
+ /* autosuggest */
900
+ .react-autoql-bar-container .react-autosuggest__container,
901
+ .react-autoql-chatbar-input-container {
902
+ position: relative;
903
+ flex: 1; }
865
904
 
866
- .empty-dashboard-new-tile-btn {
867
- color: var(--react-autoql-accent-color);
868
- font-weight: bold;
869
- cursor: pointer; }
905
+ .react-autoql-bar-container .react-autosuggest__input--focused {
906
+ outline: none; }
870
907
 
871
- .loading-container-centered {
872
- height: 100%;
873
- width: 100%;
874
- display: flex;
875
- flex-direction: column;
876
- justify-content: center;
877
- align-items: center; }
908
+ .react-autoql-bar-container .react-autosuggest__input::-ms-clear {
909
+ display: none; }
910
+
911
+ .react-autoql-bar-container .react-autosuggest__suggestions-container {
912
+ display: none; }
913
+
914
+ .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
915
+ position: absolute;
916
+ top: 45px;
917
+ bottom: unset;
918
+ margin: 10px;
919
+ padding-top: 5px;
920
+ padding-bottom: 5px;
921
+ display: block;
922
+ width: calc(100% - 20px);
923
+ height: unset;
924
+ border-radius: 24px;
925
+ font-family: inherit;
926
+ font-size: 15px;
927
+ font-weight: normal;
928
+ z-index: 2;
929
+ overflow: hidden;
930
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
931
+ /* Default styles outside of data messenger */
932
+ background-color: white;
933
+ color: #5d5d5d; }
934
+
935
+ .react-autoql-bar-container.autosuggest-top
936
+ .react-autosuggest__suggestions-container--open {
937
+ top: unset;
938
+ bottom: 45px; }
939
+
940
+ .react-autoql-bar-container.autosuggest-bottom
941
+ .react-autosuggest__suggestions-container--open {
942
+ top: 45px;
943
+ bottom: unset; }
944
+
945
+ .react-autoql-bar-container .react-autosuggest__suggestions-list {
946
+ margin: 0;
947
+ padding: 0;
948
+ list-style-type: none; }
949
+
950
+ /* Autocomplete styles */
951
+ .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
952
+ background-color: var(--react-autoql-background-color-primary);
953
+ border: 1px solid var(--react-autoql-border-color);
954
+ color: var(--react-autoql-text-color-primary); }
955
+
956
+ .react-autoql-bar-container .react-autosuggest__suggestion {
957
+ color: var(--react-autoql-text-color-primary); }
958
+
959
+ .react-autoql-chatbar-input {
960
+ border: 1px solid var(--react-autoql-border-color);
961
+ color: var(--react-autoql-text-color-primary); }
962
+
963
+ .react-autoql-chatbar-input::-moz-placeholder {
964
+ color: var(--react-autoql-text-color-placeholder); }
965
+
966
+ .react-autoql-chatbar-input:-ms-input-placeholder {
967
+ color: var(--react-autoql-text-color-placeholder); }
968
+
969
+ .react-autoql-chatbar-input::placeholder {
970
+ color: var(--react-autoql-text-color-placeholder); }
971
+
972
+ .react-autoql-bar-container .react-autosuggest__suggestion {
973
+ cursor: pointer;
974
+ padding: 2px;
975
+ padding-left: 18px;
976
+ letter-spacing: 0.05em;
977
+ line-height: 22.5px; }
978
+
979
+ .react-autoql-bar-container .react-autosuggest__suggestion--highlighted {
980
+ background-color: rgba(0, 0, 0, 0.1) !important; }
981
+
982
+ .react-autoql-bar-container .react-autosuggest__section-title {
983
+ padding: 10px 0 0 10px;
984
+ font-size: 12px;
985
+ color: #777; }
986
+
987
+ .input-response-loading-container {
988
+ position: absolute;
989
+ right: 23px;
990
+ top: -2px; }
991
+
992
+ .chat-bar-input-icon {
993
+ position: absolute;
994
+ color: #28a8e0;
995
+ font-size: 20px;
996
+ left: 30px;
997
+ top: 15px; }
998
+
999
+ .loading-container-centered {
1000
+ height: 100%;
1001
+ width: 100%;
1002
+ display: flex;
1003
+ flex-direction: column;
1004
+ justify-content: center;
1005
+ align-items: center; }
878
1006
 
879
1007
  .response-loading {
880
1008
  display: inline-block;
@@ -912,6 +1040,139 @@
912
1040
  -webkit-animation: response-loading3 0.6s infinite;
913
1041
  animation: response-loading3 0.6s infinite; }
914
1042
 
1043
+ .chat-voice-record-button {
1044
+ width: 40px;
1045
+ height: 40px;
1046
+ border-radius: 24px;
1047
+ margin: 10px;
1048
+ margin-left: 0;
1049
+ font-size: 18px;
1050
+ line-height: 24px;
1051
+ outline: none !important;
1052
+ position: relative;
1053
+ cursor: pointer;
1054
+ overflow: hidden;
1055
+ background: var(--react-autoql-accent-color);
1056
+ color: white;
1057
+ border: none;
1058
+ flex-shrink: 0;
1059
+ flex-grow: 0; }
1060
+
1061
+ .chat-voice-record-button:hover {
1062
+ box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); }
1063
+
1064
+ .chat-voice-record-button.listening {
1065
+ background: #ff471a; }
1066
+
1067
+ .chat-voice-record-icon {
1068
+ vertical-align: top; }
1069
+
1070
+ .react-autoql-tooltip {
1071
+ font-family: inherit;
1072
+ letter-spacing: 0.04em;
1073
+ padding: 7px 15px;
1074
+ opacity: 1 !important;
1075
+ z-index: 99999 !important; }
1076
+
1077
+ @-webkit-keyframes slide {
1078
+ 0% {
1079
+ transform: translateX(-100%); }
1080
+ 100% {
1081
+ transform: translateX(100%); } }
1082
+
1083
+ @keyframes slide {
1084
+ 0% {
1085
+ transform: translateX(-100%); }
1086
+ 100% {
1087
+ transform: translateX(100%); } }
1088
+
1089
+ @-webkit-keyframes move {
1090
+ 0% {
1091
+ left: 0;
1092
+ opacity: 0; }
1093
+ 5% {
1094
+ opacity: 0; }
1095
+ 48% {
1096
+ opacity: 0.2; }
1097
+ 80% {
1098
+ opacity: 0; }
1099
+ 100% {
1100
+ left: 82%; } }
1101
+
1102
+ @keyframes move {
1103
+ 0% {
1104
+ left: 0;
1105
+ opacity: 0; }
1106
+ 5% {
1107
+ opacity: 0; }
1108
+ 48% {
1109
+ opacity: 0.2; }
1110
+ 80% {
1111
+ opacity: 0; }
1112
+ 100% {
1113
+ left: 82%; } }
1114
+
1115
+ .react-autoql-dashboard-container {
1116
+ background: var(--react-autoql-background-color-secondary);
1117
+ height: 100%;
1118
+ width: 100%;
1119
+ overflow: hidden; }
1120
+
1121
+ .react-autoql-dashboard-container.edit-mode {
1122
+ padding-bottom: 200px; }
1123
+
1124
+ .dashboard-drilldown-modal .ReactModal__Content {
1125
+ top: unset !important;
1126
+ margin-top: 20px !important;
1127
+ max-height: 93vh !important; }
1128
+
1129
+ .dashboard-drilldown-modal .react-autoql-modal-body {
1130
+ padding: 0; }
1131
+
1132
+ .dashboard-drilldown-modal .react-autoql-table {
1133
+ opacity: 0.9;
1134
+ font-size: 11px; }
1135
+
1136
+ .dashboard-drilldown-modal .splitter-layout {
1137
+ height: calc(100% - 55px); }
1138
+
1139
+ .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
1140
+ padding: 20px;
1141
+ padding-bottom: 10px; }
1142
+
1143
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn {
1144
+ text-align: right;
1145
+ width: 100%;
1146
+ padding-right: 20px; }
1147
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn.bottom {
1148
+ position: absolute;
1149
+ bottom: 5px;
1150
+ width: 100px;
1151
+ right: 0; }
1152
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn.top {
1153
+ padding-top: 10px;
1154
+ margin-bottom: -8px; }
1155
+
1156
+ .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
1157
+ padding: 20px;
1158
+ padding-top: 10px;
1159
+ overflow: hidden;
1160
+ height: 100%; }
1161
+
1162
+ .empty-dashboard-message-container {
1163
+ font-family: var(--react-autoql-font-family);
1164
+ color: var(--react-autoql-text-color-primary);
1165
+ letter-spacing: 0.02em;
1166
+ text-align: center;
1167
+ padding: 100px;
1168
+ height: 100%;
1169
+ width: 100%; }
1170
+
1171
+ .empty-dashboard-new-tile-btn {
1172
+ color: var(--react-autoql-accent-color);
1173
+ font-weight: bold;
1174
+ cursor: pointer; }
1175
+
915
1176
  .react-autoql-icon {
916
1177
  position: relative;
917
1178
  opacity: 1; }
@@ -958,833 +1219,392 @@ span.react-autoql-icon {
958
1219
  border-radius: 50%;
959
1220
  box-sizing: content-box; }
960
1221
 
961
- .react-autoql-response-content-container:not(.html-content) {
1222
+ .notification-rule-outer-container {
962
1223
  position: relative;
963
- display: flex;
964
- flex-direction: column;
965
- justify-content: center;
966
- align-items: center;
967
- background-color: inherit;
968
- font-size: 14px;
969
- height: 100%;
970
- width: 100%;
971
- overflow: hidden;
972
- color: var(--react-autoql-text-color-primary); }
1224
+ border: 1px solid transparent;
1225
+ border-radius: 4px;
1226
+ padding-bottom: 5px; }
973
1227
 
974
- .react-autoql-response-content-container.html-content {
1228
+ .expression-error-message {
1229
+ padding-left: 5px; }
1230
+
1231
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
1232
+ border: none; }
1233
+
1234
+ .react-autoql-notifications-button-container {
975
1235
  position: relative;
976
- background-color: inherit;
977
- text-align: left;
978
- font-size: 14px;
979
- height: 100%;
980
- width: 100%;
981
- overflow: hidden;
982
- color: var(--react-autoql-text-color-primary); }
983
- .react-autoql-response-content-container.html-content table th {
984
- border-bottom: 2px solid var(--react-autoql-border-color); }
985
- .react-autoql-response-content-container.html-content table tr:not(:last-child) {
986
- border-bottom: 1px solid var(--react-autoql-border-color); }
987
- .react-autoql-response-content-container.html-content table td:not(:last-child) {
988
- border-right: 1px solid var(--react-autoql-border-color); }
989
- .react-autoql-response-content-container.html-content table th,
990
- .react-autoql-response-content-container.html-content table td {
991
- padding: 5px 10px; }
992
- .react-autoql-response-content-container.html-content * {
993
- font-size: inherit; }
994
- .react-autoql-response-content-container.html-content sup,
995
- .react-autoql-response-content-container.html-content sub {
996
- font-size: 10px; }
997
- .react-autoql-response-content-container.html-content > *:first-child {
998
- margin-top: 0 !important; }
999
- .react-autoql-response-content-container.html-content > *:last-child {
1000
- margin-bottom: 0 !important; }
1001
- .react-autoql-response-content-container.html-content caption {
1002
- display: table-caption;
1003
- text-align: -webkit-center;
1004
- padding-top: unset;
1005
- padding-bottom: unset;
1006
- color: unset;
1007
- text-align: unset;
1008
- caption-side: unset; }
1236
+ display: inline-block;
1237
+ font-size: inherit;
1238
+ line-height: 1em;
1239
+ width: 1em; }
1240
+ .react-autoql-notifications-button-container .react-autoql-notifications-button {
1241
+ font-size: 1em;
1242
+ line-height: 0;
1243
+ vertical-align: bottom; }
1244
+ .react-autoql-notifications-button-container .react-autoql-notifications-badge {
1245
+ position: absolute;
1246
+ border: 2px solid #fff;
1247
+ background: #f5222d;
1248
+ border-radius: 6.3em;
1249
+ line-height: 1.3em;
1250
+ left: 0.6em;
1251
+ top: -0.8em;
1252
+ padding: 0.15em 0.5em;
1253
+ text-align: center;
1254
+ color: white;
1255
+ font-size: 0.5em; }
1256
+ .react-autoql-notifications-button-container .react-autoql-notifications-badge-dot {
1257
+ position: absolute;
1258
+ display: inline-block;
1259
+ border: 2px solid #fff;
1260
+ background: #f5222d;
1261
+ border-radius: 50%;
1262
+ height: 0.6em;
1263
+ width: 0.6em;
1264
+ left: 0.5em;
1265
+ top: -2px; }
1009
1266
 
1010
- .react-autoql-response-content-container.table {
1011
- max-height: 100vh !important;
1012
- overflow-y: scroll;
1013
- scrollbar-width: none; }
1267
+ .notification-list-loading-container {
1268
+ text-align: center;
1269
+ padding-top: 100px;
1270
+ color: var(--react-autoql-text-color-primary);
1271
+ height: 100%;
1272
+ overflow: hidden;
1273
+ background: var(--react-autoql-background-color-secondary); }
1014
1274
 
1015
- .react-autoql-response-content-container.table::-webkit-scrollbar {
1016
- width: 0;
1017
- height: 0; }
1275
+ .empty-notifications-message {
1276
+ color: var(--react-autoql-text-color-primary);
1277
+ text-align: center;
1278
+ margin-top: 75px; }
1279
+ .empty-notifications-message div {
1280
+ opacity: 0.6; }
1281
+ .empty-notifications-message .empty-notifications-title {
1282
+ font-size: 16px;
1283
+ font-weight: bold;
1284
+ margin-bottom: 5px; }
1285
+ .empty-notifications-message .empty-notifications-img {
1286
+ width: 250px;
1287
+ height: 250px; }
1018
1288
 
1019
- .react-autoql-suggestion-btn {
1020
- padding: 6px 14px;
1021
- background: transparent;
1022
- font-family: inherit;
1023
- font-size: 12px;
1024
- margin-bottom: 5px;
1025
- outline: none !important;
1026
- cursor: pointer;
1027
- letter-spacing: 0.05em;
1028
- transition: all 0.1s ease;
1029
- border: 1px solid rgba(0, 0, 0, 0.15);
1030
- border-radius: 5px;
1031
- color: inherit; }
1289
+ .react-autoql-notification-list-container {
1290
+ height: 100%;
1291
+ padding: 20px;
1292
+ overflow-y: auto;
1293
+ background: var(--react-autoql-background-color-secondary); }
1032
1294
 
1033
- .react-autoql-suggestion-btn:hover {
1034
- border-color: transparent;
1035
- color: white;
1036
- background: var(--react-autoql-accent-color); }
1295
+ .react-autoql-notification-dismiss-all {
1296
+ text-align: right;
1297
+ margin-bottom: 12px;
1298
+ padding-right: 10px;
1299
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1300
+ transition: color 0.1s ease; }
1301
+ .react-autoql-notification-dismiss-all span {
1302
+ opacity: 0.8;
1303
+ cursor: pointer; }
1304
+ .react-autoql-notification-dismiss-all span:hover {
1305
+ opacity: 1; }
1037
1306
 
1038
- .react-autoql-help-link-btn {
1039
- padding: 6px 14px;
1040
- background: transparent;
1041
- border-radius: 5px;
1042
- font-family: inherit;
1043
- font-size: 12px;
1044
- margin-top: 5px;
1045
- outline: none !important;
1046
- cursor: pointer;
1047
- letter-spacing: 0.05em;
1048
- transition: all 0.1s ease;
1049
- border-color: #e2e2e26e;
1050
- color: inherit; }
1307
+ .react-autoql-notification-display-name-input {
1308
+ width: 100%; }
1051
1309
 
1052
- .react-autoql-help-link-btn:hover {
1053
- opacity: 0.7; }
1310
+ .react-autoql-notification-message-input {
1311
+ width: 100%; }
1054
1312
 
1055
- .react-autoql-help-link-icon {
1056
- width: 15px;
1057
- height: 15px;
1058
- margin-bottom: -3px;
1059
- margin-right: 3px; }
1313
+ .react-autoql-notification-list-item:nth-of-type(0) {
1314
+ -webkit-animation-delay: 0s;
1315
+ animation-delay: 0s; }
1060
1316
 
1061
- .qanda-positive-feedback-checkmark.react-autoql-icon svg {
1062
- color: var(--react-autoql-success-color); }
1317
+ .react-autoql-notification-list-item:nth-of-type(1) {
1318
+ -webkit-animation-delay: 0.1s;
1319
+ animation-delay: 0.1s; }
1063
1320
 
1064
- .react-autoql-suggestion-message {
1065
- height: 100%;
1066
- width: 100%;
1067
- word-break: break-word; }
1321
+ .react-autoql-notification-list-item:nth-of-type(2) {
1322
+ -webkit-animation-delay: 0.2s;
1323
+ animation-delay: 0.2s; }
1068
1324
 
1069
- .react-autoql-suggestions-select {
1070
- position: relative;
1071
- display: inline-block;
1072
- height: 30px;
1073
- background: none;
1074
- outline: none !important;
1075
- border: 1px solid;
1076
- font-family: inherit;
1077
- letter-spacing: 0.05em;
1078
- color: #28a8e0;
1079
- cursor: pointer;
1080
- font-size: inherit; }
1325
+ .react-autoql-notification-list-item:nth-of-type(3) {
1326
+ -webkit-animation-delay: 0.3s;
1327
+ animation-delay: 0.3s; }
1081
1328
 
1082
- .no-columns-error-message {
1083
- position: absolute;
1084
- height: 100%;
1085
- width: 100%;
1086
- display: flex;
1087
- justify-content: center;
1088
- flex-direction: column;
1089
- text-align: center;
1090
- padding: 20px;
1091
- font-size: 13px; }
1092
- .no-columns-error-message .warning-icon {
1093
- font-size: 22px;
1094
- display: block;
1095
- margin-bottom: -13px;
1096
- text-align: center; }
1097
- .no-columns-error-message .eye-icon {
1098
- vertical-align: bottom;
1099
- line-height: 18px; }
1329
+ .react-autoql-notification-list-item:nth-of-type(4) {
1330
+ -webkit-animation-delay: 0.4s;
1331
+ animation-delay: 0.4s; }
1100
1332
 
1101
- /* query validation */
1102
- .react-autoql-query-validation-selector-container {
1103
- display: inline-block;
1104
- position: relative; }
1333
+ .react-autoql-notification-list-item:nth-of-type(5) {
1334
+ -webkit-animation-delay: 0.5s;
1335
+ animation-delay: 0.5s; }
1105
1336
 
1106
- .react-autoql-select-popup-container.query-validation-select {
1107
- padding: 5px 0;
1108
- letter-spacing: 0.03em;
1109
- font-family: var(--react-autoql-font-family), sans-serif; }
1110
- .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option {
1111
- height: unset;
1112
- font-size: 14px;
1113
- line-height: 24px;
1114
- padding: 0 15px; }
1115
- .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option:last-of-type {
1116
- color: #d84830; }
1337
+ .react-autoql-notification-list-item:nth-of-type(6) {
1338
+ -webkit-animation-delay: 0.6s;
1339
+ animation-delay: 0.6s; }
1117
1340
 
1118
- .react-autoql-query-validation-query {
1119
- text-align: center; }
1341
+ .react-autoql-notification-list-item:nth-of-type(7) {
1342
+ -webkit-animation-delay: 0.7s;
1343
+ animation-delay: 0.7s; }
1120
1344
 
1121
- .react-autoql-query-validation-execute-btn {
1122
- height: 38px;
1123
- background: none;
1124
- border-radius: 4px;
1125
- margin-top: 24px;
1126
- width: 100%;
1127
- color: inherit;
1128
- cursor: pointer;
1129
- outline: none !important;
1130
- border-color: #e2e2e26e;
1131
- transition: all 0.2s ease; }
1345
+ .react-autoql-notification-list-item:nth-of-type(8) {
1346
+ -webkit-animation-delay: 0.8s;
1347
+ animation-delay: 0.8s; }
1132
1348
 
1133
- .react-autoql-query-validation-execute-btn:hover {
1134
- border-color: #28a8e0; }
1349
+ .react-autoql-notification-list-item:nth-of-type(9) {
1350
+ -webkit-animation-delay: 0.9s;
1351
+ animation-delay: 0.9s; }
1135
1352
 
1136
- .react-autoql-execute-query-icon {
1137
- font-size: 16px;
1138
- vertical-align: middle !important;
1139
- padding-right: 3px !important; }
1140
- .react-autoql-execute-query-icon span.react-autoql-icon svg {
1141
- height: 19px;
1142
- width: 19px;
1143
- margin-top: 3px;
1144
- margin-right: 4px;
1145
- vertical-align: top;
1146
- fill: var(--react-autoql-accent-color); }
1353
+ .react-autoql-notification-list-item:nth-of-type(10) {
1354
+ -webkit-animation-delay: 1s;
1355
+ animation-delay: 1s; }
1147
1356
 
1148
- .react-autoql-query-validation-select {
1149
- position: relative;
1150
- display: inline-block;
1151
- height: 2em;
1152
- background: none;
1153
- outline: none !important;
1154
- border: none;
1155
- letter-spacing: 0.05em;
1156
- font-family: inherit;
1157
- font-size: inherit;
1158
- margin: 0;
1159
- padding: 0;
1160
- border-radius: 0;
1161
- border-bottom: 1px dashed;
1162
- color: var(--react-autoql-accent-color); }
1163
-
1164
- .react-autoql-query-validation-delete-button {
1165
- position: relative;
1166
- cursor: pointer;
1167
- margin-bottom: -2px; }
1168
-
1169
- .react-autoql-chart-tooltip {
1170
- font-family: var(--react-autoql-font-family), sans-serif;
1171
- letter-spacing: 0.04em;
1172
- line-height: 22px;
1173
- font-size: 13px;
1174
- padding: 7px 15px;
1175
- transition: all 0.2s ease !important;
1176
- text-align: left !important;
1177
- opacity: 1 !important;
1178
- z-index: 99999 !important;
1179
- /* necessary to show up on top of rc drawer */ }
1180
-
1181
- .single-value-response {
1182
- color: inherit;
1183
- cursor: unset; }
1184
- .single-value-response:hover {
1185
- color: inherit; }
1186
-
1187
- .single-value-response.with-drilldown:hover {
1188
- color: inherit;
1189
- text-decoration: underline;
1190
- font-weight: 600;
1191
- cursor: pointer; }
1192
-
1193
- .react-autoql-query-validation-container {
1194
- width: 100%; }
1195
-
1196
- .react-autoql-query-validation-description {
1197
- margin-bottom: 14px; }
1198
-
1199
- .context-menu {
1200
- background: var(--react-autoql-background-color-primary);
1201
- /* height: 100px; */
1202
- width: 150px;
1203
- padding: 10px 0; }
1357
+ @-webkit-keyframes slideIn {
1358
+ 0% {
1359
+ opacity: 0;
1360
+ top: 500px; }
1361
+ 100% {
1362
+ opacity: 1;
1363
+ top: 0; } }
1204
1364
 
1205
- .context-menu-list {
1206
- list-style-type: none;
1207
- width: 100%;
1208
- margin: 0;
1209
- padding: 0; }
1365
+ .react-autoql-step-container a {
1366
+ color: var(--react-autoql-accent-color, #26a7df); }
1210
1367
 
1211
- .context-menu-list li {
1212
- color: var(--react-autoql-text-color-primary);
1213
- width: 100%;
1214
- height: 35px;
1215
- line-height: 35px;
1216
- padding: 0 20px;
1217
- cursor: pointer; }
1368
+ .frequency-date-select-container {
1369
+ margin-top: 10px; }
1218
1370
 
1219
- .context-menu-list li:hover {
1220
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.05)); }
1371
+ .notification-frequency-step {
1372
+ display: flex; }
1373
+ .notification-frequency-step .frequency-category-select {
1374
+ position: relative;
1375
+ padding-top: 9px; }
1376
+ .notification-frequency-step .notification-frequency-select {
1377
+ margin-left: 8px; }
1378
+ .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
1379
+ line-height: 33px; }
1380
+ .notification-frequency-step .frequency-repeat-follow-text {
1381
+ line-height: 32px;
1382
+ vertical-align: top; }
1383
+ .notification-frequency-step .frequency-settings-container {
1384
+ flex: 0 1 400px; }
1221
1385
 
1222
- .react-autoql-dashboard .react-grid-item {
1223
- background: var(--react-autoql-background-color-primary, #fff);
1224
- color: var(--react-autoql-text-color-primary, #404040);
1225
- font-family: var(--react-autoql-font-family), sans-serif;
1226
- overflow: hidden;
1227
- border-radius: 4px;
1228
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
1386
+ .schedule-builder-timezone-section {
1387
+ margin: 10px 5px; }
1388
+ .schedule-builder-timezone-section .react-autoql-timezone-select {
1389
+ display: inline-block;
1390
+ width: 300px; }
1229
1391
 
1230
- .react-autoql-dashboard-tile-inner-div {
1231
- height: 100%;
1232
- width: 100%;
1233
- background: inherit;
1234
- position: relative;
1235
- text-align: center;
1392
+ .react-autoql-notification-list-item {
1236
1393
  display: flex;
1237
- justify-content: flex-start;
1238
1394
  flex-direction: column;
1239
- align-items: center; }
1240
-
1241
- .dashboard-data-limit-warning-icon {
1242
- color: var(--react-autoql-warning-color) !important;
1243
- position: absolute !important;
1244
- bottom: 40px;
1245
- right: 16px;
1246
- font-size: 20px; }
1247
-
1248
- .react-autoql-dashboard-tile-drag-handle {
1249
- transition: opacity 0.3s ease;
1250
- position: absolute;
1251
- background-color: var(--react-autoql-border-color, #f7f7f7);
1252
- cursor: move;
1253
- opacity: 0; }
1254
- .react-autoql-dashboard-tile-drag-handle.top {
1255
- top: 0;
1256
- left: 0;
1257
- width: 100%;
1258
- height: 15px; }
1259
- .react-autoql-dashboard-tile-drag-handle.bottom {
1260
- bottom: 0;
1261
- left: 0;
1262
- width: 100%;
1263
- height: 15px; }
1264
- .react-autoql-dashboard-tile-drag-handle.left {
1265
- top: 0;
1266
- left: 0;
1267
- width: 15px;
1268
- height: 100%; }
1269
- .react-autoql-dashboard-tile-drag-handle.right {
1270
- top: 0;
1271
- right: 0;
1272
- width: 15px;
1273
- height: 100%; }
1274
-
1275
- .react-autoql-dashboard-tile:hover .react-autoql-dashboard-tile-drag-handle {
1276
- opacity: 1; }
1277
-
1278
- .react-autoql-dashboard-tile .autoql-options-toolbar {
1279
- transition: opacity 0.3s ease, color 0.3s ease;
1280
- visibility: hidden;
1281
- opacity: 0;
1282
- bottom: 8px;
1283
- right: 8px;
1284
- z-index: 1; }
1285
-
1286
- .dashboard-tile-viz-toolbar-container {
1287
- transition: opacity 0.3s ease, color 0.3s ease;
1288
- color: var(--react-autoql-accent-color);
1289
- position: absolute;
1290
- bottom: 0;
1291
- left: 0;
1292
- padding: 7px;
1293
- z-index: 1;
1294
- opacity: 0;
1295
- visibility: hidden; }
1296
- .dashboard-tile-viz-toolbar-container .viz-toolbar,
1297
- .dashboard-tile-viz-toolbar-container .split-view-btn {
1298
- position: relative;
1299
- display: inline-block;
1300
- background: var(--react-autoql-background-color-primary); }
1301
- .dashboard-tile-viz-toolbar-container .split-view-btn {
1302
- margin-right: 7px; }
1303
- .dashboard-tile-viz-toolbar-container .split-view-btn .react-autoql-icon {
1304
- font-size: 14px; }
1305
-
1306
- .split-view-btn {
1307
- z-index: 1; }
1308
-
1309
- .split-view-query-btn {
1310
- transition: opacity 0.3s ease, color 0.3s ease;
1311
- color: var(--react-autoql-accent-color);
1312
- position: absolute;
1313
- top: 7px;
1314
- left: 7px;
1315
- bottom: unset;
1316
- z-index: 1;
1317
- visibility: hidden;
1318
- opacity: 0; }
1319
-
1320
- .react-autoql-dashboard-tile:hover .dashboard-tile-viz-toolbar-container,
1321
- .react-autoql-dashboard-tile:hover .split-view-query-btn,
1322
- .react-autoql-dashboard-tile:hover .autoql-options-toolbar {
1323
- visibility: visible;
1324
- opacity: 1; }
1325
-
1326
- .react-autoql-dashboard-tile-inner-div .single-value-response {
1327
- font-size: 32px;
1328
- margin-top: -6px;
1329
- opacity: 0.9; }
1330
-
1331
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper {
1332
- height: calc(100% - 47px);
1333
- width: 100%;
1334
- padding-top: 0;
1335
- background: inherit; }
1336
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .query-output-error-message {
1337
- opacity: 0.8; }
1338
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .layout-splitter {
1339
- height: 1px !important;
1340
- color: var(--react-autoql-border-color);
1341
- opacity: 0.3;
1342
- pointer-events: none; }
1343
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .react-autoql-table {
1344
- opacity: 0.9;
1345
- color: var(--react-autoql-text-color-primary);
1346
- font-size: 11px; }
1347
-
1348
- .react-autoql-dashboard-tile-inner-div.split .dashboard-tile-response-wrapper {
1349
- padding: 0; }
1350
-
1351
- .react-autoql-dashboard-tile-inner-div
1352
- .dashboard-tile-response-wrapper.editing .layout-splitter {
1353
- display: block;
1354
- pointer-events: unset;
1355
- height: 4px !important;
1356
- color: var(--react-autoql-text-color-primary);
1357
- opacity: 0.8; }
1358
-
1359
- /* Safetynet styles specific to dashboard tiles */
1360
- .react-autoql-dashboard-tile-inner-div
1361
- .dashboard-tile-response-wrapper.editing {
1362
- height: 100%;
1363
- width: 100%;
1364
- overflow-x: auto;
1365
- overflow-y: hidden; }
1366
-
1367
- .react-autoql-dashboard-tile-inner-div .react-autoql-query-validation-query {
1368
- white-space: nowrap; }
1369
-
1370
- .dashboard-tile-response-wrapper.small
1371
- .react-autoql-query-validation-description,
1372
- .dashboard-tile-response-wrapper.small
1373
- .react-autoql-suggestion-message-description,
1374
- .dashboard-tile-response-wrapper.small
1375
- .react-autoql-query-validation-execute-btn {
1376
- display: none; }
1377
-
1378
- .dashboard-tile-response-wrapper .dashboard-tile-response-container {
1395
+ flex-basis: auto;
1396
+ --accent-color: #26a7df;
1379
1397
  position: relative;
1380
- height: 100%;
1381
- width: 100%;
1382
- background: inherit;
1383
- cursor: default; }
1384
- .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-table-container {
1385
- padding: 20px;
1386
- padding-top: 15px;
1387
- width: 100%; }
1388
- .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-response-content-container {
1389
- padding: 7px; }
1390
-
1391
- .dashboard-tile-title-container {
1392
- width: 100%;
1393
- text-align: left;
1394
- padding: 19px 25px 0 25px;
1395
- height: 47px;
1396
- white-space: nowrap;
1397
1398
  overflow: hidden;
1398
- text-overflow: ellipsis;
1399
- flex-shrink: 0;
1400
- flex-grow: 0; }
1401
- .dashboard-tile-title-container .dashboard-tile-title {
1399
+ background: var(--react-autoql-background-color-primary, #fff);
1400
+ border-radius: 4px;
1401
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1402
+ margin-bottom: 8px;
1403
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6));
1404
+ font-family: var(--react-autoql-font-family), sans-serif;
1405
+ transition: all 1s ease;
1406
+ transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1);
1407
+ -webkit-animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
1408
+ animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
1409
+ -webkit-animation-fill-mode: both;
1410
+ animation-fill-mode: both;
1411
+ -webkit-animation-delay: 0s;
1412
+ animation-delay: 0s; }
1413
+ .react-autoql-notification-list-item .single-value-response {
1414
+ font-size: 32px;
1415
+ margin-top: -6px;
1416
+ opacity: 0.9; }
1417
+ .react-autoql-notification-list-item .viz-toolbar {
1418
+ position: relative;
1419
+ border: none; }
1420
+ .react-autoql-notification-list-item .viz-toolbar .react-autoql-toolbar-btn {
1421
+ height: 33px; }
1422
+ .react-autoql-notification-list-item .react-autoql-notification-details-title {
1423
+ font-weight: 600;
1424
+ padding-top: 20px;
1425
+ padding-bottom: 5px; }
1426
+ .react-autoql-notification-list-item.expanded .react-autoql-notification-list-item-header {
1427
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.04)); }
1428
+ .react-autoql-notification-list-item .react-autoql-notification-details {
1429
+ overflow: hidden; }
1430
+ .react-autoql-notification-list-item.animation-complete .react-autoql-notification-details {
1431
+ overflow: auto; }
1432
+ .react-autoql-notification-list-item:hover:not(.expanded) {
1433
+ background-color: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.01)); }
1434
+ .react-autoql-notification-list-item:hover .react-autoql-notification-delete-icon {
1435
+ opacity: 1; }
1436
+ .react-autoql-notification-list-item.triggered .react-autoql-notification-display-name {
1437
+ color: var(--react-autoql-accent-color, #26a7df) !important; }
1438
+ .react-autoql-notification-list-item.triggered .react-autoql-notification-dismiss-btn {
1439
+ margin-top: 3px;
1402
1440
  color: var(--react-autoql-accent-color, #26a7df); }
1403
-
1404
- .dashboard-tile-title-container .dashboard-tile-title {
1405
- font-weight: bold;
1406
- font-size: 14px; }
1407
-
1408
- .dashboard-tile-edit-wrapper {
1409
- display: flex;
1410
- width: 100%;
1411
- height: 55px;
1412
- padding: 20px 20px 0 25px;
1413
- flex-shrink: 0;
1414
- flex-grow: 0; }
1415
-
1416
- .dashboard-tile-play-button {
1417
- cursor: default;
1418
- flex-grow: 0;
1419
- flex-shrink: 0; }
1420
-
1421
- .dashboard-tile-play-button span.react-autoql-icon svg {
1422
- cursor: pointer;
1423
- width: 25px;
1424
- height: 33px;
1425
- margin-left: 10px;
1426
- color: var(--react-autoql-accent-color); }
1427
-
1428
- .dashboard-tile-play-button.disabled svg {
1429
- opacity: 0.5;
1430
- cursor: not-allowed; }
1431
-
1432
- .dashboard-tile-play-button:not(.disabled) svg:hover {
1433
- opacity: 0.8; }
1434
-
1435
- .dashboard-tile-delete-button {
1436
- opacity: 0;
1437
- font-size: 17px;
1438
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1439
- position: absolute;
1440
- top: 0px;
1441
- right: 2px;
1442
- cursor: pointer;
1443
- transition: opacity 0.3s ease;
1444
- z-index: 1; }
1445
-
1446
- .react-grid-item:hover .dashboard-tile-delete-button {
1447
- opacity: 1; }
1448
-
1449
- .dashboard-tile-loading-container {
1450
- display: flex;
1451
- height: 100%;
1452
- width: 100%;
1453
- padding: 20px;
1454
- align-items: center;
1455
- justify-content: center; }
1456
-
1457
- .dashboard-tile-title-divider {
1458
- height: 2px;
1459
- background: currentColor;
1460
- width: 75px;
1461
- margin-top: 4px;
1462
- opacity: 0.07; }
1463
-
1464
- /* Input box styling for edit mode */
1465
- .dashboard-tile-input-container {
1466
- display: flex;
1467
- width: 100%;
1468
- height: 100%;
1469
- font-size: 15px; }
1470
- .dashboard-tile-input-container .dashboard-tile-input,
1471
- .dashboard-tile-input-container .dashboard-tile-autocomplete-input {
1472
- width: 100%;
1473
- height: 100%;
1474
- padding: 12px;
1475
- padding-left: 33px;
1476
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
1477
- outline: none !important;
1478
- color: var(--react-autoql-text-color-primary, #356f90);
1479
- background: var(--react-autoql-background-color-primary, #fff); }
1480
-
1481
- .query-focused .dashboard-tile-left-input-container,
1482
- .title-focused .dashboard-tile-right-input-container {
1483
- width: 70%; }
1484
-
1485
- .dashboard-tile-right-input-container {
1486
- z-index: 2; }
1487
-
1488
- .dashboard-tile-right-input-container,
1489
- .dashboard-tile-left-input-container {
1490
- position: relative;
1491
- width: 0;
1492
- flex-grow: 1;
1493
- transition: width 0.3s ease; }
1494
- .dashboard-tile-right-input-container .query-input-icon,
1495
- .dashboard-tile-right-input-container .title-input-icon,
1496
- .dashboard-tile-left-input-container .query-input-icon,
1497
- .dashboard-tile-left-input-container .title-input-icon {
1498
- color: var(--react-autoql-accent-color);
1499
- position: absolute;
1500
- pointer-events: none;
1501
- z-index: 1; }
1502
- .dashboard-tile-right-input-container .query-input-icon,
1503
- .dashboard-tile-left-input-container .query-input-icon {
1441
+ .react-autoql-notification-list-item.triggered .react-autoql-notification-alert-strip {
1442
+ opacity: 1; }
1443
+ .react-autoql-notification-list-item .react-autoql-notification-expanded-content {
1444
+ display: flex;
1445
+ flex-direction: column;
1446
+ justify-content: stretch;
1447
+ transition: height 0.2s ease;
1448
+ height: 0;
1449
+ opacity: 0; }
1450
+ .react-autoql-notification-list-item .react-autoql-notification-expanded-content.visible {
1451
+ height: 400px;
1452
+ opacity: 1; }
1453
+ .react-autoql-notification-list-item .react-autoql-notification-extra-content {
1454
+ flex: 0;
1455
+ flex-basis: 55px;
1456
+ text-align: center;
1457
+ padding: 8px;
1458
+ border-top: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1459
+ .react-autoql-notification-list-item .react-autoql-notification-extra-content .notification-deleted-text {
1460
+ line-height: 40px;
1461
+ opacity: 0.6;
1462
+ font-style: italic; }
1463
+ .react-autoql-notification-list-item .react-autoql-notification-description {
1464
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6));
1465
+ opacity: 0.8;
1466
+ font-size: 14px; }
1467
+ .react-autoql-notification-list-item .react-autoql-notification-list-item-header {
1468
+ display: flex;
1469
+ flex-direction: row;
1470
+ justify-content: space-between;
1471
+ padding-left: 22px;
1472
+ cursor: pointer; }
1473
+ .react-autoql-notification-list-item .react-autoql-notification-query-title {
1474
+ flex: 0 0 auto;
1475
+ font-size: 14px;
1476
+ font-family: inherit;
1477
+ color: currentcolor;
1478
+ opacity: 0.9;
1479
+ font-weight: 600;
1480
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
1481
+ text-align: center;
1482
+ margin: 0 10px;
1483
+ padding-top: 20px;
1484
+ padding-bottom: 7px; }
1485
+ .react-autoql-notification-list-item .react-autoql-notification-details-container {
1486
+ flex: 1;
1487
+ display: flex;
1488
+ flex-direction: row;
1489
+ align-items: stretch;
1490
+ justify-content: stretch;
1491
+ overflow: hidden; }
1492
+ .react-autoql-notification-list-item .react-autoql-notification-details-container .react-autoql-notification-details {
1493
+ flex: 1 1;
1494
+ padding: 20px;
1495
+ padding-top: 0;
1496
+ opacity: 0.9;
1497
+ border-left: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1498
+ .react-autoql-notification-list-item .react-autoql-notification-data-container {
1499
+ display: flex;
1500
+ flex-direction: row;
1501
+ justify-content: stretch;
1502
+ flex: 3 3 0px;
1503
+ overflow: hidden; }
1504
+ .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-notificaton-chart-container {
1505
+ flex: 1;
1506
+ height: 100%;
1507
+ width: 0;
1508
+ display: flex;
1509
+ flex-direction: column;
1510
+ padding: 0px 20px 10px 20px; }
1511
+ .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-table-container {
1512
+ width: 100%;
1513
+ padding: 0 10px; }
1514
+ .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-table {
1515
+ opacity: 0.9;
1516
+ color: currentColor;
1517
+ font-size: 11px; }
1518
+ .react-autoql-notification-list-item .react-autoql-notification-data-title {
1519
+ line-height: 22px;
1520
+ font-size: 12px;
1521
+ text-align: right;
1522
+ color: var(--react-autoql-text-color-primary);
1523
+ opacity: 0.5;
1524
+ padding: 8px 20px; }
1525
+ .react-autoql-notification-list-item .react-autoql-notification-data-title span.react-autoql-icon svg {
1526
+ margin-top: -3px;
1527
+ vertical-align: middle; }
1528
+ .react-autoql-notification-list-item .react-autoql-notification-dismiss-icon {
1529
+ font-size: 21px;
1530
+ margin: 11px;
1531
+ width: 40px;
1532
+ height: 40px;
1533
+ padding: 10px;
1534
+ border-radius: 26px;
1535
+ display: inline-block;
1536
+ line-height: 20px;
1537
+ background-color: transparent;
1538
+ transition: background-color 0.2s ease;
1539
+ cursor: pointer; }
1540
+ .react-autoql-notification-list-item .react-autoql-notification-dismiss-icon:hover {
1541
+ background-color: var(--react-autoql-background-color-secondary, #ececec); }
1542
+ .react-autoql-notification-list-item .react-autoql-notification-delete-icon {
1504
1543
  font-size: 18px;
1505
- top: 4px;
1506
- left: 10px; }
1507
- .dashboard-tile-right-input-container .title-input-icon,
1508
- .dashboard-tile-left-input-container .title-input-icon {
1509
- font-size: 16px;
1510
- top: 7px;
1511
- left: 11px; }
1512
-
1513
- .dashboard-tile-input.second.query {
1514
- transition: all 0.3s ease;
1515
- border: 1px solid transparent;
1516
- outline: none !important;
1517
- color: var(--react-autoql-text-color-primary, #356f90);
1518
- background: var(--react-autoql-background-color-primary);
1519
- margin: 0px;
1520
- padding: 0px;
1521
- width: 0px;
1522
- height: 28px;
1523
- pointer-events: none; }
1524
- .dashboard-tile-input.second.query.open {
1525
- width: 200px;
1526
- padding: 12px;
1527
- margin-left: 5px;
1528
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
1529
- pointer-events: unset; }
1530
-
1531
- .dashboard-tile-input:hover,
1532
- .dashboard-tile-input:focus,
1533
- .dashboard-tile-input-container .dashboard-tile-autocomplete-input:hover,
1534
- .dashboard-tile-input-container .dashboard-tile-autocomplete-input:focus {
1535
- border: 1px solid #26a7e9 !important;
1536
- border-color: var(--react-autoql-accent-color) !important; }
1537
-
1538
- .dashboard-tile-input-container .dashboard-tile-input.query,
1539
- .dashboard-tile-input-container .dashboard-tile-autocomplete-input {
1540
- padding-left: 36px;
1541
- border-top-left-radius: 4px;
1542
- border-bottom-left-radius: 4px; }
1543
-
1544
- .dashboard-tile-input-container .dashboard-tile-input.title {
1545
- border-left: none;
1546
- border-top-right-radius: 4px;
1547
- border-bottom-right-radius: 4px;
1548
- z-index: 2; }
1549
-
1550
- .dashboard-tile-input-container .dashboard-tile-input.title:hover,
1551
- .dashboard-tile-input-container .dashboard-tile-input.title:focus,
1552
- .title-focused .dashboard-tile-right-input-container .dashboard-tile-input,
1553
- .dashboard-tile-right-input-container:hover .dashboard-tile-input {
1554
- /* This is done to balance it because we add a 1px left border when the input is focused or hovered */
1555
- margin-left: -2px; }
1556
-
1557
- /* Autocomplete styles */
1558
- .dashboard-tile-input-container .react-autosuggest__container {
1559
- position: relative;
1560
- width: 100%;
1561
- height: 100%;
1562
- padding: 0;
1563
- margin: 0; }
1564
-
1565
- .dashboard-tile-input-container
1566
- .react-autosuggest__suggestions-container--open {
1567
- background-color: var(--react-autoql-background-color-primary);
1568
- border: 1px solid var(--react-autoql-border-color);
1569
- color: var(--react-autoql-text-color-primary); }
1570
-
1571
- .dashboard-tile-input-container .react-autosuggest__suggestion {
1572
- color: var(--react-autoql-text-color-primary); }
1573
-
1574
- .dashboard-tile-input-container input::-moz-placeholder {
1575
- opacity: 0.5; }
1576
-
1577
- .dashboard-tile-input-container input:-ms-input-placeholder {
1578
- opacity: 0.5; }
1579
-
1580
- .dashboard-tile-input-container input::placeholder {
1581
- opacity: 0.5; }
1582
-
1583
- .react-autoql-dashboard .edit-mode-placeholder-icon {
1584
- display: inline-block;
1585
- line-height: 22px;
1586
- vertical-align: middle;
1587
- height: 23px; }
1588
-
1589
- .dashboard-tile-input-container
1590
- .react-autosuggest__suggestions-container--open {
1591
- position: absolute;
1592
- bottom: unset;
1593
- padding-top: 5px;
1594
- padding-bottom: 5px;
1595
- display: block;
1596
- height: unset;
1597
- border-radius: 24px;
1598
- font-family: inherit;
1599
- font-size: 15px;
1600
- font-weight: normal;
1601
- z-index: 2;
1602
- overflow: hidden;
1603
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1604
- text-align: left;
1605
- width: 100%;
1606
- top: 35px;
1607
- border-radius: 4px;
1608
- margin: 0; }
1609
-
1610
- .dashboard-tile-input-container .react-autosuggest__suggestions-list {
1611
- margin: 0;
1612
- padding: 0;
1613
- list-style-type: none; }
1614
-
1615
- .dashboard-tile-input-container .react-autosuggest__suggestion {
1616
- cursor: pointer;
1617
- padding: 2px;
1618
- padding-left: 18px;
1619
- letter-spacing: 0.05em;
1620
- line-height: 22.5px; }
1621
-
1622
- .dashboard-tile-input-container .react-autosuggest__suggestion--highlighted {
1623
- background-color: rgba(0, 0, 0, 0.1) !important; }
1624
-
1625
- .dashboard-tile-input-container .react-autosuggest__section-title {
1626
- padding: 10px 0 0 10px;
1627
- font-size: 12px;
1628
- color: #777; }
1629
-
1630
- /* Dragging placeholder styles */
1631
- .react-autoql-db-dragging-placeholder-container {
1632
- height: 100%;
1633
- width: 100%;
1634
- padding: 20px 30px;
1635
- display: flex;
1636
- flex-direction: column; }
1637
-
1638
- .react-autoql-db-dragging-placeholder-title {
1639
- width: 100%;
1640
- height: 35px;
1641
- background: #f3f3f3;
1642
- border-top-right-radius: 4px;
1643
- border-top-left-radius: 4px;
1644
- flex-shrink: 0;
1645
- flex-grow: 0; }
1646
-
1647
- .react-autoql-db-dragging-placeholder-content {
1648
- width: 100%;
1649
- height: 100%;
1650
- background: #f9f9f9;
1651
- border-bottom-right-radius: 4px;
1652
- border-bottom-left-radius: 4px; }
1653
-
1654
- .dashboard-tile-placeholder-text {
1655
- font-size: 15px;
1656
- color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.3)); }
1657
- .dashboard-tile-placeholder-text .play-icon {
1658
- vertical-align: bottom;
1659
- line-height: 20px; }
1660
-
1661
- /* React Grid Layout overrides */
1662
- .react-grid-item > .react-resizable-handle {
1663
- z-index: 1;
1664
- position: absolute;
1665
- width: 25px;
1666
- height: 25px;
1667
- bottom: 0;
1668
- right: 0; }
1669
-
1670
- .react-grid-item > .react-resizable-handle::after {
1671
- width: 11px !important;
1672
- height: 11px !important;
1673
- bottom: 4px;
1674
- right: 4px;
1675
- opacity: 0;
1676
- border-right: 1px solid var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4)) !important;
1677
- border-bottom: 1px solid var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4)) !important;
1678
- transition: opacity 0.3s ease; }
1679
-
1680
- .react-grid-item:hover > .react-resizable-handle::after {
1681
- opacity: 1; }
1682
-
1683
- .react-grid-placeholder {
1684
- background: rgba(0, 0, 0, 0.13) !important; }
1685
-
1686
- /* This fixes the flickering bug in RGL when resizing elements */
1687
- .react-draggable-transparent-selection span::-moz-selection, .react-draggable-transparent-selection div::-moz-selection, .react-draggable-transparent-selection a::-moz-selection, .react-draggable-transparent-selection input::-moz-selection, .react-draggable-transparent-selection text::-moz-selection {
1688
- color: inherit; }
1689
- .react-draggable-transparent-selection input::-moz-placeholder {
1690
- color: inherit; }
1691
- .react-draggable-transparent-selection input:-ms-input-placeholder {
1692
- color: inherit; }
1693
- .react-draggable-transparent-selection span::selection,
1694
- .react-draggable-transparent-selection div::selection,
1695
- .react-draggable-transparent-selection a::selection,
1696
- .react-draggable-transparent-selection input::selection,
1697
- .react-draggable-transparent-selection text::selection,
1698
- .react-draggable-transparent-selection input::placeholder {
1699
- color: inherit; }
1700
-
1701
- .dashboard-tile-response-container .layout-pane-primary {
1702
- overflow: hidden; }
1703
-
1704
- .splitter-layout,
1705
- .layout-pane,
1706
- .dashboard-tile-split-pane-container,
1707
- .react-autoql-dashboard-drilldown-original {
1708
- display: flex;
1709
- align-items: stretch;
1710
- justify-content: center;
1711
- width: 100%; }
1712
-
1713
- .dashboard-tile-response-container .splitter-layout,
1714
- .dashboard-tile-response-container .layout-pane,
1715
- .dashboard-tile-response-container .dashboard-tile-split-pane-container {
1716
- background: inherit; }
1717
-
1718
- .react-autoql-notifications-button-container {
1719
- position: relative;
1720
- display: inline-block;
1721
- font-size: inherit;
1722
- line-height: 1em;
1723
- width: 1em; }
1724
- .react-autoql-notifications-button-container .react-autoql-notifications-button {
1725
- font-size: 1em;
1726
- line-height: 0;
1727
- vertical-align: bottom; }
1728
- .react-autoql-notifications-button-container .react-autoql-notifications-badge {
1544
+ margin-top: 3px;
1545
+ margin-right: 3px;
1546
+ opacity: 0;
1547
+ width: 36px;
1548
+ height: 36px;
1549
+ padding: 9px;
1550
+ border-radius: 20px;
1551
+ display: inline-block;
1552
+ line-height: 20px;
1553
+ background-color: transparent;
1554
+ transition: all 0.2s ease;
1555
+ cursor: pointer; }
1556
+ .react-autoql-notification-list-item .react-autoql-notification-delete-icon:hover {
1557
+ background-color: var(--react-autoql-background-color-secondary, #ececec); }
1558
+ .react-autoql-notification-list-item .react-autoql-notification-alert-icon {
1729
1559
  position: absolute;
1730
- border: 2px solid #fff;
1731
- background: #f5222d;
1732
- border-radius: 6.3em;
1733
- line-height: 1.3em;
1734
- left: 0.6em;
1735
- top: -0.8em;
1736
- padding: 0.15em 0.5em;
1737
- text-align: center;
1738
- color: white;
1739
- font-size: 0.5em; }
1740
- .react-autoql-notifications-button-container .react-autoql-notifications-badge-dot {
1560
+ top: -7px;
1561
+ left: -7px;
1562
+ color: var(--react-autoql-accent-color, #26a7df);
1563
+ line-height: 10px;
1564
+ background: var(--react-autoql-background-color-primary, #fff);
1565
+ border-radius: 10px;
1566
+ font-size: 17px; }
1567
+ .react-autoql-notification-list-item .react-autoql-notification-alert-strip {
1568
+ height: 100%;
1569
+ opacity: 0;
1741
1570
  position: absolute;
1742
- display: inline-block;
1743
- border: 2px solid #fff;
1744
- background: #f5222d;
1745
- border-radius: 50%;
1746
- height: 0.6em;
1747
- width: 0.6em;
1748
- left: 0.5em;
1749
- top: -2px; }
1750
-
1751
- .notification-rule-outer-container {
1752
- position: relative;
1753
- border: 1px solid transparent;
1754
- border-radius: 4px;
1755
- padding-bottom: 5px; }
1756
-
1757
- .expression-error-message {
1758
- padding-left: 5px; }
1759
-
1760
- .data-alerts-container.read-only .react-autoql-notification-group-container {
1761
- border: none; }
1762
-
1763
- .notification-modal-content .react-autoql-step-content p {
1764
- margin-bottom: 0.5em;
1765
- margin-top: 0.5em;
1766
- padding-left: 8px; }
1767
-
1768
- .notification-modal-content .step-btn-container {
1769
- text-align: right;
1770
- display: flex;
1771
- min-height: 50px; }
1772
-
1773
- .expression-valid-checkmark.react-autoql-icon svg {
1774
- color: var(--react-autoql-success-color); }
1775
-
1776
- .expression-invalid-message-container {
1777
- max-width: 75%;
1778
- float: left;
1779
- text-align: left !important;
1780
- display: flex;
1781
- flex-direction: row;
1782
- align-items: left;
1783
- justify-content: left; }
1784
-
1785
- .expression-invalid-message {
1786
- color: var(--react-autoql-danger-color);
1787
- display: 'inline-block'; }
1571
+ left: 0px;
1572
+ top: 0;
1573
+ width: 4px;
1574
+ background: var(--react-autoql-accent-color, #26a7df);
1575
+ transition-property: opacity;
1576
+ transition-duration: 0.2s;
1577
+ transition-timing-function: ease; }
1578
+ .react-autoql-notification-list-item .react-autoql-notification-viz-switcher {
1579
+ flex: 0 0 50px;
1580
+ padding: 10px;
1581
+ border-left: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1582
+ .react-autoql-notification-list-item .react-autoql-notification-img-container {
1583
+ flex: 0 0 60px; }
1584
+ .react-autoql-notification-list-item .react-autoql-notification-img-container .react-autoql-notification-img {
1585
+ border-radius: 50px;
1586
+ height: 45px;
1587
+ width: 45px;
1588
+ line-height: 45px;
1589
+ font-size: 22px;
1590
+ color: white;
1591
+ background-color: var(--react-autoql-accent-color, #26a7df);
1592
+ text-align: center;
1593
+ margin-top: 13px;
1594
+ margin-right: 17px; }
1595
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container {
1596
+ flex: 1;
1597
+ line-height: 23px;
1598
+ padding: 13px 0px;
1599
+ transition: color 0.2s ease; }
1600
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-display-name {
1601
+ font-size: 18px;
1602
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.7)); }
1603
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp {
1604
+ font-size: 12px;
1605
+ opacity: 0.5; }
1606
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
1607
+ margin-bottom: -1px; }
1788
1608
 
1789
1609
  .react-autoql-notification-settings {
1790
1610
  background-color: var(--react-autoql-background-color-secondary);
@@ -1879,697 +1699,996 @@ span.react-autoql-icon {
1879
1699
  align-items: center;
1880
1700
  margin-top: -25px; }
1881
1701
 
1882
- .react-autoql-notification-list-item {
1883
- display: flex;
1884
- flex-direction: column;
1885
- flex-basis: auto;
1886
- --accent-color: #26a7df;
1702
+ .notification-rule-add-btn-outer,
1703
+ .notification-rule-validate-btn-outer {
1704
+ text-align: center;
1705
+ border-style: dashed !important;
1706
+ height: 38px;
1707
+ line-height: 25px;
1708
+ margin: 0 !important;
1709
+ overflow: hidden; }
1710
+
1711
+ .notification-rule-outer-container {
1712
+ position: relative;
1713
+ border: 1px solid transparent;
1714
+ border-radius: 4px; }
1715
+ .notification-rule-outer-container.outlined {
1716
+ border-color: rgba(0, 0, 0, 0.15);
1717
+ padding: 0 20px;
1718
+ padding-bottom: 12px; }
1719
+
1720
+ .notification-outer-all-any {
1721
+ position: absolute;
1722
+ left: 0;
1723
+ top: 50%; }
1724
+
1725
+ .notification-first-group-btn-container {
1726
+ display: flex;
1727
+ justify-content: space-between; }
1728
+
1729
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
1730
+ border: none; }
1731
+
1732
+ .notification-modal-content .react-autoql-step-content p {
1733
+ margin-bottom: 0.5em;
1734
+ margin-top: 0.5em;
1735
+ padding-left: 8px; }
1736
+
1737
+ .notification-modal-content .step-btn-container {
1738
+ text-align: right;
1739
+ display: flex;
1740
+ min-height: 50px; }
1741
+
1742
+ .expression-valid-checkmark.react-autoql-icon svg {
1743
+ color: var(--react-autoql-success-color); }
1744
+
1745
+ .expression-invalid-message-container {
1746
+ max-width: 75%;
1747
+ float: left;
1748
+ text-align: left !important;
1749
+ display: flex;
1750
+ flex-direction: row;
1751
+ align-items: left;
1752
+ justify-content: left; }
1753
+
1754
+ .expression-invalid-message {
1755
+ color: var(--react-autoql-danger-color);
1756
+ display: 'inline-block'; }
1757
+
1758
+ .react-autoql-dashboard .react-grid-item {
1759
+ background: var(--react-autoql-background-color-primary, #fff);
1760
+ color: var(--react-autoql-text-color-primary, #404040);
1761
+ font-family: var(--react-autoql-font-family), sans-serif;
1762
+ overflow: hidden;
1763
+ border-radius: 4px;
1764
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
1765
+
1766
+ .react-autoql-dashboard-tile-inner-div {
1767
+ height: 100%;
1768
+ width: 100%;
1769
+ background: inherit;
1770
+ position: relative;
1771
+ text-align: center;
1772
+ display: flex;
1773
+ justify-content: flex-start;
1774
+ flex-direction: column;
1775
+ align-items: center; }
1776
+
1777
+ .dashboard-data-limit-warning-icon {
1778
+ color: var(--react-autoql-warning-color) !important;
1779
+ position: absolute !important;
1780
+ bottom: 40px;
1781
+ right: 16px;
1782
+ font-size: 20px; }
1783
+
1784
+ .react-autoql-dashboard-tile-drag-handle {
1785
+ transition: opacity 0.3s ease;
1786
+ position: absolute;
1787
+ background-color: var(--react-autoql-border-color, #f7f7f7);
1788
+ cursor: move;
1789
+ opacity: 0; }
1790
+ .react-autoql-dashboard-tile-drag-handle.top {
1791
+ top: 0;
1792
+ left: 0;
1793
+ width: 100%;
1794
+ height: 15px; }
1795
+ .react-autoql-dashboard-tile-drag-handle.bottom {
1796
+ bottom: 0;
1797
+ left: 0;
1798
+ width: 100%;
1799
+ height: 15px; }
1800
+ .react-autoql-dashboard-tile-drag-handle.left {
1801
+ top: 0;
1802
+ left: 0;
1803
+ width: 15px;
1804
+ height: 100%; }
1805
+ .react-autoql-dashboard-tile-drag-handle.right {
1806
+ top: 0;
1807
+ right: 0;
1808
+ width: 15px;
1809
+ height: 100%; }
1810
+
1811
+ .react-autoql-dashboard-tile:hover .react-autoql-dashboard-tile-drag-handle {
1812
+ opacity: 1; }
1813
+
1814
+ .react-autoql-dashboard-tile .autoql-options-toolbar {
1815
+ transition: opacity 0.3s ease, color 0.3s ease;
1816
+ visibility: hidden;
1817
+ opacity: 0;
1818
+ bottom: 8px;
1819
+ right: 8px;
1820
+ z-index: 1; }
1821
+
1822
+ .dashboard-tile-viz-toolbar-container {
1823
+ transition: opacity 0.3s ease, color 0.3s ease;
1824
+ color: var(--react-autoql-accent-color);
1825
+ position: absolute;
1826
+ bottom: 0;
1827
+ left: 0;
1828
+ padding: 7px;
1829
+ z-index: 1;
1830
+ opacity: 0;
1831
+ visibility: hidden; }
1832
+ .dashboard-tile-viz-toolbar-container .viz-toolbar,
1833
+ .dashboard-tile-viz-toolbar-container .split-view-btn {
1834
+ position: relative;
1835
+ display: inline-block;
1836
+ background: var(--react-autoql-background-color-primary); }
1837
+ .dashboard-tile-viz-toolbar-container .split-view-btn {
1838
+ margin-right: 7px; }
1839
+ .dashboard-tile-viz-toolbar-container .split-view-btn .react-autoql-icon {
1840
+ font-size: 14px; }
1841
+
1842
+ .split-view-btn {
1843
+ z-index: 1; }
1844
+
1845
+ .split-view-query-btn {
1846
+ transition: opacity 0.3s ease, color 0.3s ease;
1847
+ color: var(--react-autoql-accent-color);
1848
+ position: absolute;
1849
+ top: 7px;
1850
+ left: 7px;
1851
+ bottom: unset;
1852
+ z-index: 1;
1853
+ visibility: hidden;
1854
+ opacity: 0; }
1855
+
1856
+ .react-autoql-dashboard-tile:hover .dashboard-tile-viz-toolbar-container,
1857
+ .react-autoql-dashboard-tile:hover .split-view-query-btn,
1858
+ .react-autoql-dashboard-tile:hover .autoql-options-toolbar {
1859
+ visibility: visible;
1860
+ opacity: 1; }
1861
+
1862
+ .react-autoql-dashboard-tile-inner-div .single-value-response {
1863
+ font-size: 32px;
1864
+ margin-top: -6px;
1865
+ opacity: 0.9; }
1866
+
1867
+ .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper {
1868
+ height: calc(100% - 47px);
1869
+ width: 100%;
1870
+ padding-top: 0;
1871
+ background: inherit; }
1872
+ .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .query-output-error-message {
1873
+ opacity: 0.8; }
1874
+ .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .layout-splitter {
1875
+ height: 1px !important;
1876
+ color: var(--react-autoql-border-color);
1877
+ opacity: 0.3;
1878
+ pointer-events: none; }
1879
+ .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .react-autoql-table {
1880
+ opacity: 0.9;
1881
+ color: var(--react-autoql-text-color-primary);
1882
+ font-size: 11px; }
1883
+
1884
+ .react-autoql-dashboard-tile-inner-div.split .dashboard-tile-response-wrapper {
1885
+ padding: 0; }
1886
+
1887
+ .react-autoql-dashboard-tile-inner-div
1888
+ .dashboard-tile-response-wrapper.editing .layout-splitter {
1889
+ display: block;
1890
+ pointer-events: unset;
1891
+ height: 4px !important;
1892
+ color: var(--react-autoql-text-color-primary);
1893
+ opacity: 0.8; }
1894
+
1895
+ /* Safetynet styles specific to dashboard tiles */
1896
+ .react-autoql-dashboard-tile-inner-div
1897
+ .dashboard-tile-response-wrapper.editing {
1898
+ height: 100%;
1899
+ width: 100%;
1900
+ overflow-x: auto;
1901
+ overflow-y: hidden; }
1902
+
1903
+ .react-autoql-dashboard-tile-inner-div .react-autoql-query-validation-query {
1904
+ white-space: nowrap; }
1905
+
1906
+ .dashboard-tile-response-wrapper.small
1907
+ .react-autoql-query-validation-description,
1908
+ .dashboard-tile-response-wrapper.small
1909
+ .react-autoql-suggestion-message-description,
1910
+ .dashboard-tile-response-wrapper.small
1911
+ .react-autoql-query-validation-execute-btn {
1912
+ display: none; }
1913
+
1914
+ .dashboard-tile-response-wrapper .dashboard-tile-response-container {
1887
1915
  position: relative;
1916
+ height: 100%;
1917
+ width: 100%;
1918
+ background: inherit;
1919
+ cursor: default; }
1920
+ .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-table-container {
1921
+ padding: 20px;
1922
+ padding-top: 15px;
1923
+ width: 100%; }
1924
+ .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-response-content-container {
1925
+ padding: 7px; }
1926
+
1927
+ .dashboard-tile-title-container {
1928
+ width: 100%;
1929
+ text-align: left;
1930
+ padding: 19px 25px 0 25px;
1931
+ height: 47px;
1932
+ white-space: nowrap;
1888
1933
  overflow: hidden;
1889
- background: var(--react-autoql-background-color-primary, #fff);
1890
- border-radius: 4px;
1891
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1892
- margin-bottom: 8px;
1893
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6));
1894
- font-family: var(--react-autoql-font-family), sans-serif;
1895
- transition: all 1s ease;
1896
- transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1);
1897
- -webkit-animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
1898
- animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
1899
- -webkit-animation-fill-mode: both;
1900
- animation-fill-mode: both;
1901
- -webkit-animation-delay: 0s;
1902
- animation-delay: 0s; }
1903
- .react-autoql-notification-list-item .single-value-response {
1904
- font-size: 32px;
1905
- margin-top: -6px;
1906
- opacity: 0.9; }
1907
- .react-autoql-notification-list-item .viz-toolbar {
1908
- position: relative;
1909
- border: none; }
1910
- .react-autoql-notification-list-item .viz-toolbar .react-autoql-toolbar-btn {
1911
- height: 33px; }
1912
- .react-autoql-notification-list-item .react-autoql-notification-details-title {
1913
- font-weight: 600;
1914
- padding-top: 20px;
1915
- padding-bottom: 5px; }
1916
- .react-autoql-notification-list-item.expanded .react-autoql-notification-list-item-header {
1917
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.04)); }
1918
- .react-autoql-notification-list-item .react-autoql-notification-details {
1919
- overflow: hidden; }
1920
- .react-autoql-notification-list-item.animation-complete .react-autoql-notification-details {
1921
- overflow: auto; }
1922
- .react-autoql-notification-list-item:hover:not(.expanded) {
1923
- background-color: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.01)); }
1924
- .react-autoql-notification-list-item:hover .react-autoql-notification-delete-icon {
1925
- opacity: 1; }
1926
- .react-autoql-notification-list-item.triggered .react-autoql-notification-display-name {
1927
- color: var(--react-autoql-accent-color, #26a7df) !important; }
1928
- .react-autoql-notification-list-item.triggered .react-autoql-notification-dismiss-btn {
1929
- margin-top: 3px;
1934
+ text-overflow: ellipsis;
1935
+ flex-shrink: 0;
1936
+ flex-grow: 0; }
1937
+ .dashboard-tile-title-container .dashboard-tile-title {
1930
1938
  color: var(--react-autoql-accent-color, #26a7df); }
1931
- .react-autoql-notification-list-item.triggered .react-autoql-notification-alert-strip {
1932
- opacity: 1; }
1933
- .react-autoql-notification-list-item .react-autoql-notification-expanded-content {
1934
- display: flex;
1935
- flex-direction: column;
1936
- justify-content: stretch;
1937
- transition: height 0.2s ease;
1938
- height: 0;
1939
- opacity: 0; }
1940
- .react-autoql-notification-list-item .react-autoql-notification-expanded-content.visible {
1941
- height: 400px;
1942
- opacity: 1; }
1943
- .react-autoql-notification-list-item .react-autoql-notification-extra-content {
1944
- flex: 0;
1945
- flex-basis: 55px;
1946
- text-align: center;
1947
- padding: 8px;
1948
- border-top: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1949
- .react-autoql-notification-list-item .react-autoql-notification-extra-content .notification-deleted-text {
1950
- line-height: 40px;
1951
- opacity: 0.6;
1952
- font-style: italic; }
1953
- .react-autoql-notification-list-item .react-autoql-notification-description {
1954
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6));
1955
- opacity: 0.8;
1956
- font-size: 14px; }
1957
- .react-autoql-notification-list-item .react-autoql-notification-list-item-header {
1958
- display: flex;
1959
- flex-direction: row;
1960
- justify-content: space-between;
1961
- padding-left: 22px;
1962
- cursor: pointer; }
1963
- .react-autoql-notification-list-item .react-autoql-notification-query-title {
1964
- flex: 0 0 auto;
1965
- font-size: 14px;
1966
- font-family: inherit;
1967
- color: currentcolor;
1968
- opacity: 0.9;
1969
- font-weight: 600;
1970
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
1971
- text-align: center;
1972
- margin: 0 10px;
1973
- padding-top: 20px;
1974
- padding-bottom: 7px; }
1975
- .react-autoql-notification-list-item .react-autoql-notification-details-container {
1976
- flex: 1;
1977
- display: flex;
1978
- flex-direction: row;
1979
- align-items: stretch;
1980
- justify-content: stretch;
1981
- overflow: hidden; }
1982
- .react-autoql-notification-list-item .react-autoql-notification-details-container .react-autoql-notification-details {
1983
- flex: 1 1;
1984
- padding: 20px;
1985
- padding-top: 0;
1986
- opacity: 0.9;
1987
- border-left: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1988
- .react-autoql-notification-list-item .react-autoql-notification-data-container {
1989
- display: flex;
1990
- flex-direction: row;
1991
- justify-content: stretch;
1992
- flex: 3 3 0px;
1993
- overflow: hidden; }
1994
- .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-notificaton-chart-container {
1995
- flex: 1;
1996
- height: 100%;
1997
- width: 0;
1998
- display: flex;
1999
- flex-direction: column;
2000
- padding: 0px 20px 10px 20px; }
2001
- .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-table-container {
2002
- width: 100%;
2003
- padding: 0 10px; }
2004
- .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-table {
2005
- opacity: 0.9;
2006
- color: currentColor;
2007
- font-size: 11px; }
2008
- .react-autoql-notification-list-item .react-autoql-notification-data-title {
2009
- line-height: 22px;
2010
- font-size: 12px;
2011
- text-align: right;
2012
- color: var(--react-autoql-text-color-primary);
2013
- opacity: 0.5;
2014
- padding: 8px 20px; }
2015
- .react-autoql-notification-list-item .react-autoql-notification-data-title span.react-autoql-icon svg {
2016
- margin-top: -3px;
2017
- vertical-align: middle; }
2018
- .react-autoql-notification-list-item .react-autoql-notification-dismiss-icon {
2019
- font-size: 21px;
2020
- margin: 11px;
2021
- width: 40px;
2022
- height: 40px;
2023
- padding: 10px;
2024
- border-radius: 26px;
2025
- display: inline-block;
2026
- line-height: 20px;
2027
- background-color: transparent;
2028
- transition: background-color 0.2s ease;
2029
- cursor: pointer; }
2030
- .react-autoql-notification-list-item .react-autoql-notification-dismiss-icon:hover {
2031
- background-color: var(--react-autoql-background-color-secondary, #ececec); }
2032
- .react-autoql-notification-list-item .react-autoql-notification-delete-icon {
2033
- font-size: 18px;
2034
- margin-top: 3px;
2035
- margin-right: 3px;
2036
- opacity: 0;
2037
- width: 36px;
2038
- height: 36px;
2039
- padding: 9px;
2040
- border-radius: 20px;
2041
- display: inline-block;
2042
- line-height: 20px;
2043
- background-color: transparent;
2044
- transition: all 0.2s ease;
2045
- cursor: pointer; }
2046
- .react-autoql-notification-list-item .react-autoql-notification-delete-icon:hover {
2047
- background-color: var(--react-autoql-background-color-secondary, #ececec); }
2048
- .react-autoql-notification-list-item .react-autoql-notification-alert-icon {
2049
- position: absolute;
2050
- top: -7px;
2051
- left: -7px;
2052
- color: var(--react-autoql-accent-color, #26a7df);
2053
- line-height: 10px;
2054
- background: var(--react-autoql-background-color-primary, #fff);
2055
- border-radius: 10px;
2056
- font-size: 17px; }
2057
- .react-autoql-notification-list-item .react-autoql-notification-alert-strip {
1939
+
1940
+ .dashboard-tile-title-container .dashboard-tile-title {
1941
+ font-weight: bold;
1942
+ font-size: 14px; }
1943
+
1944
+ .dashboard-tile-edit-wrapper {
1945
+ display: flex;
1946
+ width: 100%;
1947
+ height: 55px;
1948
+ padding: 20px 20px 0 25px;
1949
+ flex-shrink: 0;
1950
+ flex-grow: 0; }
1951
+
1952
+ .dashboard-tile-play-button {
1953
+ cursor: default;
1954
+ flex-grow: 0;
1955
+ flex-shrink: 0; }
1956
+
1957
+ .dashboard-tile-play-button span.react-autoql-icon svg {
1958
+ cursor: pointer;
1959
+ width: 25px;
1960
+ height: 33px;
1961
+ margin-left: 10px;
1962
+ color: var(--react-autoql-accent-color); }
1963
+
1964
+ .dashboard-tile-play-button.disabled svg {
1965
+ opacity: 0.5;
1966
+ cursor: not-allowed; }
1967
+
1968
+ .dashboard-tile-play-button:not(.disabled) svg:hover {
1969
+ opacity: 0.8; }
1970
+
1971
+ .dashboard-tile-delete-button {
1972
+ opacity: 0;
1973
+ font-size: 17px;
1974
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1975
+ position: absolute;
1976
+ top: 0px;
1977
+ right: 2px;
1978
+ cursor: pointer;
1979
+ transition: opacity 0.3s ease;
1980
+ z-index: 1; }
1981
+
1982
+ .react-grid-item:hover .dashboard-tile-delete-button {
1983
+ opacity: 1; }
1984
+
1985
+ .dashboard-tile-loading-container {
1986
+ display: flex;
1987
+ height: 100%;
1988
+ width: 100%;
1989
+ padding: 20px;
1990
+ align-items: center;
1991
+ justify-content: center; }
1992
+
1993
+ .dashboard-tile-title-divider {
1994
+ height: 2px;
1995
+ background: currentColor;
1996
+ width: 75px;
1997
+ margin-top: 4px;
1998
+ opacity: 0.07; }
1999
+
2000
+ /* Input box styling for edit mode */
2001
+ .dashboard-tile-input-container {
2002
+ display: flex;
2003
+ width: 100%;
2004
+ height: 100%;
2005
+ font-size: 15px; }
2006
+ .dashboard-tile-input-container .dashboard-tile-input,
2007
+ .dashboard-tile-input-container .dashboard-tile-autocomplete-input {
2008
+ width: 100%;
2058
2009
  height: 100%;
2059
- opacity: 0;
2010
+ padding: 12px;
2011
+ padding-left: 33px;
2012
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
2013
+ outline: none !important;
2014
+ color: var(--react-autoql-text-color-primary, #356f90);
2015
+ background: var(--react-autoql-background-color-primary, #fff); }
2016
+
2017
+ .query-focused .dashboard-tile-left-input-container,
2018
+ .title-focused .dashboard-tile-right-input-container {
2019
+ width: 70%; }
2020
+
2021
+ .dashboard-tile-right-input-container {
2022
+ z-index: 2; }
2023
+
2024
+ .dashboard-tile-right-input-container,
2025
+ .dashboard-tile-left-input-container {
2026
+ position: relative;
2027
+ width: 0;
2028
+ flex-grow: 1;
2029
+ transition: width 0.3s ease; }
2030
+ .dashboard-tile-right-input-container .query-input-icon,
2031
+ .dashboard-tile-right-input-container .title-input-icon,
2032
+ .dashboard-tile-left-input-container .query-input-icon,
2033
+ .dashboard-tile-left-input-container .title-input-icon {
2034
+ color: var(--react-autoql-accent-color);
2060
2035
  position: absolute;
2061
- left: 0px;
2062
- top: 0;
2063
- width: 4px;
2064
- background: var(--react-autoql-accent-color, #26a7df);
2065
- transition-property: opacity;
2066
- transition-duration: 0.2s;
2067
- transition-timing-function: ease; }
2068
- .react-autoql-notification-list-item .react-autoql-notification-viz-switcher {
2069
- flex: 0 0 50px;
2070
- padding: 10px;
2071
- border-left: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
2072
- .react-autoql-notification-list-item .react-autoql-notification-img-container {
2073
- flex: 0 0 60px; }
2074
- .react-autoql-notification-list-item .react-autoql-notification-img-container .react-autoql-notification-img {
2075
- border-radius: 50px;
2076
- height: 45px;
2077
- width: 45px;
2078
- line-height: 45px;
2079
- font-size: 22px;
2080
- color: white;
2081
- background-color: var(--react-autoql-accent-color, #26a7df);
2082
- text-align: center;
2083
- margin-top: 13px;
2084
- margin-right: 17px; }
2085
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container {
2086
- flex: 1;
2087
- line-height: 23px;
2088
- padding: 13px 0px;
2089
- transition: color 0.2s ease; }
2090
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-display-name {
2091
- font-size: 18px;
2092
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.7)); }
2093
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp {
2094
- font-size: 12px;
2095
- opacity: 0.5; }
2096
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
2097
- margin-bottom: -1px; }
2036
+ pointer-events: none;
2037
+ z-index: 1; }
2038
+ .dashboard-tile-right-input-container .query-input-icon,
2039
+ .dashboard-tile-left-input-container .query-input-icon {
2040
+ font-size: 18px;
2041
+ top: 4px;
2042
+ left: 10px; }
2043
+ .dashboard-tile-right-input-container .title-input-icon,
2044
+ .dashboard-tile-left-input-container .title-input-icon {
2045
+ font-size: 16px;
2046
+ top: 7px;
2047
+ left: 11px; }
2098
2048
 
2099
- .react-autoql-step-container a {
2100
- color: var(--react-autoql-accent-color, #26a7df); }
2049
+ .dashboard-tile-input.second.query {
2050
+ transition: all 0.3s ease;
2051
+ border: 1px solid transparent;
2052
+ outline: none !important;
2053
+ color: var(--react-autoql-text-color-primary, #356f90);
2054
+ background: var(--react-autoql-background-color-primary);
2055
+ margin: 0px;
2056
+ padding: 0px;
2057
+ width: 0px;
2058
+ height: 28px;
2059
+ pointer-events: none; }
2060
+ .dashboard-tile-input.second.query.open {
2061
+ width: 200px;
2062
+ padding: 12px;
2063
+ margin-left: 5px;
2064
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
2065
+ pointer-events: unset; }
2101
2066
 
2102
- .frequency-date-select-container {
2103
- margin-top: 10px; }
2067
+ .dashboard-tile-input:hover,
2068
+ .dashboard-tile-input:focus,
2069
+ .dashboard-tile-input-container .dashboard-tile-autocomplete-input:hover,
2070
+ .dashboard-tile-input-container .dashboard-tile-autocomplete-input:focus {
2071
+ border: 1px solid #26a7e9 !important;
2072
+ border-color: var(--react-autoql-accent-color) !important; }
2104
2073
 
2105
- .notification-frequency-step {
2106
- display: flex; }
2107
- .notification-frequency-step .frequency-category-select {
2108
- position: relative;
2109
- padding-top: 9px; }
2110
- .notification-frequency-step .notification-frequency-select {
2111
- margin-left: 8px; }
2112
- .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
2113
- line-height: 33px; }
2114
- .notification-frequency-step .frequency-repeat-follow-text {
2115
- line-height: 32px;
2116
- vertical-align: top; }
2117
- .notification-frequency-step .frequency-settings-container {
2118
- flex: 0 1 400px; }
2074
+ .dashboard-tile-input-container .dashboard-tile-input.query,
2075
+ .dashboard-tile-input-container .dashboard-tile-autocomplete-input {
2076
+ padding-left: 36px;
2077
+ border-top-left-radius: 4px;
2078
+ border-bottom-left-radius: 4px; }
2119
2079
 
2120
- .schedule-builder-timezone-section {
2121
- margin: 10px 5px; }
2122
- .schedule-builder-timezone-section .react-autoql-timezone-select {
2123
- display: inline-block;
2124
- width: 300px; }
2080
+ .dashboard-tile-input-container .dashboard-tile-input.title {
2081
+ border-left: none;
2082
+ border-top-right-radius: 4px;
2083
+ border-bottom-right-radius: 4px;
2084
+ z-index: 2; }
2085
+
2086
+ .dashboard-tile-input-container .dashboard-tile-input.title:hover,
2087
+ .dashboard-tile-input-container .dashboard-tile-input.title:focus,
2088
+ .title-focused .dashboard-tile-right-input-container .dashboard-tile-input,
2089
+ .dashboard-tile-right-input-container:hover .dashboard-tile-input {
2090
+ /* This is done to balance it because we add a 1px left border when the input is focused or hovered */
2091
+ margin-left: -2px; }
2092
+
2093
+ /* Autocomplete styles */
2094
+ .dashboard-tile-input-container .react-autosuggest__container {
2095
+ position: relative;
2096
+ width: 100%;
2097
+ height: 100%;
2098
+ padding: 0;
2099
+ margin: 0; }
2100
+
2101
+ .dashboard-tile-input-container
2102
+ .react-autosuggest__suggestions-container--open {
2103
+ background-color: var(--react-autoql-background-color-primary);
2104
+ border: 1px solid var(--react-autoql-border-color);
2105
+ color: var(--react-autoql-text-color-primary); }
2106
+
2107
+ .dashboard-tile-input-container .react-autosuggest__suggestion {
2108
+ color: var(--react-autoql-text-color-primary); }
2109
+
2110
+ .dashboard-tile-input-container input::-moz-placeholder {
2111
+ opacity: 0.5; }
2112
+
2113
+ .dashboard-tile-input-container input:-ms-input-placeholder {
2114
+ opacity: 0.5; }
2115
+
2116
+ .dashboard-tile-input-container input::placeholder {
2117
+ opacity: 0.5; }
2118
+
2119
+ .react-autoql-dashboard .edit-mode-placeholder-icon {
2120
+ display: inline-block;
2121
+ line-height: 22px;
2122
+ vertical-align: middle;
2123
+ height: 23px; }
2124
+
2125
+ .dashboard-tile-input-container
2126
+ .react-autosuggest__suggestions-container--open {
2127
+ position: absolute;
2128
+ bottom: unset;
2129
+ padding-top: 5px;
2130
+ padding-bottom: 5px;
2131
+ display: block;
2132
+ height: unset;
2133
+ border-radius: 24px;
2134
+ font-family: inherit;
2135
+ font-size: 15px;
2136
+ font-weight: normal;
2137
+ z-index: 2;
2138
+ overflow: hidden;
2139
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
2140
+ text-align: left;
2141
+ width: 100%;
2142
+ top: 35px;
2143
+ border-radius: 4px;
2144
+ margin: 0; }
2145
+
2146
+ .dashboard-tile-input-container .react-autosuggest__suggestions-list {
2147
+ margin: 0;
2148
+ padding: 0;
2149
+ list-style-type: none; }
2150
+
2151
+ .dashboard-tile-input-container .react-autosuggest__suggestion {
2152
+ cursor: pointer;
2153
+ padding: 2px;
2154
+ padding-left: 18px;
2155
+ letter-spacing: 0.05em;
2156
+ line-height: 22.5px; }
2125
2157
 
2126
- .notification-list-loading-container {
2127
- text-align: center;
2128
- padding-top: 100px;
2129
- color: var(--react-autoql-text-color-primary);
2158
+ .dashboard-tile-input-container .react-autosuggest__suggestion--highlighted {
2159
+ background-color: rgba(0, 0, 0, 0.1) !important; }
2160
+
2161
+ .dashboard-tile-input-container .react-autosuggest__section-title {
2162
+ padding: 10px 0 0 10px;
2163
+ font-size: 12px;
2164
+ color: #777; }
2165
+
2166
+ /* Dragging placeholder styles */
2167
+ .react-autoql-db-dragging-placeholder-container {
2130
2168
  height: 100%;
2131
- overflow: hidden;
2132
- background: var(--react-autoql-background-color-secondary); }
2169
+ width: 100%;
2170
+ padding: 20px 30px;
2171
+ display: flex;
2172
+ flex-direction: column; }
2133
2173
 
2134
- .empty-notifications-message {
2135
- color: var(--react-autoql-text-color-primary);
2136
- text-align: center;
2137
- margin-top: 75px; }
2138
- .empty-notifications-message div {
2139
- opacity: 0.6; }
2140
- .empty-notifications-message .empty-notifications-title {
2141
- font-size: 16px;
2142
- font-weight: bold;
2143
- margin-bottom: 5px; }
2144
- .empty-notifications-message .empty-notifications-img {
2145
- width: 250px;
2146
- height: 250px; }
2174
+ .react-autoql-db-dragging-placeholder-title {
2175
+ width: 100%;
2176
+ height: 35px;
2177
+ background: #f3f3f3;
2178
+ border-top-right-radius: 4px;
2179
+ border-top-left-radius: 4px;
2180
+ flex-shrink: 0;
2181
+ flex-grow: 0; }
2147
2182
 
2148
- .react-autoql-notification-list-container {
2183
+ .react-autoql-db-dragging-placeholder-content {
2184
+ width: 100%;
2149
2185
  height: 100%;
2150
- padding: 20px;
2151
- overflow-y: auto;
2152
- background: var(--react-autoql-background-color-secondary); }
2186
+ background: #f9f9f9;
2187
+ border-bottom-right-radius: 4px;
2188
+ border-bottom-left-radius: 4px; }
2153
2189
 
2154
- .react-autoql-notification-dismiss-all {
2155
- text-align: right;
2156
- margin-bottom: 12px;
2157
- padding-right: 10px;
2158
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
2159
- transition: color 0.1s ease; }
2160
- .react-autoql-notification-dismiss-all span {
2161
- opacity: 0.8;
2162
- cursor: pointer; }
2163
- .react-autoql-notification-dismiss-all span:hover {
2164
- opacity: 1; }
2190
+ .dashboard-tile-placeholder-text {
2191
+ font-size: 15px;
2192
+ color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.3)); }
2193
+ .dashboard-tile-placeholder-text .play-icon {
2194
+ vertical-align: bottom;
2195
+ line-height: 20px; }
2165
2196
 
2166
- .react-autoql-notification-display-name-input {
2167
- width: 100%; }
2197
+ /* React Grid Layout overrides */
2198
+ .react-grid-item > .react-resizable-handle {
2199
+ z-index: 1;
2200
+ position: absolute;
2201
+ width: 25px;
2202
+ height: 25px;
2203
+ bottom: 0;
2204
+ right: 0; }
2168
2205
 
2169
- .react-autoql-notification-message-input {
2170
- width: 100%; }
2206
+ .react-grid-item > .react-resizable-handle::after {
2207
+ width: 11px !important;
2208
+ height: 11px !important;
2209
+ bottom: 4px;
2210
+ right: 4px;
2211
+ opacity: 0;
2212
+ border-right: 1px solid var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4)) !important;
2213
+ border-bottom: 1px solid var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4)) !important;
2214
+ transition: opacity 0.3s ease; }
2171
2215
 
2172
- .react-autoql-notification-list-item:nth-of-type(0) {
2173
- -webkit-animation-delay: 0s;
2174
- animation-delay: 0s; }
2216
+ .react-grid-item:hover > .react-resizable-handle::after {
2217
+ opacity: 1; }
2175
2218
 
2176
- .react-autoql-notification-list-item:nth-of-type(1) {
2177
- -webkit-animation-delay: 0.1s;
2178
- animation-delay: 0.1s; }
2219
+ .react-grid-placeholder {
2220
+ background: rgba(0, 0, 0, 0.13) !important; }
2179
2221
 
2180
- .react-autoql-notification-list-item:nth-of-type(2) {
2181
- -webkit-animation-delay: 0.2s;
2182
- animation-delay: 0.2s; }
2222
+ /* This fixes the flickering bug in RGL when resizing elements */
2223
+ .react-draggable-transparent-selection span::-moz-selection, .react-draggable-transparent-selection div::-moz-selection, .react-draggable-transparent-selection a::-moz-selection, .react-draggable-transparent-selection input::-moz-selection, .react-draggable-transparent-selection text::-moz-selection {
2224
+ color: inherit; }
2225
+ .react-draggable-transparent-selection input::-moz-placeholder {
2226
+ color: inherit; }
2227
+ .react-draggable-transparent-selection input:-ms-input-placeholder {
2228
+ color: inherit; }
2229
+ .react-draggable-transparent-selection span::selection,
2230
+ .react-draggable-transparent-selection div::selection,
2231
+ .react-draggable-transparent-selection a::selection,
2232
+ .react-draggable-transparent-selection input::selection,
2233
+ .react-draggable-transparent-selection text::selection,
2234
+ .react-draggable-transparent-selection input::placeholder {
2235
+ color: inherit; }
2183
2236
 
2184
- .react-autoql-notification-list-item:nth-of-type(3) {
2185
- -webkit-animation-delay: 0.3s;
2186
- animation-delay: 0.3s; }
2237
+ .dashboard-tile-response-container .layout-pane-primary {
2238
+ overflow: hidden; }
2187
2239
 
2188
- .react-autoql-notification-list-item:nth-of-type(4) {
2189
- -webkit-animation-delay: 0.4s;
2190
- animation-delay: 0.4s; }
2240
+ .splitter-layout,
2241
+ .layout-pane,
2242
+ .dashboard-tile-split-pane-container,
2243
+ .react-autoql-dashboard-drilldown-original {
2244
+ display: flex;
2245
+ align-items: stretch;
2246
+ justify-content: center;
2247
+ width: 100%; }
2191
2248
 
2192
- .react-autoql-notification-list-item:nth-of-type(5) {
2193
- -webkit-animation-delay: 0.5s;
2194
- animation-delay: 0.5s; }
2249
+ .dashboard-tile-response-container .splitter-layout,
2250
+ .dashboard-tile-response-container .layout-pane,
2251
+ .dashboard-tile-response-container .dashboard-tile-split-pane-container {
2252
+ background: inherit; }
2195
2253
 
2196
- .react-autoql-notification-list-item:nth-of-type(6) {
2197
- -webkit-animation-delay: 0.6s;
2198
- animation-delay: 0.6s; }
2254
+ .react-autoql-btn {
2255
+ border-radius: 4px;
2256
+ cursor: pointer;
2257
+ outline: none !important;
2258
+ transition: all 0.2s ease;
2259
+ width: auto;
2260
+ display: inline-block; }
2199
2261
 
2200
- .react-autoql-notification-list-item:nth-of-type(7) {
2201
- -webkit-animation-delay: 0.7s;
2202
- animation-delay: 0.7s; }
2262
+ .react-autoql-btn.disabled {
2263
+ opacity: 0.4;
2264
+ cursor: not-allowed;
2265
+ pointer-events: none; }
2203
2266
 
2204
- .react-autoql-notification-list-item:nth-of-type(8) {
2205
- -webkit-animation-delay: 0.8s;
2206
- animation-delay: 0.8s; }
2267
+ .react-autoql-btn.small {
2268
+ padding: 2px 8px;
2269
+ margin: 2px 3px; }
2207
2270
 
2208
- .react-autoql-notification-list-item:nth-of-type(9) {
2209
- -webkit-animation-delay: 0.9s;
2210
- animation-delay: 0.9s; }
2271
+ .react-autoql-btn.large {
2272
+ padding: 5px 16px;
2273
+ margin: 2px 5px; }
2211
2274
 
2212
- .react-autoql-notification-list-item:nth-of-type(10) {
2213
- -webkit-animation-delay: 1s;
2214
- animation-delay: 1s; }
2275
+ .react-autoql-btn.default {
2276
+ color: inherit;
2277
+ border: 1px solid var(--react-autoql-border-color);
2278
+ background: inherit; }
2279
+ .react-autoql-btn.default:hover {
2280
+ border-color: var(--react-autoql-accent-color);
2281
+ color: var(--react-autoql-accent-color); }
2215
2282
 
2216
- @-webkit-keyframes slideIn {
2217
- 0% {
2218
- opacity: 0;
2219
- top: 500px; }
2220
- 100% {
2221
- opacity: 1;
2222
- top: 0; } }
2283
+ .react-autoql-btn.primary {
2284
+ background: var(--react-autoql-accent-color);
2285
+ border: 1px solid var(--react-autoql-accent-color);
2286
+ color: white; }
2287
+ .react-autoql-btn.primary:hover {
2288
+ opacity: 0.8; }
2289
+
2290
+ .react-autoql-btn.danger {
2291
+ color: var(--react-autoql-danger-color, #ca0b00);
2292
+ border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2293
+ background: inherit; }
2294
+ .react-autoql-btn.danger:hover {
2295
+ background-color: var(--react-autoql-danger-color, #ca0b00);
2296
+ color: #fff; }
2297
+
2298
+ .react-autoql-cascader {
2299
+ position: relative;
2300
+ white-space: nowrap;
2301
+ overflow: hidden;
2302
+ min-width: 300px; }
2303
+ .react-autoql-cascader .options-container {
2304
+ transition: max-width 0.3s ease;
2305
+ display: inline-block;
2306
+ vertical-align: top;
2307
+ padding: 0 10px;
2308
+ margin: 10px 0;
2309
+ width: 100%;
2310
+ max-width: calc(100% - 20px);
2311
+ white-space: pre-wrap; }
2312
+ .react-autoql-cascader .options-container.hidden {
2313
+ max-width: 0; }
2314
+ .react-autoql-cascader .options-container.hidden span {
2315
+ white-space: nowrap; }
2316
+ .react-autoql-cascader .options-container.hidden .option {
2317
+ opacity: 0;
2318
+ pointer-events: none; }
2319
+ .react-autoql-cascader .options-container .options-title {
2320
+ padding: 4px;
2321
+ padding-left: 10px;
2322
+ font-weight: 600; }
2323
+ .react-autoql-cascader .options-container .cascader-back-arrow {
2324
+ position: absolute;
2325
+ cursor: pointer;
2326
+ top: 15px;
2327
+ left: 0; }
2328
+ .react-autoql-cascader .options-container .cascader-back-arrow:hover {
2329
+ opacity: 0.8; }
2330
+ .react-autoql-cascader .options-container .option {
2331
+ cursor: pointer;
2332
+ padding: 4px;
2333
+ display: flex;
2334
+ justify-content: space-between;
2335
+ border-radius: 2px;
2336
+ padding-left: 10px; }
2337
+ .react-autoql-cascader .options-container .option .option-arrow {
2338
+ opacity: 0.7; }
2339
+ .react-autoql-cascader .options-container .option .option-execute-icon {
2340
+ opacity: 0;
2341
+ color: #fff;
2342
+ font-size: 16px;
2343
+ vertical-align: middle; }
2344
+ .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
2345
+ background-color: var(--react-autoql-accent-color, #26a7df);
2346
+ color: #fff; }
2347
+ .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
2348
+ opacity: 1; }
2349
+ .react-autoql-cascader .options-container:not(:last-child) {
2350
+ border-right: 1px solid #d3d3d352; }
2351
+
2352
+ .query-tips-page-container {
2353
+ height: 100%;
2354
+ padding: 10px; }
2355
+ .query-tips-page-container .chat-bar-input-icon {
2356
+ top: 20px;
2357
+ left: 26px; }
2358
+ .query-tips-page-container .react-autoql-chatbar-input.left-padding {
2359
+ padding-left: 46px; }
2223
2360
 
2224
- .notification-rule-add-btn-outer,
2225
- .notification-rule-validate-btn-outer {
2361
+ .query-tips-result-container {
2362
+ color: var(--react-autoql-text-color-primary);
2363
+ padding: 0px 20px;
2226
2364
  text-align: center;
2227
- border-style: dashed !important;
2228
- height: 38px;
2229
- line-height: 25px;
2230
- margin: 0 !important;
2231
- overflow: hidden; }
2232
-
2233
- .notification-rule-outer-container {
2234
- position: relative;
2235
- border: 1px solid transparent;
2236
- border-radius: 4px; }
2237
- .notification-rule-outer-container.outlined {
2238
- border-color: rgba(0, 0, 0, 0.15);
2239
- padding: 0 20px;
2240
- padding-bottom: 12px; }
2365
+ max-width: 550px;
2366
+ margin: 0 auto; }
2367
+ .query-tips-result-container .query-tip-list-container {
2368
+ margin-bottom: 20px; }
2369
+ .query-tips-result-container .animated-item {
2370
+ -webkit-animation: fadeIn 0.3s linear;
2371
+ animation: fadeIn 0.3s linear;
2372
+ -webkit-animation-fill-mode: both;
2373
+ animation-fill-mode: both; }
2374
+ .query-tips-result-container .query-tip-item {
2375
+ position: relative;
2376
+ padding: 13px;
2377
+ border-top: 1px solid rgba(0, 0, 0, 0.04);
2378
+ cursor: pointer; }
2379
+ .query-tips-result-container .query-tip-item:first-child {
2380
+ border-top: none; }
2381
+ .query-tips-result-container .query-tip-item .execute-btn {
2382
+ position: absolute;
2383
+ right: 10px;
2384
+ top: 4px;
2385
+ font-size: 20px;
2386
+ visibility: hidden;
2387
+ opacity: 0; }
2388
+ .query-tips-result-container .query-tip-item:hover {
2389
+ font-weight: bold;
2390
+ color: var(--react-autoql-accent-color); }
2391
+ .query-tips-result-container .query-tip-item:hover .execute-btn {
2392
+ visibility: visible;
2393
+ opacity: 1; }
2394
+ .query-tips-result-container .query-tips-result-placeholder {
2395
+ margin-top: 50px;
2396
+ opacity: 0.6; }
2241
2397
 
2242
- .notification-outer-all-any {
2398
+ .chat-bar-loading-spinner {
2243
2399
  position: absolute;
2244
- left: 0;
2245
- top: 50%; }
2400
+ right: 20px;
2401
+ top: 22px; }
2246
2402
 
2247
- .notification-first-group-btn-container {
2248
- display: flex;
2249
- justify-content: space-between; }
2403
+ #react-paginate {
2404
+ position: relative;
2405
+ background: transparent;
2406
+ padding: 8px; }
2407
+ #react-paginate ul {
2408
+ display: inline-block;
2409
+ padding-left: 0;
2410
+ margin-bottom: 0; }
2411
+ #react-paginate li {
2412
+ display: inline-block;
2413
+ color: var(--react-autoql-text-color-primary);
2414
+ cursor: pointer;
2415
+ margin-right: 3px;
2416
+ border-radius: 5px;
2417
+ margin-bottom: 0;
2418
+ -webkit-user-select: none;
2419
+ -moz-user-select: none;
2420
+ -ms-user-select: none;
2421
+ user-select: none; }
2422
+ #react-paginate li:hover {
2423
+ opacity: 0.7;
2424
+ border-radius: 50%; }
2425
+ #react-paginate li a {
2426
+ display: inline-block;
2427
+ color: var(--react-autoql-text-color-primary);
2428
+ outline: none;
2429
+ width: 28px;
2430
+ height: 28px;
2431
+ line-height: 28px; }
2432
+ #react-paginate li.selected {
2433
+ background: var(--react-autoql-accent-color);
2434
+ border-radius: 50%;
2435
+ outline: none; }
2436
+ #react-paginate li.selected a {
2437
+ color: #fff; }
2438
+ #react-paginate .pagination-next.disabled,
2439
+ #react-paginate .pagination-previous.disabled {
2440
+ opacity: 0.5;
2441
+ pointer-events: none; }
2442
+ #react-paginate .pagination-previous,
2443
+ #react-paginate .pagination-next {
2444
+ position: absolute;
2445
+ font-size: 18px; }
2446
+ #react-paginate .pagination-previous a,
2447
+ #react-paginate .pagination-next a {
2448
+ color: var(--react-autoql-accent-color); }
2449
+ #react-paginate .pagination-previous {
2450
+ left: 20px; }
2451
+ #react-paginate .pagination-next {
2452
+ right: 20px; }
2250
2453
 
2251
- .data-alerts-container.read-only .react-autoql-notification-group-container {
2252
- border: none; }
2454
+ .animated-item:nth-child(1) {
2455
+ -webkit-animation-delay: 0.08s;
2456
+ animation-delay: 0.08s; }
2253
2457
 
2254
- .chat-single-message-container {
2255
- transition: background-color 0.2s ease;
2256
- padding-top: 6px; }
2257
- .chat-single-message-container:first-of-type {
2258
- margin-top: 10px; }
2259
- .chat-single-message-container .query-more-btn {
2260
- transition: all 0.3s ease;
2261
- font-size: 22px;
2262
- padding: 13px;
2263
- margin-bottom: 6px;
2264
- height: 42px;
2265
- opacity: 0;
2266
- visibility: hidden;
2267
- cursor: pointer; }
2268
- .chat-single-message-container .query-more-btn:hover {
2269
- opacity: 1; }
2458
+ .animated-item:nth-child(2) {
2459
+ -webkit-animation-delay: 0.16s;
2460
+ animation-delay: 0.16s; }
2270
2461
 
2271
- .chat-condition-item-container {
2272
- position: absolute;
2273
- background: inherit;
2274
- bottom: 0px;
2275
- padding: 5px;
2276
- border-radius: 6px; }
2462
+ .animated-item:nth-child(3) {
2463
+ -webkit-animation-delay: 0.24s;
2464
+ animation-delay: 0.24s; }
2277
2465
 
2278
- .chat-condition-item {
2279
- background: none !important;
2280
- border: none;
2281
- margin-top: -20px !important;
2282
- padding: 0 !important;
2283
- font-family: var(--react-autoql-font-family);
2284
- color: var(--react-autoql-accent-color);
2285
- text-decoration: underline;
2286
- cursor: pointer; }
2466
+ .animated-item:nth-child(4) {
2467
+ -webkit-animation-delay: 0.32s;
2468
+ animation-delay: 0.32s; }
2287
2469
 
2288
- .chat-single-message-container.response {
2289
- display: flex;
2290
- justify-content: flex-start;
2291
- padding-left: 20px;
2292
- -webkit-animation: scale-up-bl 0.6s ease;
2293
- animation: scale-up-bl 0.6s ease; }
2470
+ .animated-item:nth-child(5) {
2471
+ -webkit-animation-delay: 0.4s;
2472
+ animation-delay: 0.4s; }
2294
2473
 
2295
- .chat-single-message-container.request {
2296
- display: flex;
2297
- justify-content: flex-end;
2298
- padding-right: 20px;
2299
- -webkit-animation: scale-up-br 0.6s ease;
2300
- animation: scale-up-br 0.6s ease; }
2474
+ .animated-item:nth-child(6) {
2475
+ -webkit-animation-delay: 0.48s;
2476
+ animation-delay: 0.48s; }
2301
2477
 
2302
- .chat-single-message-container .chat-message-bubble {
2303
- position: relative;
2304
- padding: 13px;
2305
- border-radius: 10px;
2306
- max-width: calc(100% - 20px);
2307
- word-wrap: break-word;
2308
- font-family: inherit;
2309
- font-size: 14px;
2310
- letter-spacing: 0.04em;
2311
- box-sizing: border-box;
2312
- /* make small margin on bottom because sometimes react
2313
- custom scrollbar cuts off a pixel or 2 at the bottom */
2314
- margin-bottom: 6px; }
2478
+ .animated-item:nth-child(7) {
2479
+ -webkit-animation-delay: 0.56s;
2480
+ animation-delay: 0.56s; }
2315
2481
 
2316
- .chat-single-message-container .chat-message-bubble.text {
2317
- max-width: 85%; }
2482
+ .animated-item:nth-child(8) {
2483
+ -webkit-animation-delay: 0.64s;
2484
+ animation-delay: 0.64s; }
2318
2485
 
2319
- .chat-single-message-container .chat-message-bubble.full-width {
2320
- width: calc(100% - 20px) !important;
2321
- min-width: calc(100% - 20px) !important;
2322
- max-width: calc(100% - 20px) !important; }
2486
+ .animated-item:nth-child(9) {
2487
+ -webkit-animation-delay: 0.72s;
2488
+ animation-delay: 0.72s; }
2323
2489
 
2324
- .chat-single-message-container.response .chat-message-bubble.active {
2325
- border: 1px solid #c3c3c3; }
2490
+ .animated-item:nth-child(10) {
2491
+ -webkit-animation-delay: 0.8s;
2492
+ animation-delay: 0.8s; }
2326
2493
 
2327
- .chat-single-message-container.response .chat-message-bubble {
2328
- background: var(--react-autoql-background-color-primary);
2329
- color: var(--react-autoql-text-color-primary);
2330
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2494
+ .animated-item:nth-child(11) {
2495
+ -webkit-animation-delay: 0.88s;
2496
+ animation-delay: 0.88s; }
2331
2497
 
2332
- .chat-single-message-container.response .chat-message-bubble:not(.text) {
2333
- min-width: 125px; }
2498
+ .animated-item:nth-child(12) {
2499
+ -webkit-animation-delay: 0.96s;
2500
+ animation-delay: 0.96s; }
2334
2501
 
2335
- .chat-single-message-container.request .chat-message-bubble {
2336
- background: var(--react-autoql-accent-color);
2337
- color: white;
2338
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2502
+ .animated-item:nth-child(13) {
2503
+ -webkit-animation-delay: 1.04s;
2504
+ animation-delay: 1.04s; }
2339
2505
 
2340
- /* Increase height of message to include table filters,
2341
- so we dont have to redraw the whole table */
2342
- .chat-single-message-container.response.filtering-table {
2343
- max-height: calc(85% + 35px) !important; }
2506
+ .animated-item:nth-child(14) {
2507
+ -webkit-animation-delay: 1.12s;
2508
+ animation-delay: 1.12s; }
2344
2509
 
2345
- .chat-message-toolbar,
2346
- .chat-message-toolbar.autoql-options-toolbar {
2347
- display: none;
2348
- position: absolute;
2349
- background: inherit;
2350
- top: -31px;
2351
- padding: 5px;
2352
- border-radius: 6px;
2353
- line-height: 28px;
2354
- background: var(--react-autoql-background-color-primary);
2355
- border: 1px solid var(--react-autoql-border-color);
2356
- color: var(--react-autoql-accent-color); }
2510
+ .animated-item:nth-child(15) {
2511
+ -webkit-animation-delay: 1.2s;
2512
+ animation-delay: 1.2s; }
2513
+
2514
+ @-webkit-keyframes fadeIn {
2515
+ 0% {
2516
+ opacity: 0;
2517
+ top: 100px; }
2518
+ 75% {
2519
+ opacity: 0.5;
2520
+ top: 0px; }
2521
+ 100% {
2522
+ opacity: 1; } }
2357
2523
 
2358
- .chat-message-toolbar.right {
2359
- right: -9px; }
2524
+ .react-autoql-table-container {
2525
+ height: 100%;
2526
+ max-width: 100%;
2527
+ background-color: inherit; }
2360
2528
 
2361
- .chat-message-toolbar.left {
2362
- left: -9px; }
2529
+ .react-autoql-table {
2530
+ margin-bottom: 0; }
2363
2531
 
2364
- .chat-message-bubble:hover .chat-message-toolbar,
2365
- .chat-message-bubble .chat-message-toolbar.active {
2366
- display: block; }
2532
+ /* tabulator */
2533
+ .react-autoql-table.tabulator,
2534
+ .react-autoql-table.tabulator .tabulator-row,
2535
+ .react-autoql-table.tabulator .tabulator-header,
2536
+ .react-autoql-table.tabulator .tabulator-headers,
2537
+ .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2538
+ .react-autoql-table.tabulator .tabulator-tableHolder .tabulator-table {
2539
+ background-color: inherit; }
2367
2540
 
2368
- .report-problem-text-area {
2369
- border-radius: 4px;
2370
- border: 1px solid rgba(0, 0, 0, 0.15);
2371
- margin-top: 10px;
2372
- padding: 5px 10px;
2373
- outline: none !important; }
2541
+ .react-autoql-table-container.supports-drilldown
2542
+ .react-autoql-table.tabulator
2543
+ .tabulator-row.tabulator-unselectable:hover {
2544
+ cursor: pointer !important;
2545
+ background-color: var(--react-autoql-hover-color) !important; }
2374
2546
 
2375
- .data-limit-warning-icon {
2376
- color: var(--react-autoql-warning-color) !important;
2377
- position: absolute !important;
2378
- bottom: 2px;
2379
- right: 4px;
2380
- font-size: 20px; }
2547
+ .react-autoql-table.tabulator
2548
+ .tabulator-header
2549
+ .tabulator-col.tabulator-sortable:hover {
2550
+ background-color: var(--react-autoql-hover-color) !important; }
2381
2551
 
2382
- .condition-info-icon-left-align {
2383
- color: var(--react-autoql-accent-color) !important;
2384
- position: absolute !important;
2385
- bottom: 2px;
2386
- right: 10px;
2387
- font-size: 20px; }
2552
+ .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2553
+ .react-autoql-table.tabulator .tabulator-cell {
2554
+ border-color: var(--react-autoql-border-color); }
2388
2555
 
2389
- .condition-info-icon {
2390
- color: var(--react-autoql-accent-color) !important;
2391
- position: absolute !important;
2392
- bottom: 2px;
2393
- right: 4px;
2394
- font-size: 20px; }
2556
+ .react-autoql-table.tabulator .tabulator-header {
2557
+ border-bottom: 2px solid var(--react-autoql-border-color); }
2395
2558
 
2396
- .more-options-menu,
2397
- .report-problem-menu {
2398
- background: var(--react-autoql-background-color-primary);
2399
- padding: 10px 0; }
2400
- .more-options-menu span.react-autoql-icon svg,
2401
- .report-problem-menu span.react-autoql-icon svg {
2402
- margin-right: 3px; }
2559
+ .react-autoql-table.tabulator {
2560
+ background-color: inherit;
2561
+ height: 100%; }
2403
2562
 
2404
- .interpretation-icon {
2405
- vertical-align: top;
2406
- height: 26px;
2407
- margin: 0 3px;
2408
- font-size: 18px; }
2563
+ .react-autoql-table .tabulator-row {
2564
+ /* user-select: none; This breaks copy/paste */
2565
+ border-bottom: 1px solid var(--react-autoql-border-color); }
2409
2566
 
2410
- /* Chart icon styles */
2411
- .chart-icon-svg-0,
2412
- .react-autoql-icon-svg-0 {
2413
- fill: currentColor; }
2567
+ .tabulator-cell:not(:first-child) {
2568
+ border-left: 1px solid !important;
2569
+ border-color: rgba(0, 0, 0, 0.06) !important; }
2414
2570
 
2415
- .hm0 {
2416
- opacity: 0.5;
2417
- fill: currentColor;
2418
- enable-background: new; }
2571
+ .react-autoql-table .tabulator-tableHolder {
2572
+ max-height: calc(100% - 38px) !important;
2573
+ background-color: inherit; }
2419
2574
 
2420
- .hm1 {
2421
- fill: currentColor; }
2575
+ .react-autoql-table.tabulator
2576
+ .tabulator-header
2577
+ .tabulator-col
2578
+ .tabulator-col-content {
2579
+ padding: 8px 5px; }
2422
2580
 
2423
- .hm2 {
2424
- opacity: 0.15;
2425
- fill: currentColor;
2426
- enable-background: new; }
2581
+ .react-autoql-table.tabulator
2582
+ .tabulator-header
2583
+ .tabulator-col
2584
+ .tabulator-col-content
2585
+ .tabulator-arrow {
2586
+ opacity: 0;
2587
+ border-left: 4px solid transparent !important;
2588
+ border-right: 4px solid transparent !important;
2589
+ right: 4px;
2590
+ top: calc(50% - 3px); }
2427
2591
 
2428
- .hm3 {
2429
- opacity: 0.6;
2430
- fill: currentColor;
2431
- enable-background: new; }
2592
+ .react-autoql-table.tabulator
2593
+ .tabulator-header
2594
+ .tabulator-col:hover
2595
+ .tabulator-col-content
2596
+ .tabulator-arrow {
2597
+ opacity: 1 !important; }
2432
2598
 
2433
- .hm4 {
2434
- opacity: 0.65;
2435
- fill: currentColor;
2436
- enable-background: new; }
2599
+ .react-autoql-table.tabulator
2600
+ .tabulator-header
2601
+ .tabulator-col.tabulator-sortable[aria-sort='desc']
2602
+ .tabulator-col-content
2603
+ .tabulator-arrow {
2604
+ border-top: 4px solid rgba(0, 0, 0, 0.2) !important; }
2437
2605
 
2438
- .hm5 {
2439
- fill: currentColor; }
2606
+ .react-autoql-table.tabulator
2607
+ .tabulator-header
2608
+ .tabulator-col.tabulator-sortable[aria-sort='asc']
2609
+ .tabulator-col-content
2610
+ .tabulator-arrow,
2611
+ .react-autoql-table.tabulator
2612
+ .tabulator-header
2613
+ .tabulator-col.tabulator-sortable[aria-sort='none']
2614
+ .tabulator-col-content
2615
+ .tabulator-arrow {
2616
+ border-bottom: 4px solid rgba(0, 0, 0, 0.2) !important; }
2440
2617
 
2441
- .hm6 {
2442
- fill: currentColor; }
2618
+ .react-autoql-table .tabulator-tableHolder::-webkit-scrollbar {
2619
+ display: unset;
2620
+ opacity: 0;
2621
+ background-color: transparent;
2622
+ width: 7px;
2623
+ height: 7px;
2624
+ -webkit-transition: all 0.3s ease;
2625
+ transition: all 0.3s ease; }
2443
2626
 
2444
- /* animations */
2445
- @-webkit-keyframes scale-up-br {
2446
- 0% {
2447
- transform: scale(0.5);
2448
- transform-origin: 100% 100%; }
2449
- 100% {
2450
- transform: scale(1);
2451
- transform-origin: 100% 100%; } }
2452
- @keyframes scale-up-br {
2453
- 0% {
2454
- transform: scale(0.5);
2455
- transform-origin: 100% 100%; }
2456
- 100% {
2457
- transform: scale(1);
2458
- transform-origin: 100% 100%; } }
2627
+ .react-autoql-table.tabulator .tabulator-tableHolder {
2628
+ min-height: calc(100% - 40px) !important;
2629
+ height: calc(100% - 40px) !important;
2630
+ max-height: calc(100% - 40px) !important; }
2459
2631
 
2460
- @-webkit-keyframes scale-up-bl {
2461
- 0% {
2462
- transform: scale(0.5);
2463
- transform-origin: 0% 100%; }
2464
- 100% {
2465
- transform: scale(1);
2466
- transform-origin: 0% 100%; } }
2632
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track,
2633
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track-piece,
2634
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-corner {
2635
+ background-color: transparent; }
2467
2636
 
2468
- @keyframes scale-up-bl {
2469
- 0% {
2470
- transform: scale(0.5);
2471
- transform-origin: 0% 100%; }
2472
- 100% {
2473
- transform: scale(1);
2474
- transform-origin: 0% 100%; } }
2637
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-thumb {
2638
+ background-color: rgba(0, 0, 0, 0.2);
2639
+ border-radius: 7px;
2640
+ border: 0px; }
2475
2641
 
2476
- .react-autoql-btn {
2642
+ .react-autoql-table .tabulator-header-filter input {
2643
+ border: 1px solid var(--react-autoql-border-color);
2477
2644
  border-radius: 4px;
2478
- cursor: pointer;
2479
- outline: none !important;
2480
- transition: all 0.2s ease;
2481
- width: auto;
2482
- display: inline-block; }
2645
+ background: transparent;
2646
+ padding: 4px 9px !important;
2647
+ outline: none !important; }
2483
2648
 
2484
- .react-autoql-btn.disabled {
2485
- opacity: 0.4;
2486
- cursor: not-allowed;
2487
- pointer-events: none; }
2649
+ .react-autoql-table .tabulator-header-filter input:focus {
2650
+ border: 1px solid #28a8e0; }
2488
2651
 
2489
- .react-autoql-btn.small {
2490
- padding: 2px 8px;
2491
- margin: 2px 3px; }
2652
+ /* These are necessary because we are always rendering the
2653
+ filter (just display: none when not used) instead of re-rendering
2654
+ the whole table when the filter button is clicked */
2655
+ .react-autoql-table-container:not(.filtering)
2656
+ .react-autoql-table
2657
+ .tabulator-header-filter {
2658
+ display: none; }
2492
2659
 
2493
- .react-autoql-btn.large {
2494
- padding: 5px 16px;
2495
- margin: 2px 5px; }
2660
+ .react-autoql-table-container:not(.filtering)
2661
+ .react-autoql-table
2662
+ .tabulator-col {
2663
+ height: auto !important; }
2496
2664
 
2497
- .react-autoql-btn.default {
2498
- color: inherit;
2499
- border: 1px solid var(--react-autoql-border-color);
2500
- background: inherit; }
2501
- .react-autoql-btn.default:hover {
2502
- border-color: var(--react-autoql-accent-color);
2503
- color: var(--react-autoql-accent-color); }
2665
+ .tabulator-table .tabulator-row .tabulator-cell {
2666
+ min-height: 38px; }
2504
2667
 
2505
- .react-autoql-btn.primary {
2506
- background: var(--react-autoql-accent-color);
2507
- border: 1px solid var(--react-autoql-accent-color);
2508
- color: white; }
2509
- .react-autoql-btn.primary:hover {
2510
- opacity: 0.8; }
2668
+ /* Center header titles */
2669
+ .react-autoql-table .tabulator-header .tabulator-col {
2670
+ text-align: center !important; }
2671
+
2672
+ .react-autoql-table .tabulator-header .tabulator-col-title {
2673
+ padding-left: 10px !important;
2674
+ padding-right: 10px !important; }
2511
2675
 
2512
- .react-autoql-btn.danger {
2513
- color: var(--react-autoql-danger-color, #ca0b00);
2514
- border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2515
- background: inherit; }
2516
- .react-autoql-btn.danger:hover {
2517
- background-color: var(--react-autoql-danger-color, #ca0b00);
2518
- color: #fff; }
2676
+ .filter-tag {
2677
+ color: #2ecc40;
2678
+ border: 1px solid;
2679
+ padding: 2px 4px;
2680
+ border-radius: 4px;
2681
+ font-weight: 400;
2682
+ font-size: 10px;
2683
+ margin-right: 5px;
2684
+ vertical-align: top;
2685
+ line-height: 21px; }
2519
2686
 
2520
- .react-autoql-cascader {
2521
- position: relative;
2522
- white-space: nowrap;
2523
- overflow: hidden;
2524
- min-width: 300px; }
2525
- .react-autoql-cascader .options-container {
2526
- transition: max-width 0.3s ease;
2527
- display: inline-block;
2528
- vertical-align: top;
2529
- padding: 0 10px;
2530
- margin: 10px 0;
2531
- width: 100%;
2532
- max-width: calc(100% - 20px);
2533
- white-space: pre-wrap; }
2534
- .react-autoql-cascader .options-container.hidden {
2535
- max-width: 0; }
2536
- .react-autoql-cascader .options-container.hidden span {
2537
- white-space: nowrap; }
2538
- .react-autoql-cascader .options-container.hidden .option {
2539
- opacity: 0;
2540
- pointer-events: none; }
2541
- .react-autoql-cascader .options-container .options-title {
2542
- padding: 4px;
2543
- padding-left: 10px;
2544
- font-weight: 600; }
2545
- .react-autoql-cascader .options-container .cascader-back-arrow {
2546
- position: absolute;
2547
- cursor: pointer;
2548
- top: 15px;
2549
- left: 0; }
2550
- .react-autoql-cascader .options-container .cascader-back-arrow:hover {
2551
- opacity: 0.8; }
2552
- .react-autoql-cascader .options-container .option {
2553
- cursor: pointer;
2554
- padding: 4px;
2555
- display: flex;
2556
- justify-content: space-between;
2557
- border-radius: 2px;
2558
- padding-left: 10px; }
2559
- .react-autoql-cascader .options-container .option .option-arrow {
2560
- opacity: 0.7; }
2561
- .react-autoql-cascader .options-container .option .option-execute-icon {
2562
- opacity: 0;
2563
- color: #fff;
2564
- font-size: 16px;
2565
- vertical-align: middle; }
2566
- .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
2567
- background-color: var(--react-autoql-accent-color, #26a7df);
2568
- color: #fff; }
2569
- .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
2570
- opacity: 1; }
2571
- .react-autoql-cascader .options-container:not(:last-child) {
2572
- border-right: 1px solid #d3d3d352; }
2687
+ .comparison-value-positive {
2688
+ color: #2ecc40; }
2689
+
2690
+ .comparison-value-negative {
2691
+ color: #e80000; }
2573
2692
 
2574
2693
  .react-autoql-condition-locking-input {
2575
2694
  padding: 5px;
@@ -2627,559 +2746,440 @@ so we dont have to redraw the whole table */
2627
2746
  padding-left: 10px; }
2628
2747
 
2629
2748
  .condition-list {
2630
- padding: 0;
2631
- margin: 0 auto; }
2632
-
2633
- .condition-list-item {
2634
- cursor: pointer;
2635
- padding: 4px;
2636
- margin: 0 10px 0 10px;
2637
- display: flex;
2638
- justify-content: space-between;
2639
- border-radius: 2px;
2640
- padding-left: 10px; }
2641
- .condition-list-item:hover {
2642
- background: var(--react-autoql-accent-color);
2643
- color: white; }
2644
-
2645
- .empty-condition-list {
2646
- text-align: center;
2647
- padding: 4px;
2648
- margin: 0 20px 0 20px; }
2649
-
2650
- .autoql-close-button {
2651
- background-color: inherit;
2652
- border: none;
2653
- text-align: left;
2654
- font-size: 20px;
2655
- margin-top: -20px;
2656
- float: none !important;
2657
- color: inherit; }
2658
-
2659
- .react-tiny-popover-container {
2660
- background: var(--react-autoql-background-color-primary); }
2661
-
2662
- .autoql-condition-locking-menu-container .react-autosuggest__container {
2663
- flex-grow: 1;
2664
- display: inline;
2665
- width: 90%;
2666
- height: 100%; }
2667
-
2668
- .autoql-condition-locking-menu-container
2669
- .react-autosuggest__suggestions-container--open {
2670
- position: absolute;
2671
- overflow-y: scroll !important;
2672
- padding-top: 5px;
2673
- padding-bottom: 5px;
2674
- display: block;
2675
- font-family: inherit;
2676
- font-size: 15px;
2677
- font-weight: normal;
2678
- z-index: 2;
2679
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
2680
- text-align: left;
2681
- width: 95%;
2682
- top: 35px;
2683
- border-radius: 4px;
2684
- margin: 10px auto;
2685
- height: auto;
2686
- max-height: 50vh;
2687
- overflow-y: auto; }
2688
-
2689
- .autoql-condition-locking-menu-container
2690
- .react-autosuggest__suggestions-container--open {
2691
- background-color: var(--react-autoql-background-color-primary);
2692
- border: 1px solid var(--react-autoql-border-color);
2693
- color: var(--react-autoql-text-color-primary); }
2694
-
2695
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
2696
- color: var(--react-autoql-text-color-primary); }
2697
-
2698
- .autoql-condition-locking-menu-container input::-moz-placeholder {
2699
- opacity: 0.5; }
2700
-
2701
- .autoql-condition-locking-menu-container input:-ms-input-placeholder {
2702
- opacity: 0.5; }
2703
-
2704
- .autoql-condition-locking-menu-container input::placeholder {
2705
- opacity: 0.5; }
2706
-
2707
- .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
2708
- margin: 0;
2709
- padding: 0;
2710
- list-style-type: none; }
2711
-
2712
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
2713
- cursor: pointer;
2714
- padding: 2px;
2715
- padding-left: 18px;
2716
- letter-spacing: 0.05em;
2717
- line-height: 22.5px; }
2718
-
2719
- .autoql-condition-locking-menu-container
2720
- .react-autosuggest__suggestion--highlighted {
2721
- background-color: rgba(0, 0, 0, 0.1) !important; }
2722
-
2723
- .autoql-condition-locking-menu-container .react-autosuggest__section-title {
2724
- padding: 10px 0 0 10px;
2725
- font-size: 12px;
2726
- color: #777; }
2727
-
2728
- .query-tips-page-container {
2729
- height: 100%;
2730
- padding: 10px; }
2731
- .query-tips-page-container .chat-bar-input-icon {
2732
- top: 20px;
2733
- left: 26px; }
2734
- .query-tips-page-container .react-autoql-chatbar-input.left-padding {
2735
- padding-left: 46px; }
2736
-
2737
- .query-tips-result-container {
2738
- color: var(--react-autoql-text-color-primary);
2739
- padding: 0px 20px;
2740
- text-align: center;
2741
- max-width: 550px;
2742
- margin: 0 auto; }
2743
- .query-tips-result-container .query-tip-list-container {
2744
- margin-bottom: 20px; }
2745
- .query-tips-result-container .animated-item {
2746
- -webkit-animation: fadeIn 0.3s linear;
2747
- animation: fadeIn 0.3s linear;
2748
- -webkit-animation-fill-mode: both;
2749
- animation-fill-mode: both; }
2750
- .query-tips-result-container .query-tip-item {
2751
- position: relative;
2752
- padding: 13px;
2753
- border-top: 1px solid rgba(0, 0, 0, 0.04);
2754
- cursor: pointer; }
2755
- .query-tips-result-container .query-tip-item:first-child {
2756
- border-top: none; }
2757
- .query-tips-result-container .query-tip-item .execute-btn {
2758
- position: absolute;
2759
- right: 10px;
2760
- top: 4px;
2761
- font-size: 20px;
2762
- visibility: hidden;
2763
- opacity: 0; }
2764
- .query-tips-result-container .query-tip-item:hover {
2765
- font-weight: bold;
2766
- color: var(--react-autoql-accent-color); }
2767
- .query-tips-result-container .query-tip-item:hover .execute-btn {
2768
- visibility: visible;
2769
- opacity: 1; }
2770
- .query-tips-result-container .query-tips-result-placeholder {
2771
- margin-top: 50px;
2772
- opacity: 0.6; }
2773
-
2774
- .chat-bar-loading-spinner {
2775
- position: absolute;
2776
- right: 20px;
2777
- top: 22px; }
2778
-
2779
- #react-paginate {
2780
- position: relative;
2781
- background: transparent;
2782
- padding: 8px; }
2783
- #react-paginate ul {
2784
- display: inline-block;
2785
- padding-left: 0;
2786
- margin-bottom: 0; }
2787
- #react-paginate li {
2788
- display: inline-block;
2789
- color: var(--react-autoql-text-color-primary);
2790
- cursor: pointer;
2791
- margin-right: 3px;
2792
- border-radius: 5px;
2793
- margin-bottom: 0;
2794
- -webkit-user-select: none;
2795
- -moz-user-select: none;
2796
- -ms-user-select: none;
2797
- user-select: none; }
2798
- #react-paginate li:hover {
2799
- opacity: 0.7;
2800
- border-radius: 50%; }
2801
- #react-paginate li a {
2802
- display: inline-block;
2803
- color: var(--react-autoql-text-color-primary);
2804
- outline: none;
2805
- width: 28px;
2806
- height: 28px;
2807
- line-height: 28px; }
2808
- #react-paginate li.selected {
2749
+ padding: 0;
2750
+ margin: 0 auto; }
2751
+
2752
+ .condition-list-item {
2753
+ cursor: pointer;
2754
+ padding: 4px;
2755
+ margin: 0 10px 0 10px;
2756
+ display: flex;
2757
+ justify-content: space-between;
2758
+ border-radius: 2px;
2759
+ padding-left: 10px; }
2760
+ .condition-list-item:hover {
2809
2761
  background: var(--react-autoql-accent-color);
2810
- border-radius: 50%;
2811
- outline: none; }
2812
- #react-paginate li.selected a {
2813
- color: #fff; }
2814
- #react-paginate .pagination-next.disabled,
2815
- #react-paginate .pagination-previous.disabled {
2816
- opacity: 0.5;
2817
- pointer-events: none; }
2818
- #react-paginate .pagination-previous,
2819
- #react-paginate .pagination-next {
2820
- position: absolute;
2821
- font-size: 18px; }
2822
- #react-paginate .pagination-previous a,
2823
- #react-paginate .pagination-next a {
2824
- color: var(--react-autoql-accent-color); }
2825
- #react-paginate .pagination-previous {
2826
- left: 20px; }
2827
- #react-paginate .pagination-next {
2828
- right: 20px; }
2762
+ color: white; }
2829
2763
 
2830
- .animated-item:nth-child(1) {
2831
- -webkit-animation-delay: 0.08s;
2832
- animation-delay: 0.08s; }
2764
+ .empty-condition-list {
2765
+ text-align: center;
2766
+ padding: 4px;
2767
+ margin: 0 20px 0 20px; }
2833
2768
 
2834
- .animated-item:nth-child(2) {
2835
- -webkit-animation-delay: 0.16s;
2836
- animation-delay: 0.16s; }
2769
+ .autoql-close-button {
2770
+ background-color: inherit;
2771
+ border: none;
2772
+ text-align: left;
2773
+ font-size: 20px;
2774
+ margin-top: -20px;
2775
+ float: none !important;
2776
+ color: inherit; }
2837
2777
 
2838
- .animated-item:nth-child(3) {
2839
- -webkit-animation-delay: 0.24s;
2840
- animation-delay: 0.24s; }
2778
+ .react-tiny-popover-container {
2779
+ background: var(--react-autoql-background-color-primary); }
2841
2780
 
2842
- .animated-item:nth-child(4) {
2843
- -webkit-animation-delay: 0.32s;
2844
- animation-delay: 0.32s; }
2781
+ .autoql-condition-locking-menu-container .react-autosuggest__container {
2782
+ flex-grow: 1;
2783
+ display: inline;
2784
+ width: 90%;
2785
+ height: 100%; }
2845
2786
 
2846
- .animated-item:nth-child(5) {
2847
- -webkit-animation-delay: 0.4s;
2848
- animation-delay: 0.4s; }
2787
+ .autoql-condition-locking-menu-container
2788
+ .react-autosuggest__suggestions-container--open {
2789
+ position: absolute;
2790
+ overflow-y: scroll !important;
2791
+ padding-top: 5px;
2792
+ padding-bottom: 5px;
2793
+ display: block;
2794
+ font-family: inherit;
2795
+ font-size: 15px;
2796
+ font-weight: normal;
2797
+ z-index: 2;
2798
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
2799
+ text-align: left;
2800
+ width: 95%;
2801
+ top: 35px;
2802
+ border-radius: 4px;
2803
+ margin: 10px auto;
2804
+ height: auto;
2805
+ max-height: 50vh;
2806
+ overflow-y: auto; }
2849
2807
 
2850
- .animated-item:nth-child(6) {
2851
- -webkit-animation-delay: 0.48s;
2852
- animation-delay: 0.48s; }
2808
+ .autoql-condition-locking-menu-container
2809
+ .react-autosuggest__suggestions-container--open {
2810
+ background-color: var(--react-autoql-background-color-primary);
2811
+ border: 1px solid var(--react-autoql-border-color);
2812
+ color: var(--react-autoql-text-color-primary); }
2853
2813
 
2854
- .animated-item:nth-child(7) {
2855
- -webkit-animation-delay: 0.56s;
2856
- animation-delay: 0.56s; }
2814
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
2815
+ color: var(--react-autoql-text-color-primary); }
2857
2816
 
2858
- .animated-item:nth-child(8) {
2859
- -webkit-animation-delay: 0.64s;
2860
- animation-delay: 0.64s; }
2817
+ .autoql-condition-locking-menu-container input::-moz-placeholder {
2818
+ opacity: 0.5; }
2861
2819
 
2862
- .animated-item:nth-child(9) {
2863
- -webkit-animation-delay: 0.72s;
2864
- animation-delay: 0.72s; }
2820
+ .autoql-condition-locking-menu-container input:-ms-input-placeholder {
2821
+ opacity: 0.5; }
2865
2822
 
2866
- .animated-item:nth-child(10) {
2867
- -webkit-animation-delay: 0.8s;
2868
- animation-delay: 0.8s; }
2823
+ .autoql-condition-locking-menu-container input::placeholder {
2824
+ opacity: 0.5; }
2869
2825
 
2870
- .animated-item:nth-child(11) {
2871
- -webkit-animation-delay: 0.88s;
2872
- animation-delay: 0.88s; }
2826
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
2827
+ margin: 0;
2828
+ padding: 0;
2829
+ list-style-type: none; }
2873
2830
 
2874
- .animated-item:nth-child(12) {
2875
- -webkit-animation-delay: 0.96s;
2876
- animation-delay: 0.96s; }
2831
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
2832
+ cursor: pointer;
2833
+ padding: 2px;
2834
+ padding-left: 18px;
2835
+ letter-spacing: 0.05em;
2836
+ line-height: 22.5px; }
2877
2837
 
2878
- .animated-item:nth-child(13) {
2879
- -webkit-animation-delay: 1.04s;
2880
- animation-delay: 1.04s; }
2838
+ .autoql-condition-locking-menu-container
2839
+ .react-autosuggest__suggestion--highlighted {
2840
+ background-color: rgba(0, 0, 0, 0.1) !important; }
2881
2841
 
2882
- .animated-item:nth-child(14) {
2883
- -webkit-animation-delay: 1.12s;
2884
- animation-delay: 1.12s; }
2842
+ .autoql-condition-locking-menu-container .react-autosuggest__section-title {
2843
+ padding: 10px 0 0 10px;
2844
+ font-size: 12px;
2845
+ color: #777; }
2885
2846
 
2886
- .animated-item:nth-child(15) {
2887
- -webkit-animation-delay: 1.2s;
2888
- animation-delay: 1.2s; }
2847
+ .autoql-options-toolbar {
2848
+ position: absolute;
2849
+ background: inherit;
2850
+ padding: 5px;
2851
+ border-radius: 6px;
2852
+ line-height: 28px;
2853
+ background: var(--react-autoql-background-color-primary);
2854
+ border: 1px solid var(--react-autoql-border-color); }
2855
+ .autoql-options-toolbar.vertical .react-autoql-toolbar-btn {
2856
+ display: block; }
2857
+ .autoql-options-toolbar .react-autoql-toolbar-btn {
2858
+ color: var(--react-autoql-accent-color); }
2889
2859
 
2890
- @-webkit-keyframes fadeIn {
2891
- 0% {
2860
+ .copy-sql-modal-content {
2861
+ position: relative;
2862
+ height: 60vh; }
2863
+ .copy-sql-modal-content .copy-sql-formatted-text {
2864
+ height: 100%;
2865
+ width: 100%;
2866
+ padding: 10px;
2867
+ resize: none;
2868
+ background: var(--react-autoql-background-color-secondary); }
2869
+ .copy-sql-modal-content .copy-sql-btn {
2870
+ color: var(--react-autoql-text-color);
2871
+ background-color: var(--react-autoql-background-color-primary);
2872
+ position: absolute;
2873
+ top: 3px;
2874
+ right: 0;
2892
2875
  opacity: 0;
2893
- top: 100px; }
2894
- 75% {
2895
- opacity: 0.5;
2896
- top: 0px; }
2897
- 100% {
2898
- opacity: 1; } }
2899
-
2900
- .ReactModal__Overlay {
2901
- background-color: transparent !important;
2902
- transition: background-color 0.2s ease-in-out;
2903
- z-index: 9999; }
2876
+ transition: opacity 0.3s ease; }
2877
+ .copy-sql-modal-content .sql-copied {
2878
+ color: var(--react-autoql-success-color) !important; }
2879
+ .copy-sql-modal-content:hover .copy-sql-btn {
2880
+ opacity: 1; }
2904
2881
 
2905
- .ReactModal__Overlay--after-open {
2906
- background-color: rgba(0, 0, 0, 0.25) !important; }
2882
+ .chat-single-message-container {
2883
+ transition: background-color 0.2s ease;
2884
+ padding-top: 6px; }
2885
+ .chat-single-message-container:first-of-type {
2886
+ margin-top: 10px; }
2887
+ .chat-single-message-container .query-more-btn {
2888
+ transition: all 0.3s ease;
2889
+ font-size: 22px;
2890
+ padding: 13px;
2891
+ margin-bottom: 6px;
2892
+ height: 42px;
2893
+ opacity: 0;
2894
+ visibility: hidden;
2895
+ cursor: pointer; }
2896
+ .chat-single-message-container .query-more-btn:hover {
2897
+ opacity: 1; }
2907
2898
 
2908
- .ReactModal__Overlay--before-close {
2909
- background-color: transparent !important; }
2899
+ .chat-condition-item-container {
2900
+ position: absolute;
2901
+ background: inherit;
2902
+ bottom: 0px;
2903
+ padding: 5px;
2904
+ border-radius: 6px; }
2910
2905
 
2911
- .ReactModal__Content {
2912
- display: flex;
2913
- flex-direction: column;
2914
- transform: scale(0);
2915
- transition: all 0.2s ease-in-out;
2916
- color: var(--react-autoql-text-color-primary);
2917
- border: 1px solid var(--react-autoql-border-color) !important;
2918
- background: var(--react-autoql-background-color-primary) !important;
2919
- box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
2906
+ .chat-condition-item {
2907
+ background: none !important;
2908
+ border: none;
2909
+ margin-top: -20px !important;
2920
2910
  padding: 0 !important;
2921
- margin: auto auto;
2922
- max-width: 90vw;
2923
- max-height: calc(100vh - 90px); }
2924
- .ReactModal__Content input.react-autoql-input,
2925
- .ReactModal__Content textarea.react-autoql-input,
2926
- .ReactModal__Content textarea {
2927
- border-color: var(--react-autoql-border-color);
2928
- color: var(--react-autoql-text-color-primary);
2929
- background: var(--react-autoql-background-color-primary, white); }
2930
- .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
2931
- color: var(--react-autoql-text-color-placeholder); }
2932
- .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
2933
- color: var(--react-autoql-text-color-placeholder); }
2934
- .ReactModal__Content input.react-autoql-input::placeholder,
2935
- .ReactModal__Content textarea.react-autoql-input::placeholder,
2936
- .ReactModal__Content textarea::placeholder {
2937
- color: var(--react-autoql-text-color-placeholder); }
2911
+ font-family: var(--react-autoql-font-family);
2912
+ color: var(--react-autoql-accent-color);
2913
+ text-decoration: underline;
2914
+ cursor: pointer; }
2938
2915
 
2939
- .ReactModal__Overlay--after-open .ReactModal__Content {
2940
- transform: scale(1); }
2916
+ .chat-single-message-container.response {
2917
+ display: flex;
2918
+ justify-content: flex-start;
2919
+ padding-left: 20px;
2920
+ -webkit-animation: scale-up-bl 0.6s ease;
2921
+ animation: scale-up-bl 0.6s ease; }
2941
2922
 
2942
- .ReactModal__Overlay--before-close .ReactModal__Content {
2943
- transform: scale(0); }
2923
+ .chat-single-message-container.request {
2924
+ display: flex;
2925
+ justify-content: flex-end;
2926
+ padding-right: 20px;
2927
+ -webkit-animation: scale-up-br 0.6s ease;
2928
+ animation: scale-up-br 0.6s ease; }
2944
2929
 
2945
- .react-autoql-modal-header {
2930
+ .chat-single-message-container .chat-message-bubble {
2946
2931
  position: relative;
2947
- text-align: center;
2948
- flex: 0 0 52px;
2949
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
2950
- padding: 14px 60px;
2951
- font-size: 16px; }
2932
+ padding: 13px;
2933
+ border-radius: 10px;
2934
+ max-width: calc(100% - 20px);
2935
+ word-wrap: break-word;
2936
+ font-family: inherit;
2937
+ font-size: 14px;
2938
+ letter-spacing: 0.04em;
2939
+ box-sizing: border-box;
2940
+ /* make small margin on bottom because sometimes react
2941
+ custom scrollbar cuts off a pixel or 2 at the bottom */
2942
+ margin-bottom: 6px; }
2952
2943
 
2953
- .react-autoql-modal-footer {
2954
- position: relative;
2955
- flex: 0 0 52px;
2956
- border-top: 1px solid rgba(0, 0, 0, 0.05);
2957
- text-align: right;
2958
- padding: 8px 10px; }
2944
+ .chat-single-message-container .chat-message-bubble.text {
2945
+ max-width: 85%; }
2959
2946
 
2960
- .react-autoql-modal-body {
2961
- display: flex;
2962
- flex-direction: column;
2963
- padding: 25px;
2964
- flex: 1;
2965
- overflow: hidden; }
2966
- .react-autoql-modal-body h3 {
2967
- color: var(--react-autoql-text-color-primary); }
2947
+ .chat-single-message-container .chat-message-bubble.full-width {
2948
+ width: calc(100% - 20px) !important;
2949
+ min-width: calc(100% - 20px) !important;
2950
+ max-width: calc(100% - 20px) !important; }
2968
2951
 
2969
- .react-autoql-modal-close-btn {
2970
- position: absolute !important;
2971
- top: 10px;
2972
- right: 18px;
2973
- font-size: 22px;
2974
- opacity: 0.6 !important;
2975
- cursor: pointer; }
2952
+ .chat-single-message-container.response .chat-message-bubble.active {
2953
+ border: 1px solid #c3c3c3; }
2976
2954
 
2977
- .react-autoql-modal-close-btn:hover {
2978
- opacity: 1 !important; }
2955
+ .chat-single-message-container.response .chat-message-bubble {
2956
+ background: var(--react-autoql-background-color-primary);
2957
+ color: var(--react-autoql-text-color-primary);
2958
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2979
2959
 
2980
- .react-autoql-table-container {
2981
- height: 100%;
2982
- max-width: 100%;
2983
- background-color: inherit; }
2960
+ .chat-single-message-container.response .chat-message-bubble:not(.text) {
2961
+ min-width: 125px; }
2984
2962
 
2985
- .react-autoql-table {
2986
- margin-bottom: 0; }
2963
+ .chat-single-message-container.request .chat-message-bubble {
2964
+ background: var(--react-autoql-accent-color);
2965
+ color: white;
2966
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2987
2967
 
2988
- /* tabulator */
2989
- .react-autoql-table.tabulator,
2990
- .react-autoql-table.tabulator .tabulator-row,
2991
- .react-autoql-table.tabulator .tabulator-header,
2992
- .react-autoql-table.tabulator .tabulator-headers,
2993
- .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2994
- .react-autoql-table.tabulator .tabulator-tableHolder .tabulator-table {
2995
- background-color: inherit; }
2968
+ /* Increase height of message to include table filters,
2969
+ so we dont have to redraw the whole table */
2970
+ .chat-single-message-container.response.filtering-table {
2971
+ max-height: calc(85% + 35px) !important; }
2996
2972
 
2997
- .react-autoql-table-container.supports-drilldown
2998
- .react-autoql-table.tabulator
2999
- .tabulator-row.tabulator-unselectable:hover {
3000
- cursor: pointer !important;
3001
- background-color: var(--react-autoql-hover-color) !important; }
2973
+ .chat-message-toolbar,
2974
+ .chat-message-toolbar.autoql-options-toolbar {
2975
+ display: none;
2976
+ position: absolute;
2977
+ background: inherit;
2978
+ top: -31px;
2979
+ padding: 5px;
2980
+ border-radius: 6px;
2981
+ line-height: 28px;
2982
+ background: var(--react-autoql-background-color-primary);
2983
+ border: 1px solid var(--react-autoql-border-color);
2984
+ color: var(--react-autoql-accent-color); }
3002
2985
 
3003
- .react-autoql-table.tabulator
3004
- .tabulator-header
3005
- .tabulator-col.tabulator-sortable:hover {
3006
- background-color: var(--react-autoql-hover-color) !important; }
2986
+ .chat-message-toolbar.right {
2987
+ right: -9px; }
3007
2988
 
3008
- .react-autoql-table.tabulator .tabulator-header .tabulator-col,
3009
- .react-autoql-table.tabulator .tabulator-cell {
3010
- border-color: var(--react-autoql-border-color); }
2989
+ .chat-message-toolbar.left {
2990
+ left: -9px; }
3011
2991
 
3012
- .react-autoql-table.tabulator .tabulator-header {
3013
- border-bottom: 2px solid var(--react-autoql-border-color); }
2992
+ .chat-message-bubble:hover .chat-message-toolbar,
2993
+ .chat-message-bubble .chat-message-toolbar.active {
2994
+ display: block; }
3014
2995
 
3015
- .react-autoql-table.tabulator {
3016
- background-color: inherit;
3017
- height: 100%; }
2996
+ .report-problem-text-area {
2997
+ border-radius: 4px;
2998
+ border: 1px solid rgba(0, 0, 0, 0.15);
2999
+ margin-top: 10px;
3000
+ padding: 5px 10px;
3001
+ outline: none !important; }
3018
3002
 
3019
- .react-autoql-table .tabulator-row {
3020
- /* user-select: none; This breaks copy/paste */
3021
- border-bottom: 1px solid var(--react-autoql-border-color); }
3003
+ .data-limit-warning-icon {
3004
+ color: var(--react-autoql-warning-color) !important;
3005
+ position: absolute !important;
3006
+ bottom: 2px;
3007
+ right: 4px;
3008
+ font-size: 20px; }
3022
3009
 
3023
- .tabulator-cell:not(:first-child) {
3024
- border-left: 1px solid !important;
3025
- border-color: rgba(0, 0, 0, 0.06) !important; }
3010
+ .condition-info-icon-left-align {
3011
+ color: var(--react-autoql-accent-color) !important;
3012
+ position: absolute !important;
3013
+ bottom: 2px;
3014
+ right: 10px;
3015
+ font-size: 20px; }
3026
3016
 
3027
- .react-autoql-table .tabulator-tableHolder {
3028
- max-height: calc(100% - 38px) !important;
3029
- background-color: inherit; }
3017
+ .condition-info-icon {
3018
+ color: var(--react-autoql-accent-color) !important;
3019
+ position: absolute !important;
3020
+ bottom: 2px;
3021
+ right: 4px;
3022
+ font-size: 20px; }
3030
3023
 
3031
- .react-autoql-table.tabulator
3032
- .tabulator-header
3033
- .tabulator-col
3034
- .tabulator-col-content {
3035
- padding: 8px 5px; }
3024
+ .more-options-menu,
3025
+ .report-problem-menu {
3026
+ background: var(--react-autoql-background-color-primary);
3027
+ padding: 10px 0; }
3028
+ .more-options-menu span.react-autoql-icon svg,
3029
+ .report-problem-menu span.react-autoql-icon svg {
3030
+ margin-right: 3px; }
3036
3031
 
3037
- .react-autoql-table.tabulator
3038
- .tabulator-header
3039
- .tabulator-col
3040
- .tabulator-col-content
3041
- .tabulator-arrow {
3042
- opacity: 0;
3043
- border-left: 4px solid transparent !important;
3044
- border-right: 4px solid transparent !important;
3045
- right: 4px;
3046
- top: calc(50% - 3px); }
3032
+ .interpretation-icon {
3033
+ vertical-align: top;
3034
+ height: 26px;
3035
+ margin: 0 3px;
3036
+ font-size: 18px; }
3047
3037
 
3048
- .react-autoql-table.tabulator
3049
- .tabulator-header
3050
- .tabulator-col:hover
3051
- .tabulator-col-content
3052
- .tabulator-arrow {
3053
- opacity: 1 !important; }
3038
+ /* Chart icon styles */
3039
+ .chart-icon-svg-0,
3040
+ .react-autoql-icon-svg-0 {
3041
+ fill: currentColor; }
3054
3042
 
3055
- .react-autoql-table.tabulator
3056
- .tabulator-header
3057
- .tabulator-col.tabulator-sortable[aria-sort='desc']
3058
- .tabulator-col-content
3059
- .tabulator-arrow {
3060
- border-top: 4px solid rgba(0, 0, 0, 0.2) !important; }
3043
+ .hm0 {
3044
+ opacity: 0.5;
3045
+ fill: currentColor;
3046
+ enable-background: new; }
3061
3047
 
3062
- .react-autoql-table.tabulator
3063
- .tabulator-header
3064
- .tabulator-col.tabulator-sortable[aria-sort='asc']
3065
- .tabulator-col-content
3066
- .tabulator-arrow,
3067
- .react-autoql-table.tabulator
3068
- .tabulator-header
3069
- .tabulator-col.tabulator-sortable[aria-sort='none']
3070
- .tabulator-col-content
3071
- .tabulator-arrow {
3072
- border-bottom: 4px solid rgba(0, 0, 0, 0.2) !important; }
3048
+ .hm1 {
3049
+ fill: currentColor; }
3073
3050
 
3074
- .react-autoql-table .tabulator-tableHolder::-webkit-scrollbar {
3075
- display: unset;
3076
- opacity: 0;
3077
- background-color: transparent;
3078
- width: 7px;
3079
- height: 7px;
3080
- -webkit-transition: all 0.3s ease;
3081
- transition: all 0.3s ease; }
3051
+ .hm2 {
3052
+ opacity: 0.15;
3053
+ fill: currentColor;
3054
+ enable-background: new; }
3082
3055
 
3083
- .react-autoql-table.tabulator .tabulator-tableHolder {
3084
- min-height: calc(100% - 40px) !important;
3085
- height: calc(100% - 40px) !important;
3086
- max-height: calc(100% - 40px) !important; }
3056
+ .hm3 {
3057
+ opacity: 0.6;
3058
+ fill: currentColor;
3059
+ enable-background: new; }
3087
3060
 
3088
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track,
3089
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track-piece,
3090
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-corner {
3091
- background-color: transparent; }
3061
+ .hm4 {
3062
+ opacity: 0.65;
3063
+ fill: currentColor;
3064
+ enable-background: new; }
3065
+
3066
+ .hm5 {
3067
+ fill: currentColor; }
3068
+
3069
+ .hm6 {
3070
+ fill: currentColor; }
3071
+
3072
+ /* animations */
3073
+ @-webkit-keyframes scale-up-br {
3074
+ 0% {
3075
+ transform: scale(0.5);
3076
+ transform-origin: 100% 100%; }
3077
+ 100% {
3078
+ transform: scale(1);
3079
+ transform-origin: 100% 100%; } }
3080
+ @keyframes scale-up-br {
3081
+ 0% {
3082
+ transform: scale(0.5);
3083
+ transform-origin: 100% 100%; }
3084
+ 100% {
3085
+ transform: scale(1);
3086
+ transform-origin: 100% 100%; } }
3092
3087
 
3093
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-thumb {
3094
- background-color: rgba(0, 0, 0, 0.2);
3095
- border-radius: 7px;
3096
- border: 0px; }
3088
+ @-webkit-keyframes scale-up-bl {
3089
+ 0% {
3090
+ transform: scale(0.5);
3091
+ transform-origin: 0% 100%; }
3092
+ 100% {
3093
+ transform: scale(1);
3094
+ transform-origin: 0% 100%; } }
3097
3095
 
3098
- .react-autoql-table .tabulator-header-filter input {
3099
- border: 1px solid var(--react-autoql-border-color);
3100
- border-radius: 4px;
3101
- background: transparent;
3102
- padding: 4px 9px !important;
3103
- outline: none !important; }
3096
+ @keyframes scale-up-bl {
3097
+ 0% {
3098
+ transform: scale(0.5);
3099
+ transform-origin: 0% 100%; }
3100
+ 100% {
3101
+ transform: scale(1);
3102
+ transform-origin: 0% 100%; } }
3104
3103
 
3105
- .react-autoql-table .tabulator-header-filter input:focus {
3106
- border: 1px solid #28a8e0; }
3104
+ .ReactModal__Overlay {
3105
+ background-color: transparent !important;
3106
+ transition: background-color 0.2s ease-in-out;
3107
+ z-index: 9999; }
3107
3108
 
3108
- /* These are necessary because we are always rendering the
3109
- filter (just display: none when not used) instead of re-rendering
3110
- the whole table when the filter button is clicked */
3111
- .react-autoql-table-container:not(.filtering)
3112
- .react-autoql-table
3113
- .tabulator-header-filter {
3114
- display: none; }
3109
+ .ReactModal__Overlay--after-open {
3110
+ background-color: rgba(0, 0, 0, 0.25) !important; }
3115
3111
 
3116
- .react-autoql-table-container:not(.filtering)
3117
- .react-autoql-table
3118
- .tabulator-col {
3119
- height: auto !important; }
3112
+ .ReactModal__Overlay--before-close {
3113
+ background-color: transparent !important; }
3120
3114
 
3121
- .tabulator-table .tabulator-row .tabulator-cell {
3122
- min-height: 38px; }
3115
+ .ReactModal__Content {
3116
+ display: flex;
3117
+ flex-direction: column;
3118
+ transform: scale(0);
3119
+ transition: all 0.2s ease-in-out;
3120
+ color: var(--react-autoql-text-color-primary);
3121
+ border: 1px solid var(--react-autoql-border-color) !important;
3122
+ background: var(--react-autoql-background-color-primary) !important;
3123
+ box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
3124
+ padding: 0 !important;
3125
+ margin: auto auto;
3126
+ max-width: 90vw;
3127
+ max-height: calc(100vh - 90px); }
3128
+ .ReactModal__Content input.react-autoql-input,
3129
+ .ReactModal__Content textarea.react-autoql-input,
3130
+ .ReactModal__Content textarea {
3131
+ border-color: var(--react-autoql-border-color);
3132
+ color: var(--react-autoql-text-color-primary);
3133
+ background: var(--react-autoql-background-color-primary, white); }
3134
+ .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
3135
+ color: var(--react-autoql-text-color-placeholder); }
3136
+ .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
3137
+ color: var(--react-autoql-text-color-placeholder); }
3138
+ .ReactModal__Content input.react-autoql-input::placeholder,
3139
+ .ReactModal__Content textarea.react-autoql-input::placeholder,
3140
+ .ReactModal__Content textarea::placeholder {
3141
+ color: var(--react-autoql-text-color-placeholder); }
3123
3142
 
3124
- /* Center header titles */
3125
- .react-autoql-table .tabulator-header .tabulator-col {
3126
- text-align: center !important; }
3143
+ .ReactModal__Overlay--after-open .ReactModal__Content {
3144
+ transform: scale(1); }
3127
3145
 
3128
- .react-autoql-table .tabulator-header .tabulator-col-title {
3129
- padding-left: 10px !important;
3130
- padding-right: 10px !important; }
3146
+ .ReactModal__Overlay--before-close .ReactModal__Content {
3147
+ transform: scale(0); }
3131
3148
 
3132
- .filter-tag {
3133
- color: #2ecc40;
3134
- border: 1px solid;
3135
- padding: 2px 4px;
3136
- border-radius: 4px;
3137
- font-weight: 400;
3138
- font-size: 10px;
3139
- margin-right: 5px;
3140
- vertical-align: top;
3141
- line-height: 21px; }
3149
+ .react-autoql-modal-header {
3150
+ position: relative;
3151
+ text-align: center;
3152
+ flex: 0 0 52px;
3153
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
3154
+ padding: 14px 60px;
3155
+ font-size: 16px; }
3142
3156
 
3143
- .comparison-value-positive {
3144
- color: #2ecc40; }
3157
+ .react-autoql-modal-footer {
3158
+ position: relative;
3159
+ flex: 0 0 52px;
3160
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
3161
+ text-align: right;
3162
+ padding: 8px 10px; }
3145
3163
 
3146
- .comparison-value-negative {
3147
- color: #e80000; }
3164
+ .react-autoql-modal-body {
3165
+ display: flex;
3166
+ flex-direction: column;
3167
+ padding: 25px;
3168
+ flex: 1;
3169
+ overflow: hidden; }
3170
+ .react-autoql-modal-body h3 {
3171
+ color: var(--react-autoql-text-color-primary); }
3148
3172
 
3149
- .autoql-options-toolbar {
3150
- position: absolute;
3151
- background: inherit;
3152
- padding: 5px;
3153
- border-radius: 6px;
3154
- line-height: 28px;
3155
- background: var(--react-autoql-background-color-primary);
3156
- border: 1px solid var(--react-autoql-border-color); }
3157
- .autoql-options-toolbar.vertical .react-autoql-toolbar-btn {
3158
- display: block; }
3159
- .autoql-options-toolbar .react-autoql-toolbar-btn {
3160
- color: var(--react-autoql-accent-color); }
3173
+ .react-autoql-modal-close-btn {
3174
+ position: absolute !important;
3175
+ top: 10px;
3176
+ right: 18px;
3177
+ font-size: 22px;
3178
+ opacity: 0.6 !important;
3179
+ cursor: pointer; }
3161
3180
 
3162
- .copy-sql-modal-content {
3163
- position: relative;
3164
- height: 60vh; }
3165
- .copy-sql-modal-content .copy-sql-formatted-text {
3166
- height: 100%;
3167
- width: 100%;
3168
- padding: 10px;
3169
- resize: none;
3170
- background: var(--react-autoql-background-color-secondary); }
3171
- .copy-sql-modal-content .copy-sql-btn {
3172
- color: var(--react-autoql-text-color);
3173
- background-color: var(--react-autoql-background-color-primary);
3174
- position: absolute;
3175
- top: 3px;
3176
- right: 0;
3177
- opacity: 0;
3178
- transition: opacity 0.3s ease; }
3179
- .copy-sql-modal-content .sql-copied {
3180
- color: var(--react-autoql-success-color) !important; }
3181
- .copy-sql-modal-content:hover .copy-sql-btn {
3182
- opacity: 1; }
3181
+ .react-autoql-modal-close-btn:hover {
3182
+ opacity: 1 !important; }
3183
3183
 
3184
3184
  .react-autoql-chart-container {
3185
3185
  position: relative;
@@ -3311,75 +3311,76 @@ the whole table when the filter button is clicked */
3311
3311
  .react-autoql-toolbar-btn:hover {
3312
3312
  opacity: 0.7; }
3313
3313
 
3314
- .react-autoql-steps-container {
3315
- margin: 10px; }
3316
-
3317
- .react-autoql-step-container {
3318
- position: relative;
3319
- border-left: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3320
- margin-left: 12px;
3321
- padding-left: 20px;
3322
- padding-bottom: 5px;
3323
- transition: all 0.5s ease; }
3324
- .react-autoql-step-container.complete {
3325
- border-color: var(--react-autoql-accent-color, #26a7df); }
3326
- .react-autoql-step-container.complete .react-autoql-step-dot {
3327
- border-color: var(--react-autoql-accent-color, #26a7df);
3328
- background: var(--react-autoql-accent-color, #26a7df);
3329
- color: #fff; }
3330
- .react-autoql-step-container.error {
3331
- border-color: var(--react-autoql-warning-color); }
3332
- .react-autoql-step-container.error .react-autoql-step-dot {
3333
- border-color: var(--react-autoql-warning-color);
3334
- background: var(--react-autoql-warning-color);
3335
- color: white; }
3336
- .react-autoql-step-container:not(.active) .react-autoql-step-content-container {
3337
- pointer-events: none;
3338
- height: 10px;
3339
- opacity: 0;
3340
- margin: 0; }
3341
-
3342
- .react-autoql-step-dot {
3343
- position: absolute;
3344
- top: 0;
3345
- left: -10px;
3346
- height: 20px;
3347
- width: 20px;
3348
- border-radius: 15px;
3349
- background: var(--react-autoql-background-color-primary, #fff);
3350
- border: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3351
- transition: all 0.5s ease;
3352
- font-size: 10.5px;
3353
- color: var(--react-autoql-text-color-placeholder, lightgray);
3354
- text-align: center; }
3355
-
3356
- .react-autoql-step-title-container:hover {
3357
- cursor: pointer;
3358
- transition: color 0.2s ease;
3359
- color: var(--react-autoql-accent-color, #26a7df); }
3360
-
3361
- .react-autoql-step-title {
3362
- font-weight: 500;
3363
- font-size: 15px;
3364
- line-height: 15px;
3365
- padding-top: 2px; }
3366
-
3367
- .react-autoql-step-subtitle {
3368
- font-size: 13px;
3369
- padding-top: 6px;
3370
- padding-bottom: 6px;
3371
- color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.4)); }
3372
-
3373
- .react-autoql-step-content {
3374
- margin: 15px;
3375
- margin-top: 0; }
3376
-
3377
- .react-autoql-step-content-container {
3378
- transition-timing-function: ease;
3379
- transition-property: height, opacity, margin;
3380
- transition-duration: 0.5s;
3381
- opacity: 1; }
3382
-
3314
+ .react-autoql-radio-btn-container {
3315
+ display: inline-block;
3316
+ border-radius: 4px; }
3317
+ .react-autoql-radio-btn-container [type='radio']:checked,
3318
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) {
3319
+ position: absolute;
3320
+ left: -9999px; }
3321
+ .react-autoql-radio-btn-container [type='radio']:checked + label,
3322
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label {
3323
+ position: relative;
3324
+ padding-left: 28px;
3325
+ cursor: pointer;
3326
+ line-height: 20px;
3327
+ display: inline-block; }
3328
+ .react-autoql-radio-btn-container [type='radio']:checked + label:before,
3329
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:before {
3330
+ content: '';
3331
+ position: absolute;
3332
+ left: 1px;
3333
+ top: 1px;
3334
+ width: 18px;
3335
+ height: 18px;
3336
+ border: 1px solid #ddd;
3337
+ border-radius: 100%;
3338
+ background: #fff; }
3339
+ .react-autoql-radio-btn-container [type='radio']:checked + label:after,
3340
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3341
+ content: '';
3342
+ width: 12px;
3343
+ height: 12px;
3344
+ background: var(--react-autoql-accent-color, #26a7df);
3345
+ position: absolute;
3346
+ top: 4px;
3347
+ left: 4px;
3348
+ border-radius: 100%;
3349
+ transition: all 0.2s ease; }
3350
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3351
+ opacity: 0;
3352
+ transform: scale(0); }
3353
+ .react-autoql-radio-btn-container [type='radio']:checked + label:after {
3354
+ opacity: 1;
3355
+ transform: scale(1); }
3356
+ .react-autoql-radio-btn-container .react-autoql-radio-btn {
3357
+ position: relative;
3358
+ display: inline-block;
3359
+ padding: 3px 12px;
3360
+ border: 1px solid var(--react-autoql-border-color, #dcdcdc);
3361
+ margin-left: -1px;
3362
+ transition: all 0.2s ease;
3363
+ cursor: pointer; }
3364
+ .react-autoql-radio-btn-container .react-autoql-radio-btn.active {
3365
+ background-color: var(--react-autoql-accent-color, #26a7df);
3366
+ border-color: var(--react-autoql-accent-color, #26a7df);
3367
+ color: #fff;
3368
+ z-index: 3; }
3369
+ .react-autoql-radio-btn-container .react-autoql-radio-btn.active.outlined {
3370
+ background-color: inherit;
3371
+ color: var(--react-autoql-accent-color, #26a7df);
3372
+ z-index: 3; }
3373
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:hover:not(.active) {
3374
+ border-color: var(--react-autoql-accent-color, #26a7df);
3375
+ color: var(--react-autoql-accent-color, #26a7df);
3376
+ z-index: 2; }
3377
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:first-child {
3378
+ border-top-left-radius: 4px;
3379
+ border-bottom-left-radius: 4px;
3380
+ margin-left: 0; }
3381
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:last-child {
3382
+ border-top-right-radius: 4px;
3383
+ border-bottom-right-radius: 4px; }
3383
3384
 
3384
3385
  .content {
3385
3386
  margin: 2rem; }
@@ -3513,76 +3514,75 @@ the whole table when the filter button is clicked */
3513
3514
  .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
3514
3515
  background: var(--react-autoql-accent-color); }
3515
3516
 
3516
- .react-autoql-radio-btn-container {
3517
- display: inline-block;
3518
- border-radius: 4px; }
3519
- .react-autoql-radio-btn-container [type='radio']:checked,
3520
- .react-autoql-radio-btn-container [type='radio']:not(:checked) {
3521
- position: absolute;
3522
- left: -9999px; }
3523
- .react-autoql-radio-btn-container [type='radio']:checked + label,
3524
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label {
3525
- position: relative;
3526
- padding-left: 28px;
3527
- cursor: pointer;
3528
- line-height: 20px;
3529
- display: inline-block; }
3530
- .react-autoql-radio-btn-container [type='radio']:checked + label:before,
3531
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:before {
3532
- content: '';
3533
- position: absolute;
3534
- left: 1px;
3535
- top: 1px;
3536
- width: 18px;
3537
- height: 18px;
3538
- border: 1px solid #ddd;
3539
- border-radius: 100%;
3540
- background: #fff; }
3541
- .react-autoql-radio-btn-container [type='radio']:checked + label:after,
3542
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3543
- content: '';
3544
- width: 12px;
3545
- height: 12px;
3546
- background: var(--react-autoql-accent-color, #26a7df);
3547
- position: absolute;
3548
- top: 4px;
3549
- left: 4px;
3550
- border-radius: 100%;
3551
- transition: all 0.2s ease; }
3552
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3553
- opacity: 0;
3554
- transform: scale(0); }
3555
- .react-autoql-radio-btn-container [type='radio']:checked + label:after {
3556
- opacity: 1;
3557
- transform: scale(1); }
3558
- .react-autoql-radio-btn-container .react-autoql-radio-btn {
3559
- position: relative;
3560
- display: inline-block;
3561
- padding: 3px 12px;
3562
- border: 1px solid var(--react-autoql-border-color, #dcdcdc);
3563
- margin-left: -1px;
3564
- transition: all 0.2s ease;
3565
- cursor: pointer; }
3566
- .react-autoql-radio-btn-container .react-autoql-radio-btn.active {
3567
- background-color: var(--react-autoql-accent-color, #26a7df);
3568
- border-color: var(--react-autoql-accent-color, #26a7df);
3569
- color: #fff;
3570
- z-index: 3; }
3571
- .react-autoql-radio-btn-container .react-autoql-radio-btn.active.outlined {
3572
- background-color: inherit;
3573
- color: var(--react-autoql-accent-color, #26a7df);
3574
- z-index: 3; }
3575
- .react-autoql-radio-btn-container .react-autoql-radio-btn:hover:not(.active) {
3517
+
3518
+ .react-autoql-steps-container {
3519
+ margin: 10px; }
3520
+
3521
+ .react-autoql-step-container {
3522
+ position: relative;
3523
+ border-left: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3524
+ margin-left: 12px;
3525
+ padding-left: 20px;
3526
+ padding-bottom: 5px;
3527
+ transition: all 0.5s ease; }
3528
+ .react-autoql-step-container.complete {
3529
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3530
+ .react-autoql-step-container.complete .react-autoql-step-dot {
3576
3531
  border-color: var(--react-autoql-accent-color, #26a7df);
3577
- color: var(--react-autoql-accent-color, #26a7df);
3578
- z-index: 2; }
3579
- .react-autoql-radio-btn-container .react-autoql-radio-btn:first-child {
3580
- border-top-left-radius: 4px;
3581
- border-bottom-left-radius: 4px;
3582
- margin-left: 0; }
3583
- .react-autoql-radio-btn-container .react-autoql-radio-btn:last-child {
3584
- border-top-right-radius: 4px;
3585
- border-bottom-right-radius: 4px; }
3532
+ background: var(--react-autoql-accent-color, #26a7df);
3533
+ color: #fff; }
3534
+ .react-autoql-step-container.error {
3535
+ border-color: var(--react-autoql-warning-color); }
3536
+ .react-autoql-step-container.error .react-autoql-step-dot {
3537
+ border-color: var(--react-autoql-warning-color);
3538
+ background: var(--react-autoql-warning-color);
3539
+ color: white; }
3540
+ .react-autoql-step-container:not(.active) .react-autoql-step-content-container {
3541
+ pointer-events: none;
3542
+ height: 10px;
3543
+ opacity: 0;
3544
+ margin: 0; }
3545
+
3546
+ .react-autoql-step-dot {
3547
+ position: absolute;
3548
+ top: 0;
3549
+ left: -10px;
3550
+ height: 20px;
3551
+ width: 20px;
3552
+ border-radius: 15px;
3553
+ background: var(--react-autoql-background-color-primary, #fff);
3554
+ border: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3555
+ transition: all 0.5s ease;
3556
+ font-size: 10.5px;
3557
+ color: var(--react-autoql-text-color-placeholder, lightgray);
3558
+ text-align: center; }
3559
+
3560
+ .react-autoql-step-title-container:hover {
3561
+ cursor: pointer;
3562
+ transition: color 0.2s ease;
3563
+ color: var(--react-autoql-accent-color, #26a7df); }
3564
+
3565
+ .react-autoql-step-title {
3566
+ font-weight: 500;
3567
+ font-size: 15px;
3568
+ line-height: 15px;
3569
+ padding-top: 2px; }
3570
+
3571
+ .react-autoql-step-subtitle {
3572
+ font-size: 13px;
3573
+ padding-top: 6px;
3574
+ padding-bottom: 6px;
3575
+ color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.4)); }
3576
+
3577
+ .react-autoql-step-content {
3578
+ margin: 15px;
3579
+ margin-top: 0; }
3580
+
3581
+ .react-autoql-step-content-container {
3582
+ transition-timing-function: ease;
3583
+ transition-property: height, opacity, margin;
3584
+ transition-duration: 0.5s;
3585
+ opacity: 1; }
3586
3586
 
3587
3587
  .react-autoql-input-container {
3588
3588
  position: relative;
@@ -3635,36 +3635,6 @@ the whole table when the filter button is clicked */
3635
3635
  opacity: 1;
3636
3636
  color: var(--react-autoql-accent-color, #26a7df); }
3637
3637
 
3638
- .spinner-loader {
3639
- display: inline-block;
3640
- width: 14px;
3641
- height: 14px;
3642
- margin-right: 6px; }
3643
-
3644
- .spinner-loader:after {
3645
- content: " ";
3646
- display: block;
3647
- width: 16px;
3648
- height: 16px;
3649
- margin: 0px;
3650
- border-radius: 50%;
3651
- border: 1px solid currentColor;
3652
- border-color: currentColor transparent currentColor transparent;
3653
- -webkit-animation: spinner-loader 1.2s linear infinite;
3654
- animation: spinner-loader 1.2s linear infinite; }
3655
-
3656
- @-webkit-keyframes spinner-loader {
3657
- 0% {
3658
- transform: rotate(0deg); }
3659
- 100% {
3660
- transform: rotate(360deg); } }
3661
-
3662
- @keyframes spinner-loader {
3663
- 0% {
3664
- transform: rotate(0deg); }
3665
- 100% {
3666
- transform: rotate(360deg); } }
3667
-
3668
3638
  .react-autoql-notification-rule-container {
3669
3639
  display: flex; }
3670
3640
  .react-autoql-notification-rule-container .react-autoql-rule-input {
@@ -3718,8 +3688,6 @@ the whole table when the filter button is clicked */
3718
3688
  padding: 0 10px;
3719
3689
  color: var(--react-autoql-warning-color); }
3720
3690
 
3721
-
3722
-
3723
3691
  .notification-read-only-group {
3724
3692
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3725
3693
  border-radius: 4px;
@@ -3838,6 +3806,36 @@ the whole table when the filter button is clicked */
3838
3806
  opacity: 1;
3839
3807
  color: var(--react-autoql-accent-color); }
3840
3808
 
3809
+ .spinner-loader {
3810
+ display: inline-block;
3811
+ width: 14px;
3812
+ height: 14px;
3813
+ margin-right: 6px; }
3814
+
3815
+ .spinner-loader:after {
3816
+ content: " ";
3817
+ display: block;
3818
+ width: 16px;
3819
+ height: 16px;
3820
+ margin: 0px;
3821
+ border-radius: 50%;
3822
+ border: 1px solid currentColor;
3823
+ border-color: currentColor transparent currentColor transparent;
3824
+ -webkit-animation: spinner-loader 1.2s linear infinite;
3825
+ animation: spinner-loader 1.2s linear infinite; }
3826
+
3827
+ @-webkit-keyframes spinner-loader {
3828
+ 0% {
3829
+ transform: rotate(0deg); }
3830
+ 100% {
3831
+ transform: rotate(360deg); } }
3832
+
3833
+ @keyframes spinner-loader {
3834
+ 0% {
3835
+ transform: rotate(0deg); }
3836
+ 100% {
3837
+ transform: rotate(360deg); } }
3838
+
3841
3839
  .react-autoql-select {
3842
3840
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3843
3841
  border-radius: 4px;
@@ -3876,6 +3874,7 @@ the whole table when the filter button is clicked */
3876
3874
  .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
3877
3875
  background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
3878
3876
 
3877
+
3879
3878
  .slack-modal-error-container,
3880
3879
  .slack-modal-empty-list-message {
3881
3880
  display: flex;
@@ -4021,6 +4020,7 @@ the whole table when the filter button is clicked */
4021
4020
  .slack-channel-list-container .connect-channel-btn button {
4022
4021
  width: 200px; }
4023
4022
 
4023
+
4024
4024
  .react-autoql-list-item {
4025
4025
  padding: 0 20px;
4026
4026
  display: flex;