canvasxpress-cli 48.3.8 → 48.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/canvasXpress.css +344 -745
  3. package/src/canvasXpress.js +7735 -7706
package/src/canvasXpress.css CHANGED
@@ -9,51 +9,53 @@
9
9
 
10
10
  :root {
11
11
  /* Colors */
12
- --cx-color-red: rgb(255, 0, 0) !important;
13
- --cx-color-blue: rgb(0, 0, 255) !important;
14
- --cx-color-green: rgb(0, 255, 0) !important;
15
- --cx-color-yellow: rgb(255, 255, 0) !important;
16
- --cx-color-orange: rgb(255, 165, 0) !important;
17
- --cx-color-purple: rgb(128, 0, 128) !important;
18
- --cx-color-white: rgb(255, 255, 255) !important;
19
- --cx-color-gray: rgb(128, 128, 128) !important;
20
- --cx-color-black: rgb(0, 0, 0) !important;
21
- --cx-color-transparent: rgba(0, 0, 0, 0) !important;
12
+ --cx-color-red: rgb(255, 0, 0);
13
+ --cx-color-blue: rgb(0, 0, 255);
14
+ --cx-color-green: rgb(0, 255, 0);
15
+ --cx-color-yellow: rgb(255, 255, 0);
16
+ --cx-color-orange: rgb(255, 165, 0);
17
+ --cx-color-purple: rgb(128, 0, 128);
18
+ --cx-color-white: rgb(255, 255, 255);
19
+ --cx-color-gray: rgb(128, 128, 128);
20
+ --cx-color-black: rgb(0, 0, 0);
21
+ --cx-color-transparent: rgba(0, 0, 0, 0);
22
+ /* Greys */
23
+ --cx-color-extra-dark-gray: rgb(34, 34, 34);
24
+ --cx-color-dark-gray: rgb(64, 64, 64);
25
+ --cx-color-medium-gray: rgb(180, 180, 180);
26
+ --cx-color-light-gray: rgb(204, 204, 204);
27
+ --cx-color-extra-light-gray: rgb(238, 238, 238);
22
28
  /* Icons - Not used but just to remember */
23
29
  --cx-icon-class-a: #5369ff;
24
30
  --cx-icon-class-b: #292929;
25
31
  --cx-icon-class-c: #999999;
26
32
  --cx-icon-class-r: #ff0000;
27
- /* Greys - Not used but just to remember */
28
- --cx-color-extra-dark-gray: rgb(34, 34, 34) !important;
29
- --cx-color-dark-gray: rgb(64, 64, 64) !important;
30
- --cx-color-medium-gray: rgb(180, 180, 180) !important;
31
- --cx-color-light-gray: rgb(204, 204, 204) !important;
32
33
  /* Coding colors */
33
- --cx-color-key: rgb(215, 48, 39) !important;
34
- --cx-color-value: rgb(69, 117, 180) !important;
35
- --cx-color-string: rgb(168, 82, 2) !important;
36
- --cx-color-number: rgb(69, 117, 180) !important;
37
- --cx-color-boolean: rgb(102, 102, 0) !important;
38
- --cx-color-null: rgb(69, 117, 180) !important;
39
- --cx-color-comment: rgb(58, 115, 0) !important;
34
+ --cx-code-key: rgb(215, 48, 39);
35
+ --cx-code-value: rgb(69, 117, 180);
36
+ --cx-code-string: rgb(168, 82, 2);
37
+ --cx-code-number: rgb(69, 117, 180);
38
+ --cx-code-boolean: rgb(102, 102, 0);
39
+ --cx-code-null: rgb(69, 117, 180);
40
+ --cx-code-comment: rgb(58, 115, 0);
40
41
  /* Favorite UI colors */
41
- --cx-color-ui-background: rgba(255, 255, 255, 0.95) !important;
42
- --cx-color-ui-font: rgb(34, 34, 34) !important;
43
- --cx-color-widgets: rgb(83, 105, 255) !important;
44
- --cx-color-widgets-hover: rgba(83, 105, 255, 0.1) !important;
42
+ --cx-color-ui-background: rgba(255, 255, 255, 0.95);
43
+ --cx-color-ui-font: rgb(34, 34, 34);
44
+ --cx-color-widgets: rgb(83, 105, 255);
45
+ --cx-color-widgets-hover: rgba(83, 105, 255, 0.1);
45
46
  /* Favorite UI Styles - Not used but just to remember */
46
- --cx-color-modern: rgb(83, 105, 255) !important;
47
- --cx-color-modern-hover: rgba(83, 105, 255, 0.1) !important;
48
- --cx-color-stripped: rgb(180, 180, 180) !important;
49
- --cx-color-stripped-hover: rgba(180, 180, 180, 0.3) !important;
50
- --cx-color-default: linear-gradient(rgb(240, 240, 240), rgb(230, 230, 230)) !important;
51
- --cx-color-default-hover: rgba(230,230,230,0.1) !important;
47
+ --cx-color-modern: rgb(83, 105, 255);
48
+ --cx-color-modern-hover: rgba(83, 105, 255, 0.1) ;
49
+ --cx-color-stripped: rgb(180, 180, 180) ;
50
+ --cx-color-stripped-hover: rgba(180, 180, 180, 0.3);
51
+ --cx-color-default: linear-gradient(rgb(240, 240, 240), rgb(230, 230, 230));
52
+ --cx-color-default-hover: rgba(230,230,230,0.1);
52
53
  /* UI */
53
54
  --cx-font-family: arial, tahoma, sans-serif;
54
55
  --cx-font-size: 12px;
55
56
  --cx-font-weight: normal;
56
57
  --cx-font-color: var(--cx-color-ui-font);
58
+ --cx-font: var(--cx-font-weight) var(--cx-font-size) var(--cx-font-family);
57
59
  --cx-background-ui-color: var(--cx-color-ui-background);
58
60
  --cx-background-color: var(--cx-color-widgets);
59
61
  --cx-background-hover-color: var(--cx-color-widgets-hover);
@@ -65,470 +67,183 @@
65
67
  --cx-border-transparent: var(--cx-border-width) var(--cx-border-style) var(--cx-color-transparent);
66
68
  }
67
69
 
68
- /*
69
- * Loading
70
- */
70
+ *,
71
+ :after,
72
+ :before {
73
+ box-sizing: border-box;
74
+ }
71
75
 
