canvasxpress-cli 48.2.4 → 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 +971 -1101
  3. package/src/canvasXpress.js +13161 -12997
package/src/canvasXpress.css CHANGED
@@ -1,476 +1,249 @@
1
1
  @charset "UTF-8";
2
2
 
3
3
  /*
4
- * Favorite Colors
4
+ * Favorite Colors
5
5
  * rgb(51, 122, 183) - #337ab7
6
6
  * rgb(76, 159, 224) - #4c9fe0
7
7
  * rgb(83, 105, 255) - #5369ff
8
8
  */
9
9
 
10
- /*
11
- * Loading
12
- */
10
+ :root {
11
+ /* Colors */
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);
28
+ /* Icons - Not used but just to remember */
29
+ --cx-icon-class-a: #5369ff;
30
+ --cx-icon-class-b: #292929;
31
+ --cx-icon-class-c: #999999;
32
+ --cx-icon-class-r: #ff0000;
33
+ /* Coding colors */
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);
41
+ /* Favorite UI colors */
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);
46
+ /* Favorite UI Styles - Not used but just to remember */
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);
53
+ /* UI */
54
+ --cx-font-family: arial, tahoma, sans-serif;
55
+ --cx-font-size: 12px;
56
+ --cx-font-weight: normal;
57
+ --cx-font-color: var(--cx-color-ui-font);
58
+ --cx-font: var(--cx-font-weight) var(--cx-font-size) var(--cx-font-family);
59
+ --cx-background-ui-color: var(--cx-color-ui-background);
60
+ --cx-background-color: var(--cx-color-widgets);
61
+ --cx-background-hover-color: var(--cx-color-widgets-hover);
62
+ --cx-border-color: var(--cx-background-color);
63
+ --cx-border-radius: 5px;
64
+ --cx-border-width: 1px;
65
+ --cx-border-style: solid;
66
+ --cx-border: var(--cx-border-width) var(--cx-border-style) var(--cx-border-color);
67
+ --cx-border-transparent: var(--cx-border-width) var(--cx-border-style) var(--cx-color-transparent);
68
+ }
69
+
70
+ *,
71
+ :after,
72
+ :before {
73
+ box-sizing: border-box;
74
+ }
75
+
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
+ }
13
122
 