72
- .lds-ring {
76
+ input[type="color"]::-webkit-color-swatch-wrapper {
77
+ padding: 0;
78
+ }
79
+
80
+ input[type="color"]::-webkit-color-swatch {
81
+ border: none;
82
+ }
83
+
84
+ .unselectable,
85
+ img,
86
+ svg,
87
+ img.cX-code,
88
+ svg.cX-code,
89
+ pre.cX-code-content code::before,
90
+ div.cX-bin,
91
+ div.cX-bin-container,
92
+ div.cX-bin-name-container,
93
+ table.cX-bin-table,
94
+ span.cX-bin {
95
+ -webkit-touch-callout: none;
96
+ /* iOS Safari */
97
+ -webkit-user-select: none;
98
+ /* Safari */
99
+ -khtml-user-select: none;
100
+ /* Konqueror HTML */
101
+ -moz-user-select: none;
102
+ /* Old versions of Firefox */
103
+ -ms-user-select: none;
104
+ /* Internet Explorer/Edge */
105
+ user-select: none;
106
+ /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
107
+ }
108
+
109
+ /*****************
110
+ * SVG No border *
111
+ *****************/
112
+
113
+ svg.cX-bin,
114
+ svg.cX-code {
115
+ background: var(--cx-color-transparent) !important;
116
+ border: none !important;
117
+ box-shadow: 0 0 0px var(--cx-color-transparent) !important;
118
+ cursor: default;
119
+ float: right;
120
+ margin: 5px 8px 0px 0px !important;
121
+ }
122
+
123
+ /*****************
124
+ * SVG Border *
125
+ *****************/
126
+
127
+ svg.cX-code {
128
+ border-radius: 5px;
129
+ border: var(--cx-border) !important;
130
+ padding: 5px;
131
+ }
132
+
133
+ /*****************
134
+ * Loading Timer *
135
+ *****************/
136
+
137
+ .cX-loading {
73
138
  display: inline-block;
74
139
  position: relative;
75
140
  width: 80px;
76
141
  height: 80px;
77
142
  }
78
143
 
79
- .lds-ring div {
144
+ .cX-loading div {
80
145
  box-sizing: border-box;
81
146
  display: block;
82
147
  position: absolute;
83
148
  width: 64px;
84
149
  height: 64px;
85
150
  margin: 8px;
86
- border: 8px solid rgb(83, 105, 255);
151
+ border: 8px solid var(--cx-color-widgets);
87
152
  border-radius: 50%;
88
- animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
89
- border-color: rgb(83, 105, 255) transparent transparent transparent;
153
+ animation: cX-loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
154
+ border-color: var(--cx-color-widgets) transparent transparent transparent;
90
155
  }
91
156
 
92
- .lds-ring div:nth-child(1) {
157
+ .cX-loading div:nth-child(1) {
93
158
  animation-delay: -0.45s;
94
159
  }
95
160
 
96
- .lds-ring div:nth-child(2) {
161
+ .cX-loading div:nth-child(2) {
97
162
  animation-delay: -0.3s;
98
163
  }
99
164
 
100
- .lds-ring div:nth-child(3) {
165
+ .cX-loading div:nth-child(3) {
101
166
  animation-delay: -0.15s;
102
167
  }
103
168
 
104
- @keyframes lds-ring {
169
+ @keyframes cX-loading {
105
170
  0% {
106
171
  transform: rotate(0deg);
107
172
  }
108
-
109
173
  100% {
110
174
  transform: rotate(360deg);
111
175
  }
112
176
  }
113
177
 
114
- /*
115
- * Loading Image
116
- */
117
-
118
- /*
119
- .sk-fading-circle {
120
- margin: 50px auto;
121
- width: 80px;
122
- height: 80px;
123
- position: relative;
124
- }
125
-
126
- .sk-fading-circle .sk-circle {
127
- width: 100%;
128
- height: 100%;
129
- position: absolute;
130
- left: 0;
131
- top: 0;
132
- }
133
-
134
- .sk-fading-circle .sk-circle:before {
135
- content: '';
136
- display: block;
137
- margin: 0 auto;
138
- width: 15%;
139
- height: 15%;
140
- background-color: rgb(51,51,51);
141
- border-radius: 100%;
142
- -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
143
- animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
144
- }
145
-
146
- .sk-fading-circle .sk-circle2 {
147
- -webkit-transform: rotate(30deg);
148
- -ms-transform: rotate(30deg);
149
- transform: rotate(30deg);
150
- }
151
-
152
- .sk-fading-circle .sk-circle3 {
153
- -webkit-transform: rotate(60deg);
154
- -ms-transform: rotate(60deg);
155
- transform: rotate(60deg);
156
- }
157
-
158
- .sk-fading-circle .sk-circle4 {
159
- -webkit-transform: rotate(90deg);
160
- -ms-transform: rotate(90deg);
161
- transform: rotate(90deg);
162
- }
163
-
164
- .sk-fading-circle .sk-circle5 {
165
- -webkit-transform: rotate(120deg);
166
- -ms-transform: rotate(120deg);
167
- transform: rotate(120deg);
168
- }
169
-
170
- .sk-fading-circle .sk-circle6 {
171
- -webkit-transform: rotate(150deg);
172
- -ms-transform: rotate(150deg);
173
- transform: rotate(150deg);
174
- }
175
-
176
- .sk-fading-circle .sk-circle7 {
177
- -webkit-transform: rotate(180deg);
178
- -ms-transform: rotate(180deg);
179
- transform: rotate(180deg);
180
- }
181
-
182
- .sk-fading-circle .sk-circle8 {
183
- -webkit-transform: rotate(210deg);
184
- -ms-transform: rotate(210deg);
185
- transform: rotate(210deg);
186
- }
187
-
188
- .sk-fading-circle .sk-circle9 {
189
- -webkit-transform: rotate(240deg);
190
- -ms-transform: rotate(240deg);
191
- transform: rotate(240deg);
192
- }
193
-
194
- .sk-fading-circle .sk-circle10 {
195
- -webkit-transform: rotate(270deg);
196
- -ms-transform: rotate(270deg);
197
- transform: rotate(270deg);
198
- }
199
-
200
- .sk-fading-circle .sk-circle11 {
201
- -webkit-transform: rotate(300deg);
202
- -ms-transform: rotate(300deg);
203
- transform: rotate(300deg);
204
- }
205
-
206
- .sk-fading-circle .sk-circle12 {
207
- -webkit-transform: rotate(330deg);
208
- -ms-transform: rotate(330deg);
209
- transform: rotate(330deg);
210
- }
211
-
212
- .sk-fading-circle .sk-circle2:before {
213
- -webkit-animation-delay: -1.1s;
214
- animation-delay: -1.1s;
215
- }
216
-
217
- .sk-fading-circle .sk-circle3:before {
218
- -webkit-animation-delay: -1s;
219
- animation-delay: -1s;
220
- }
221
-
222
- .sk-fading-circle .sk-circle4:before {
223
- -webkit-animation-delay: -0.9s;
224
- animation-delay: -0.9s;
225
- }
226
-
227
- .sk-fading-circle .sk-circle5:before {
228
- -webkit-animation-delay: -0.8s;
229
- animation-delay: -0.8s;
230
- }
231
-
232
- .sk-fading-circle .sk-circle6:before {
233
- -webkit-animation-delay: -0.7s;
234
- animation-delay: -0.7s;
235
- }
236
-
237
- .sk-fading-circle .sk-circle7:before {
238
- -webkit-animation-delay: -0.6s;
239
- animation-delay: -0.6s;
240
- }
241
-
242
- .sk-fading-circle .sk-circle8:before {
243
- -webkit-animation-delay: -0.5s;
244
- animation-delay: -0.5s;
245
- }
246
-
247
- .sk-fading-circle .sk-circle9:before {
248
- -webkit-animation-delay: -0.4s;
249
- animation-delay: -0.4s;
250
- }
251
-
252
- .sk-fading-circle .sk-circle10:before {
253
- -webkit-animation-delay: -0.3s;
254
- animation-delay: -0.3s;
255
- }
256
-
257
- .sk-fading-circle .sk-circle11:before {
258
- -webkit-animation-delay: -0.2s;
259
- animation-delay: -0.2s;
260
- }
261
-
262
- .sk-fading-circle .sk-circle12:before {
263
- -webkit-animation-delay: -0.1s;
264
- animation-delay: -0.1s;
265
- }
266
-
267
- @-webkit-keyframes sk-circleFadeDelay {
268
- 0%,
269
- 39%,
270
- 100% {
271
- opacity: 0;
272
- }
273
- 40% {
274
- opacity: 1;
275
- }
276
- }
277
-
278
- @keyframes sk-circleFadeDelay {
279
- 0%,
280
- 39%,
281
- 100% {
282
- opacity: 0;
283
- }
284
- 40% {
285
- opacity: 1;
286
- }
287
- }
178
+ /*****************
179
+ * Code *
180
+ *****************/
288
181
 
289
- .counter {
290
- position: relative;
291
- top: 101px;
292
- width: 25px;
293
- font-size: x-large;
294
- cursor: default;
295
- overflow: hidden;
296
- margin: 0px auto;
182
+ .cX-code-key {
183
+ color: var(--cx-code-key);
184
+ font-weight: bold;
297
185
  }
298
186
 
299
- .timer {
300
- height: 25px;
301
- float: left;
187
+ .cX-code-value {
188
+ color: var(--cx-code-value);
302
189
  }
303
190
 
304
- .timer-val-container {
305
- float: left;
191
+ .cX-code-string {
192
+ color: var(--cx-code-string);
306
193
  }
307
194
 
308
- .seconds-single {
309
- animation: count-10 10s steps(10, end) infinite;
195
+ .cX-code-number {
196
+ color: var(--cx-code-number);
310
197
  }
311
198
 
312
- .timer-val {
313
- width: 25px;
314
- height: 25px;
315
- text-align: center;
316
- line-height: 25px;
317
- text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
199
+ .cX-code-boolean {
200
+ color: var(--cx-code-boolean);
318
201
  }
319
202
 
320
- @keyframes count-10 {
321
- to {
322
- transform: translateY(-250px);
323
- }
203
+ .cX-code-null {
204
+ color: var(--cx-code-null);
324
205
  }
325
206
 
326
- @-webkit-keyframes count-10 {
327
- to {
328
- transform: translateY(-250px);
329
- }
207
+ .cX-code-comment {
208
+ color: var(--cx-code-comment);
330
209
  }
331
- */
332
210
 
333
- *,
334
- :after,
335
- :before {
211
+ div.cX-code,
212
+ div.cX-code-container,
213
+ div.cX-code-content,
214
+ div.cX-code-error {
336
215
  box-sizing: border-box;
337
216
  }
338
217
 
339
- table.shorts {
340
- margin: 2px 3px;
341
- padding: 2px 3px;
342
- border: 1px solid rgb(250, 250, 250);
343
- border-collapse: collapse;
344
- font-size: x-small
345
- }
346
-
347
- td.k {
348
- text-align: center;
349
- padding: 2px 5px;
350
- margin: 2px 5px;
351
- border: 1px solid rgb(204, 204, 204);
352
- }
353
-
354
- td.d {
355
- padding: 2px 5px;
356
- margin: 2px 5px;
357
- border: 1px solid rgb(204, 204, 204);
358
- }
359
-
360
- th.d {
361
- padding: 2px 5px;
362
- margin: 2px 5px;
363
- border: 1px solid rgb(204, 204, 204);
364
- }
365
-
366
- th.cxx,
367
- th.cxz,
368
- th.cxb,
369
- th.cxs,
370
- th.cxv,
371
- td.cxx,
372
- td.cxz,
373
- td.cxb,
374
- td.cxs,
375
- td.cxv {
376
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAAFklEQVR42mP88OHDf0aSiGfPntGaAAAL8XAJa+SuYgAAAABJRU5ErkJggg==);
377
- background-repeat: repeat-x;
378
- border: 1px solid rgb(204, 204, 204);
379
- vertical-align: middle;
380
- }
381
-
382
- td.cxx,
383
- td.cxz,
384
- td.cxb,
385
- td.cxs,
386
- td.cxv {
387
- font: normal 12px arial, tahoma, sans-serif;
388
- line-height: 24px;
389
- background: rgb(254, 254, 254);
390
- padding: 1px;
391
- color: rgb(34, 34, 34);
392
- }
393
-
394
- td.cxy {
395
- font: normal 12px arial, tahoma, sans-serif;
396
- line-height: 24px;
397
- border: 1px solid rgb(204, 204, 204);
398
- vertical-align: middle;
399
- text-align: right;
400
- background: rgb(254, 254, 254);
401
- padding: 1px;
402
- color: rgb(34, 34, 34);
403
- }
404
-
405
- input[type="color"] {
406
- -webkit-appearance: none;
407
- border: none;
408
- width: 100%;
409
- height: 100%;
410
- }
411
-
412
- input[type="color"]::-webkit-color-swatch-wrapper {
413
- padding: 0;
414
- }
415
-
416
- input[type="color"]::-webkit-color-swatch {
417
- border: none;
418
- }
419
-
420
- .unselectable {
421
- -webkit-touch-callout: none;
422
- -webkit-user-select: none;
423
- -khtml-user-select: none;
424
- -moz-user-select: none;
425
- -ms-user-select: none;
426
- user-select: none;
427
- }
428
-
429
- div.cxc {
430
- left: 0px;
431
- top: 0px;
432
- margin-left: 5px;
433
- margin-top: 2px;
434
- white-space: nowrap;
435
- overflow: hidden;
436
- }
437
-
438
- .json-key {
439
- color: rgb(215, 48, 39);
440
- font-weight: bold;
441
- }
442
-
443
- .json-value {
444
- color: rgb(69, 117, 180);
445
- }
446
-
447
- .json-string {
448
- color: rgb(168, 82, 2);
449
- }
450
-
451
- .json-number {
452
- color: rgb(69, 117, 180);
453
- }
454
-
455
- .json-boolean {
456
- color: rgb(102, 102, 0);
457
- }
458
-
459
- .json-null {
460
- color: rgb(69, 117, 180);
461
- }
462
-
463
- .json-comment {
464
- color: rgb(58, 115, 0)
465
- }
466
-
467
- div.CanvasXpressCode {
468
- border: 1px solid rgb(83, 105, 255);
218
+ div.cX-code {
219
+ border: var(--cx-border);
469
220
  border-radius: 5px;
470
- box-sizing: border-box;
471
- background-color: rgb(238, 238, 238);
221
+ background-color: var(--cx-color-extra-light-gray);
472
222
  cursor: move;
473
- color: rgb(34, 34, 34);
474
- font: normal 12px arial, tahoma, sans-serif;
223
+ color: var(--cx-font-color);
224
+ font: var(--cx-font);
475
225
  margin: 2px 3px;
476
226
  padding: 10px 20px 20px 10px;
477
227
  position: absolute;
478
228
  white-space: nowrap;
479
229
  }
480
230
 
481
- img.CanvasXpressCode,
482
- svg.CanvasXpressCode {
483
- background: rgba(0, 0, 0, 0) !important;
484
- border-radius: 5px;
485
- border: 1px solid rgb(83, 105, 255) !important;
486
- padding: 5px;
487
- box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
488
- cursor: default;
489
- float: right;
490
- margin: 5px 8px 0px 0px !important;
491
- -moz-user-select: none;
492
- -khtml-user-select: none;
493
- -webkit-user-select: none;
494
- -o-user-select: none;
495
- -ms-user-select: none;
496
- }
497
-
498
- pre.CanvasXpressCode {
499
- text-align: left;
500
- padding: inherit;
501
- margin: inherit;
502
- font-size: inherit;
503
- line-height: inherit;
504
- color: inherit;
505
- word-break: inherit;
506
- word-wrap: inherit;
507
- background-color: inherit;
508
- border: none;
509
- border-radius: inherit;
510
- counter-reset: line;
511
- }
512
-
513
- div.CanvasXpressCodeContainer {
514
- box-sizing: border-box;
231
+ div.cX-code-container {
515
232
  clear: both;
516
233
  width: 600px;
517
234
  overflow: auto;
518
235
  resize: horizontal;
519
- background-color: rgb(255, 255, 255);
236
+ background-color: var(--cx-color-white);
520
237
  position: relative;
521
238
  top: 10px;
522
239
  }
523
240
 
524
- div.CanvasXpressCodeContent {
525
- box-sizing: border-box;
241
+ div.cX-code-content {
526
242
  margin: 2px 3px;
527
243
  padding: 2px 3px;
528
244
  }
529
245
 
530
- div.CanvasXpressCodeError {
531
- box-sizing: border-box;
246
+ div.cX-code-error {
532
247
  height: 36px;
533
248
  width: 300px;
534
249
  float: left;
@@ -536,266 +251,149 @@ div.CanvasXpressCodeError {
536
251
  resize: none;
537
252
  top: 5px;
538
253
  left: 20px;
539
- background-color: rgb(238, 238, 238);
254
+ background-color: var(--cx-color-extra-light-gray);
540
255
  overflow: hidden;
541
256
  white-space: normal;
542
- color: rgb(255, 0, 0);
257
+ color: var(--cx-color-red);
543
258
  position: relative;
544
259
  cursor: pointer;
545
260
  }
546
261
 
547
- pre.CanvasXpressCodeContent {
548
- margin: 0 !important;
549
- padding: 0 !important;
550
- white-space: pre;
262
+ pre.cX-code,
263
+ pre.cX-code-content,
264
+ pre.cX-code-content code {
265
+ padding: 0;
266
+ margin: 0;
551
267
  font-size: inherit;
552
- line-height: 0 !important;
268
+ line-height: inherit;
553
269
  color: inherit;
554
- border: none !important;
555
- outline: none !important;
270
+ border: none;
271
+ }
272
+
273
+ pre.cX-code {
274
+ text-align: left;
275
+ word-break: inherit;
276
+ word-wrap: inherit;
277
+ background-color: inherit;
278
+ border-radius: inherit;
279
+ counter-reset: line;
280
+ }
281
+
282
+ pre.cX-code-content {
283
+ white-space: pre;
284
+ outline: none;
556
285
  cursor: text;
557
286
  }
558
287
 
559
- pre.CanvasXpressCodeContent:before {
288
+ pre.cX-code-content:before {
560
289
  counter-reset: listing;
561
290
  }
562
291
 
563
- pre.CanvasXpressCodeContent code {
292
+ pre.cX-code-content code {
564
293
  counter-increment: listing;
565
- padding: 0 !important;
566
- white-space: inherit;
567
294
  line-height: 1.5;
568
295
  }
569
296
 
570
- pre.CanvasXpressCodeContent code::before {
297
+ pre.cX-code-content code::before {
571
298
  content: counter(listing) " ";
572
299
  display: inline-block;
573
300
  width: 3em;
574
- /* Fixed width */
575
301
  border-right: 1px solid rgb(221, 221, 221);
576
- padding-left: auto;
577
- margin-left: auto;
578
302
  text-align: right;
579
- /*color: rgb(136, 136, 136);*/
580
- background-color: rgb(239, 239, 239);
581
- -webkit-user-select: none;
582
- }
583
-
584
- /*
585
- * Carousel
586
- */
587
-
588
- div.CanvasXpressCarouselScene {
589
- position: relative;
590
- margin: 0;
303
+ background-color: var(--cx-color-extra-light-gray);
591
304
  }
592
305
 
593
- div.CanvasXpressCarousel {
594
- width: 100%;
595
- height: 100%;
596
- position: absolute;
597
- transform: translateZ(-288px);
598
- transform-style: preserve-3d;
599
- transition: transform 1s;
600
- }
306
+ /***************
307
+ * Bin Data *
308
+ ***************/
601
309
 
602
- span.CanvasXpressCarousel {
603
- padding: 1px;
604
- position: absolute;
605
- border: 1px solid rgb(83, 105, 255);
606
- border-radius: 2px;
607
- line-height: 10px;
608
- cursor: pointer;
609
- }
610
-
611
- div.CanvasXpressCarouselCell {
612
- position: absolute;
613
- transition: transform 1s, opacity 1s;
614
- background-color: rgba(255, 255, 255, 0.95);
615
- border: 1px solid rgb(83, 105, 255);
310
+ div.cX-bin,
311
+ div.cX-bin-name-container {
312
+ border: var(--cx-border);
616
313
  border-radius: 5px;
617
- backface-visibility: hidden;
618
- }
619
-
620
- div.CanvasXpressCarouselCell:nth-child(1) {
621
- transform: rotateY(0deg) translateZ(288px);
622
- }
623
-
624
- div.CanvasXpressCarouselCell:nth-child(2) {
625
- transform: rotateY(40deg) translateZ(288px);
626
- }
627
-
628
- div.CanvasXpressCarouselCell:nth-child(3) {
629
- transform: rotateY(80deg) translateZ(288px);
630
- }
631
-
632
- div.CanvasXpressCarouselCell:nth-child(4) {
633
- transform: rotateY(120deg) translateZ(288px);
634
- }
635
-
636
- div.CanvasXpressCarouselCell:nth-child(5) {
637
- transform: rotateY(160deg) translateZ(288px);
638
- }
639
-
640
- div.CanvasXpressCarouselCell:nth-child(6) {
641
- transform: rotateY(200deg) translateZ(288px);
642
- }
643
-
644
- div.CanvasXpressCarouselCell:nth-child(7) {
645
- transform: rotateY(240deg) translateZ(288px);
646
- }
647
-
648
- div.CanvasXpressCarouselCell:nth-child(8) {
649
- transform: rotateY(280deg) translateZ(288px);
650
- }
651
-
652
- div.CanvasXpressCarouselCell:nth-child(9) {
653
- transform: rotateY(320deg) translateZ(288px);
654
- }
655
-
656
- img.CanvasXpressCarousel:hover,
657
- svg.CanvasXpressCarousel:hover {
658
- -webkit-transform: scale(1.8, 1.8);
659
- -ms-transform: scale(1.8, 1.8);
660
- transform: scale(1.8, 1.8);
661
- transition-duration: 0.3s;
662
- -webkit-transition-duration: 0.3s;
663
- /* Safari */
664
- box-shadow: 10px 10px 5px rgb(136, 136, 136);
665
- z-index: 2;
666
- position: relative;
667
- cursor: pointer;
668
- background: rgba(0, 0, 0, 0) !important;
669
- border: 0px none !important;
670
- box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
671
- margin: 0px !important;
314
+ background-color: var(--cx-background-ui-color);
315
+ box-sizing: border-box;
672
316
  }
673
317
 
674
-
675
- /*
676
- * CanvasXpressBin
677
- */
678
-
679
- div.CanvasXpressBin {
680
- border: 1px solid rgb(83, 105, 255);
681
- border-radius: 5px;
682
- background-color: rgba(255, 255, 255, 0.95);
683
- box-sizing: border-box;
318
+ div.cX-bin {
684
319
  cursor: move;
685
- color: rgb(34, 34, 34);
686
- font: normal 12px arial, tahoma, sans-serif;
320
+ color: var(--cx-font-color);
321
+ font: var(--cx-font);
687
322
  margin: 2px 3px;
688
323
  padding: 2px 3px 5px 3px;
689
324
  position: absolute;
690
325
  white-space: nowrap;
691
- -moz-user-select: none;
692
- -khtml-user-select: none;
693
- -webkit-user-select: none;
694
- -o-user-select: none;
695
326
  }
696
327
 
697
- img.CanvasXpressBin,
698
- svg.CanvasXpressBin {
699
- background: rgba(0, 0, 0, 0) !important;
700
- border: 0px none !important;
701
- box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
702
- cursor: default;
703
- float: right;
704
- margin: 5px 5px 0px 0px !important;
705
- -moz-user-select: none;
706
- -khtml-user-select: none;
707
- -webkit-user-select: none;
708
- -o-user-select: none;
709
- -ms-user-select: none;
710
- }
711
-
712
- div.CanvasXpressBinContainer {
713
- background-color: rgba(255, 255, 255, 0.95);
328
+ div.cX-bin-container {
329
+ background-color: var(--cx-background-ui-color);
714
330
  box-sizing: border-box;
715
331
  clear: both;
716
332
  text-align: left;
717
- -moz-user-select: none;
718
- -khtml-user-select: none;
719
- -webkit-user-select: none;
720
- -o-user-select: none;
721
333
  }
722
334
 
723
- div.CanvasXpressBinContainerTab {
724
- background-color: rgba(255, 255, 255, 0.95);
725
- border-width: 1px 1px 1px 1px;
726
- border-style: solid;
727
- border-color: rgb(83, 105, 255);
728
- border-radius: 5px;
729
- box-sizing: border-box;
730
- clear: none;
731
- height: 16px;
732
- margin: 3px;
733
- overflow-y: auto;
734
- padding: 5px;
735
- -moz-user-select: none;
736
- -khtml-user-select: none;
737
- -webkit-user-select: none;
738
- -o-user-select: none;
739
- }
740
-
741
- div.CanvasXpressBinNameContainer {
742
- background-color: rgba(255, 255, 255, 0.95);
743
- border: 1px solid rgb(83, 105, 255);
744
- border-radius: 5px;
335
+ div.cX-bin-name-container {
745
336
  box-sizing: border-box;
746
- clear: both;
337
+ border: none;
747
338
  max-height: 400px;
748
339
  margin: 8px;
749
340
  overflow-y: auto;
750
341
  padding: 5px;
751
- -moz-user-select: none;
752
- -khtml-user-select: none;
753
- -webkit-user-select: none;
754
- -o-user-select: none;
755
342
  }
756
343
 
757
- input.CanvasXpressBin {
758
- background-color: rgba(255, 255, 255, 0.95);
759
- border: 1px solid rgb(83, 105, 255);
760
- color: rgb(34, 34, 34);
344
+ input.cX-bin {
345
+ background-color: var(--cx-background-ui-color);
346
+ border: var(--cx-border);
347
+ color: var(--cx-font-color);
761
348
  cursor: default;
762
- font: normal 12px arial, tahoma, sans-serif;
349
+ font: var(--cx-font);
763
350
  line-height: 24px;
764
351
  padding-left: 3px;
765
352
  border-radius: 5px;
766
353
  margin: 3px;
767
354
  }
768
355
 
769
- table.CanvasXpressBinTable {
770
- border: collapse;
771
- line-height: 20px;
772
- color: rgb(34, 34, 34);
356
+ input.cX-bin-button {
357
+ float: left;
358
+ background-color: var(--cx-background-hover-color);
359
+ border: var(--cx-border);
360
+ border-radius: 5px;
361
+ color: var(--cx-font-color);
362
+ cursor: pointer;
363
+ font: bold var(--cx-font-size) var(--cx-font-family);
364
+ line-height: 24px;
365
+ margin: 0px 10px 10px 10px;
366
+ padding: 3px;
367
+ }
368
+
369
+ table.cX-bin-table {
370
+ border-collapse: collapse !important;
371
+ color: var(--cx-font-color);
773
372
  cursor: default;
774
- font: normal 12px arial, tahoma, sans-serif;
373
+ font: var(--cx-font);
775
374
  line-height: 24px;
776
- padding-left: 3px;
777
- -moz-user-select: none;
778
- -khtml-user-select: none;
779
- -webkit-user-select: none;
780
- -o-user-select: none;
781
375
  }
782
376
 
783
- span.CanvasXpressBin {
784
- font: bold 12px arial, tahoma, sans-serif;
785
- color: rgb(34, 34, 34);
377
+ th.cX-bin {
378
+ text-align: center;
379
+ line-height: 24px;
380
+ color: var(--cx-font-color);
381
+ background-color: var(--cx-background-hover-color);
382
+ border: var(--cx-border);
383
+ font: bold var(--cx-font-size) var(--cx-font-family);
384
+ }
385
+
386
+ span.cX-bin {
387
+ font: bold var(--cx-font-size) var(--cx-font-family);
388
+ color: var(--cx-font-color);
786
389
  margin-left: 5px;
787
- -moz-user-select: none;
788
- -khtml-user-select: none;
789
- -webkit-user-select: none;
790
- -o-user-select: none;
791
390
  }
792
391
 
793
- img.CanvasXpressBin::selection,
794
- svg.CanvasXpressBin::selection,
795
- span.CanvasXpressBin::selection {
796
- background: rgba(0, 0, 0, 0) !important;
392
+ svg.cX-bin::selection,
393
+ span.cX-bin::selection {
394
+ background: var(--cx-color-transparent) !important;
797
395
  border: 0px none !important;
798
- box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
396
+ box-shadow: 0 0 0px var(--cx-color-transparent) !important;
799
397
  color: rgb(0, 0, 0);
800
398
  margin: 0px !important;
801
399
  }
@@ -807,21 +405,6 @@ span.CanvasXpressBin::selection {
807
405
  * CanvasXpress Customizer
808
406
  */
809
407
 
810
- svg {
811
- -webkit-touch-callout: none;
812
- /* iOS Safari */
813
- -webkit-user-select: none;
814
- /* Safari */
815
- -khtml-user-select: none;
816
- /* Konqueror HTML */
817
- -moz-user-select: none;
818
- /* Old versions of Firefox */
819
- -ms-user-select: none;
820
- /* Internet Explorer/Edge */
821
- user-select: none;
822
- /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
823
- }
824
-
825
408
  .customizerPanelLeft {
826
409
  display: grid;
827
410
  grid-template-columns: 1fr;
@@ -1066,7 +649,7 @@ svg {
1066
649
  grid-template-rows: 2fr 1fr;
1067
650
  grid-column-gap: 0px;
1068
651
  grid-row-gap: 0px;
1069
- color: rgb(34, 34, 34);
652
+ color: var(--cx-font-color);
1070
653
  padding-left: 5px;
1071
654
  }
1072
655
 
@@ -1471,7 +1054,7 @@ svg {
1471
1054
 
1472
1055
  .customizerNumericS,
1473
1056
  .customizerNumeric {
1474
- color: rgb(34, 34, 34);
1057
+ color: var(--cx-font-color);
1475
1058
  background-color: rgba(0, 0, 0, 0);
1476
1059
  }
1477
1060
 
@@ -1494,7 +1077,7 @@ svg {
1494
1077
  .customizerListUnique {
1495
1078
  border: none;
1496
1079
  cursor: move;
1497
- color: rgb(34, 34, 34);
1080
+ color: var(--cx-font-color);
1498
1081
  margin: 0;
1499
1082
  padding: 0 0 0 3px;
1500
1083
  width: 350px;
@@ -1507,7 +1090,7 @@ svg {
1507
1090
 
1508
1091
  .customizerListNumericS,
1509
1092
  .customizerListNumeric {
1510
- color: rgb(34, 34, 34);
1093
+ color: var(--cx-font-color);
1511
1094
  }
1512
1095
 
1513
1096
  .customizerListStringS,
@@ -1604,7 +1187,7 @@ svg {
1604
1187
  input.customizerSearch {
1605
1188
  margin: 9px;
1606
1189
  background-color: rgba(255, 255, 255, 0.95);
1607
- color: rgb(34, 34, 34);
1190
+ color: var(--cx-font-color);
1608
1191
  cursor: default;
1609
1192
  font: inherit;
1610
1193
  height: 40px;
@@ -1638,7 +1221,7 @@ select.customizerSearchS,
1638
1221
  select.customizerSearch {
1639
1222
  margin: 9px;
1640
1223
  background-color: rgba(255, 255, 255, 0.95);
1641
- color: rgb(34, 34, 34);
1224
+ color: var(--cx-font-color);
1642
1225
  cursor: default;
1643
1226
  font: inherit;
1644
1227
  padding-left: 3px;
@@ -1649,7 +1232,7 @@ select.customizerSearch {
1649
1232
 
1650
1233
  span.customizerSearchS,
1651
1234
  span.customizerSearch {
1652
- color: rgb(34, 34, 34);
1235
+ color: var(--cx-font-color);
1653
1236
  font: inherit;
1654
1237
  line-height: 20px;
1655
1238
  list-style: none;
@@ -1680,7 +1263,7 @@ span.customizerSearchCurrent {
1680
1263
 
1681
1264
  span.customizerSearchSelectS,
1682
1265
  span.customizerSearchSelect {
1683
- color: rgb(34, 34, 34);
1266
+ color: var(--cx-font-color);
1684
1267
  }
1685
1268
 
1686
1269
  span.customizerSearchDescriptionS,
@@ -1706,28 +1289,28 @@ span.customizerSearchCurrentS {
1706
1289
 
1707
1290
  span.customizerSearchSelectS:before,
1708
1291
  span.customizerSearchSelect:before {
1709
- color: rgb(34, 34, 34);
1292
+ color: var(--cx-font-color);
1710
1293
  font-weight: bold;
1711
1294
  content: "Select property (";
1712
1295
  }
1713
1296
 
1714
1297
  span.customizerSearchSelectS:after,
1715
1298
  span.customizerSearchSelect:after {
1716
- color: rgb(34, 34, 34);
1299
+ color: var(--cx-font-color);
1717
1300
  font-weight: bold;
1718
1301
  content: ")";
1719
1302
  }
1720
1303
 
1721
1304
  span.customizerSearchDescriptionS:before,
1722
1305
  span.customizerSearchDescription:before {
1723
- color: rgb(34, 34, 34);
1306
+ color: var(--cx-font-color);
1724
1307
  font-weight: bold;
1725
1308
  content: "Description [ ";
1726
1309
  }
1727
1310
 
1728
1311
  span.customizerSearchCategoryS:before,
1729
1312
  span.customizerSearchCategory:before {
1730
- color: rgb(34, 34, 34);
1313
+ color: var(--cx-font-color);
1731
1314
  font-weight: bold;
1732
1315
  content: "Category [ ";
1733
1316
  }
@@ -1736,21 +1319,21 @@ span.customizerSearchDescriptionS:after,
1736
1319
  span.customizerSearchCategoryS:after,
1737
1320
  span.customizerSearchDescription:after,
1738
1321
  span.customizerSearchCategory:after {
1739
- color: rgb(34, 34, 34);
1322
+ color: var(--cx-font-color);
1740
1323
  font-weight: bold;
1741
1324
  content: " ]";
1742
1325
  }
1743
1326
 
1744
1327
  span.customizerSearchCurrentS:before,
1745
1328
  span.customizerSearchCurrent:before {
1746
- color: rgb(34, 34, 34);
1329
+ color: var(--cx-font-color);
1747
1330
  font-weight: bold;
1748
1331
  content: "Current Value [ ";
1749
1332
  }
1750
1333
 
1751
1334
  span.customizerSearchCurrentS:after,
1752
1335
  span.customizerSearchCurrent:after {
1753
- color: rgb(34, 34, 34);
1336
+ color: var(--cx-font-color);
1754
1337
  font-weight: bold;
1755
1338
  content: " ]";
1756
1339
  }
@@ -1764,7 +1347,7 @@ div.CanvasXpressPassword {
1764
1347
  background-color: rgba(255, 255, 255, 0.95);
1765
1348
  box-sizing: border-box;
1766
1349
  cursor: move;
1767
- color: rgb(34, 34, 34);
1350
+ color: var(--cx-font-color);
1768
1351
  font: normal 16px arial, tahoma, sans-serif;
1769
1352
  margin: 2px 3px;
1770
1353
  overflow: hidden;
@@ -1796,7 +1379,7 @@ svg.CanvasXpressPassword {
1796
1379
  div.CanvasXpressPasswordContainer {
1797
1380
  box-sizing: border-box;
1798
1381
  border-radius: 0px 0px 5px 5px;
1799
- color: rgb(34, 34, 34);
1382
+ color: var(--cx-font-color);
1800
1383
  display: block;
1801
1384
  left: 0px;
1802
1385
  line-height: 100%;
@@ -1851,8 +1434,8 @@ div.CanvasXpressTooltip {
1851
1434
  background-color: rgba(255, 255, 255, 0.95);
1852
1435
  box-sizing: border-box;
1853
1436
  cursor: move;
1854
- color: rgb(34, 34, 34);
1855
- font: normal 12px arial, tahoma, sans-serif;
1437
+ color: var(--cx-font-color);
1438
+ font: var(--cx-font);
1856
1439
  margin: 2px 3px;
1857
1440
  overflow: hidden;
1858
1441
  padding: 5px 6px;
@@ -1950,8 +1533,8 @@ span.CanvasXpressTooltip {
1950
1533
  border-radius: 5px;
1951
1534
  background-color: rgba(255, 255, 255, 0.95);
1952
1535
  cursor: move;
1953
- color: rgb(34, 34, 34);
1954
- font: normal 12px arial, tahoma, sans-serif;
1536
+ color: var(--cx-font-color);
1537
+ font: var(--cx-font);
1955
1538
  margin: 2px 3px;
1956
1539
  max-height: 800px;
1957
1540
  overflow: hidden;
@@ -1967,8 +1550,8 @@ div.CanvasXpressMousePosition {
1967
1550
  border: 0px none !important;
1968
1551
  box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
1969
1552
  cursor: move;
1970
- color: rgb(34, 34, 34);
1971
- font: normal 12px arial, tahoma, sans-serif;
1553
+ color: var(--cx-font-color);
1554
+ font: var(--cx-font);
1972
1555
  position: absolute;
1973
1556
  white-space: nowrap;
1974
1557
  text-align: left;
@@ -1999,8 +1582,8 @@ span.CanvasXpressMousePosition {
1999
1582
  border: 0px none !important;
2000
1583
  box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
2001
1584
  cursor: move;
2002
- color: rgb(34, 34, 34);
2003
- font: normal 12px arial, tahoma, sans-serif;
1585
+ color: var(--cx-font-color);
1586
+ font: var(--cx-font);
2004
1587
  position: absolute;
2005
1588
  left: 4px;
2006
1589
  top: -20px;
@@ -2041,8 +1624,8 @@ div.CanvasXpressCanvasResizerloading2 {
2041
1624
  */
2042
1625
 
2043
1626
  div.CanvasXpressMotion {
2044
- color: rgb(34, 34, 34);
2045
- font: normal 12px arial, tahoma, sans-serif;
1627
+ color: var(--cx-font-color);
1628
+ font: var(--cx-font);
2046
1629
  }
2047
1630
 
2048
1631
  img.CanvasXpressMotion,
@@ -2092,9 +1675,9 @@ div.CanvasXpressMarker {
2092
1675
  border: 1px solid rgb(83, 105, 255);
2093
1676
  border-radius: 5px;
2094
1677
  background-color: rgba(255, 255, 255, 0.95);
2095
- color: rgb(34, 34, 34);
1678
+ color: var(--cx-font-color);
2096
1679
  cursor: move;
2097
- font: normal 12px arial, tahoma, sans-serif;
1680
+ font: var(--cx-font);
2098
1681
  height: 502px;
2099
1682
  width: 286px;
2100
1683
  left: 0px;
@@ -2217,6 +1800,7 @@ img.CanvasXpressDataTableToolbarImageS,
2217
1800
  svg.CanvasXpressDataTableToolbarImageS,
2218
1801
  img.CanvasXpressDataTableToolbarImageNB,
2219
1802
  svg.CanvasXpressDataTableToolbarImageNB,
1803
+ svg.CanvasXpressDataTableToolbarImageLogo,
2220
1804
  table.CanvasXpressDataTable,
2221
1805
  th.CanvasXpressTableCellHead,
2222
1806
  th.CanvasXpressTableCellModernHead,
@@ -2256,7 +1840,7 @@ div.CanvasXpressDataTableVertical,
2256
1840
  div.CanvasXpressDataTableVerticalS,
2257
1841
  div.CanvasXpressDataTableHorizontal,
2258
1842
  div.CanvasXpressDataTableHorizontalS {
2259
- color: rgb(34, 34, 34);
1843
+ color: var(--cx-font-color);
2260
1844
  background-color: rgba(255, 255, 255, 0.95);
2261
1845
  }
2262
1846
 
@@ -2337,6 +1921,14 @@ svg.CanvasXpressDataTableToolbarImageNB {
2337
1921
  border: none !important;
2338
1922
  }
2339
1923
 
1924
+ img.CanvasXpressDataTableToolbarImageLogo,
1925
+ svg.CanvasXpressDataTableToolbarImageLogo {
1926
+ border: none !important;
1927
+ float: left;
1928
+ margin: 10px 0px 0px 10px !important;
1929
+ }
1930
+
1931
+
2340
1932
  img.CanvasXpressDataTableVertical {
2341
1933
  max-height: unset !important;
2342
1934
  height: revert-layer !important;
@@ -2349,7 +1941,7 @@ img.CanvasXpressDataTableHorizontal {
2349
1941
  table.CanvasXpressDataTable {
2350
1942
  border: 0px;
2351
1943
  border-spacing: 1px;
2352
- color: rgb(34, 34, 34);
1944
+ color: var(--cx-font-color);
2353
1945
  left: 1px;
2354
1946
  position: absolute;
2355
1947
  opacity: 0.95;
@@ -2373,17 +1965,17 @@ th.CanvasXpressTableCellModernHeadActive {
2373
1965
 
2374
1966
  th.CanvasXpressTableCellHead {
2375
1967
  background: linear-gradient(rgb(240, 240, 240), rgb(230, 230, 230));
2376
- color: rgb(34, 34, 34);
1968
+ color: var(--cx-font-color);
2377
1969
  }
2378
1970
 
2379
1971
  th.CanvasXpressTableCellModernHead {
2380
1972
  background: rgb(0, 0, 0, 0);
2381
- color: rgb(34, 34, 34);
1973
+ color: var(--cx-font-color);
2382
1974
  }
2383
1975
 
2384
1976
  th.CanvasXpressTableCellHeadActive {
2385
1977
  background: rgba(83, 105, 255, 0.1);
2386
- color: rgb(34, 34, 34);
1978
+ color: var(--cx-font-color);
2387
1979
  }
2388
1980
 
2389
1981
  th.CanvasXpressTableCellModernHeadActive {
@@ -2406,7 +1998,7 @@ a.CanvasXpressTableCellModernHeadActive {
2406
1998
  }
2407
1999
 
2408
2000
  a.CanvasXpressTableCellHead {
2409
- color: rgb(34, 34, 34);
2001
+ color: var(--cx-font-color);
2410
2002
  }
2411
2003
 
2412
2004
  a.CanvasXpressTableCellModernHead,
@@ -2426,7 +2018,7 @@ td.CanvasXpressTableCellModernActive {
2426
2018
  border-bottom: 1px solid rgb(204, 204, 204);
2427
2019
  border-left: none;
2428
2020
  border-right: none;
2429
- color: rgb(34, 34, 34);
2021
+ color: var(--cx-font-color);
2430
2022
  padding: 2px;
2431
2023
  vertical-align: middle;
2432
2024
  }
@@ -2442,9 +2034,10 @@ td.CanvasXpressTableCellModernActive {
2442
2034
  opacity: 0.95;
2443
2035
  }
2444
2036
 
2445
- div.CanvasXpressTableCell {
2037
+ div.CanvasXpressTableCell,
2038
+ div.CanvasXpressTableCellLink {
2446
2039
  box-sizing: border-box;
2447
- color: rgb(34, 34, 34);
2040
+ color: var(--cx-font-color);
2448
2041
  margin: 2px 2px 1px 5px;
2449
2042
  overflow: hidden;
2450
2043
  position: relative;
@@ -2457,6 +2050,12 @@ div.CanvasXpressTableCell:hover {
2457
2050
  background-color: rgba(83, 105, 255, 0.1);
2458
2051
  }
2459
2052
 
2053
+ div.CanvasXpressTableCellLink:hover {
2054
+ background-color: rgba(83, 105, 255, 0.1);
2055
+ text-decoration: underline rgb(83, 105, 255);
2056
+ cursor: pointer;
2057
+ }
2058
+
2460
2059
  th.CanvasXpressTableCellModernHead div.CanvasXpressTableCell,
2461
2060
  th.CanvasXpressTableCellModernHead div.CanvasXpressTableCellEmpty,
2462
2061
  tr:nth-child(1) tr:nth-child(1) th.CanvasXpressTableCellModernHead div.CanvasXpressTableCell,
@@ -2505,9 +2104,9 @@ div.CanvasXpressConfigurator {
2505
2104
  border-radius: 5px;
2506
2105
  border: 1px solid rgb(83, 105, 255);
2507
2106
  box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
2508
- color: rgb(34, 34, 34);
2107
+ color: var(--cx-font-color);
2509
2108
  cursor: default;
2510
- font: normal 12px arial, tahoma, sans-serif;
2109
+ font: var(--cx-font);
2511
2110
  opacity: 0.95;
2512
2111
  line-height: 24px;
2513
2112
  text-align: left;
@@ -2520,8 +2119,8 @@ div.CanvasXpressConfigurator {
2520
2119
 
2521
2120
  span.CanvasXpressConfigurator {
2522
2121
  cursor: default;
2523
- font: normal 12px arial, tahoma, sans-serif;
2524
- color: rgb(34, 34, 34);
2122
+ font: var(--cx-font);
2123
+ color: var(--cx-font-color);
2525
2124
  -moz-user-select: none;
2526
2125
  -khtml-user-select: none;
2527
2126
  -webkit-user-select: none;
@@ -2533,9 +2132,9 @@ textarea.CanvasXpressConfigurator {
2533
2132
  border-radius: 5px;
2534
2133
  border: 1px solid rgb(83, 105, 255);
2535
2134
  box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
2536
- color: rgb(34, 34, 34);
2135
+ color: var(--cx-font-color);
2537
2136
  cursor: default;
2538
- font: normal 12px arial, tahoma, sans-serif;
2137
+ font: var(--cx-font);
2539
2138
  }
2540
2139
 
2541
2140
  img.CanvasXpressConfigurator,
@@ -2555,26 +2154,26 @@ svg.CanvasXpressConfigurator {
2555
2154
  select.CanvasXpressConfigurator {
2556
2155
  background-color: rgba(255, 255, 255, 0.95);
2557
2156
  border: 1px solid rgb(83, 105, 255);
2558
- color: rgb(34, 34, 34);
2157
+ color: var(--cx-font-color);
2559
2158
  cursor: default;
2560
- font: normal 12px arial, tahoma, sans-serif;
2159
+ font: var(--cx-font);
2561
2160
  padding-left: 3px;
2562
2161
  }
2563
2162
 
2564
2163
  input.CanvasXpressConfigurator {
2565
2164
  background-color: rgba(255, 255, 255, 0.95);
2566
2165
  border: 1px solid rgb(83, 105, 255);
2567
- color: rgb(34, 34, 34);
2166
+ color: var(--cx-font-color);
2568
2167
  cursor: default;
2569
- font: normal 12px arial, tahoma, sans-serif;
2168
+ font: var(--cx-font);
2570
2169
  padding-left: 3px;
2571
2170
  }
2572
2171
 
2573
2172
  div.CanvasXpressConfiguratorOptions {
2574
2173
  box-sizing: border-box;
2575
2174
  cursor: default;
2576
- font: normal 12px arial, tahoma, sans-serif;
2577
- color: rgb(34, 34, 34);
2175
+ font: var(--cx-font);
2176
+ color: var(--cx-font-color);
2578
2177
  height: 100px;
2579
2178
  margin-top: 8px;
2580
2179
  overflow: auto;
@@ -2587,20 +2186,20 @@ div.CanvasXpressConfiguratorFilter {
2587
2186
  border-radius: 5px;
2588
2187
  border: 1px solid rgb(83, 105, 255);
2589
2188
  box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
2590
- color: rgb(34, 34, 34);
2591
- font: normal 12px arial, tahoma, sans-serif;
2189
+ color: var(--cx-font-color);
2190
+ font: var(--cx-font);
2592
2191
  }
2593
2192
 
2594
2193
  select.CanvasXpressConfiguratorFilter {
2595
2194
  border: 1px solid rgb(83, 105, 255);
2596
- font: normal 12px arial, tahoma, sans-serif;
2597
- color: rgb(34, 34, 34);
2195
+ font: var(--cx-font);
2196
+ color: var(--cx-font-color);
2598
2197
  }
2599
2198
 
2600
2199
  input.CanvasXpressConfiguratorFilter {
2601
2200
  border: 1px solid rgb(83, 105, 255);
2602
- font: normal 12px arial, tahoma, sans-serif;
2603
- color: rgb(34, 34, 34);
2201
+ font: var(--cx-font);
2202
+ color: var(--cx-font-color);
2604
2203
  }
2605
2204
 
2606
2205
  div.CanvasXpressConfiguratorExample {
@@ -2609,8 +2208,8 @@ div.CanvasXpressConfiguratorExample {
2609
2208
  border-radius: 5px;
2610
2209
  border: 1px solid rgb(83, 105, 255);
2611
2210
  box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
2612
- color: rgb(34, 34, 34);
2613
- font: normal 12px arial, tahoma, sans-serif;
2211
+ color: var(--cx-font-color);
2212
+ font: var(--cx-font);
2614
2213
  overflow-y: scroll;
2615
2214
  overflow-x: hidden;
2616
2215
  }
@@ -2618,7 +2217,7 @@ div.CanvasXpressConfiguratorExample {
2618
2217
  span.CanvasXpressConfiguratorExample {
2619
2218
  cursor: default;
2620
2219
  font: bold 14px arial, tahoma, sans-serif;
2621
- color: rgb(34, 34, 34);
2220
+ color: var(--cx-font-color);
2622
2221
  line-height: 18px;
2623
2222
  -moz-user-select: none;
2624
2223
  -khtml-user-select: none;
@@ -2633,8 +2232,8 @@ div.CanvasXpressConfiguratorExampleContent {
2633
2232
  div.CanvasXpressConfiguratorColor {
2634
2233
  box-sizing: border-box;
2635
2234
  border: 1px solid rgb(83, 105, 255);
2636
- font: normal 12px arial, tahoma, sans-serif;
2637
- color: rgb(34, 34, 34);
2235
+ font: var(--cx-font);
2236
+ color: var(--cx-font-color);
2638
2237
  line-height: 18px;
2639
2238
  }
2640
2239
 
@@ -2644,8 +2243,8 @@ div.CanvasXpressConfiguratorColorMain {
2644
2243
  background-repeat: no-repeat;
2645
2244
  box-sizing: border-box;
2646
2245
  border: none;
2647
- font: normal 12px arial, tahoma, sans-serif;
2648
- color: rgb(34, 34, 34);
2246
+ font: var(--cx-font);
2247
+ color: var(--cx-font-color);
2649
2248
  float: left;
2650
2249
  cursor: crosshair;
2651
2250
  }
@@ -2655,8 +2254,8 @@ div.CanvasXpressConfiguratorColorExtra {
2655
2254
  background-image: url(data:image/gif;base64,R0lGODlhDwAPAKEBAAAAAP///////////yH5BAEKAAIALAAAAAAPAA8AAAIklB8Qx53b4otSUWcvyiz4/4AeQJbmKY4p1HHapBlwPL/uVRsFADs=);
2656
2255
  background-repeat: no-repeat;
2657
2256
  border: none;
2658
- font: normal 12px arial, tahoma, sans-serif;
2659
- color: rgb(34, 34, 34);
2257
+ font: var(--cx-font);
2258
+ color: var(--cx-font-color);
2660
2259
  cursor: crosshair;
2661
2260
  overflow: hidden;
2662
2261
  }
@@ -2749,7 +2348,7 @@ div.CanvasXpressWrapper {
2749
2348
  div.CanvasXpressDataFilter,
2750
2349
  div.CanvasXpressDataFilterToolbar {
2751
2350
  box-sizing: border-box;
2752
- color: rgb(34, 34, 34);
2351
+ color: var(--cx-font-color);
2753
2352
  font: normal 16px arial, tahoma, sans-serif;
2754
2353
  line-height: 100%;
2755
2354
  margin: 0px;
@@ -2795,7 +2394,7 @@ span.CanvasXpressDataFilterToolbarText,
2795
2394
  span.CanvasXpressDataFilterText,
2796
2395
  span.CanvasXpressDataFilterTextActive {
2797
2396
  font: normal 16px arial, tahoma, sans-serif;
2798
- color: rgb(34, 34, 34);
2397
+ color: var(--cx-font-color);
2799
2398
  left: 8px;
2800
2399
  line-height: 100%;
2801
2400
  position: relative;
@@ -2872,7 +2471,7 @@ div.CanvasXpressDataFilterContainerMaskS {
2872
2471
  select.CanvasXpressDataFilterContainerString {
2873
2472
  background-color: rgba(255, 255, 255, 0.95);
2874
2473
  font: normal 16px arial, tahoma, sans-serif;
2875
- color: rgb(34, 34, 34);
2474
+ color: var(--cx-font-color);
2876
2475
  margin-left: 3px;
2877
2476
  margin-bottom: 3px;
2878
2477
  }
@@ -2912,7 +2511,7 @@ div.CanvasXpressDataFilterContainerHoverable:hover {
2912
2511
  }
2913
2512
 
2914
2513
  div.CanvasXpressDataFilterContainerHoverableS {
2915
- border: 1px solid rgb(34, 34, 34);
2514
+ border: 1px solid var(--cx-font-color);
2916
2515
  }
2917
2516
 
2918
2517
  div.CanvasXpressDataFilterContainerHoverableS:hover {
@@ -2926,7 +2525,7 @@ div.CanvasXpressDataFilterHeadSActive,
2926
2525
  div.CanvasXpressDataFilterHeadO,
2927
2526
  div.CanvasXpressDataFilterHeadOActive {
2928
2527
  box-sizing: border-box;
2929
- color: rgb(34, 34, 34);
2528
+ color: var(--cx-font-color);
2930
2529
  cursor: pointer;
2931
2530
  float: left;
2932
2531
  height: 38px;
@@ -3346,7 +2945,7 @@ select.CanvasXpressConfigurator::-webkit-scrollbar-button,
3346
2945
  div.CanvasXpressConfiguratorExample::-webkit-scrollbar-button,
3347
2946
  div.CanvasXpressConfiguratorExampleContent::-webkit-scrollbar-button,
3348
2947
  select.CanvasXpressSlider::-webkit-scrollbar-button,
3349
- div.CanvasXpressBinNameContainer::-webkit-scrollbar-button {
2948
+ div.cX-bin-name-container::-webkit-scrollbar-button {
3350
2949
  width: 4px;
3351
2950
  height: 4px;
3352
2951
  }
@@ -3372,7 +2971,7 @@ div.CanvasXpressDataExplorer::-webkit-scrollbar-track,
3372
2971
  div.CanvasXpressDataCustomizer::-webkit-scrollbar-track,
3373
2972
  div.CanvasXpressConfiguratorExample::-webkit-scrollbar-track,
3374
2973
  div.CanvasXpressConfiguratorExampleContent::-webkit-scrollbar-track,
3375
- div.CanvasXpressBinNameContainer::-webkit-scrollbar-track {
2974
+ div.cX-bin-name-container::-webkit-scrollbar-track {
3376
2975
  background-color: rgb(245, 245, 245);
3377
2976
  }
3378
2977
 
@@ -3391,7 +2990,7 @@ select.CanvasXpressConfigurator::-webkit-scrollbar-track:hover,
3391
2990
  div.CanvasXpressConfiguratorExample::-webkit-scrollbar-track:hover,
3392
2991
  div.CanvasXpressConfiguratorExampleContent::-webkit-scrollbar-track:hover,
3393
2992
  select.CanvasXpressSlider::-webkit-scrollbar-track:hover,
3394
- div.CanvasXpressBinNameContainer::-webkit-scrollbar-track:hover {
2993
+ div.cX-bin-name-container::-webkit-scrollbar-track:hover {
3395
2994
  background-color: rgb(190, 190, 190);
3396
2995
  border-radius: 8px;
3397
2996
  }
@@ -3425,7 +3024,7 @@ div.CanvasXpressDataExplorer::-webkit-scrollbar,
3425
3024
  div.CanvasXpressDataCustomizer::-webkit-scrollbar,
3426
3025
  div.CanvasXpressConfiguratorExample::-webkit-scrollbar,
3427
3026
  div.CanvasXpressConfiguratorExampleContent::-webkit-scrollbar,
3428
- div.CanvasXpressBinNameContainer::-webkit-scrollbar {
3027
+ div.cX-bin-name-container::-webkit-scrollbar {
3429
3028
  width: 8px;
3430
3029
  height: 8px;
3431
3030
  background-color: rgb(245, 245, 245);
@@ -3445,7 +3044,7 @@ select.CanvasXpressConfigurator::-webkit-scrollbar-thumb,
3445
3044
  div.CanvasXpressConfiguratorExample::-webkit-scrollbar-thumb,
3446
3045
  div.CanvasXpressConfiguratorExampleContent::-webkit-scrollbar-thumb,
3447
3046
  select.CanvasXpressSlider::-webkit-scrollbar-thumb,
3448
- div.CanvasXpressBinNameContainer::-webkit-scrollbar-thumb {
3047
+ div.cX-bin-name-container::-webkit-scrollbar-thumb {
3449
3048
  background-color: rgb(83, 105, 255);
3450
3049
  border-radius: 8px;
3451
3050
  border: none;
@@ -3463,7 +3062,7 @@ div.CanvasXpressDataTableVerticalS::-webkit-scrollbar-thumb {
3463
3062
  div.CanvasXpressDataFilter::selection,
3464
3063
  div.CanvasXpressDataFilterToolbar::selection {
3465
3064
  background: rgba(0, 0, 0, 0);
3466
- color: rgb(34, 34, 34);
3065
+ color: var(--cx-font-color);
3467
3066
  }
3468
3067
 
3469
3068
  div.CanvasXpressDataFilterContainerItem::selection {
@@ -3483,7 +3082,7 @@ div.CanvasXpressLink {
3483
3082
  border: 1px solid rgb(83, 105, 255);
3484
3083
  border-radius: 3px;
3485
3084
  box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
3486
- color: rgb(34, 34, 34);
3085
+ color: var(--cx-font-color);
3487
3086
  cursor: default;
3488
3087
  font: normal 16px arial, tahoma, sans-serif;
3489
3088
  line-height: 100%;
@@ -3538,7 +3137,7 @@ section.CanvasXpressTabMenuConfigurator>h1.CanvasXpressTabMenuConfigurator {
3538
3137
  padding: 0.5px;
3539
3138
  overflow: hidden;
3540
3139
  font: normal 16px arial, tahoma, sans-serif;
3541
- color: rgb(34, 34, 34);
3140
+ color: var(--cx-font-color);
3542
3141
  line-height: 100%;
3543
3142
  }
3544
3143
 
@@ -3572,7 +3171,7 @@ div.CanvasXpressMenu {
3572
3171
  border: 1px solid rgb(83, 105, 255);
3573
3172
  border-radius: 3px;
3574
3173
  box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
3575
- color: rgb(34, 34, 34);
3174
+ color: var(--cx-font-color);
3576
3175
  cursor: default;
3577
3176
  font: normal 16px arial, tahoma, sans-serif;
3578
3177
  line-height: 100%;
@@ -3598,7 +3197,7 @@ li.CanvasXpressListItemSep {
3598
3197
  cursor: default;
3599
3198
  display: block;
3600
3199
  font: normal 16px arial, tahoma, sans-serif;
3601
- color: rgb(34, 34, 34);
3200
+ color: var(--cx-font-color);
3602
3201
  font-size: 1px;
3603
3202
  height: 100%;
3604
3203
  line-height: 1px;
@@ -3613,7 +3212,7 @@ input.CanvasXpressListItem {
3613
3212
  cursor: default;
3614
3213
  display: block;
3615
3214
  font: normal 16px arial, tahoma, sans-serif;
3616
- color: rgb(34, 34, 34);
3215
+ color: var(--cx-font-color);
3617
3216
  line-height: 100%;
3618
3217
  list-style: none;
3619
3218
  margin: 0px;
@@ -3629,7 +3228,7 @@ div.CanvasXpressListItem {
3629
3228
  box-sizing: border-box;
3630
3229
  border: 1px solid rgb(83, 105, 255);
3631
3230
  font: normal 16px arial, tahoma, sans-serif;
3632
- color: rgb(34, 34, 34);
3231
+ color: var(--cx-font-color);
3633
3232
  line-height: 24px;
3634
3233
  }
3635
3234
 
@@ -3640,7 +3239,7 @@ li.CanvasXpressListItem {
3640
3239
  cursor: default;
3641
3240
  display: block;
3642
3241
  font: normal 16px arial, tahoma, sans-serif;
3643
- color: rgb(34, 34, 34);
3242
+ color: var(--cx-font-color);
3644
3243
  height: 100%;
3645
3244
  line-height: 100%;
3646
3245
  list-style: none;
@@ -3659,7 +3258,7 @@ li.CanvasXpressListItemActive {
3659
3258
  cursor: default;
3660
3259
  display: block;
3661
3260
  font: normal 16px arial, tahoma, sans-serif;
3662
- color: rgb(34, 34, 34);
3261
+ color: var(--cx-font-color);
3663
3262
  height: 100%;
3664
3263
  line-height: 100%;
3665
3264
  list-style: none;
@@ -3744,7 +3343,7 @@ li.CanvasXpressListItemScrollSearch {
3744
3343
  }
3745
3344
 
3746
3345
  input.CanvasXpressListItemScrollSearch {
3747
- color: rgb(34, 34, 34);
3346
+ color: var(--cx-font-color);
3748
3347
  cursor: default;
3749
3348
  font: normal 16px arial, tahoma, sans-serif;
3750
3349
  line-height: 24px;
@@ -3760,7 +3359,7 @@ a.CanvasXpressListItemA {
3760
3359
  border-color: rgba(0, 0, 0, 0);
3761
3360
  border-style: solid;
3762
3361
  border-width: 0px 1px;
3763
- color: rgb(34, 34, 34);
3362
+ color: var(--cx-font-color);
3764
3363
  cursor: pointer;
3765
3364
  display: block;
3766
3365
  font: normal 16px arial, tahoma, sans-serif;
@@ -3779,7 +3378,7 @@ a.CanvasXpressListItemAActive {
3779
3378
  border-color: rgb(170, 204, 246);
3780
3379
  border-style: solid;
3781
3380
  border-width: 0px 1px;
3782
- color: rgb(34, 34, 34);
3381
+ color: var(--cx-font-color);
3783
3382
  cursor: pointer;
3784
3383
  display: block;
3785
3384
  font: normal 16px arial, tahoma, sans-serif;
@@ -3799,7 +3398,7 @@ a.CanvasXpressListItemAArrow {
3799
3398
  border-color: rgba(0, 0, 0, 0);
3800
3399
  border-style: solid;
3801
3400
  border-width: 0px 1px;
3802
- color: rgb(34, 34, 34);
3401
+ color: var(--cx-font-color);
3803
3402
  cursor: pointer;
3804
3403
  display: block;
3805
3404
  font: normal 16px arial, tahoma, sans-serif;
@@ -3819,7 +3418,7 @@ a.CanvasXpressListItemAArrowActive {
3819
3418
  border-color: rgb(170, 204, 246);
3820
3419
  border-style: solid;
3821
3420
  border-width: 0px 1px;
3822
- color: rgb(34, 34, 34);
3421
+ color: var(--cx-font-color);
3823
3422
  cursor: pointer;
3824
3423
  display: block;
3825
3424
  font: normal 16px arial, tahoma, sans-serif;
@@ -3838,7 +3437,7 @@ img.CanvasXpressListIcon,
3838
3437
  svg.CanvasXpressListIcon {
3839
3438
  background-position: center;
3840
3439
  border: 0px none !important;
3841
- color: rgb(34, 34, 34);
3440
+ color: var(--cx-font-color);
3842
3441
  cursor: pointer;
3843
3442
  font: normal 16px arial, tahoma, sans-serif;
3844
3443
  height: 24px;
@@ -3857,7 +3456,7 @@ svg.CanvasXpressListIcon {
3857
3456
  }
3858
3457
 
3859
3458
  span.CanvasXpressListItemText {
3860
- color: rgb(34, 34, 34);
3459
+ color: var(--cx-font-color);
3861
3460
  cursor: pointer;
3862
3461
  font: normal 16px arial, tahoma, sans-serif;
3863
3462
  line-height: 24px;
@@ -3867,7 +3466,7 @@ span.CanvasXpressListItemText {
3867
3466
  }
3868
3467
 
3869
3468
  input.CanvasXpressListItemText {
3870
- color: rgb(34, 34, 34);
3469
+ color: var(--cx-font-color);
3871
3470
  cursor: pointer;
3872
3471
  font: normal 16px arial, tahoma, sans-serif;
3873
3472
  line-height: 24px;
@@ -3876,7 +3475,7 @@ input.CanvasXpressListItemText {
3876
3475
  }
3877
3476
 
3878
3477
  span.CanvasXpressListItemTextShort {
3879
- color: rgb(34, 34, 34);
3478
+ color: var(--cx-font-color);
3880
3479
  cursor: pointer;
3881
3480
  float: right;
3882
3481
  font: italic 9px arial, tahoma, sans-serif;
@@ -3893,7 +3492,7 @@ span.CanvasXpressListItemTextSep {
3893
3492
  cursor: default;
3894
3493
  display: block;
3895
3494
  font: normal 16px arial, tahoma, sans-serif;
3896
- color: rgb(34, 34, 34);
3495
+ color: var(--cx-font-color);
3897
3496
  font-size: 1px;
3898
3497
  line-height: 1px;
3899
3498
  list-style: none;
@@ -3905,10 +3504,10 @@ span.CanvasXpressListItemTextSep {
3905
3504
  table.CanvasXpressListItemTable {
3906
3505
  border: collapse;
3907
3506
  line-height: 20px;
3908
- color: rgb(34, 34, 34);
3507
+ color: var(--cx-font-color);
3909
3508
  cursor: default;
3910
3509
  font: normal 16px arial, tahoma, sans-serif;
3911
- color: rgb(34, 34, 34);
3510
+ color: var(--cx-font-color);
3912
3511
  line-height: 24px;
3913
3512
  padding-left: 3px;
3914
3513
  -moz-user-select: none;
@@ -3938,7 +3537,7 @@ div.CanvasXpressToolbarHelp {
3938
3537
  border-radius: 5px;
3939
3538
  border: 1px solid rgb(83, 105, 255);
3940
3539
  box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
3941
- color: rgb(34, 34, 34);
3540
+ color: var(--cx-font-color);
3942
3541
  cursor: default;
3943
3542
  font: normal 16px arial, tahoma, sans-serif;
3944
3543
  line-height: 24px;
@@ -3952,7 +3551,7 @@ div.CanvasXpressToolbarHelp {
3952
3551
  p.CanvasXpressToolbarHelp {
3953
3552
  cursor: default;
3954
3553
  font: normal 16px arial, tahoma, sans-serif;
3955
- color: rgb(34, 34, 34);
3554
+ color: var(--cx-font-color);
3956
3555
  line-height: 24px;
3957
3556
  margin: 0px;
3958
3557
  padding: 5px 5px 5px 20px;
@@ -3963,7 +3562,7 @@ div.CanvasXpressForm {
3963
3562
  border: 1px solid rgb(83, 105, 255);
3964
3563
  border-radius: 5px;
3965
3564
  background-color: rgba(255, 255, 255, 0.95);
3966
- color: rgb(34, 34, 34);
3565
+ color: var(--cx-font-color);
3967
3566
  cursor: move;
3968
3567
  font: normal 16px arial, tahoma, sans-serif;
3969
3568
  margin: 8px;
@@ -3977,7 +3576,7 @@ input.CanvasXpressFormButton {
3977
3576
  background-repeat: repeat-x;
3978
3577
  border: 1px solid rgb(83, 105, 255);
3979
3578
  border-radius: 5px 5px 5px 5px;
3980
- color: rgb(34, 34, 34);
3579
+ color: var(--cx-font-color);
3981
3580
  cursor: pointer;
3982
3581
  float: left;
3983
3582
  height: 22px;
@@ -3998,7 +3597,7 @@ input.CanvasXpressFormButtonActive {
3998
3597
  background-repeat: repeat-x;
3999
3598
  border: 1px solid rgb(83, 105, 255);
4000
3599
  border-radius: 5px 5px 0px 0px;
4001
- color: rgb(34, 34, 34);
3600
+ color: var(--cx-font-color);
4002
3601
  cursor: pointer;
4003
3602
  float: left;
4004
3603
  height: 22px;
@@ -4017,7 +3616,7 @@ input.CanvasXpressFormButtonActive {
4017
3616
  input.CanvasXpressFormText {
4018
3617
  background-color: rgba(255, 255, 255, 0.95);
4019
3618
  border: 1px solid rgb(83, 105, 255);
4020
- color: rgb(34, 34, 34);
3619
+ color: var(--cx-font-color);
4021
3620
  cursor: default;
4022
3621
  font: normal 16px arial, tahoma, sans-serif;
4023
3622
  line-height: 24px;
@@ -4027,7 +3626,7 @@ input.CanvasXpressFormText {
4027
3626
  form.CanvasXpressFormForm {
4028
3627
  background-color: rgba(255, 255, 255, 0.95);
4029
3628
  border: 1px solid rgb(83, 105, 255);
4030
- color: rgb(34, 34, 34);
3629
+ color: var(--cx-font-color);
4031
3630
  cursor: default;
4032
3631
  font: normal 16px arial, tahoma, sans-serif;
4033
3632
  line-height: 24px;
@@ -4134,7 +3733,7 @@ input.CanvasXpressSlider,
4134
3733
  select.CanvasXpressSlider {
4135
3734
  padding: 2px 3px 2px 2px;
4136
3735
  cursor: default;
4137
- color: rgb(34, 34, 34);
3736
+ color: var(--cx-font-color);
4138
3737
  border-left: none;
4139
3738
  border-right: none;
4140
3739
  border-top: none;
@@ -4225,7 +3824,7 @@ div.CanvasXpressTabPanelRibbon {
4225
3824
  }
4226
3825
 
4227
3826
  span.CanvasXpressTabPanelRibbon {
4228
- color: rgb(34, 34, 34);
3827
+ color: var(--cx-font-color);
4229
3828
  font: normal 16px arial, tahoma, sans-serif;
4230
3829
  line-height: 28px;
4231
3830
  list-style: none;
@@ -4541,19 +4140,19 @@ div.CanvasXpressPlay:hover {
4541
4140
  }
4542
4141
 
4543
4142
  @media (min-width: 300px) {
4544
- div.CanvasXpressBin {
4143
+ div.cX-bin {
4545
4144
  transform: scale(0.5);
4546
4145
  }
4547
4146
  }
4548
4147
 
4549
4148
  @media (min-width: 450px) {
4550
- div.CanvasXpressBin {
4149
+ div.cX-bin {
4551
4150
  transform: scale(0.75);
4552
4151
  }
4553
4152
  }
4554
4153
 
4555
4154
  @media (min-width: 600px) {
4556
- div.CanvasXpressBin {
4155
+ div.cX-bin {
4557
4156
  transform: scale(1);
4558
4157
  }
4559
4158
  }