14
- .lds-ring {
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 {
15
138
  display: inline-block;
16
139
  position: relative;
17
140
  width: 80px;
18
141
  height: 80px;
19
142
  }
20
143
 
21
- .lds-ring div {
144
+ .cX-loading div {
22
145
  box-sizing: border-box;
23
146
  display: block;
24
147
  position: absolute;
25
148
  width: 64px;
26
149
  height: 64px;
27
150
  margin: 8px;
28
- border: 8px solid rgb(83, 105, 255);
151
+ border: 8px solid var(--cx-color-widgets);
29
152
  border-radius: 50%;
30
- animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
31
- 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;
32
155
  }
33
156
 
34
- .lds-ring div:nth-child(1) {
157
+ .cX-loading div:nth-child(1) {
35
158
  animation-delay: -0.45s;
36
159
  }
37
160
 
38
- .lds-ring div:nth-child(2) {
161
+ .cX-loading div:nth-child(2) {
39
162
  animation-delay: -0.3s;
40
163
  }
41
164
 
42
- .lds-ring div:nth-child(3) {
165
+ .cX-loading div:nth-child(3) {
43
166
  animation-delay: -0.15s;
44
167
  }
45
168
 
46
- @keyframes lds-ring {
169
+ @keyframes cX-loading {
47
170
  0% {
48
171
  transform: rotate(0deg);
49
172
  }
50
-
51
173
  100% {
52
174
  transform: rotate(360deg);
53
175
  }
54
176
  }
55
177
 
56
- /*
57
- * Loading Image
58
- */
59
-
60
- /*
61
- .sk-fading-circle {
62
- margin: 50px auto;
63
- width: 80px;
64
- height: 80px;
65
- position: relative;
66
- }
67
-
68
- .sk-fading-circle .sk-circle {
69
- width: 100%;
70
- height: 100%;
71
- position: absolute;
72
- left: 0;
73
- top: 0;
74
- }
75
-
76
- .sk-fading-circle .sk-circle:before {
77
- content: '';
78
- display: block;
79
- margin: 0 auto;
80
- width: 15%;
81
- height: 15%;
82
- background-color: rgb(51,51,51);
83
- border-radius: 100%;
84
- -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
85
- animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
86
- }
87
-
88
- .sk-fading-circle .sk-circle2 {
89
- -webkit-transform: rotate(30deg);
90
- -ms-transform: rotate(30deg);
91
- transform: rotate(30deg);
92
- }
93
-
94
- .sk-fading-circle .sk-circle3 {
95
- -webkit-transform: rotate(60deg);
96
- -ms-transform: rotate(60deg);
97
- transform: rotate(60deg);
98
- }
99
-
100
- .sk-fading-circle .sk-circle4 {
101
- -webkit-transform: rotate(90deg);
102
- -ms-transform: rotate(90deg);
103
- transform: rotate(90deg);
104
- }
105
-
106
- .sk-fading-circle .sk-circle5 {
107
- -webkit-transform: rotate(120deg);
108
- -ms-transform: rotate(120deg);
109
- transform: rotate(120deg);
110
- }
111
-
112
- .sk-fading-circle .sk-circle6 {
113
- -webkit-transform: rotate(150deg);
114
- -ms-transform: rotate(150deg);
115
- transform: rotate(150deg);
116
- }
117
-
118
- .sk-fading-circle .sk-circle7 {
119
- -webkit-transform: rotate(180deg);
120
- -ms-transform: rotate(180deg);
121
- transform: rotate(180deg);
122
- }
123
-
124
- .sk-fading-circle .sk-circle8 {
125
- -webkit-transform: rotate(210deg);
126
- -ms-transform: rotate(210deg);
127
- transform: rotate(210deg);
128
- }
129
-
130
- .sk-fading-circle .sk-circle9 {
131
- -webkit-transform: rotate(240deg);
132
- -ms-transform: rotate(240deg);
133
- transform: rotate(240deg);
134
- }
135
-
136
- .sk-fading-circle .sk-circle10 {
137
- -webkit-transform: rotate(270deg);
138
- -ms-transform: rotate(270deg);
139
- transform: rotate(270deg);
140
- }
141
-
142
- .sk-fading-circle .sk-circle11 {
143
- -webkit-transform: rotate(300deg);
144
- -ms-transform: rotate(300deg);
145
- transform: rotate(300deg);
146
- }
147
-
148
- .sk-fading-circle .sk-circle12 {
149
- -webkit-transform: rotate(330deg);
150
- -ms-transform: rotate(330deg);
151
- transform: rotate(330deg);
152
- }
153
-
154
- .sk-fading-circle .sk-circle2:before {
155
- -webkit-animation-delay: -1.1s;
156
- animation-delay: -1.1s;
157
- }
158
-
159
- .sk-fading-circle .sk-circle3:before {
160
- -webkit-animation-delay: -1s;
161
- animation-delay: -1s;
162
- }
163
-
164
- .sk-fading-circle .sk-circle4:before {
165
- -webkit-animation-delay: -0.9s;
166
- animation-delay: -0.9s;
167
- }
168
-
169
- .sk-fading-circle .sk-circle5:before {
170
- -webkit-animation-delay: -0.8s;
171
- animation-delay: -0.8s;
172
- }
173
-
174
- .sk-fading-circle .sk-circle6:before {
175
- -webkit-animation-delay: -0.7s;
176
- animation-delay: -0.7s;
177
- }
178
-
179
- .sk-fading-circle .sk-circle7:before {
180
- -webkit-animation-delay: -0.6s;
181
- animation-delay: -0.6s;
182
- }
183
-
184
- .sk-fading-circle .sk-circle8:before {
185
- -webkit-animation-delay: -0.5s;
186
- animation-delay: -0.5s;
187
- }
188
-
189
- .sk-fading-circle .sk-circle9:before {
190
- -webkit-animation-delay: -0.4s;
191
- animation-delay: -0.4s;
192
- }
193
-
194
- .sk-fading-circle .sk-circle10:before {
195
- -webkit-animation-delay: -0.3s;
196
- animation-delay: -0.3s;
197
- }
178
+ /*****************
179
+ * Code *
180
+ *****************/
198
181
 
199
- .sk-fading-circle .sk-circle11:before {
200
- -webkit-animation-delay: -0.2s;
201
- animation-delay: -0.2s;
202
- }
203
-
204
- .sk-fading-circle .sk-circle12:before {
205
- -webkit-animation-delay: -0.1s;
206
- animation-delay: -0.1s;
207
- }
208
-
209
- @-webkit-keyframes sk-circleFadeDelay {
210
- 0%,
211
- 39%,
212
- 100% {
213
- opacity: 0;
214
- }
215
- 40% {
216
- opacity: 1;
217
- }
218
- }
219
-
220
- @keyframes sk-circleFadeDelay {
221
- 0%,
222
- 39%,
223
- 100% {
224
- opacity: 0;
225
- }
226
- 40% {
227
- opacity: 1;
228
- }
182
+ .cX-code-key {
183
+ color: var(--cx-code-key);
184
+ font-weight: bold;
229
185
  }
230
186
 
231
- .counter {
232
- position: relative;
233
- top: 101px;
234
- width: 25px;
235
- font-size: x-large;
236
- cursor: default;
237
- overflow: hidden;
238
- margin: 0px auto;
187
+ .cX-code-value {
188
+ color: var(--cx-code-value);
239
189
  }
240
190
 
241
- .timer {
242
- height: 25px;
243
- float: left;
191
+ .cX-code-string {
192
+ color: var(--cx-code-string);
244
193
  }
245
194
 
246
- .timer-val-container {
247
- float: left;
195
+ .cX-code-number {
196
+ color: var(--cx-code-number);
248
197
  }
249
198
 
250
- .seconds-single {
251
- animation: count-10 10s steps(10, end) infinite;
199
+ .cX-code-boolean {
200
+ color: var(--cx-code-boolean);
252
201
  }
253
202
 
254
- .timer-val {
255
- width: 25px;
256
- height: 25px;
257
- text-align: center;
258
- line-height: 25px;
259
- text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
203
+ .cX-code-null {
204
+ color: var(--cx-code-null);
260
205
  }
261
206
 
262
- @keyframes count-10 {
263
- to {
264
- transform: translateY(-250px);
265
- }
207
+ .cX-code-comment {
208
+ color: var(--cx-code-comment);
266
209
  }
267
210
 
268
- @-webkit-keyframes count-10 {
269
- to {
270
- transform: translateY(-250px);
271
- }
272
- }
273
- */
274
-
275
- *,
276
- :after,
277
- :before {
211
+ div.cX-code,
212
+ div.cX-code-container,
213
+ div.cX-code-content,
214
+ div.cX-code-error {
278
215
  box-sizing: border-box;
279
216
  }
280
217
 
281
- table.shorts {
282
- margin: 2px 3px;
283
- padding: 2px 3px;
284
- border: 1px solid rgb(250, 250, 250);
285
- border-collapse: collapse;
286
- font-size: x-small
287
- }
288
-
289
- td.k {
290
- text-align: center;
291
- padding: 2px 5px;
292
- margin: 2px 5px;
293
- border: 1px solid rgb(204, 204, 204);
294
- }
295
-
296
- td.d {
297
- padding: 2px 5px;
298
- margin: 2px 5px;
299
- border: 1px solid rgb(204, 204, 204);
300
- }
301
-
302
- th.d {
303
- padding: 2px 5px;
304
- margin: 2px 5px;
305
- border: 1px solid rgb(204, 204, 204);
306
- }
307
-
308
- th.cxx,
309
- th.cxz,
310
- th.cxb,
311
- th.cxs,
312
- th.cxv,
313
- td.cxx,
314
- td.cxz,
315
- td.cxb,
316
- td.cxs,
317
- td.cxv {
318
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAAFklEQVR42mP88OHDf0aSiGfPntGaAAAL8XAJa+SuYgAAAABJRU5ErkJggg==);
319
- background-repeat: repeat-x;
320
- border: 1px solid rgb(204, 204, 204);
321
- vertical-align: middle;
322
- }
323
-
324
- td.cxx,
325
- td.cxz,
326
- td.cxb,
327
- td.cxs,
328
- td.cxv {
329
- font: normal 12px arial, tahoma, sans-serif;
330
- line-height: 24px;
331
- background: rgb(254, 254, 254);
332
- padding: 1px;
333
- color: rgb(34, 34, 34);
334
- }
335
-
336
- td.cxy {
337
- font: normal 12px arial, tahoma, sans-serif;
338
- line-height: 24px;
339
- border: 1px solid rgb(204, 204, 204);
340
- vertical-align: middle;
341
- text-align: right;
342
- background: rgb(254, 254, 254);
343
- padding: 1px;
344
- color: rgb(34, 34, 34);
345
- }
346
-
347
- input[type="color"] {
348
- -webkit-appearance: none;
349
- border: none;
350
- width: 100%;
351
- height: 100%;
352
- }
353
-
354
- input[type="color"]::-webkit-color-swatch-wrapper {
355
- padding: 0;
356
- }
357
-
358
- input[type="color"]::-webkit-color-swatch {
359
- border: none;
360
- }
361
-
362
- .unselectable {
363
- -webkit-touch-callout: none;
364
- -webkit-user-select: none;
365
- -khtml-user-select: none;
366
- -moz-user-select: none;
367
- -ms-user-select: none;
368
- user-select: none;
369
- }
370
-
371
- div.cxc {
372
- left: 0px;
373
- top: 0px;
374
- margin-left: 5px;
375
- margin-top: 2px;
376
- white-space: nowrap;
377
- overflow: hidden;
378
- }
379
-
380
- .json-key {
381
- color: rgb(215, 48, 39);
382
- font-weight: bold;
383
- }
384
-
385
- .json-value {
386
- color: rgb(69, 117, 180);
387
- }
388
-
389
- .json-string {
390
- color: rgb(168, 82, 2);
391
- }
392
-
393
- .json-number {
394
- color: rgb(69, 117, 180);
395
- }
396
-
397
- .json-boolean {
398
- color: rgb(102, 102, 0);
399
- }
400
-
401
- .json-null {
402
- color: rgb(69, 117, 180);
403
- }
404
-
405
- .json-comment {
406
- color: rgb(58, 115, 0)
407
- }
408
-
409
- div.CanvasXpressCode {
410
- border: 1px solid rgb(83, 105, 255);
218
+ div.cX-code {
219
+ border: var(--cx-border);
411
220
  border-radius: 5px;
412
- box-sizing: border-box;
413
- background-color: rgb(238, 238, 238);
221
+ background-color: var(--cx-color-extra-light-gray);
414
222
  cursor: move;
415
- color: rgb(34, 34, 34);
416
- font: normal 12px arial, tahoma, sans-serif;
223
+ color: var(--cx-font-color);
224
+ font: var(--cx-font);
417
225
  margin: 2px 3px;
418
226
  padding: 10px 20px 20px 10px;
419
227
  position: absolute;
420
228
  white-space: nowrap;
421
229
  }
422
230
 
423
- img.CanvasXpressCode,
424
- svg.CanvasXpressCode {
425
- background: rgba(0, 0, 0, 0) !important;
426
- border-radius: 5px;
427
- border: 1px solid rgb(83, 105, 255) !important;
428
- padding: 5px;
429
- box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
430
- cursor: default;
431
- float: right;
432
- margin: 5px 8px 0px 0px !important;
433
- -moz-user-select: none;
434
- -khtml-user-select: none;
435
- -webkit-user-select: none;
436
- -o-user-select: none;
437
- -ms-user-select: none;
438
- }
439
-
440
- pre.CanvasXpressCode {
441
- text-align: left;
442
- padding: inherit;
443
- margin: inherit;
444
- font-size: inherit;
445
- line-height: inherit;
446
- color: inherit;
447
- word-break: inherit;
448
- word-wrap: inherit;
449
- background-color: inherit;
450
- border: none;
451
- border-radius: inherit;
452
- counter-reset: line;
453
- }
454
-
455
- div.CanvasXpressCodeContainer {
456
- box-sizing: border-box;
231
+ div.cX-code-container {
457
232
  clear: both;
458
233
  width: 600px;
459
234
  overflow: auto;
460
235
  resize: horizontal;
461
- background-color: rgb(255, 255, 255);
236
+ background-color: var(--cx-color-white);
462
237
  position: relative;
463
238
  top: 10px;
464
239
  }
465
240
 
466
- div.CanvasXpressCodeContent {
467
- box-sizing: border-box;
241
+ div.cX-code-content {
468
242
  margin: 2px 3px;
469
243
  padding: 2px 3px;
470
244
  }
471
245
 
472
- div.CanvasXpressCodeError {
473
- box-sizing: border-box;
246
+ div.cX-code-error {
474
247
  height: 36px;
475
248
  width: 300px;
476
249
  float: left;
@@ -478,266 +251,149 @@ div.CanvasXpressCodeError {
478
251
  resize: none;
479
252
  top: 5px;
480
253
  left: 20px;
481
- background-color: rgb(238, 238, 238);
254
+ background-color: var(--cx-color-extra-light-gray);
482
255
  overflow: hidden;
483
256
  white-space: normal;
484
- color: rgb(255, 0, 0);
257
+ color: var(--cx-color-red);
485
258
  position: relative;
486
259
  cursor: pointer;
487
260
  }
488
261
 
489
- pre.CanvasXpressCodeContent {
490
- margin: 0 !important;
491
- padding: 0 !important;
492
- white-space: pre;
262
+ pre.cX-code,
263
+ pre.cX-code-content,
264
+ pre.cX-code-content code {
265
+ padding: 0;
266
+ margin: 0;
493
267
  font-size: inherit;
494
- line-height: 0 !important;
268
+ line-height: inherit;
495
269
  color: inherit;
496
- border: none !important;
497
- outline: none !important;
498
- cursor: text;
499
- }
500
-
501
- pre.CanvasXpressCodeContent:before {
502
- counter-reset: listing;
503
- }
504
-
505
- pre.CanvasXpressCodeContent code {
506
- counter-increment: listing;
507
- padding: 0 !important;
508
- white-space: inherit;
509
- line-height: 1.5;
510
- }
511
-
512
- pre.CanvasXpressCodeContent code::before {
513
- content: counter(listing) " ";
514
- display: inline-block;
515
- width: 3em;
516
- /* Fixed width */
517
- border-right: 1px solid rgb(221, 221, 221);
518
- padding-left: auto;
519
- margin-left: auto;
520
- text-align: right;
521
- /*color: rgb(136, 136, 136);*/
522
- background-color: rgb(239, 239, 239);
523
- -webkit-user-select: none;
524
- }
525
-
526
- /*
527
- * Carousel
528
- */
529
-
530
- div.CanvasXpressCarouselScene {
531
- position: relative;
532
- margin: 0;
533
- }
534
-
535
- div.CanvasXpressCarousel {
536
- width: 100%;
537
- height: 100%;
538
- position: absolute;
539
- transform: translateZ(-288px);
540
- transform-style: preserve-3d;
541
- transition: transform 1s;
542
- }
543
-
544
- span.CanvasXpressCarousel {
545
- padding: 1px;
546
- position: absolute;
547
- border: 1px solid rgb(83, 105, 255);
548
- border-radius: 2px;
549
- line-height: 10px;
550
- cursor: pointer;
551
- }
552
-
553
- div.CanvasXpressCarouselCell {
554
- position: absolute;
555
- transition: transform 1s, opacity 1s;
556
- background-color: rgba(255, 255, 255, 0.95);
557
- border: 1px solid rgb(83, 105, 255);
558
- border-radius: 5px;
559
- backface-visibility: hidden;
560
- }
561
-
562
- div.CanvasXpressCarouselCell:nth-child(1) {
563
- transform: rotateY(0deg) translateZ(288px);
564
- }
565
-
566
- div.CanvasXpressCarouselCell:nth-child(2) {
567
- transform: rotateY(40deg) translateZ(288px);
568
- }
569
-
570
- div.CanvasXpressCarouselCell:nth-child(3) {
571
- transform: rotateY(80deg) translateZ(288px);
572
- }
573
-
574
- div.CanvasXpressCarouselCell:nth-child(4) {
575
- transform: rotateY(120deg) translateZ(288px);
576
- }
577
-
578
- div.CanvasXpressCarouselCell:nth-child(5) {
579
- transform: rotateY(160deg) translateZ(288px);
580
- }
581
-
582
- div.CanvasXpressCarouselCell:nth-child(6) {
583
- transform: rotateY(200deg) translateZ(288px);
584
- }
585
-
586
- div.CanvasXpressCarouselCell:nth-child(7) {
587
- transform: rotateY(240deg) translateZ(288px);
270
+ border: none;
588
271
  }
589
272
 
590
- div.CanvasXpressCarouselCell:nth-child(8) {
591
- transform: rotateY(280deg) translateZ(288px);
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;
592
280
  }
593
281
 
594
- div.CanvasXpressCarouselCell:nth-child(9) {
595
- transform: rotateY(320deg) translateZ(288px);
282
+ pre.cX-code-content {
283
+ white-space: pre;
284
+ outline: none;
285
+ cursor: text;
596
286
  }
597
-
598
- img.CanvasXpressCarousel:hover,
599
- svg.CanvasXpressCarousel:hover {
600
- -webkit-transform: scale(1.8, 1.8);
601
- -ms-transform: scale(1.8, 1.8);
602
- transform: scale(1.8, 1.8);
603
- transition-duration: 0.3s;
604
- -webkit-transition-duration: 0.3s;
605
- /* Safari */
606
- box-shadow: 10px 10px 5px rgb(136, 136, 136);
607
- z-index: 2;
608
- position: relative;
609
- cursor: pointer;
610
- background: rgba(0, 0, 0, 0) !important;
611
- border: 0px none !important;
612
- box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
613
- margin: 0px !important;
287
+
288
+ pre.cX-code-content:before {
289
+ counter-reset: listing;
614
290
  }
615
291
 
292
+ pre.cX-code-content code {
293
+ counter-increment: listing;
294
+ line-height: 1.5;
295
+ }
616
296
 
617
- /*
618
- * CanvasXpressBin
619
- */
297
+ pre.cX-code-content code::before {
298
+ content: counter(listing) " ";
299
+ display: inline-block;
300
+ width: 3em;
301
+ border-right: 1px solid rgb(221, 221, 221);
302
+ text-align: right;
303
+ background-color: var(--cx-color-extra-light-gray);
304
+ }
620
305
 
621
- div.CanvasXpressBin {
622
- border: 1px solid rgb(83, 105, 255);
306
+ /***************
307
+ * Bin Data *
308
+ ***************/
309
+
310
+ div.cX-bin,
311
+ div.cX-bin-name-container {
312
+ border: var(--cx-border);
623
313
  border-radius: 5px;
624
- background-color: rgba(255, 255, 255, 0.95);
314
+ background-color: var(--cx-background-ui-color);
625
315
  box-sizing: border-box;
316
+ }
317
+
318
+ div.cX-bin {
626
319
  cursor: move;
627
- color: rgb(34, 34, 34);
628
- font: normal 12px arial, tahoma, sans-serif;
320
+ color: var(--cx-font-color);
321
+ font: var(--cx-font);
629
322
  margin: 2px 3px;
630
323
  padding: 2px 3px 5px 3px;
631
324
  position: absolute;
632
325
  white-space: nowrap;
633
- -moz-user-select: none;
634
- -khtml-user-select: none;
635
- -webkit-user-select: none;
636
- -o-user-select: none;
637
- }
638
-
639
- img.CanvasXpressBin,
640
- svg.CanvasXpressBin {
641
- background: rgba(0, 0, 0, 0) !important;
642
- border: 0px none !important;
643
- box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
644
- cursor: default;
645
- float: right;
646
- margin: 5px 5px 0px 0px !important;
647
- -moz-user-select: none;
648
- -khtml-user-select: none;
649
- -webkit-user-select: none;
650
- -o-user-select: none;
651
- -ms-user-select: none;
652
326
  }
653
327
 
654
- div.CanvasXpressBinContainer {
655
- background-color: rgba(255, 255, 255, 0.95);
328
+ div.cX-bin-container {
329
+ background-color: var(--cx-background-ui-color);
656
330
  box-sizing: border-box;
657
331
  clear: both;
658
332
  text-align: left;
659
- -moz-user-select: none;
660
- -khtml-user-select: none;
661
- -webkit-user-select: none;
662
- -o-user-select: none;
663
- }
664
-
665
- div.CanvasXpressBinContainerTab {
666
- background-color: rgba(255, 255, 255, 0.95);
667
- border-width: 1px 1px 1px 1px;
668
- border-style: solid;
669
- border-color: rgb(83, 105, 255);
670
- border-radius: 5px;
671
- box-sizing: border-box;
672
- clear: none;
673
- height: 16px;
674
- margin: 3px;
675
- overflow-y: auto;
676
- padding: 5px;
677
- -moz-user-select: none;
678
- -khtml-user-select: none;
679
- -webkit-user-select: none;
680
- -o-user-select: none;
681
333
  }
682
334
 
683
- div.CanvasXpressBinNameContainer {
684
- background-color: rgba(255, 255, 255, 0.95);
685
- border: 1px solid rgb(83, 105, 255);
686
- border-radius: 5px;
335
+ div.cX-bin-name-container {
687
336
  box-sizing: border-box;
688
- clear: both;
337
+ border: none;
689
338
  max-height: 400px;
690
339
  margin: 8px;
691
340
  overflow-y: auto;
692
341
  padding: 5px;
693
- -moz-user-select: none;
694
- -khtml-user-select: none;
695
- -webkit-user-select: none;
696
- -o-user-select: none;
697
342
  }
698
343
 
699
- input.CanvasXpressBin {
700
- background-color: rgba(255, 255, 255, 0.95);
701
- border: 1px solid rgb(83, 105, 255);
702
- 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);
703
348
  cursor: default;
704
- font: normal 12px arial, tahoma, sans-serif;
349
+ font: var(--cx-font);
705
350
  line-height: 24px;
706
351
  padding-left: 3px;
707
352
  border-radius: 5px;
708
353
  margin: 3px;
709
354
  }
710
355
 
711
- table.CanvasXpressBinTable {
712
- border: collapse;
713
- line-height: 20px;
714
- 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);
715
372
  cursor: default;
716
- font: normal 12px arial, tahoma, sans-serif;
373
+ font: var(--cx-font);
717
374
  line-height: 24px;
718
- padding-left: 3px;
719
- -moz-user-select: none;
720
- -khtml-user-select: none;
721
- -webkit-user-select: none;
722
- -o-user-select: none;
723
375
  }
724
376
 
725
- span.CanvasXpressBin {
726
- font: bold 12px arial, tahoma, sans-serif;
727
- 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);
728
389
  margin-left: 5px;
729
- -moz-user-select: none;
730
- -khtml-user-select: none;
731
- -webkit-user-select: none;
732
- -o-user-select: none;
733
390
  }
734
391
 
735
- img.CanvasXpressBin::selection,
736
- svg.CanvasXpressBin::selection,
737
- span.CanvasXpressBin::selection {
738
- background: rgba(0, 0, 0, 0) !important;
392
+ svg.cX-bin::selection,
393
+ span.cX-bin::selection {
394
+ background: var(--cx-color-transparent) !important;
739
395
  border: 0px none !important;
740
- box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
396
+ box-shadow: 0 0 0px var(--cx-color-transparent) !important;
741
397
  color: rgb(0, 0, 0);
742
398
  margin: 0px !important;
743
399
  }
@@ -749,21 +405,6 @@ span.CanvasXpressBin::selection {
749
405
  * CanvasXpress Customizer
750
406
  */
751
407
 
752
- svg {
753
- -webkit-touch-callout: none;
754
- /* iOS Safari */
755
- -webkit-user-select: none;
756
- /* Safari */
757
- -khtml-user-select: none;
758
- /* Konqueror HTML */
759
- -moz-user-select: none;
760
- /* Old versions of Firefox */
761
- -ms-user-select: none;
762
- /* Internet Explorer/Edge */
763
- user-select: none;
764
- /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
765
- }
766
-
767
408
  .customizerPanelLeft {
768
409
  display: grid;
769
410
  grid-template-columns: 1fr;
@@ -778,37 +419,50 @@ svg {
778
419
  font-weight: normal;
779
420
  }
780
421
 
781
- .customizerLeftPanelTop {
782
- grid-area: 1 / 1 / 2 / 2;
422
+ .customizerLeftPanelTop,
423
+ .customizerLeftPanelBottom {
783
424
  background: rgb(83, 105, 255);
784
425
  border: 1px solid rgb(83, 105, 255) !important;
785
- border-top-left-radius: 10px;
786
426
  }
787
427
 
788
- .customizerLeftPanelMiddle {
789
- grid-area: 2 / 1 / 3 / 2;
790
- background: rgba(0, 0, 0, 0);
428
+ .customizerLeftPanelTopS,
429
+ .customizerLeftPanelBottomS {
430
+ background: rgb(180, 180, 180);
431
+ border: 1px solid rgb(180, 180, 180) !important;
432
+ }
433
+
434
+ .customizerLeftPanelTopS,
435
+ .customizerLeftPanelTop {
436
+ grid-area: 1 / 1 / 2 / 2;
437
+ border-top-left-radius: 10px;
791
438
  }
792
439
 
440
+ .customizerLeftPanelBottomS,
793
441
  .customizerLeftPanelBottom {
794
442
  grid-area: 3 / 1 / 4 / 2;
795
- background: rgb(83, 105, 255);
796
- border: 1px solid rgb(83, 105, 255) !important;
797
443
  border-bottom-left-radius: 10px;
798
444
  }
799
445
 
446
+ .customizerLeftPanelMiddle {
447
+ grid-area: 2 / 1 / 3 / 2;
448
+ background: rgba(0, 0, 0, 0);
449
+ }
450
+
800
451
  .customizerLeftPanelTop .customizerLeftItem:hover svg,
801
452
  .customizerLeftPanelTop .customizerLeftItemActive svg,
453
+ .customizerLeftPanelTopS .customizerLeftItemS:hover svg,
454
+ .customizerLeftPanelTopS .customizerLeftItemSActive svg,
802
455
  .customizerLeftPanelBottom .customizerLeftItem:hover svg,
803
- .customizerLeftPanelBottom .customizerLeftItemActive svg {
456
+ .customizerLeftPanelBottom .customizerLeftItemActive svg,
457
+ .customizerLeftPanelBottomS .customizerLeftItemS:hover svg,
458
+ .customizerLeftPanelBottomS .customizerLeftItemSActive svg {
804
459
  border: 1px solid rgb(255, 255, 255) !important;
805
460
  background: rgba(0, 0, 0, 0);
806
461
  }
807
462
 
808
- .customizerRightPanel {
463
+ .customizerRightPanel,
464
+ .customizerRightPanelS {
809
465
  background: rgba(0, 0, 0, 0);
810
- border-left: 1px solid rgb(83, 105, 255) !important;
811
- border-right: 1px solid rgb(83, 105, 255) !important;
812
466
  position: absolute;
813
467
  z-index: 10000;
814
468
  top: 0px;
@@ -816,30 +470,59 @@ svg {
816
470
  font-weight: normal;
817
471
  }
818
472
 
473
+ .customizerRightPanel {
474
+ border-left: 1px solid rgb(83, 105, 255) !important;
475
+ border-right: 1px solid rgb(83, 105, 255) !important;
476
+ }
477
+
478
+ .customizerRightPanelS {
479
+ border-left: 1px solid rgb(180, 180, 180) !important;
480
+ border-right: 1px solid rgb(180, 180, 180) !important;
481
+ }
482
+
819
483
  /*
820
484
  * CanvasXpress Customizer Left Items
821
485
  */
822
486
 
823
487
  .customizerLeftItem,
824
- .customizerLeftItemActive {
488
+ .customizerLeftItemActive,
489
+ .customizerLeftItemS,
490
+ .customizerLeftItemSActive {
825
491
  display: grid;
826
492
  grid-template-columns: 1fr;
827
493
  grid-template-rows: 1fr 4fr;
828
494
  grid-column-gap: 0px;
829
495
  grid-row-gap: 0px;
830
496
  margin: 5px;
831
- border: 1px solid rgb(83, 105, 255) !important;
832
497
  border-radius: 5px;
833
498
  align-items: center;
834
499
  }
835
500
 
501
+ .customizerLeftItem,
502
+ .customizerLeftItemActive {
503
+ border: 1px solid rgb(83, 105, 255) !important;
504
+ }
505
+
506
+ .customizerLeftItemS,
507
+ .customizerLeftItemSActive {
508
+ border: 1px solid rgb(180, 180, 180) !important;
509
+ }
510
+
511
+
836
512
  .customizerLeftItem:hover,
837
513
  .customizerLeftItemActive {
838
514
  background: rgba(83, 105, 255, 0.1);
839
515
  }
840
516
 
517
+ .customizerLeftItemS:hover,
518
+ .customizerLeftItemSActive {
519
+ background:rgba(180, 180, 180, 0.5);
520
+ }
521
+
841
522
  .customizerLeftItem:hover svg,
842
- .customizerLeftItemActive svg {
523
+ .customizerLeftItemS:hover svg,
524
+ .customizerLeftItemActive svg,
525
+ .customizerLeftItemSActive svg {
843
526
  background: rgb(255, 255, 255);
844
527
  }
845
528
 
@@ -860,21 +543,35 @@ svg {
860
543
  border-radius: 5px;
861
544
  }
862
545
 
546
+ .customizerLeftIconS {
547
+ padding: 5px;
548
+ border: 1px solid rgb(180, 180, 180) !important;
549
+ border-radius: 5px;
550
+ }
551
+
863
552
  /*
864
553
  * CanvasXpress Customizer Right Items
865
554
  */
866
555
 
556
+ .customizerRightItemS,
867
557
  .customizerRightItem {
868
558
  display: grid;
869
559
  grid-template-columns: 1fr;
870
560
  grid-template-rows: 3fr 2fr;
871
561
  grid-column-gap: 0px;
872
562
  grid-row-gap: 0px;
873
- border: 1px solid rgb(83, 105, 255) !important;
874
563
  border-radius: 5px;
875
564
  width: 95%;
876
565
  }
877
566
 
567
+ .customizerRightItem {
568
+ border: 1px solid rgb(83, 105, 255) !important;
569
+ }
570
+
571
+ .customizerRightItemS {
572
+ border: 1px solid rgb(180, 180, 180) !important;
573
+ }
574
+
878
575
  .customizerRightItemTop {
879
576
  grid-area: 1 / 1 / 2 / 2;
880
577
  padding-top: 5px;
@@ -891,15 +588,23 @@ svg {
891
588
  * CanvasXpress Customizer Right Items Comb
892
589
  */
893
590
 
591
+ .customizerRightItemComboS,
894
592
  .customizerRightItemCombo {
895
593
  display: grid;
896
594
  grid-template-columns: 1fr 5fr;
897
595
  grid-template-rows: 2fr 1fr;
898
596
  grid-column-gap: 0px;
899
597
  grid-row-gap: 0px;
598
+ }
599
+
600
+ .customizerRightItemCombo {
900
601
  border-top: 1px solid rgb(83, 105, 255);
901
602
  }
902
603
 
604
+ .customizerRightItemComboS {
605
+ border-top: 1px solid rgb(180, 180, 180);
606
+ }
607
+
903
608
  .customizerRightItemComboNB {
904
609
  display: grid;
905
610
  grid-template-columns: 1fr 5fr;
@@ -935,28 +640,40 @@ svg {
935
640
  * CanvasXpress Customizer Right Item Header
936
641
  */
937
642
 
938
- .customizerRightItemHeader {
643
+ .customizerRightItemHeader,
644
+ .customizerRightItemHeaderS,
645
+ .customizerRightItemHeaderNB,
646
+ .customizerRightItemHeaderNBS {
939
647
  display: grid;
940
648
  grid-template-columns: 1fr;
941
649
  grid-template-rows: 2fr 1fr;
942
650
  grid-column-gap: 0px;
943
651
  grid-row-gap: 0px;
944
- background: rgba(83, 105, 255, 0.1);
945
- color: rgb(34, 34, 34);
946
- border-bottom: 1px solid rgb(83, 105, 255) !important;
652
+ color: var(--cx-font-color);
947
653
  padding-left: 5px;
948
654
  }
949
655
 
656
+ .customizerRightItemHeader,
950
657
  .customizerRightItemHeaderNB {
951
- display: grid;
952
- grid-template-columns: 1fr;
953
- grid-template-rows: 2fr 1fr;
954
- grid-column-gap: 0px;
955
- grid-row-gap: 0px;
956
658
  background: rgba(83, 105, 255, 0.1);
957
- color: rgb(34, 34, 34);
659
+ }
660
+
661
+ .customizerRightItemHeaderS,
662
+ .customizerRightItemHeaderNBS {
663
+ background: rgba(180, 180, 180, 0.1);
664
+ }
665
+
666
+ .customizerRightItemHeader {
667
+ border-bottom: 1px solid rgb(83, 105, 255) !important;
668
+ }
669
+
670
+ .customizerRightItemHeaderS {
671
+ border-bottom: 1px solid rgb(180, 180, 180) !important;
672
+ }
673
+
674
+ .customizerRightItemHeaderNB,
675
+ .customizerRightItemHeaderNBS {
958
676
  border-bottom: none !important;
959
- padding-left: 5px;
960
677
  }
961
678
 
962
679
  .customizerRightItemHeaderTop {
@@ -983,42 +700,68 @@ svg {
983
700
  * CanvasXpress Customizer Right Item Sub Header
984
701
  */
985
702
 
703
+ .customizerRightItemSubHeaderS,
986
704
  .customizerRightItemSubHeader {
987
705
  display: grid;
988
706
  grid-template-columns: 1fr;
989
707
  grid-template-rows: 1fr;
990
708
  grid-column-gap: 0px;
991
709
  grid-row-gap: 0px;
710
+ }
711
+
712
+ .customizerRightItemSubHeader {
992
713
  background: rgba(83, 105, 255, 0.1);
993
714
  }
994
715
 
716
+ .customizerRightItemSubHeaderS {
717
+ background: rgba(180, 180, 180, 0.1);
718
+ }
719
+
995
720
  .customizerRightItemSubHeaderRow {
996
721
  grid-area: 1 / 1 / 2 / 2;
997
722
  display: flex;
998
723
  align-items: center;
999
724
  }
1000
725
 
726
+ .customizerRightItemSubHeaderRawS,
1001
727
  .customizerRightItemSubHeaderRaw {
1002
728
  display: flex;
1003
729
  align-items: center;
1004
- border: 1px solid rgb(83, 105, 255) !important;
1005
730
  border-radius: 5px;
731
+ }
732
+
733
+ .customizerRightItemSubHeaderRaw {
734
+ border: 1px solid rgb(83, 105, 255) !important;
1006
735
  background-color: rgba(83, 105, 255, 0.1);
1007
736
  }
1008
737
 
738
+ .customizerRightItemSubHeaderRawS {
739
+ border: 1px solid rgb(180, 180, 180) !important;
740
+ background-color: rgba(180, 180, 180, 0.1);
741
+ }
742
+
1009
743
  /*
1010
744
  * CanvasXpress Customizer Right Item Launcher
1011
745
  */
1012
746
 
747
+ .customizerRightItemLauncherS,
1013
748
  .customizerRightItemLauncher {
1014
749
  display: grid;
1015
750
  grid-template-columns: 1fr 6fr;
1016
751
  grid-template-rows: 1fr;
1017
752
  grid-column-gap: 0px;
1018
753
  grid-row-gap: 0px;
754
+ }
755
+
756
+ .customizerRightItemLauncher {
1019
757
  border-top: 1px solid rgb(83, 105, 255) !important;
1020
758
  }
1021
759
 
760
+ .customizerRightItemLauncherS {
761
+ border-top: 1px solid rgb(180, 180, 180) !important;
762
+ }
763
+
764
+ .customizerRightItemLauncherNBS,
1022
765
  .customizerRightItemLauncherNB {
1023
766
  display: grid;
1024
767
  grid-template-columns: 1fr 6fr;
@@ -1033,14 +776,28 @@ svg {
1033
776
  background-color: rgba(83, 105, 255, 0.1);
1034
777
  }
1035
778
 
779
+ .customizerRightItemLauncherS:hover,
780
+ .customizerRightItemLauncherNBS:hover {
781
+ background-color: rgba(180, 180, 180, 0.1);
782
+ }
783
+
784
+ .customizerRightItemLauncherLeftS,
1036
785
  .customizerRightItemLauncherLeft {
1037
786
  grid-area: 1 / 1 / 2 / 2;
1038
787
  display: flex;
1039
788
  align-items: center;
1040
789
  justify-content: center;
790
+ }
791
+
792
+ .customizerRightItemLauncherLeft {
1041
793
  background-color: rgba(83, 105, 255, 0.1);
1042
794
  }
1043
795
 
796
+ .customizerRightItemLauncherLeftS {
797
+ background-color: rgba(180, 180, 180, 0.1);
798
+ }
799
+
800
+ .customizerRightItemLauncherRightS,
1044
801
  .customizerRightItemLauncherRight {
1045
802
  grid-area: 1 / 2 / 2 / 3;
1046
803
  display: flex;
@@ -1184,15 +941,23 @@ svg {
1184
941
  justify-content: center;
1185
942
  }
1186
943
 
944
+ .customizerRightItemColMidS,
1187
945
  .customizerRightItemColMid {
1188
946
  grid-area: 1 / 3 / 2 / 5;
1189
947
  display: flex;
1190
948
  align-items: center;
1191
949
  justify-content: center;
1192
- border: 1px solid rgb(83, 105, 255) !important;
1193
950
  border-radius: 5px;
1194
951
  }
1195
952
 
953
+ .customizerRightItemColMid {
954
+ border: 1px solid rgb(83, 105, 255) !important;
955
+ }
956
+
957
+ .customizerRightItemColMidS {
958
+ border: 1px solid rgb(180, 180, 180) !important;
959
+ }
960
+
1196
961
  .customizerRightItemSelect>select:hover,
1197
962
  .customizerRightItemTextArea>svg:hover,
1198
963
  .customizerRightItemTextArea>textarea:hover,
@@ -1211,35 +976,52 @@ svg {
1211
976
  * Other Customizer classes
1212
977
  */
1213
978
 
979
+ .customizerContainerS,
1214
980
  .customizerContainer {
1215
981
  height: fit-content;
1216
- border: 1px solid rgb(83, 105, 255) !important;
1217
982
  border-radius: 5px;
1218
983
  margin: 10px;
1219
984
  float: left;
1220
985
  }
1221
986
 
1222
- .customizerContainerRaw {
1223
- border: none !important;
1224
- float: left;
1225
- display: flex;
1226
- align-items: center;
1227
- justify-content: center;
1228
- }
1229
-
987
+ .customizerWranglingS,
1230
988
  .customizerWrangling {
1231
989
  height: 102px;
1232
990
  margin: 0px 0px 10px 10px;
1233
- border: 1px solid rgb(83, 105, 255) !important;
1234
991
  border-radius: 5px;
1235
992
  overflow-y: auto;
1236
993
  overflow-x: hidden;
1237
994
  }
1238
995
 
996
+ .customizerNumeric,
997
+ .customizerString,
998
+ .customizerUnique,
999
+ .customizerWrangling,
1000
+ .customizerContainer {
1001
+ border: 1px solid rgb(83, 105, 255) !important;
1002
+ }
1003
+
1004
+ .customizerNumericS,
1005
+ .customizerStringS,
1006
+ .customizerUniqueS,
1007
+ .customizerWranglingS,
1008
+ .customizerContainerS {
1009
+ border: 1px solid rgb(180, 180, 180) !important;
1010
+ }
1011
+
1239
1012
  .customizerWrangling:hover {
1240
1013
  border: 1px dashed rgb(255, 0, 0) !important;
1241
1014
  }
1242
1015
 
1016
+ .customizerContainerRaw {
1017
+ border: none !important;
1018
+ float: left;
1019
+ display: flex;
1020
+ align-items: center;
1021
+ justify-content: center;
1022
+ }
1023
+
1024
+ .customizerMaskS,
1243
1025
  .customizerMask {
1244
1026
  background: rgba(0, 0, 0, 0) !important;
1245
1027
  border: 0px none !important;
@@ -1252,10 +1034,12 @@ svg {
1252
1034
  height: 20px;
1253
1035
  }
1254
1036
 
1037
+ .customizerNumericS,
1038
+ .customizerStringS,
1039
+ .customizerUniqueS,
1255
1040
  .customizerNumeric,
1256
1041
  .customizerString,
1257
1042
  .customizerUnique {
1258
- border: 1px solid rgb(83, 105, 255);
1259
1043
  border-radius: 5px;
1260
1044
  cursor: move;
1261
1045
  margin: 3px;
@@ -1268,27 +1052,32 @@ svg {
1268
1052
  position: relative;
1269
1053
  }
1270
1054
 
1055
+ .customizerNumericS,
1271
1056
  .customizerNumeric {
1272
- color: rgb(34, 34, 34);
1057
+ color: var(--cx-font-color);
1273
1058
  background-color: rgba(0, 0, 0, 0);
1274
1059
  }
1275
1060
 
1061
+ .customizerStringS,
1276
1062
  .customizerString {
1277
1063
  color: rgb(0, 255, 0);
1278
1064
  background-color: rgba(0, 0, 0, 0);
1279
1065
  }
1280
1066
 
1067
+ .customizerUniqueS,
1281
1068
  .customizerUnique {
1282
1069
  color: rgb(0, 0, 255);
1283
1070
  background-color: rgba(0, 0, 0, 0);
1284
1071
  }
1285
-
1072
+ .customizerListNumericS,
1073
+ .customizerListStringS,
1074
+ .customizerListUniqueS,
1286
1075
  .customizerListNumeric,
1287
1076
  .customizerListString,
1288
1077
  .customizerListUnique {
1289
1078
  border: none;
1290
1079
  cursor: move;
1291
- color: rgb(34, 34, 34);
1080
+ color: var(--cx-font-color);
1292
1081
  margin: 0;
1293
1082
  padding: 0 0 0 3px;
1294
1083
  width: 350px;
@@ -1299,18 +1088,24 @@ svg {
1299
1088
  position: relative;
1300
1089
  }
1301
1090
 
1091
+ .customizerListNumericS,
1302
1092
  .customizerListNumeric {
1303
- color: rgb(34, 34, 34);
1093
+ color: var(--cx-font-color);
1304
1094
  }
1305
1095
 
1096
+ .customizerListStringS,
1306
1097
  .customizerListString {
1307
1098
  color: rgb(0, 255, 0);
1308
1099
  }
1309
1100
 
1101
+ .customizerListUniqueS,
1310
1102
  .customizerListUnique {
1311
1103
  color: rgb(0, 0, 255);
1312
1104
  }
1313
1105
 
1106
+ .customizerListNumericS,
1107
+ .customizerListStringS,
1108
+ .customizerListUniqueS,
1314
1109
  .customizerListNumeric,
1315
1110
  .customizerListString,
1316
1111
  .customizerListUnique {
@@ -1323,24 +1118,55 @@ svg {
1323
1118
  background: rgba(83, 105, 255, 0.1);
1324
1119
  }
1325
1120
 
1326
- .customizerListNumeric:before {
1121
+ .customizerListNumericS:hover,
1122
+ .customizerListStringS:hover,
1123
+ .customizerListUniqueS:hover {
1124
+ background: rgba(180, 180, 180, 0.1);
1125
+ }
1126
+
1127
+ .customizerListNumeric:before,
1128
+ .customizerListString:before,
1129
+ .customizerListUnique:before,
1130
+ .customizerListNumericS:before,
1131
+ .customizerListStringS:before,
1132
+ .customizerListUniqueS:before {
1327
1133
  font: normal 10px courier;
1134
+ }
1135
+
1136
+ .customizerListNumeric:before,
1137
+ .customizerListString:before,
1138
+ .customizerListUnique:before {
1328
1139
  color: rgb(83, 105, 255);
1140
+ }
1141
+
1142
+ .customizerListNumericS:before,
1143
+ .customizerListStringS:before,
1144
+ .customizerListUniqueS:before {
1145
+ color: rgb(180, 180, 180);
1146
+ }
1147
+
1148
+ .customizerListNumeric:before,
1149
+ .customizerListNumericS:before {
1329
1150
  content: "\00a0#\00a0\00a0";
1330
1151
  }
1331
1152
 
1332
- .customizerListString:before {
1333
- font: normal 10px courier;
1334
- color: rgb(83, 105, 255);
1153
+ .customizerListString:before,
1154
+ .customizerListStringS:before {
1335
1155
  content: "Abc\00a0";
1336
1156
  }
1337
1157
 
1338
- .customizerListUnique:before {
1339
- font: normal 10px courier;
1340
- color: rgb(83, 105, 255);
1158
+ .customizerListUnique:before,
1159
+ .customizerListUniqueS:before {
1341
1160
  content: "Unq\00a0";
1342
1161
  }
1343
1162
 
1163
+ .customizerMaskS::selection,
1164
+ .customizerNumericS::selection,
1165
+ .customizerStringS::selection,
1166
+ .customizerUniqueS::selection,
1167
+ .customizerListNumericS::selection,
1168
+ .customizerListStringS::selection,
1169
+ .customizerListUniqueS::selection,
1344
1170
  .customizerMask::selection,
1345
1171
  .customizerNumeric::selection,
1346
1172
  .customizerString::selection,
@@ -1357,11 +1183,11 @@ svg {
1357
1183
  * Search Customizer
1358
1184
  */
1359
1185
 
1186
+ input.customizerSearchS,
1360
1187
  input.customizerSearch {
1361
1188
  margin: 9px;
1362
1189
  background-color: rgba(255, 255, 255, 0.95);
1363
- border: 1px solid rgb(83, 105, 255);
1364
- color: rgb(34, 34, 34);
1190
+ color: var(--cx-font-color);
1365
1191
  cursor: default;
1366
1192
  font: inherit;
1367
1193
  height: 40px;
@@ -1370,20 +1196,32 @@ input.customizerSearch {
1370
1196
  clear: left;
1371
1197
  }
1372
1198
 
1199
+ select.customizerSearch,
1200
+ input.customizerSearch {
1201
+ border: 1px solid rgb(83, 105, 255);
1202
+ }
1203
+
1204
+ select.customizerSearchS,
1205
+ input.customizerSearchS {
1206
+ border: 1px solid rgb(180, 180, 180);
1207
+ }
1208
+
1209
+ input.customizerSearchS[type="color"],
1373
1210
  input.customizerSearch[type="color"] {
1374
1211
  padding: 0;
1375
1212
  overflow: hidden;
1376
1213
  }
1377
1214
 
1215
+ input.customizerSearchS:not([type="color"]),
1378
1216
  input.customizerSearch:not([type="color"]) {
1379
1217
  padding: 5px;
1380
1218
  }
1381
1219
 
1220
+ select.customizerSearchS,
1382
1221
  select.customizerSearch {
1383
1222
  margin: 9px;
1384
1223
  background-color: rgba(255, 255, 255, 0.95);
1385
- border: 1px solid rgb(83, 105, 255);
1386
- color: rgb(34, 34, 34);
1224
+ color: var(--cx-font-color);
1387
1225
  cursor: default;
1388
1226
  font: inherit;
1389
1227
  padding-left: 3px;
@@ -1392,8 +1230,9 @@ select.customizerSearch {
1392
1230
  clear: left;
1393
1231
  }
1394
1232
 
1233
+ span.customizerSearchS,
1395
1234
  span.customizerSearch {
1396
- color: rgb(34, 34, 34);
1235
+ color: var(--cx-font-color);
1397
1236
  font: inherit;
1398
1237
  line-height: 20px;
1399
1238
  list-style: none;
@@ -1403,6 +1242,10 @@ span.customizerSearch {
1403
1242
  clear: left;
1404
1243
  }
1405
1244
 
1245
+ span.customizerSearchSelectS,
1246
+ span.customizerSearchDescriptionS,
1247
+ span.customizerSearchCategoryS,
1248
+ span.customizerSearchCurrentS,
1406
1249
  span.customizerSearchSelect,
1407
1250
  span.customizerSearchDescription,
1408
1251
  span.customizerSearchCategory,
@@ -1418,61 +1261,79 @@ span.customizerSearchCurrent {
1418
1261
  left: 15px;
1419
1262
  }
1420
1263
 
1264
+ span.customizerSearchSelectS,
1421
1265
  span.customizerSearchSelect {
1422
- color: rgb(34, 34, 34);
1266
+ color: var(--cx-font-color);
1423
1267
  }
1424
1268
 
1269
+ span.customizerSearchDescriptionS,
1270
+ span.customizerSearchCategoryS,
1425
1271
  span.customizerSearchDescription,
1426
1272
  span.customizerSearchCategory {
1427
- color: rgb(83, 105, 255);
1428
1273
  overflow: hidden;
1429
1274
  text-overflow: ellipsis;
1430
1275
  white-space: nowrap;
1431
1276
  }
1432
1277
 
1278
+ span.customizerSearchDescription,
1279
+ span.customizerSearchCategory,
1433
1280
  span.customizerSearchCurrent {
1434
1281
  color: rgb(83, 105, 255);
1435
1282
  }
1436
1283
 
1284
+ span.customizerSearchDescriptionS,
1285
+ span.customizerSearchCategoryS,
1286
+ span.customizerSearchCurrentS {
1287
+ color: rgb(180, 180, 180);
1288
+ }
1289
+
1290
+ span.customizerSearchSelectS:before,
1437
1291
  span.customizerSearchSelect:before {
1438
- color: rgb(34, 34, 34);
1292
+ color: var(--cx-font-color);
1439
1293
  font-weight: bold;
1440
1294
  content: "Select property (";
1441
1295
  }
1442
1296
 
1297
+ span.customizerSearchSelectS:after,
1443
1298
  span.customizerSearchSelect:after {
1444
- color: rgb(34, 34, 34);
1299
+ color: var(--cx-font-color);
1445
1300
  font-weight: bold;
1446
1301
  content: ")";
1447
1302
  }
1448
1303
 
1304
+ span.customizerSearchDescriptionS:before,
1449
1305
  span.customizerSearchDescription:before {
1450
- color: rgb(34, 34, 34);
1306
+ color: var(--cx-font-color);
1451
1307
  font-weight: bold;
1452
1308
  content: "Description [ ";
1453
1309
  }
1454
1310
 
1311
+ span.customizerSearchCategoryS:before,
1455
1312
  span.customizerSearchCategory:before {
1456
- color: rgb(34, 34, 34);
1313
+ color: var(--cx-font-color);
1457
1314
  font-weight: bold;
1458
1315
  content: "Category [ ";
1459
1316
  }
1460
1317
 
1318
+ span.customizerSearchDescriptionS:after,
1319
+ span.customizerSearchCategoryS:after,
1461
1320
  span.customizerSearchDescription:after,
1462
1321
  span.customizerSearchCategory:after {
1463
- color: rgb(34, 34, 34);
1322
+ color: var(--cx-font-color);
1464
1323
  font-weight: bold;
1465
1324
  content: " ]";
1466
1325
  }
1467
1326
 
1327
+ span.customizerSearchCurrentS:before,
1468
1328
  span.customizerSearchCurrent:before {
1469
- color: rgb(34, 34, 34);
1329
+ color: var(--cx-font-color);
1470
1330
  font-weight: bold;
1471
1331
  content: "Current Value [ ";
1472
1332
  }
1473
1333
 
1334
+ span.customizerSearchCurrentS:after,
1474
1335
  span.customizerSearchCurrent:after {
1475
- color: rgb(34, 34, 34);
1336
+ color: var(--cx-font-color);
1476
1337
  font-weight: bold;
1477
1338
  content: " ]";
1478
1339
  }
@@ -1482,12 +1343,11 @@ span.customizerSearchCurrent:after {
1482
1343
  */
1483
1344
 
1484
1345
  div.CanvasXpressPassword {
1485
- border: 1px solid rgb(83, 105, 255);
1486
1346
  border-radius: 5px;
1487
1347
  background-color: rgba(255, 255, 255, 0.95);
1488
1348
  box-sizing: border-box;
1489
1349
  cursor: move;
1490
- color: rgb(34, 34, 34);
1350
+ color: var(--cx-font-color);
1491
1351
  font: normal 16px arial, tahoma, sans-serif;
1492
1352
  margin: 2px 3px;
1493
1353
  overflow: hidden;
@@ -1519,7 +1379,7 @@ svg.CanvasXpressPassword {
1519
1379
  div.CanvasXpressPasswordContainer {
1520
1380
  box-sizing: border-box;
1521
1381
  border-radius: 0px 0px 5px 5px;
1522
- color: rgb(34, 34, 34);
1382
+ color: var(--cx-font-color);
1523
1383
  display: block;
1524
1384
  left: 0px;
1525
1385
  line-height: 100%;
@@ -1574,8 +1434,8 @@ div.CanvasXpressTooltip {
1574
1434
  background-color: rgba(255, 255, 255, 0.95);
1575
1435
  box-sizing: border-box;
1576
1436
  cursor: move;
1577
- color: rgb(34, 34, 34);
1578
- font: normal 12px arial, tahoma, sans-serif;
1437
+ color: var(--cx-font-color);
1438
+ font: var(--cx-font);
1579
1439
  margin: 2px 3px;
1580
1440
  overflow: hidden;
1581
1441
  padding: 5px 6px;
@@ -1673,8 +1533,8 @@ span.CanvasXpressTooltip {
1673
1533
  border-radius: 5px;
1674
1534
  background-color: rgba(255, 255, 255, 0.95);
1675
1535
  cursor: move;
1676
- color: rgb(34, 34, 34);
1677
- font: normal 12px arial, tahoma, sans-serif;
1536
+ color: var(--cx-font-color);
1537
+ font: var(--cx-font);
1678
1538
  margin: 2px 3px;
1679
1539
  max-height: 800px;
1680
1540
  overflow: hidden;
@@ -1690,8 +1550,8 @@ div.CanvasXpressMousePosition {
1690
1550
  border: 0px none !important;
1691
1551
  box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
1692
1552
  cursor: move;
1693
- color: rgb(34, 34, 34);
1694
- font: normal 12px arial, tahoma, sans-serif;
1553
+ color: var(--cx-font-color);
1554
+ font: var(--cx-font);
1695
1555
  position: absolute;
1696
1556
  white-space: nowrap;
1697
1557
  text-align: left;
@@ -1722,8 +1582,8 @@ span.CanvasXpressMousePosition {
1722
1582
  border: 0px none !important;
1723
1583
  box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
1724
1584
  cursor: move;
1725
- color: rgb(34, 34, 34);
1726
- font: normal 12px arial, tahoma, sans-serif;
1585
+ color: var(--cx-font-color);
1586
+ font: var(--cx-font);
1727
1587
  position: absolute;
1728
1588
  left: 4px;
1729
1589
  top: -20px;
@@ -1764,8 +1624,8 @@ div.CanvasXpressCanvasResizerloading2 {
1764
1624
  */
1765
1625
 
1766
1626
  div.CanvasXpressMotion {
1767
- color: rgb(34, 34, 34);
1768
- font: normal 12px arial, tahoma, sans-serif;
1627
+ color: var(--cx-font-color);
1628
+ font: var(--cx-font);
1769
1629
  }
1770
1630
 
1771
1631
  img.CanvasXpressMotion,
@@ -1815,9 +1675,9 @@ div.CanvasXpressMarker {
1815
1675
  border: 1px solid rgb(83, 105, 255);
1816
1676
  border-radius: 5px;
1817
1677
  background-color: rgba(255, 255, 255, 0.95);
1818
- color: rgb(34, 34, 34);
1678
+ color: var(--cx-font-color);
1819
1679
  cursor: move;
1820
- font: normal 12px arial, tahoma, sans-serif;
1680
+ font: var(--cx-font);
1821
1681
  height: 502px;
1822
1682
  width: 286px;
1823
1683
  left: 0px;
@@ -1922,150 +1782,158 @@ tr.CanvasXpressDataTableDOE {
1922
1782
  font-size: 12px !important;
1923
1783
  }
1924
1784
 
1925
- /*
1926
- * Data Table
1927
- */
1785
+ /***************/
1786
+ /* Data Table */
1787
+ /***************/
1928
1788
 
1929
- div.CanvasXpressDataTable {
1789
+ div.CanvasXpressDataTable,
1790
+ div.CanvasXpressDataTableToolbar,
1791
+ div.CanvasXpressDataTableContainer,
1792
+ div.CanvasXpressDataTableVertical,
1793
+ div.CanvasXpressDataTableVerticalS,
1794
+ div.CanvasXpressDataTableHorizontal,
1795
+ div.CanvasXpressDataTableHorizontalS,
1796
+ div.CanvasXpressDataTableMask,
1797
+ img.CanvasXpressDataTableToolbarImage,
1798
+ svg.CanvasXpressDataTableToolbarImage,
1799
+ img.CanvasXpressDataTableToolbarImageS,
1800
+ svg.CanvasXpressDataTableToolbarImageS,
1801
+ img.CanvasXpressDataTableToolbarImageNB,
1802
+ svg.CanvasXpressDataTableToolbarImageNB,
1803
+ svg.CanvasXpressDataTableToolbarImageLogo,
1804
+ table.CanvasXpressDataTable,
1805
+ th.CanvasXpressTableCellHead,
1806
+ th.CanvasXpressTableCellModernHead,
1807
+ th.CanvasXpressTableCellHeadActive,
1808
+ th.CanvasXpressTableCellModernHeadActive,
1809
+ td.CanvasXpressTableCell,
1810
+ td.CanvasXpressTableCellModern,
1811
+ td.CanvasXpressTableCellActive,
1812
+ td.CanvasXpressTableCellModernActive,
1813
+ a.CanvasXpressTableCellHead,
1814
+ a.CanvasXpressTableCellModernHead,
1815
+ a.CanvasXpressTableCellHeadActive,
1816
+ a.CanvasXpressTableCellModernHeadActive {
1817
+ user-select: none;
1818
+ -ms-user-select: none;
1819
+ -moz-user-select: none;
1820
+ -khtml-user-select: none;
1821
+ -webkit-user-select: none;
1822
+ -o-user-select: none;
1823
+ }
1824
+
1825
+ div.CanvasXpressDataTable,
1826
+ div.CanvasXpressDataTableToolbar,
1827
+ div.CanvasXpressDataTableContainer,
1828
+ div.CanvasXpressDataTableVertical,
1829
+ div.CanvasXpressDataTableVerticalS,
1830
+ div.CanvasXpressDataTableHorizontal,
1831
+ div.CanvasXpressDataTableHorizontalS,
1832
+ div.CanvasXpressDataTableMask {
1930
1833
  box-sizing: border-box;
1834
+ position: absolute;
1835
+ }
1836
+
1837
+ div.CanvasXpressDataTable,
1838
+ div.CanvasXpressDataTableToolbar,
1839
+ div.CanvasXpressDataTableVertical,
1840
+ div.CanvasXpressDataTableVerticalS,
1841
+ div.CanvasXpressDataTableHorizontal,
1842
+ div.CanvasXpressDataTableHorizontalS {
1843
+ color: var(--cx-font-color);
1844
+ background-color: rgba(255, 255, 255, 0.95);
1845
+ }
1846
+
1847
+ div.CanvasXpressDataTable {
1931
1848
  border: 1px solid rgb(83, 105, 255);
1932
1849
  border-radius: 5px;
1933
- background-color: rgba(255, 255, 255, 0.95);
1934
1850
  clear: both;
1935
- color: rgb(34, 34, 34);
1936
1851
  overflow: hidden;
1937
- position: absolute;
1938
- -moz-user-select: none;
1939
- -khtml-user-select: none;
1940
- -webkit-user-select: none;
1941
- -o-user-select: none;
1942
1852
  }
1943
1853
 
1944
1854
  div.CanvasXpressDataTableToolbar {
1945
- box-sizing: border-box;
1946
1855
  border-bottom: 1px solid rgb(204, 204, 204);
1947
1856
  border-radius: 5px 5px 0px 0px;
1948
- background-color: rgba(255, 255, 255, 0.95);
1949
- color: rgb(34, 34, 34);
1950
1857
  height: 36px;
1951
1858
  left: 0px;
1952
1859
  line-height: 100%;
1953
- position: absolute;
1954
1860
  top: 0px;
1955
- -ms-user-select: none;
1956
- -moz-user-select: none;
1957
- -khtml-user-select: none;
1958
- -webkit-user-select: none;
1959
- -o-user-select: none;
1861
+ }
1862
+
1863
+ div.CanvasXpressDataTableContainer {
1864
+ border-radius: 0px 0px 5px 5px;
1865
+ display: block;
1866
+ left: 0px;
1867
+ line-height: 100%;
1868
+ }
1869
+
1870
+ div.CanvasXpressDataTableVertical,
1871
+ div.CanvasXpressDataTableVerticalS {
1872
+ overflow-x: hidden;
1873
+ overflow-y: auto;
1874
+ right: 6px;
1875
+ top: 2px;
1876
+ width: 16px;
1877
+ }
1878
+
1879
+ div.CanvasXpressDataTableHorizontal,
1880
+ div.CanvasXpressDataTableHorizontalS {
1881
+ bottom: 12px;
1882
+ height: 16px;
1883
+ left: 2px;
1884
+ overflow-x: auto;
1885
+ overflow-y: hidden;
1886
+ }
1887
+
1888
+ div.CanvasXpressDataTableMask {
1889
+ border: 0px;
1890
+ top: 0px;
1891
+ overflow: hidden;
1960
1892
  }
1961
1893
 
1962
1894
  img.CanvasXpressDataTableToolbarImage,
1963
- svg.CanvasXpressDataTableToolbarImage {
1895
+ svg.CanvasXpressDataTableToolbarImage,
1896
+ img.CanvasXpressDataTableToolbarImageS,
1897
+ svg.CanvasXpressDataTableToolbarImageS,
1898
+ img.CanvasXpressDataTableToolbarImageNB,
1899
+ svg.CanvasXpressDataTableToolbarImageNB {
1964
1900
  background: rgba(0, 0, 0, 0) !important;
1965
- border: 1px solid rgb(83, 105, 255) !important;
1966
1901
  border-radius: 5px;
1967
1902
  padding: 2px;
1968
1903
  box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
1969
1904
  cursor: pointer;
1970
1905
  float: right;
1971
1906
  margin: 5px 8px 0px 0px !important;
1972
- user-select: none;
1973
- -moz-user-select: none;
1974
- -khtml-user-select: none;
1975
- -webkit-user-select: none;
1976
- -o-user-select: none;
1977
- -ms-user-select: none;
1907
+ }
1908
+
1909
+ img.CanvasXpressDataTableToolbarImage,
1910
+ svg.CanvasXpressDataTableToolbarImage {
1911
+ border: 1px solid rgb(83, 105, 255) !important;
1978
1912
  }
1979
1913
 
1980
1914
  img.CanvasXpressDataTableToolbarImageS,
1981
1915
  svg.CanvasXpressDataTableToolbarImageS {
1982
- background: rgba(0, 0, 0, 0) !important;
1983
1916
  border: 1px solid rgb(0, 0, 0, 0.1) !important;
1984
- border-radius: 5px;
1985
- padding: 2px;
1986
- box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
1987
- cursor: pointer;
1988
- float: right;
1989
- margin: 5px 8px 0px 0px !important;
1990
- user-select: none;
1991
- -moz-user-select: none;
1992
- -khtml-user-select: none;
1993
- -webkit-user-select: none;
1994
- -o-user-select: none;
1995
- -ms-user-select: none;
1996
1917
  }
1997
1918
 
1998
-
1999
1919
  img.CanvasXpressDataTableToolbarImageNB,
2000
1920
  svg.CanvasXpressDataTableToolbarImageNB {
2001
- background: rgba(0, 0, 0, 0) !important;
2002
1921
  border: none !important;
2003
- box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
2004
- cursor: pointer;
2005
- float: right;
2006
- margin: 5px 8px 0px 0px !important;
2007
- user-select: none;
2008
- -moz-user-select: none;
2009
- -khtml-user-select: none;
2010
- -webkit-user-select: none;
2011
- -o-user-select: none;
2012
- -ms-user-select: none;
2013
1922
  }
2014
1923
 
2015
-
2016
- div.CanvasXpressDataTableContainer {
2017
- box-sizing: border-box;
2018
- border-radius: 0px 0px 5px 5px;
2019
- color: rgb(34, 34, 34);
2020
- display: block;
2021
- left: 0px;
2022
- line-height: 100%;
2023
- position: absolute;
2024
- -ms-user-select: none;
2025
- -moz-user-select: none;
2026
- -khtml-user-select: none;
2027
- -webkit-user-select: none;
2028
- -o-user-select: none;
2029
- }
2030
- div.CanvasXpressDataTableVertical,
2031
- div.CanvasXpressDataTableVerticalS {
2032
- box-sizing: border-box;
2033
- background-color: rgba(255, 255, 255, 0.95);
2034
- overflow-x: hidden;
2035
- overflow-y: auto;
2036
- position: absolute;
2037
- right: 6px;
2038
- top: 2px;
2039
- width: 16px;
2040
- -ms-user-select: none;
2041
- -moz-user-select: none;
2042
- -khtml-user-select: none;
2043
- -webkit-user-select: none;
2044
- -o-user-select: none;
1924
+ img.CanvasXpressDataTableToolbarImageLogo,
1925
+ svg.CanvasXpressDataTableToolbarImageLogo {
1926
+ border: none !important;
1927
+ float: left;
1928
+ margin: 10px 0px 0px 10px !important;
2045
1929
  }
2046
1930
 
1931
+
2047
1932
  img.CanvasXpressDataTableVertical {
2048
1933
  max-height: unset !important;
2049
1934
  height: revert-layer !important;
2050
1935
  }
2051
1936
 
2052
- div.CanvasXpressDataTableHorizontal,
2053
- div.CanvasXpressDataTableHorizontalS {
2054
- box-sizing: border-box;
2055
- background-color: rgba(255, 255, 255, 0.95);
2056
- bottom: 12px;
2057
- height: 16px;
2058
- left: 2px;
2059
- overflow-x: auto;
2060
- overflow-y: hidden;
2061
- position: absolute;
2062
- -ms-user-select: none;
2063
- -moz-user-select: none;
2064
- -khtml-user-select: none;
2065
- -webkit-user-select: none;
2066
- -o-user-select: none;
2067
- }
2068
-
2069
1937
  img.CanvasXpressDataTableHorizontal {
2070
1938
  max-width: unset !important;
2071
1939
  }
@@ -2073,78 +1941,41 @@ img.CanvasXpressDataTableHorizontal {
2073
1941
  table.CanvasXpressDataTable {
2074
1942
  border: 0px;
2075
1943
  border-spacing: 1px;
2076
- color: rgb(34, 34, 34);
1944
+ color: var(--cx-font-color);
2077
1945
  left: 1px;
2078
1946
  position: absolute;
2079
1947
  opacity: 0.95;
2080
1948
  table-layout: fixed;
2081
1949
  top: 1px;
2082
- -ms-user-select: none;
2083
- -moz-user-select: none;
2084
- -khtml-user-select: none;
2085
- -webkit-user-select: none;
2086
- -o-user-select: none;
2087
- }
2088
-
2089
- div.CanvasXpressDataTableMask {
2090
- box-sizing: border-box;
2091
- border: 0px;
2092
- position: absolute;
2093
- top: 0px;
2094
- overflow: hidden;
2095
- -ms-user-select: none;
2096
- -moz-user-select: none;
2097
- -khtml-user-select: none;
2098
- -webkit-user-select: none;
2099
- -o-user-select: none;
2100
1950
  }
2101
1951
 
2102
1952
  th.CanvasXpressTableCellHead,
2103
- th.CanvasXpressTableCellModernHead {
1953
+ th.CanvasXpressTableCellModernHead,
1954
+ th.CanvasXpressTableCellHeadActive,
1955
+ th.CanvasXpressTableCellModernHeadActive {
2104
1956
  border-top: none;
2105
1957
  border-bottom: 1px solid rgb(204, 204, 204);
2106
1958
  border-left: none;
2107
1959
  border-right: none;
2108
- color: rgb(34, 34, 34);
2109
1960
  font-style: bold;
2110
1961
  opacity: 0.95;
2111
1962
  padding: 2px;
2112
1963
  vertical-align: middle;
2113
- -ms-user-select: none;
2114
- -moz-user-select: none;
2115
- -khtml-user-select: none;
2116
- -webkit-user-select: none;
2117
- -o-user-select: none;
2118
1964
  }
2119
1965
 
2120
1966
  th.CanvasXpressTableCellHead {
2121
1967
  background: linear-gradient(rgb(240, 240, 240), rgb(230, 230, 230));
1968
+ color: var(--cx-font-color);
2122
1969
  }
2123
1970
 
2124
1971
  th.CanvasXpressTableCellModernHead {
2125
1972
  background: rgb(0, 0, 0, 0);
2126
- }
2127
-
2128
- th.CanvasXpressTableCellHeadActive,
2129
- th.CanvasXpressTableCellModernHeadActive {
2130
- border-top: none;
2131
- border-bottom: 1px solid rgb(204, 204, 204);
2132
- border-left: none;
2133
- border-right: none;
2134
- font-style: bold;
2135
- opacity: 0.95;
2136
- padding: 2px;
2137
- vertical-align: middle;
2138
- -ms-user-select: none;
2139
- -moz-user-select: none;
2140
- -khtml-user-select: none;
2141
- -webkit-user-select: none;
2142
- -o-user-select: none;
1973
+ color: var(--cx-font-color);
2143
1974
  }
2144
1975
 
2145
1976
  th.CanvasXpressTableCellHeadActive {
2146
1977
  background: rgba(83, 105, 255, 0.1);
2147
- color: rgb(34, 34, 34);
1978
+ color: var(--cx-font-color);
2148
1979
  }
2149
1980
 
2150
1981
  th.CanvasXpressTableCellModernHeadActive {
@@ -2153,30 +1984,7 @@ th.CanvasXpressTableCellModernHeadActive {
2153
1984
  }
2154
1985
 
2155
1986
  a.CanvasXpressTableCellHead,
2156
- a.CanvasXpressTableCellModernHead {
2157
- cursor: pointer;
2158
- position: absolute;
2159
- right: 8px;
2160
- white-space: normal;
2161
- text-decoration: none;
2162
- font-weight: bold;
2163
- font-style: normal;
2164
- width: 14px;
2165
- -ms-user-select: none;
2166
- -moz-user-select: none;
2167
- -khtml-user-select: none;
2168
- -webkit-user-select: none;
2169
- -o-user-select: none;
2170
- }
2171
-
2172
- a.CanvasXpressTableCellHead {
2173
- color: rgb(34, 34, 34);
2174
- }
2175
-
2176
- a.CanvasXpressTableCellModernHead {
2177
- color: rgb(83, 105, 255);
2178
- }
2179
-
1987
+ a.CanvasXpressTableCellModernHead,
2180
1988
  a.CanvasXpressTableCellHeadActive,
2181
1989
  a.CanvasXpressTableCellModernHeadActive {
2182
1990
  cursor: pointer;
@@ -2184,16 +1992,16 @@ a.CanvasXpressTableCellModernHeadActive {
2184
1992
  right: 8px;
2185
1993
  white-space: normal;
2186
1994
  text-decoration: none;
2187
- font-weight: bold;
2188
- font-style: normal;
2189
- width: 14px;
2190
- -ms-user-select: none;
2191
- -moz-user-select: none;
2192
- -khtml-user-select: none;
2193
- -webkit-user-select: none;
2194
- -o-user-select: none;
1995
+ font-weight: bold;
1996
+ font-style: normal;
1997
+ width: 14px;
1998
+ }
1999
+
2000
+ a.CanvasXpressTableCellHead {
2001
+ color: var(--cx-font-color);
2195
2002
  }
2196
2003
 
2004
+ a.CanvasXpressTableCellModernHead,
2197
2005
  a.CanvasXpressTableCellHeadActive {
2198
2006
  color: rgb(83, 105, 255);
2199
2007
  }
@@ -2203,43 +2011,33 @@ a.CanvasXpressTableCellModernHeadActive {
2203
2011
  }
2204
2012
 
2205
2013
  td.CanvasXpressTableCell,
2206
- td.CanvasXpressTableCellModern {
2207
- background: rgb(0, 0, 0, 0);
2014
+ td.CanvasXpressTableCellModern,
2015
+ td.CanvasXpressTableCellActive,
2016
+ td.CanvasXpressTableCellModernActive {
2208
2017
  border-top: none;
2209
2018
  border-bottom: 1px solid rgb(204, 204, 204);
2210
2019
  border-left: none;
2211
2020
  border-right: none;
2212
- color: rgb(34, 34, 34);
2021
+ color: var(--cx-font-color);
2213
2022
  padding: 2px;
2214
2023
  vertical-align: middle;
2215
- -ms-user-select: none;
2216
- -moz-user-select: none;
2217
- -khtml-user-select: none;
2218
- -webkit-user-select: none;
2219
- -o-user-select: none;
2024
+ }
2025
+
2026
+ td.CanvasXpressTableCell,
2027
+ td.CanvasXpressTableCellModern {
2028
+ background: rgb(0, 0, 0, 0);
2220
2029
  }
2221
2030
 
2222
2031
  td.CanvasXpressTableCellActive,
2223
2032
  td.CanvasXpressTableCellModernActive {
2224
2033
  background-color: rgb(223, 232, 249);
2225
- border-top: none;
2226
- border-bottom: 1px solid rgb(204, 204, 204);
2227
- border-left: none;
2228
- border-right: none;
2229
- color: rgb(34, 34, 34);
2230
- padding: 2px;
2231
2034
  opacity: 0.95;
2232
- vertical-align: middle;
2233
- -ms-user-select: none;
2234
- -moz-user-select: none;
2235
- -khtml-user-select: none;
2236
- -webkit-user-select: none;
2237
- -o-user-select: none;
2238
2035
  }
2239
2036
 
2240
- div.CanvasXpressTableCell {
2037
+ div.CanvasXpressTableCell,
2038
+ div.CanvasXpressTableCellLink {
2241
2039
  box-sizing: border-box;
2242
- color: rgb(34, 34, 34);
2040
+ color: var(--cx-font-color);
2243
2041
  margin: 2px 2px 1px 5px;
2244
2042
  overflow: hidden;
2245
2043
  position: relative;
@@ -2252,42 +2050,48 @@ div.CanvasXpressTableCell:hover {
2252
2050
  background-color: rgba(83, 105, 255, 0.1);
2253
2051
  }
2254
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
+
2059
+ th.CanvasXpressTableCellModernHead div.CanvasXpressTableCell,
2060
+ th.CanvasXpressTableCellModernHead div.CanvasXpressTableCellEmpty,
2061
+ tr:nth-child(1) tr:nth-child(1) th.CanvasXpressTableCellModernHead div.CanvasXpressTableCell,
2062
+ th.CanvasXpressTableCellModernHeadActive div.CanvasXpressTableCell,
2063
+ th.CanvasXpressTableCellHead div.CanvasXpressTableCell,
2064
+ th.CanvasXpressTableCellHeadActive div.CanvasXpressTableCell {
2065
+ border-radius: 5px;
2066
+ }
2067
+
2255
2068
  th.CanvasXpressTableCellModernHead div.CanvasXpressTableCell {
2256
2069
  background: rgba(255, 255, 255, 0.95);
2257
- /*color: rgb(83, 105, 255);*/
2258
2070
  border: 1px solid rgb(83, 105, 255);
2259
- border-radius: 5px;
2260
2071
  }
2261
2072
 
2262
2073
  th.CanvasXpressTableCellModernHead div.CanvasXpressTableCellEmpty {
2263
2074
  background: rgba(255, 255, 255, 0.95);
2264
- /*color: rgb(83, 105, 255);*/
2265
- border: 1px solid rgba(255, 255, 255, 0.95);
2266
- border-radius: 5px;
2075
+ border: none !important;
2267
2076
  }
2268
2077
 
2269
2078
  tr:nth-child(1) tr:nth-child(1) th.CanvasXpressTableCellModernHead div.CanvasXpressTableCell {
2270
2079
  background: rgba(83, 105, 255, 0.1);
2271
- /*color: rgb(83, 105, 255);*/
2272
2080
  border: 1px solid rgb(83, 105, 255);
2273
- border-radius: 5px;
2274
2081
  }
2275
2082
 
2276
2083
  th.CanvasXpressTableCellModernHeadActive div.CanvasXpressTableCell {
2277
2084
  background: rgb(83, 105, 255);
2278
2085
  color: rgb(255, 255, 255);
2279
2086
  border: 1px solid rgb(83, 105, 255);
2280
- border-radius: 5px;
2281
2087
  }
2282
2088
 
2283
2089
  th.CanvasXpressTableCellHead div.CanvasXpressTableCell {
2284
2090
  border: 1px solid rgba(0, 0, 0, 0);
2285
- border-radius: 5px;
2286
2091
  }
2287
2092
 
2288
2093
  th.CanvasXpressTableCellHeadActive div.CanvasXpressTableCell {
2289
2094
  border: 1px solid rgb(255, 255, 255);
2290
- border-radius: 5px;
2291
2095
  }
2292
2096
 
2293
2097
  /*
@@ -2300,9 +2104,9 @@ div.CanvasXpressConfigurator {
2300
2104
  border-radius: 5px;
2301
2105
  border: 1px solid rgb(83, 105, 255);
2302
2106
  box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
2303
- color: rgb(34, 34, 34);
2107
+ color: var(--cx-font-color);
2304
2108
  cursor: default;
2305
- font: normal 12px arial, tahoma, sans-serif;
2109
+ font: var(--cx-font);
2306
2110
  opacity: 0.95;
2307
2111
  line-height: 24px;
2308
2112
  text-align: left;
@@ -2315,8 +2119,8 @@ div.CanvasXpressConfigurator {
2315
2119
 
2316
2120
  span.CanvasXpressConfigurator {
2317
2121
  cursor: default;
2318
- font: normal 12px arial, tahoma, sans-serif;
2319
- color: rgb(34, 34, 34);
2122
+ font: var(--cx-font);
2123
+ color: var(--cx-font-color);
2320
2124
  -moz-user-select: none;
2321
2125
  -khtml-user-select: none;
2322
2126
  -webkit-user-select: none;
@@ -2328,9 +2132,9 @@ textarea.CanvasXpressConfigurator {
2328
2132
  border-radius: 5px;
2329
2133
  border: 1px solid rgb(83, 105, 255);
2330
2134
  box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
2331
- color: rgb(34, 34, 34);
2135
+ color: var(--cx-font-color);
2332
2136
  cursor: default;
2333
- font: normal 12px arial, tahoma, sans-serif;
2137
+ font: var(--cx-font);
2334
2138
  }
2335
2139
 
2336
2140
  img.CanvasXpressConfigurator,
@@ -2350,26 +2154,26 @@ svg.CanvasXpressConfigurator {
2350
2154
  select.CanvasXpressConfigurator {
2351
2155
  background-color: rgba(255, 255, 255, 0.95);
2352
2156
  border: 1px solid rgb(83, 105, 255);
2353
- color: rgb(34, 34, 34);
2157
+ color: var(--cx-font-color);
2354
2158
  cursor: default;
2355
- font: normal 12px arial, tahoma, sans-serif;
2159
+ font: var(--cx-font);
2356
2160
  padding-left: 3px;
2357
2161
  }
2358
2162
 
2359
2163
  input.CanvasXpressConfigurator {
2360
2164
  background-color: rgba(255, 255, 255, 0.95);
2361
2165
  border: 1px solid rgb(83, 105, 255);
2362
- color: rgb(34, 34, 34);
2166
+ color: var(--cx-font-color);
2363
2167
  cursor: default;
2364
- font: normal 12px arial, tahoma, sans-serif;
2168
+ font: var(--cx-font);
2365
2169
  padding-left: 3px;
2366
2170
  }
2367
2171
 
2368
2172
  div.CanvasXpressConfiguratorOptions {
2369
2173
  box-sizing: border-box;
2370
2174
  cursor: default;
2371
- font: normal 12px arial, tahoma, sans-serif;
2372
- color: rgb(34, 34, 34);
2175
+ font: var(--cx-font);
2176
+ color: var(--cx-font-color);
2373
2177
  height: 100px;
2374
2178
  margin-top: 8px;
2375
2179
  overflow: auto;
@@ -2382,20 +2186,20 @@ div.CanvasXpressConfiguratorFilter {
2382
2186
  border-radius: 5px;
2383
2187
  border: 1px solid rgb(83, 105, 255);
2384
2188
  box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
2385
- color: rgb(34, 34, 34);
2386
- font: normal 12px arial, tahoma, sans-serif;
2189
+ color: var(--cx-font-color);
2190
+ font: var(--cx-font);
2387
2191
  }
2388
2192
 
2389
2193
  select.CanvasXpressConfiguratorFilter {
2390
2194
  border: 1px solid rgb(83, 105, 255);
2391
- font: normal 12px arial, tahoma, sans-serif;
2392
- color: rgb(34, 34, 34);
2195
+ font: var(--cx-font);
2196
+ color: var(--cx-font-color);
2393
2197
  }
2394
2198
 
2395
2199
  input.CanvasXpressConfiguratorFilter {
2396
2200
  border: 1px solid rgb(83, 105, 255);
2397
- font: normal 12px arial, tahoma, sans-serif;
2398
- color: rgb(34, 34, 34);
2201
+ font: var(--cx-font);
2202
+ color: var(--cx-font-color);
2399
2203
  }
2400
2204
 
2401
2205
  div.CanvasXpressConfiguratorExample {
@@ -2404,8 +2208,8 @@ div.CanvasXpressConfiguratorExample {
2404
2208
  border-radius: 5px;
2405
2209
  border: 1px solid rgb(83, 105, 255);
2406
2210
  box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
2407
- color: rgb(34, 34, 34);
2408
- font: normal 12px arial, tahoma, sans-serif;
2211
+ color: var(--cx-font-color);
2212
+ font: var(--cx-font);
2409
2213
  overflow-y: scroll;
2410
2214
  overflow-x: hidden;
2411
2215
  }
@@ -2413,7 +2217,7 @@ div.CanvasXpressConfiguratorExample {
2413
2217
  span.CanvasXpressConfiguratorExample {
2414
2218
  cursor: default;
2415
2219
  font: bold 14px arial, tahoma, sans-serif;
2416
- color: rgb(34, 34, 34);
2220
+ color: var(--cx-font-color);
2417
2221
  line-height: 18px;
2418
2222
  -moz-user-select: none;
2419
2223
  -khtml-user-select: none;
@@ -2428,8 +2232,8 @@ div.CanvasXpressConfiguratorExampleContent {
2428
2232
  div.CanvasXpressConfiguratorColor {
2429
2233
  box-sizing: border-box;
2430
2234
  border: 1px solid rgb(83, 105, 255);
2431
- font: normal 12px arial, tahoma, sans-serif;
2432
- color: rgb(34, 34, 34);
2235
+ font: var(--cx-font);
2236
+ color: var(--cx-font-color);
2433
2237
  line-height: 18px;
2434
2238
  }
2435
2239
 
@@ -2439,8 +2243,8 @@ div.CanvasXpressConfiguratorColorMain {
2439
2243
  background-repeat: no-repeat;
2440
2244
  box-sizing: border-box;
2441
2245
  border: none;
2442
- font: normal 12px arial, tahoma, sans-serif;
2443
- color: rgb(34, 34, 34);
2246
+ font: var(--cx-font);
2247
+ color: var(--cx-font-color);
2444
2248
  float: left;
2445
2249
  cursor: crosshair;
2446
2250
  }
@@ -2450,8 +2254,8 @@ div.CanvasXpressConfiguratorColorExtra {
2450
2254
  background-image: url(data:image/gif;base64,R0lGODlhDwAPAKEBAAAAAP///////////yH5BAEKAAIALAAAAAAPAA8AAAIklB8Qx53b4otSUWcvyiz4/4AeQJbmKY4p1HHapBlwPL/uVRsFADs=);
2451
2255
  background-repeat: no-repeat;
2452
2256
  border: none;
2453
- font: normal 12px arial, tahoma, sans-serif;
2454
- color: rgb(34, 34, 34);
2257
+ font: var(--cx-font);
2258
+ color: var(--cx-font-color);
2455
2259
  cursor: crosshair;
2456
2260
  overflow: hidden;
2457
2261
  }
@@ -2541,13 +2345,13 @@ div.CanvasXpressWrapper {
2541
2345
  /* Data Filter */
2542
2346
  /***************/
2543
2347
 
2544
- div.CanvasXpressDataFilter {
2348
+ div.CanvasXpressDataFilter,
2349
+ div.CanvasXpressDataFilterToolbar {
2545
2350
  box-sizing: border-box;
2546
- color: rgb(34, 34, 34);
2351
+ color: var(--cx-font-color);
2547
2352
  font: normal 16px arial, tahoma, sans-serif;
2548
2353
  line-height: 100%;
2549
2354
  margin: 0px;
2550
- padding: 0px;
2551
2355
  position: absolute;
2552
2356
  -moz-user-select: none;
2553
2357
  -khtml-user-select: none;
@@ -2556,72 +2360,55 @@ div.CanvasXpressDataFilter {
2556
2360
  }
2557
2361
 
2558
2362
  div.CanvasXpressDataFilterToolbar {
2559
- box-sizing: border-box;
2560
2363
  border: 1px solid rgb(83, 105, 255);
2561
2364
  border-radius: 4px;
2562
- color: rgb(34, 34, 34);
2563
- font: normal 16px arial, tahoma, sans-serif;
2564
2365
  left: 0px;
2565
- line-height: 100%;
2566
- margin: 0px;
2567
- position: absolute;
2568
2366
  opacity: 0.95;
2569
2367
  top: 0px;
2570
2368
  }
2571
2369
 
2572
- span.CanvasXpressDataFilterToolbarText {
2573
- font: normal 16px arial, tahoma, sans-serif;
2574
- color: rgb(34, 34, 34);
2575
- left: 8px;
2576
- line-height: 100%;
2577
- position: relative;
2578
- top: 9px;
2370
+ img.CanvasXpressDataFilterToolbarImage,
2371
+ svg.CanvasXpressDataFilterToolbarImage,
2372
+ img.CanvasXpressDataFilterToolbarImageNB,
2373
+ svg.CanvasXpressDataFilterToolbarImageNB {
2374
+ background: rgba(0, 0, 0, 0) !important;
2375
+ box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
2376
+ cursor: pointer;
2377
+ margin: 5px 8px 0px 0px !important;
2378
+ float: right;
2579
2379
  }
2580
2380
 
2581
2381
  img.CanvasXpressDataFilterToolbarImage,
2582
2382
  svg.CanvasXpressDataFilterToolbarImage {
2583
- background: rgba(0, 0, 0, 0) !important;
2584
2383
  border: 1px solid rgb(83, 105, 255) !important;
2585
2384
  border-radius: 5px !important;
2586
2385
  padding: 2px;
2587
- box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
2588
- cursor: pointer;
2589
- margin: 5px 8px 0px 0px !important;
2590
- float: right;
2591
2386
  }
2592
2387
 
2593
2388
  img.CanvasXpressDataFilterToolbarImageNB,
2594
2389
  svg.CanvasXpressDataFilterToolbarImageNB {
2595
- background: rgba(0, 0, 0, 0) !important;
2596
2390
  border: none !important;
2597
- box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
2598
- cursor: pointer;
2599
- margin: 5px 8px 0px 0px !important;
2600
- float: right;
2601
2391
  }
2602
2392
 
2603
- span.CanvasXpressDataFilterText {
2604
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAASElEQVR42mNkoBAwUt2A/0AAlgACsg0A6QWZQ4whOA2AsgkagtcAYgwhaAAhQ4gyAJ8htHcBRWFAUSxQlA7AEuSmRFLBwBsAAMDpRxF7e4BAAAAAAElFTkSuQmCC);
2605
- background-repeat: no-repeat;
2606
- background-position: -0px;
2393
+ span.CanvasXpressDataFilterToolbarText,
2394
+ span.CanvasXpressDataFilterText,
2395
+ span.CanvasXpressDataFilterTextActive {
2607
2396
  font: normal 16px arial, tahoma, sans-serif;
2608
- color: rgb(34, 34, 34);
2397
+ color: var(--cx-font-color);
2609
2398
  left: 8px;
2610
2399
  line-height: 100%;
2611
2400
  position: relative;
2612
2401
  top: 9px;
2402
+ background-repeat: no-repeat;
2403
+ background-position: -0px;
2404
+ }
2405
+
2406
+ span.CanvasXpressDataFilterText {
2407
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAASElEQVR42mNkoBAwUt2A/0AAlgACsg0A6QWZQ4whOA2AsgkagtcAYgwhaAAhQ4gyAJ8htHcBRWFAUSxQlA7AEuSmRFLBwBsAAMDpRxF7e4BAAAAAAElFTkSuQmCC);
2613
2408
  }
2614
2409
 
2615
2410
  span.CanvasXpressDataFilterTextActive {
2616
2411
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAASUlEQVR42mNkoBAwjhqAMOA/EBCtCQiwGoAkjhOA7MFqADGGoGvGGga4DMGmGWcgohuCSzNOA5ANwacZrwFIhuBVM4gS0oAZAAD1oisRsByngAAAAABJRU5ErkJggg==);
2617
- background-repeat: no-repeat;
2618
- background-position: -0px;
2619
- font: normal 16px arial, tahoma, sans-serif;
2620
- color: rgb(34, 34, 34);
2621
- left: 8px;
2622
- line-height: 100%;
2623
- position: relative;
2624
- top: 9px;
2625
2412
  }
2626
2413
 
2627
2414
  div.CanvasXpressDataFilterContainer {
@@ -2633,13 +2420,20 @@ div.CanvasXpressDataFilterContainer {
2633
2420
  position: absolute;
2634
2421
  }
2635
2422
 
2636
- input[type=checkbox].CanvasXpressCheckbox {
2637
- accent-color: rgb(83, 105, 255);
2423
+ input[type=checkbox].CanvasXpressCheckbox,
2424
+ input[type=checkbox].CanvasXpressCheckboxS {
2638
2425
  border-radius: 5px;
2639
2426
  height: 14px;
2640
2427
  width: 14px;
2641
2428
  margin: 2px;
2429
+ }
2430
+
2431
+ input[type=checkbox].CanvasXpressCheckbox {
2432
+ accent-color: rgb(83, 105, 255);
2433
+ }
2642
2434
 
2435
+ input[type=checkbox].CanvasXpressCheckboxS {
2436
+ accent-color: rgb(180, 180, 180);
2643
2437
  }
2644
2438
 
2645
2439
  label.CanvasXpressCheckboxLabel {
@@ -2650,21 +2444,23 @@ label.CanvasXpressCheckboxLabel {
2650
2444
  margin: 0 0 0 3px !important;
2651
2445
  }
2652
2446
 
2653
- div.CanvasXpressDataFilterContainerMaskNoOverflow {
2447
+ div.CanvasXpressDataFilterContainerMaskNoOverflow,
2448
+ div.CanvasXpressDataFilterContainerMaskNoOverflowOut {
2654
2449
  box-sizing: border-box;
2655
- border: 1px solid rgb(208, 208, 208);
2656
2450
  margin: 5px;
2657
2451
  overflow: hidden;
2658
2452
  }
2659
2453
 
2454
+ div.CanvasXpressDataFilterContainerMaskNoOverflow {
2455
+ border: 1px solid rgb(208, 208, 208);
2456
+ }
2457
+
2660
2458
  div.CanvasXpressDataFilterContainerMaskNoOverflowOut {
2661
- box-sizing: border-box;
2662
2459
  border: none;
2663
- margin: 5px;
2664
- overflow: hidden;
2665
2460
  }
2666
2461
 
2667
- div.CanvasXpressDataFilterContainerMask {
2462
+ div.CanvasXpressDataFilterContainerMask,
2463
+ div.CanvasXpressDataFilterContainerMaskS {
2668
2464
  box-sizing: border-box;
2669
2465
  border: 1px solid rgb(208, 208, 208);
2670
2466
  margin: 5px;
@@ -2672,9 +2468,18 @@ div.CanvasXpressDataFilterContainerMask {
2672
2468
  overflow-y: scroll;
2673
2469
  }
2674
2470
 
2675
- div.CanvasXpressDataFilterContainerItem {
2471
+ select.CanvasXpressDataFilterContainerString {
2472
+ background-color: rgba(255, 255, 255, 0.95);
2473
+ font: normal 16px arial, tahoma, sans-serif;
2474
+ color: var(--cx-font-color);
2475
+ margin-left: 3px;
2476
+ margin-bottom: 3px;
2477
+ }
2478
+
2479
+ div.CanvasXpressDataFilterContainerItem,
2480
+ div.CanvasXpressDataFilterContainerItemSelected,
2481
+ div.CanvasXpressDataFilterContainerItemSSelected {
2676
2482
  box-sizing: border-box;
2677
- /*color: rgb(83, 105, 255);*/
2678
2483
  height: 20px;
2679
2484
  padding: 1px 0px 0px 1px;
2680
2485
  overflow: hidden;
@@ -2682,51 +2487,45 @@ div.CanvasXpressDataFilterContainerItem {
2682
2487
  }
2683
2488
 
2684
2489
  div.CanvasXpressDataFilterContainerItemSelected {
2685
- box-sizing: border-box;
2686
2490
  background-color: rgba(83, 105, 255, 0.1);
2687
- /*color: rgb(83, 105, 255);*/
2688
- height: 20px;
2689
- padding: 1px 0px 0px 1px;
2690
- overflow: hidden;
2691
- white-space: nowrap;
2692
2491
  }
2693
2492
 
2694
- div.CanvasXpressDataFilterContainerHoverable {
2695
- box-sizing: border-box;
2696
- border: 1px solid rgb(83, 105, 255);
2697
- border-radius: 5px;
2698
- margin: 2px;
2699
- margin-bottom: 4px;
2493
+ div.CanvasXpressDataFilterContainerItemSSelected {
2494
+ background-color: rgba(0, 0, 0, 0.1);
2700
2495
  }
2701
2496
 
2702
- div.CanvasXpressDataFilterContainerHoverableOut {
2497
+ div.CanvasXpressDataFilterContainerHoverable,
2498
+ div.CanvasXpressDataFilterContainerHoverableS {
2703
2499
  box-sizing: border-box;
2704
- border: none;
2705
2500
  border-radius: 5px;
2706
2501
  margin: 2px;
2707
2502
  margin-bottom: 4px;
2708
2503
  }
2709
2504
 
2505
+ div.CanvasXpressDataFilterContainerHoverable {
2506
+ border: 1px solid rgb(83, 105, 255);
2507
+ }
2508
+
2710
2509
  div.CanvasXpressDataFilterContainerHoverable:hover {
2711
- box-sizing: border-box;
2712
2510
  background-color: rgba(83, 105, 255, 0.1);
2713
- border-radius: 5px;
2714
2511
  }
2715
2512
 
2716
- select.CanvasXpressDataFilterContainerString {
2717
- background-color: rgba(255, 255, 255, 0.95);
2718
- font: normal 16px arial, tahoma, sans-serif;
2719
- color: rgb(34, 34, 34);
2720
- margin-left: 3px;
2721
- margin-bottom: 3px;
2513
+ div.CanvasXpressDataFilterContainerHoverableS {
2514
+ border: 1px solid var(--cx-font-color);
2515
+ }
2516
+
2517
+ div.CanvasXpressDataFilterContainerHoverableS:hover {
2518
+ background-color: rgba(0, 0, 0, 0.1);
2722
2519
  }
2723
2520
 
2724
- div.CanvasXpressDataFilterHead {
2521
+ div.CanvasXpressDataFilterHead,
2522
+ div.CanvasXpressDataFilterHeadActive,
2523
+ div.CanvasXpressDataFilterHeadS,
2524
+ div.CanvasXpressDataFilterHeadSActive,
2525
+ div.CanvasXpressDataFilterHeadO,
2526
+ div.CanvasXpressDataFilterHeadOActive {
2725
2527
  box-sizing: border-box;
2726
- /*background: linear-gradient(rgb(240, 240, 240), rgb(230,230,230));*/
2727
- border: 1px solid rgb(83, 105, 255);
2728
- border-radius: 4px;
2729
- color: rgb(34, 34, 34);
2528
+ color: var(--cx-font-color);
2730
2529
  cursor: pointer;
2731
2530
  float: left;
2732
2531
  height: 38px;
@@ -2742,40 +2541,62 @@ div.CanvasXpressDataFilterHead {
2742
2541
  -o-user-select: none;
2743
2542
  }
2744
2543
 
2745
- div.CanvasXpressDataFilterHeadActive {
2746
- box-sizing: border-box;
2747
- background: rgba(83, 105, 255, 0.1);
2544
+ div.CanvasXpressDataFilterHead,
2545
+ div.CanvasXpressDataFilterHeadActive,
2546
+ div.CanvasXpressDataFilterHeadS,
2547
+ div.CanvasXpressDataFilterHeadSActive,
2548
+ div.CanvasXpressDataFilterHeadO,
2549
+ div.CanvasXpressDataFilterHeadOActive {
2748
2550
  border: 1px solid rgb(83, 105, 255);
2551
+ border-radius: 4px;
2552
+ }
2553
+
2554
+ div.CanvasXpressDataFilterHeadActive,
2555
+ div.CanvasXpressDataFilterHeadSActive,
2556
+ div.CanvasXpressDataFilterHeadOActive {
2557
+ border-bottom: 1px solid transparent !important;
2749
2558
  border-radius: 4px 4px 0px 0px;
2750
- color: rgb(34, 34, 34);
2751
- cursor: pointer;
2752
- float: left;
2753
- height: 38px;
2754
- margin-top: 2px;
2755
- overflow: hidden;
2756
- opacity: 0.95;
2757
- padding: 2px;
2758
- text-align: left;
2759
- vertical-align: middle;
2760
- -moz-user-select: none;
2761
- -khtml-user-select: none;
2762
- -webkit-user-select: none;
2763
- -o-user-select: none;
2764
2559
  }
2765
2560
 
2766
- div.CanvasXpressDataFilterContent {
2561
+ div.CanvasXpressDataFilterHeadActive {
2562
+ background: rgba(83, 105, 255, 0.1);
2563
+ }
2564
+
2565
+ div.CanvasXpressDataFilterHeadS,
2566
+ div.CanvasXpressDataFilterHeadSActive,
2567
+ div.CanvasXpressDataFilterHeadO,
2568
+ div.CanvasXpressDataFilterHeadOActive {
2569
+ border: 1px solid rgba(0, 0, 0, 0.1);
2570
+ }
2571
+
2572
+ div.CanvasXpressDataFilterHeadSActive {
2573
+ background: rgba(0, 0, 0, 0.1);
2574
+ }
2575
+
2576
+ div.CanvasXpressDataFilterHeadOActive {
2577
+ background: linear-gradient(rgb(240, 240, 240), rgb(230,230,230));
2578
+ }
2579
+
2580
+ div.CanvasXpressDataFilterContent,
2581
+ div.CanvasXpressDataFilterContentS {
2767
2582
  box-sizing: border-box;
2768
2583
  background-color: rgba(255, 255, 255, 0.95);
2769
- border: 1px solid rgb(83, 105, 255);
2770
2584
  border-radius: 0px 0px 4px 4px;
2771
2585
  border-top: 0px;
2772
- /*color: rgb(83, 105, 255);*/
2773
2586
  font: normal 16px arial, tahoma, sans-serif;
2774
2587
  overflow-y: auto;
2775
2588
  overflow-x: hidden;
2776
2589
  padding: 2px;
2777
2590
  }
2778
2591
 
2592
+ div.CanvasXpressDataFilterContent {
2593
+ border: 1px solid rgb(83, 105, 255);
2594
+ }
2595
+
2596
+ div.CanvasXpressDataFilterContentS {
2597
+ border: 1px solid rgba(0, 0, 0, 0.1);
2598
+ }
2599
+
2779
2600
  div.CanvasXpressDataFilterContainerTicks {
2780
2601
  display: flex;
2781
2602
  justify-content: space-between;
@@ -2783,32 +2604,28 @@ div.CanvasXpressDataFilterContainerTicks {
2783
2604
  height: 18px;
2784
2605
  }
2785
2606
 
2786
- span.CanvasXpressDataFilterContainerTicksLong {
2607
+ span.CanvasXpressDataFilterContainerTicksLong,
2608
+ span.CanvasXpressDataFilterContainerTicks {
2787
2609
  position: relative;
2788
2610
  display: flex;
2789
2611
  justify-content: center;
2790
2612
  width: 1px;
2791
- background: gray;
2792
- height: 10px;
2613
+ background: rgb(128, 128, 128);
2793
2614
  line-height: 10px;
2794
2615
  margin-bottom: 10px;
2795
2616
  }
2796
2617
 
2618
+ span.CanvasXpressDataFilterContainerTicksLong {
2619
+ height: 10px;
2620
+ }
2621
+
2797
2622
  span.CanvasXpressDataFilterContainerTicks {
2798
- position: relative;
2799
- display: flex;
2800
- justify-content: center;
2801
- width: 1px;
2802
- background: gray;
2803
2623
  height: 5px;
2804
- line-height: 10px;
2805
- margin-bottom: 10px;
2806
2624
  }
2807
2625
 
2808
- /**
2809
- * Toggle
2810
- */
2811
-
2626
+ /***************/
2627
+ /* Toggle */
2628
+ /***************/
2812
2629
  div.CanvasXpressToggle {
2813
2630
  border: none;
2814
2631
  margin: 5px;
@@ -2819,6 +2636,7 @@ label.CanvasXpressToggle {
2819
2636
  cursor: pointer;
2820
2637
  }
2821
2638
 
2639
+ div.CanvasXpressToggleSwitchS,
2822
2640
  div.CanvasXpressToggleSwitch {
2823
2641
  display: inline-block;
2824
2642
  background: rgb(204, 204, 204);
@@ -2830,12 +2648,15 @@ div.CanvasXpressToggleSwitch {
2830
2648
  transition: background 0.25s;
2831
2649
  }
2832
2650
 
2651
+ div.CanvasXpressToggleSwitchS:before,
2652
+ div.CanvasXpressToggleSwitchS:after,
2833
2653
  div.CanvasXpressToggleSwitch:before,
2834
2654
  div.CanvasXpressToggleSwitch:after {
2835
2655
  content: "";
2836
2656
  }
2837
2657
 
2838
- div.CanvasXpressToggleSwitch:before {
2658
+ div.CanvasXpressToggleSwitch:before,
2659
+ div.CanvasXpressToggleSwitchS:before {
2839
2660
  display: block;
2840
2661
  background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(238, 238, 238) 100%);
2841
2662
  border-radius: 50%;
@@ -2857,6 +2678,11 @@ input.CanvasXpressToggle:checked+div.CanvasXpressToggleSwitch {
2857
2678
  background: rgb(83, 105, 255);
2858
2679
  }
2859
2680
 
2681
+ input.CanvasXpressToggle:checked+div.CanvasXpressToggleSwitchS {
2682
+ background: rgb(180, 180, 180);
2683
+ }
2684
+
2685
+ input.CanvasXpressToggle:checked+div.CanvasXpressToggleSwitchS:before,
2860
2686
  input.CanvasXpressToggle:checked+div.CanvasXpressToggleSwitch:before {
2861
2687
  left: 12px;
2862
2688
  }
@@ -2873,9 +2699,9 @@ span.CanvasXpressToggle {
2873
2699
  top: -4px;
2874
2700
  }
2875
2701
 
2876
- /**
2877
- * Range Slider
2878
- */
2702
+ /****************/
2703
+ /* Range Slider */
2704
+ /****************/
2879
2705
 
2880
2706
  div.CanvasXpressRangeSliderContainer {
2881
2707
  border: none;
@@ -2906,29 +2732,39 @@ div.CanvasXpressRangeSliderInput {
2906
2732
  margin: 8px 0;
2907
2733
  }
2908
2734
 
2909
- input.CanvasXpressRangeSliderMin {
2735
+ input.CanvasXpressRangeSliderMin,
2736
+ input.CanvasXpressRangeSliderMax,
2737
+ input.CanvasXpressRangeSliderMinS,
2738
+ input.CanvasXpressRangeSliderMaxS {
2910
2739
  border: 1px solid rgba(255, 255, 255, 0.95);
2911
2740
  border-radius: 5px;
2912
- color: rgb(83, 105, 255);
2913
- float: left;
2914
2741
  font: normal 16px arial, tahoma, sans-serif;
2915
2742
  margin-bottom: 2px;
2916
- margin-left: 1px;
2917
2743
  line-height: 100%;
2918
2744
  width: 60px;
2919
2745
  }
2920
2746
 
2747
+ input.CanvasXpressRangeSliderMin,
2921
2748
  input.CanvasXpressRangeSliderMax {
2922
- border: 1px solid rgba(255, 255, 255, 0.95);
2923
- border-radius: 5px;
2924
2749
  color: rgb(83, 105, 255);
2750
+ }
2751
+
2752
+ input.CanvasXpressRangeSliderMinS,
2753
+ input.CanvasXpressRangeSliderMaxS {
2754
+ color: rgb(180, 180, 180);
2755
+ }
2756
+
2757
+ input.CanvasXpressRangeSliderMinS,
2758
+ input.CanvasXpressRangeSliderMin {
2759
+ float: left;
2760
+ margin-left: 1px;
2761
+ }
2762
+
2763
+ input.CanvasXpressRangeSliderMaxS,
2764
+ input.CanvasXpressRangeSliderMax {
2925
2765
  float: right;
2926
- font: normal 16px arial, tahoma, sans-serif;
2927
- margin-bottom: 2px;
2928
2766
  margin-right: 1px;
2929
- line-height: 100%;
2930
2767
  text-align: right;
2931
- width: 60px;
2932
2768
  }
2933
2769
 
2934
2770
  div.CanvasXpressRangeSlider {
@@ -2949,7 +2785,8 @@ div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderTrack {
2949
2785
  background-color: rgb(238, 238, 238);
2950
2786
  }
2951
2787
 
2952
- div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderRange {
2788
+ div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderRange,
2789
+ div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderRangeS {
2953
2790
  position: absolute;
2954
2791
  z-index: 10002;
2955
2792
  left: 0%;
@@ -2957,26 +2794,47 @@ div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderRange {
2957
2794
  top: 0;
2958
2795
  bottom: 0;
2959
2796
  border-radius: 5px;
2797
+ }
2798
+
2799
+ div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderRange {
2960
2800
  background-color: rgb(83, 105, 255);
2961
2801
  }
2962
2802
 
2803
+ div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderRangeS {
2804
+ background-color: rgb(180, 180, 180);
2805
+ }
2806
+
2963
2807
  div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbLeft,
2964
- div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbRight {
2808
+ div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbRight,
2809
+ div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbLeftS,
2810
+ div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbRightS {
2965
2811
  position: absolute;
2966
2812
  z-index: 10003;
2967
2813
  width: 18px;
2968
2814
  height: 18px;
2969
- background-color: rgb(83, 105, 255);
2970
2815
  border-radius: 50%;
2971
- box-shadow: 0 0 0 0 rgba(51, 122, 183, 0.1);
2972
2816
  transition: box-shadow .3s ease-in-out;
2973
2817
  }
2974
2818
 
2819
+ div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbLeft,
2820
+ div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbRight {
2821
+ background-color: rgb(83, 105, 255);
2822
+ box-shadow: 0 0 0 0 rgba(51, 122, 183, 0.1);
2823
+ }
2824
+
2825
+ div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbLeftS,
2826
+ div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbRightS {
2827
+ background-color: rgb(180, 180, 180);
2828
+ box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
2829
+ }
2830
+
2831
+ div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbLeftS,
2975
2832
  div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbLeft {
2976
2833
  left: 0%;
2977
2834
  transform: translate(-15px, -5px);
2978
2835
  }
2979
2836
 
2837
+ div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbRightS,
2980
2838
  div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbRight {
2981
2839
  right: 0%;
2982
2840
  transform: translate(15px, -5px);
@@ -2990,6 +2848,14 @@ div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbRight:hover {
2990
2848
  box-shadow: 0 0 0 10px rgba(51, 122, 183, 0.1);
2991
2849
  }
2992
2850
 
2851
+ div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbLeftS:hover {
2852
+ box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
2853
+ }
2854
+
2855
+ div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbRightS:hover {
2856
+ box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
2857
+ }
2858
+
2993
2859
  input[type=range] {
2994
2860
  position: absolute;
2995
2861
  pointer-events: none;
@@ -3058,10 +2924,9 @@ input[type=number]::-webkit-inner-spin-button {
3058
2924
  -webkit-appearance: none;
3059
2925
  }
3060
2926
 
3061
- /**
3062
- * Scrollbars
3063
- */
3064
-
2927
+ /***************/
2928
+ /* Scrollbars */
2929
+ /***************/
3065
2930
 
3066
2931
  /* All scrollbar buttons*/
3067
2932
 
@@ -3071,6 +2936,7 @@ div.CanvasXpressDataTableHorizontalS::-webkit-scrollbar-button,
3071
2936
  div.CanvasXpressDataTableVerticalS::-webkit-scrollbar-button,
3072
2937
  /*div.CanvasXpressDataFilterContent::-webkit-scrollbar-button,*/
3073
2938
  div.CanvasXpressDataFilterContainerMask::-webkit-scrollbar-button,
2939
+ div.CanvasXpressDataFilterContainerMaskS::-webkit-scrollbar-button,
3074
2940
  div.CanvasXpressDataFilterContainerMaskNoOverflow::-webkit-scrollbar-button,
3075
2941
  div.CanvasXpressDataExplorer::-webkit-scrollbar-button,
3076
2942
  div.CanvasXpressDataCustomizer::-webkit-scrollbar-button,
@@ -3079,7 +2945,7 @@ select.CanvasXpressConfigurator::-webkit-scrollbar-button,
3079
2945
  div.CanvasXpressConfiguratorExample::-webkit-scrollbar-button,
3080
2946
  div.CanvasXpressConfiguratorExampleContent::-webkit-scrollbar-button,
3081
2947
  select.CanvasXpressSlider::-webkit-scrollbar-button,
3082
- div.CanvasXpressBinNameContainer::-webkit-scrollbar-button {
2948
+ div.cX-bin-name-container::-webkit-scrollbar-button {
3083
2949
  width: 4px;
3084
2950
  height: 4px;
3085
2951
  }
@@ -3096,6 +2962,7 @@ select.CanvasXpressSlider::-webkit-scrollbar-track {
3096
2962
  background-color: rgb(255, 255, 255);
3097
2963
  }
3098
2964
 
2965
+ div.CanvasXpressDataFilterContainerMaskS::-webkit-scrollbar-track,
3099
2966
  div.CanvasXpressDataTableHorizontal::-webkit-scrollbar-track,
3100
2967
  div.CanvasXpressDataTableVertical::-webkit-scrollbar-track,
3101
2968
  div.CanvasXpressDataTableHorizontalS::-webkit-scrollbar-track,
@@ -3104,7 +2971,7 @@ div.CanvasXpressDataExplorer::-webkit-scrollbar-track,
3104
2971
  div.CanvasXpressDataCustomizer::-webkit-scrollbar-track,
3105
2972
  div.CanvasXpressConfiguratorExample::-webkit-scrollbar-track,
3106
2973
  div.CanvasXpressConfiguratorExampleContent::-webkit-scrollbar-track,
3107
- div.CanvasXpressBinNameContainer::-webkit-scrollbar-track {
2974
+ div.cX-bin-name-container::-webkit-scrollbar-track {
3108
2975
  background-color: rgb(245, 245, 245);
3109
2976
  }
3110
2977
 
@@ -3123,11 +2990,12 @@ select.CanvasXpressConfigurator::-webkit-scrollbar-track:hover,
3123
2990
  div.CanvasXpressConfiguratorExample::-webkit-scrollbar-track:hover,
3124
2991
  div.CanvasXpressConfiguratorExampleContent::-webkit-scrollbar-track:hover,
3125
2992
  select.CanvasXpressSlider::-webkit-scrollbar-track:hover,
3126
- div.CanvasXpressBinNameContainer::-webkit-scrollbar-track:hover {
2993
+ div.cX-bin-name-container::-webkit-scrollbar-track:hover {
3127
2994
  background-color: rgb(190, 190, 190);
3128
2995
  border-radius: 8px;
3129
2996
  }
3130
2997
 
2998
+ div.CanvasXpressDataFilterContainerMaskS::-webkit-scrollbar-track:hover,
3131
2999
  div.CanvasXpressDataTableHorizontalS::-webkit-scrollbar-track:hover,
3132
3000
  div.CanvasXpressDataTableVerticalS::-webkit-scrollbar-track:hover {
3133
3001
  background-color: rgb(220, 220, 220);
@@ -3147,6 +3015,7 @@ select.CanvasXpressSlider::-webkit-scrollbar {
3147
3015
  background-color: rgb(255, 255, 255);
3148
3016
  }
3149
3017
 
3018
+ div.CanvasXpressDataFilterContainerMaskS::-webkit-scrollbar,
3150
3019
  div.CanvasXpressDataTableHorizontal::-webkit-scrollbar,
3151
3020
  div.CanvasXpressDataTableVertical::-webkit-scrollbar,
3152
3021
  div.CanvasXpressDataTableHorizontalS::-webkit-scrollbar,
@@ -3155,7 +3024,7 @@ div.CanvasXpressDataExplorer::-webkit-scrollbar,
3155
3024
  div.CanvasXpressDataCustomizer::-webkit-scrollbar,
3156
3025
  div.CanvasXpressConfiguratorExample::-webkit-scrollbar,
3157
3026
  div.CanvasXpressConfiguratorExampleContent::-webkit-scrollbar,
3158
- div.CanvasXpressBinNameContainer::-webkit-scrollbar {
3027
+ div.cX-bin-name-container::-webkit-scrollbar {
3159
3028
  width: 8px;
3160
3029
  height: 8px;
3161
3030
  background-color: rgb(245, 245, 245);
@@ -3175,12 +3044,13 @@ select.CanvasXpressConfigurator::-webkit-scrollbar-thumb,
3175
3044
  div.CanvasXpressConfiguratorExample::-webkit-scrollbar-thumb,
3176
3045
  div.CanvasXpressConfiguratorExampleContent::-webkit-scrollbar-thumb,
3177
3046
  select.CanvasXpressSlider::-webkit-scrollbar-thumb,
3178
- div.CanvasXpressBinNameContainer::-webkit-scrollbar-thumb {
3047
+ div.cX-bin-name-container::-webkit-scrollbar-thumb {
3179
3048
  background-color: rgb(83, 105, 255);
3180
3049
  border-radius: 8px;
3181
3050
  border: none;
3182
3051
  }
3183
3052
 
3053
+ div.CanvasXpressDataFilterContainerMaskS::-webkit-scrollbar-thumb,
3184
3054
  div.CanvasXpressDataTableHorizontalS::-webkit-scrollbar-thumb,
3185
3055
  div.CanvasXpressDataTableVerticalS::-webkit-scrollbar-thumb {
3186
3056
  background-color: rgb(153, 153, 153);
@@ -3192,7 +3062,7 @@ div.CanvasXpressDataTableVerticalS::-webkit-scrollbar-thumb {
3192
3062
  div.CanvasXpressDataFilter::selection,
3193
3063
  div.CanvasXpressDataFilterToolbar::selection {
3194
3064
  background: rgba(0, 0, 0, 0);
3195
- color: rgb(34, 34, 34);
3065
+ color: var(--cx-font-color);
3196
3066
  }
3197
3067
 
3198
3068
  div.CanvasXpressDataFilterContainerItem::selection {
@@ -3212,7 +3082,7 @@ div.CanvasXpressLink {
3212
3082
  border: 1px solid rgb(83, 105, 255);
3213
3083
  border-radius: 3px;
3214
3084
  box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
3215
- color: rgb(34, 34, 34);
3085
+ color: var(--cx-font-color);
3216
3086
  cursor: default;
3217
3087
  font: normal 16px arial, tahoma, sans-serif;
3218
3088
  line-height: 100%;
@@ -3267,7 +3137,7 @@ section.CanvasXpressTabMenuConfigurator>h1.CanvasXpressTabMenuConfigurator {
3267
3137
  padding: 0.5px;
3268
3138
  overflow: hidden;
3269
3139
  font: normal 16px arial, tahoma, sans-serif;
3270
- color: rgb(34, 34, 34);
3140
+ color: var(--cx-font-color);
3271
3141
  line-height: 100%;
3272
3142
  }
3273
3143
 
@@ -3301,7 +3171,7 @@ div.CanvasXpressMenu {
3301
3171
  border: 1px solid rgb(83, 105, 255);
3302
3172
  border-radius: 3px;
3303
3173
  box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
3304
- color: rgb(34, 34, 34);
3174
+ color: var(--cx-font-color);
3305
3175
  cursor: default;
3306
3176
  font: normal 16px arial, tahoma, sans-serif;
3307
3177
  line-height: 100%;
@@ -3327,7 +3197,7 @@ li.CanvasXpressListItemSep {
3327
3197
  cursor: default;
3328
3198
  display: block;
3329
3199
  font: normal 16px arial, tahoma, sans-serif;
3330
- color: rgb(34, 34, 34);
3200
+ color: var(--cx-font-color);
3331
3201
  font-size: 1px;
3332
3202
  height: 100%;
3333
3203
  line-height: 1px;
@@ -3342,7 +3212,7 @@ input.CanvasXpressListItem {
3342
3212
  cursor: default;
3343
3213
  display: block;
3344
3214
  font: normal 16px arial, tahoma, sans-serif;
3345
- color: rgb(34, 34, 34);
3215
+ color: var(--cx-font-color);
3346
3216
  line-height: 100%;
3347
3217
  list-style: none;
3348
3218
  margin: 0px;
@@ -3358,7 +3228,7 @@ div.CanvasXpressListItem {
3358
3228
  box-sizing: border-box;
3359
3229
  border: 1px solid rgb(83, 105, 255);
3360
3230
  font: normal 16px arial, tahoma, sans-serif;
3361
- color: rgb(34, 34, 34);
3231
+ color: var(--cx-font-color);
3362
3232
  line-height: 24px;
3363
3233
  }
3364
3234
 
@@ -3369,7 +3239,7 @@ li.CanvasXpressListItem {
3369
3239
  cursor: default;
3370
3240
  display: block;
3371
3241
  font: normal 16px arial, tahoma, sans-serif;
3372
- color: rgb(34, 34, 34);
3242
+ color: var(--cx-font-color);
3373
3243
  height: 100%;
3374
3244
  line-height: 100%;
3375
3245
  list-style: none;
@@ -3388,7 +3258,7 @@ li.CanvasXpressListItemActive {
3388
3258
  cursor: default;
3389
3259
  display: block;
3390
3260
  font: normal 16px arial, tahoma, sans-serif;
3391
- color: rgb(34, 34, 34);
3261
+ color: var(--cx-font-color);
3392
3262
  height: 100%;
3393
3263
  line-height: 100%;
3394
3264
  list-style: none;
@@ -3473,7 +3343,7 @@ li.CanvasXpressListItemScrollSearch {
3473
3343
  }
3474
3344
 
3475
3345
  input.CanvasXpressListItemScrollSearch {
3476
- color: rgb(34, 34, 34);
3346
+ color: var(--cx-font-color);
3477
3347
  cursor: default;
3478
3348
  font: normal 16px arial, tahoma, sans-serif;
3479
3349
  line-height: 24px;
@@ -3489,7 +3359,7 @@ a.CanvasXpressListItemA {
3489
3359
  border-color: rgba(0, 0, 0, 0);
3490
3360
  border-style: solid;
3491
3361
  border-width: 0px 1px;
3492
- color: rgb(34, 34, 34);
3362
+ color: var(--cx-font-color);
3493
3363
  cursor: pointer;
3494
3364
  display: block;
3495
3365
  font: normal 16px arial, tahoma, sans-serif;
@@ -3508,7 +3378,7 @@ a.CanvasXpressListItemAActive {
3508
3378
  border-color: rgb(170, 204, 246);
3509
3379
  border-style: solid;
3510
3380
  border-width: 0px 1px;
3511
- color: rgb(34, 34, 34);
3381
+ color: var(--cx-font-color);
3512
3382
  cursor: pointer;
3513
3383
  display: block;
3514
3384
  font: normal 16px arial, tahoma, sans-serif;
@@ -3528,7 +3398,7 @@ a.CanvasXpressListItemAArrow {
3528
3398
  border-color: rgba(0, 0, 0, 0);
3529
3399
  border-style: solid;
3530
3400
  border-width: 0px 1px;
3531
- color: rgb(34, 34, 34);
3401
+ color: var(--cx-font-color);
3532
3402
  cursor: pointer;
3533
3403
  display: block;
3534
3404
  font: normal 16px arial, tahoma, sans-serif;
@@ -3548,7 +3418,7 @@ a.CanvasXpressListItemAArrowActive {
3548
3418
  border-color: rgb(170, 204, 246);
3549
3419
  border-style: solid;
3550
3420
  border-width: 0px 1px;
3551
- color: rgb(34, 34, 34);
3421
+ color: var(--cx-font-color);
3552
3422
  cursor: pointer;
3553
3423
  display: block;
3554
3424
  font: normal 16px arial, tahoma, sans-serif;
@@ -3567,7 +3437,7 @@ img.CanvasXpressListIcon,
3567
3437
  svg.CanvasXpressListIcon {
3568
3438
  background-position: center;
3569
3439
  border: 0px none !important;
3570
- color: rgb(34, 34, 34);
3440
+ color: var(--cx-font-color);
3571
3441
  cursor: pointer;
3572
3442
  font: normal 16px arial, tahoma, sans-serif;
3573
3443
  height: 24px;
@@ -3586,7 +3456,7 @@ svg.CanvasXpressListIcon {
3586
3456
  }
3587
3457
 
3588
3458
  span.CanvasXpressListItemText {
3589
- color: rgb(34, 34, 34);
3459
+ color: var(--cx-font-color);
3590
3460
  cursor: pointer;
3591
3461
  font: normal 16px arial, tahoma, sans-serif;
3592
3462
  line-height: 24px;
@@ -3596,7 +3466,7 @@ span.CanvasXpressListItemText {
3596
3466
  }
3597
3467
 
3598
3468
  input.CanvasXpressListItemText {
3599
- color: rgb(34, 34, 34);
3469
+ color: var(--cx-font-color);
3600
3470
  cursor: pointer;
3601
3471
  font: normal 16px arial, tahoma, sans-serif;
3602
3472
  line-height: 24px;
@@ -3605,7 +3475,7 @@ input.CanvasXpressListItemText {
3605
3475
  }
3606
3476
 
3607
3477
  span.CanvasXpressListItemTextShort {
3608
- color: rgb(34, 34, 34);
3478
+ color: var(--cx-font-color);
3609
3479
  cursor: pointer;
3610
3480
  float: right;
3611
3481
  font: italic 9px arial, tahoma, sans-serif;
@@ -3622,7 +3492,7 @@ span.CanvasXpressListItemTextSep {
3622
3492
  cursor: default;
3623
3493
  display: block;
3624
3494
  font: normal 16px arial, tahoma, sans-serif;
3625
- color: rgb(34, 34, 34);
3495
+ color: var(--cx-font-color);
3626
3496
  font-size: 1px;
3627
3497
  line-height: 1px;
3628
3498
  list-style: none;
@@ -3634,10 +3504,10 @@ span.CanvasXpressListItemTextSep {
3634
3504
  table.CanvasXpressListItemTable {
3635
3505
  border: collapse;
3636
3506
  line-height: 20px;
3637
- color: rgb(34, 34, 34);
3507
+ color: var(--cx-font-color);
3638
3508
  cursor: default;
3639
3509
  font: normal 16px arial, tahoma, sans-serif;
3640
- color: rgb(34, 34, 34);
3510
+ color: var(--cx-font-color);
3641
3511
  line-height: 24px;
3642
3512
  padding-left: 3px;
3643
3513
  -moz-user-select: none;
@@ -3667,7 +3537,7 @@ div.CanvasXpressToolbarHelp {
3667
3537
  border-radius: 5px;
3668
3538
  border: 1px solid rgb(83, 105, 255);
3669
3539
  box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
3670
- color: rgb(34, 34, 34);
3540
+ color: var(--cx-font-color);
3671
3541
  cursor: default;
3672
3542
  font: normal 16px arial, tahoma, sans-serif;
3673
3543
  line-height: 24px;
@@ -3681,7 +3551,7 @@ div.CanvasXpressToolbarHelp {
3681
3551
  p.CanvasXpressToolbarHelp {
3682
3552
  cursor: default;
3683
3553
  font: normal 16px arial, tahoma, sans-serif;
3684
- color: rgb(34, 34, 34);
3554
+ color: var(--cx-font-color);
3685
3555
  line-height: 24px;
3686
3556
  margin: 0px;
3687
3557
  padding: 5px 5px 5px 20px;
@@ -3692,7 +3562,7 @@ div.CanvasXpressForm {
3692
3562
  border: 1px solid rgb(83, 105, 255);
3693
3563
  border-radius: 5px;
3694
3564
  background-color: rgba(255, 255, 255, 0.95);
3695
- color: rgb(34, 34, 34);
3565
+ color: var(--cx-font-color);
3696
3566
  cursor: move;
3697
3567
  font: normal 16px arial, tahoma, sans-serif;
3698
3568
  margin: 8px;
@@ -3706,7 +3576,7 @@ input.CanvasXpressFormButton {
3706
3576
  background-repeat: repeat-x;
3707
3577
  border: 1px solid rgb(83, 105, 255);
3708
3578
  border-radius: 5px 5px 5px 5px;
3709
- color: rgb(34, 34, 34);
3579
+ color: var(--cx-font-color);
3710
3580
  cursor: pointer;
3711
3581
  float: left;
3712
3582
  height: 22px;
@@ -3727,7 +3597,7 @@ input.CanvasXpressFormButtonActive {
3727
3597
  background-repeat: repeat-x;
3728
3598
  border: 1px solid rgb(83, 105, 255);
3729
3599
  border-radius: 5px 5px 0px 0px;
3730
- color: rgb(34, 34, 34);
3600
+ color: var(--cx-font-color);
3731
3601
  cursor: pointer;
3732
3602
  float: left;
3733
3603
  height: 22px;
@@ -3746,7 +3616,7 @@ input.CanvasXpressFormButtonActive {
3746
3616
  input.CanvasXpressFormText {
3747
3617
  background-color: rgba(255, 255, 255, 0.95);
3748
3618
  border: 1px solid rgb(83, 105, 255);
3749
- color: rgb(34, 34, 34);
3619
+ color: var(--cx-font-color);
3750
3620
  cursor: default;
3751
3621
  font: normal 16px arial, tahoma, sans-serif;
3752
3622
  line-height: 24px;
@@ -3756,7 +3626,7 @@ input.CanvasXpressFormText {
3756
3626
  form.CanvasXpressFormForm {
3757
3627
  background-color: rgba(255, 255, 255, 0.95);
3758
3628
  border: 1px solid rgb(83, 105, 255);
3759
- color: rgb(34, 34, 34);
3629
+ color: var(--cx-font-color);
3760
3630
  cursor: default;
3761
3631
  font: normal 16px arial, tahoma, sans-serif;
3762
3632
  line-height: 24px;
@@ -3863,7 +3733,7 @@ input.CanvasXpressSlider,
3863
3733
  select.CanvasXpressSlider {
3864
3734
  padding: 2px 3px 2px 2px;
3865
3735
  cursor: default;
3866
- color: rgb(34, 34, 34);
3736
+ color: var(--cx-font-color);
3867
3737
  border-left: none;
3868
3738
  border-right: none;
3869
3739
  border-top: none;
@@ -3954,7 +3824,7 @@ div.CanvasXpressTabPanelRibbon {
3954
3824
  }
3955
3825
 
3956
3826
  span.CanvasXpressTabPanelRibbon {
3957
- color: rgb(34, 34, 34);
3827
+ color: var(--cx-font-color);
3958
3828
  font: normal 16px arial, tahoma, sans-serif;
3959
3829
  line-height: 28px;
3960
3830
  list-style: none;
@@ -4270,19 +4140,19 @@ div.CanvasXpressPlay:hover {
4270
4140
  }
4271
4141
 
4272
4142
  @media (min-width: 300px) {
4273
- div.CanvasXpressBin {
4143
+ div.cX-bin {
4274
4144
  transform: scale(0.5);
4275
4145
  }
4276
4146
  }
4277
4147
 
4278
4148
  @media (min-width: 450px) {
4279
- div.CanvasXpressBin {
4149
+ div.cX-bin {
4280
4150
  transform: scale(0.75);
4281
4151
  }
4282
4152
  }
4283
4153
 
4284
4154
  @media (min-width: 600px) {
4285
- div.CanvasXpressBin {
4155
+ div.cX-bin {
4286
4156
  transform: scale(1);
4287
4157
  }
4288
4158
  }