canvasxpress-cli 63.1.1 → 63.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/cmds/help.js +7 -8
  2. package/cmds/io.js +34 -35
  3. package/index.js +1 -1
  4. package/package.json +1 -1
  5. package/src/canvasXpress.css +1282 -1346
  6. package/src/canvasXpress.js +4 -4
package/src/canvasXpress.css CHANGED
@@ -1,4 +1,5 @@
1
1
  @charset "UTF-8";
2
+ /* @category: shared */
2
3
 
3
4
  /*
4
5
  * Favorite Colors
@@ -54,40 +55,13 @@
54
55
  --cx-color-bms-hover: rgba(190, 43, 187, 0.1);
55
56
  --cx-color-bms2: rgb(89, 84, 84);
56
57
  --cx-color-bms2-hover: rgba(89, 84, 84, 0.1);
57
- /* UI: These are the exposed variables */
58
- --cx-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif !important;
59
- --cx-border-radius: 5px;
60
- --cx-border-width: 1px;
61
- --cx-border-style: solid;
62
- --cx-border-transparent: var(--cx-border-width) var(--cx-border-style) var(--cx-color-transparent);
63
- /* Data Table */
64
- --cx-datatable-accent-color: rgb(8, 122, 209);
65
- --cx-datatable-background-color: rgb(255, 255, 255);
66
- --cx-datatable-border-color: rgb(8, 122, 209);
67
- --cx-datatable-banner-background-color: rgb(255, 255, 255);
68
- --cx-datatable-banner-border-color: rgb(215, 226, 230);
69
- --cx-datatable-banner-text-color: rgb(85, 91, 98);
70
- --cx-datatable-toolbar-border-color: rgb(215, 226, 230);
71
- --cx-datatable-header-background-color: rgb(255, 255, 255);
72
- --cx-datatable-header-text-color: rgb(85, 91, 98);
73
- --cx-datatable-cell-background-color: rgb(255, 255, 255);
74
- --cx-datatable-oddcell-background-color: rgb(247, 248, 249);
75
- --cx-datatable-cell-border-color: rgb(215, 226, 230);
76
- --cx-datatable-cell-text-color: rgb(85, 91, 98);
77
- --cx-datatable-activecell-border-color: rgb(124, 182, 226);
78
- --cx-datatable-status-background-color: rgb(255, 255, 255);
79
- --cx-datatable-status-border-color: rgb(215, 226, 230);
80
- --cx-datatable-status-text-color: rgb(85, 91, 98);
81
- --cx-datatable-pagination-background-color: rgb(255, 255, 255);
82
- --cx-datatable-pagination-border-color: rgb(215, 226, 230);
83
- --cx-datatable-pagination-text-color: rgb(85, 91, 98);
84
- --cx-datatable-cell-hover-background-color: rgba(124, 182, 226, 0.2);
85
- --cx-datatable-row-hover-background-color: rgba(124, 182, 226, 0.2);
86
58
  /* Font */
87
- --cx-small-font-size: 9px;
88
- --cx-font-size: 12px;
89
- --cx-large-font-size: 13px;
90
- --cx-x-large-font-size: 15px;
59
+ --cx-x-small-font-size: 11px;
60
+ --cx-small-font-size: 12px;
61
+ --cx-medium-font-size: 13px;
62
+ --cx-font-size: 15px;
63
+ --cx-large-font-size: 16px;
64
+ --cx-x-large-font-size: 17px;
91
65
  --cx-font-color: var(--cx-color-ui-font);
92
66
  --cx-font: var(--cx-font-size) var(--cx-font-family);
93
67
  --cx-large-font: var(--cx-large-font-size) var(--cx-font-family);
@@ -116,6 +90,84 @@
116
90
  --cx-callout-border-color: var(--cx-color-widgets);
117
91
  /* Transitions */
118
92
  --cx-transition-speed: 0.5s;
93
+ /* UI: These are the exposed variables */
94
+ --cx-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif !important;
95
+ --cx-border-radius: 5px;
96
+ --cx-border-width: 1px;
97
+ --cx-border-style: solid;
98
+ --cx-border-transparent: var(--cx-border-width) var(--cx-border-style) var(--cx-color-transparent);
99
+ /* Scrollbar */
100
+ --cx-scrollbar-background-color: rgb(255, 255, 255);
101
+ --cx-scrollbar-alt-background-color: rgb(245, 245, 245);
102
+ --cx-scrollbar-thumb-color: #aaaaaa;
103
+ --cx-scrollbar-thumb-hover-color: #888888;
104
+ /* Customizer */
105
+ --cx-customizer-close-background-color: rgb(8, 122, 209);
106
+ --cx-customizer-close-text-color: rgb(255, 255, 255);
107
+ --cx-customizer-background-color: rgb(255, 255, 255);
108
+ --cx-customizer-border-color: rgb(8, 122, 209);
109
+ --cx-customizer-text-color: #555b62;
110
+ --cx-customizer-font-size: 12px;
111
+ --cx-customizer-hover-color: rgba(124, 182, 226, 0.2);
112
+ /* Data Filter */
113
+ --cx-toggle-switch-background-color: rgb(8, 122, 209);
114
+ --cx-datafilter-background-color: #ffffff;
115
+ --cx-datafilter-border-color: #087ad1;
116
+ --cx-datafilter-toolbar-background-color: #cccccc;
117
+ --cx-datafilter-text-color: #555b62;
118
+ --cx-datafilter-font-size: 12px;
119
+ --cx-datafilter-hover-color: rgba(124, 182, 226, 0.2);
120
+ /* Context Menu */
121
+ --cx-context-menu-background-color: #ffffff;
122
+ --cx-context-menu-border-color: #087ad1;
123
+ --cx-context-menu-text-color: #555b62;
124
+ --cx-context-menu-font-size: 11px;
125
+ --cx-context-menu-hover-color: rgba(124, 182, 226, 0.2);
126
+ /* Data Table */
127
+ --cx-datatable-accent-color: rgb(8, 122, 209);
128
+ --cx-datatable-background-color: rgb(255, 255, 255);
129
+ --cx-datatable-border-color: rgb(8, 122, 209);
130
+ --cx-datatable-banner-background-color: rgb(255, 255, 255);
131
+ --cx-datatable-banner-border-color: rgb(215, 226, 230);
132
+ --cx-datatable-banner-text-color: rgb(85, 91, 98);
133
+ --cx-datatable-toolbar-border-color: rgb(215, 226, 230);
134
+ --cx-datatable-header-background-color: rgb(255, 255, 255);
135
+ --cx-datatable-header-text-color: rgb(85, 91, 98);
136
+ --cx-datatable-cell-background-color: rgb(255, 255, 255);
137
+ --cx-datatable-oddcell-background-color: rgb(247, 248, 249);
138
+ --cx-datatable-cell-border-color: rgb(215, 226, 230);
139
+ --cx-datatable-cell-text-color: rgb(85, 91, 98);
140
+ --cx-datatable-activecell-border-color: rgb(124, 182, 226);
141
+ --cx-datatable-status-background-color: rgb(255, 255, 255);
142
+ --cx-datatable-status-border-color: rgb(215, 226, 230);
143
+ --cx-datatable-status-text-color: rgb(85, 91, 98);
144
+ --cx-datatable-pagination-background-color: rgb(255, 255, 255);
145
+ --cx-datatable-pagination-border-color: rgb(215, 226, 230);
146
+ --cx-datatable-pagination-text-color: rgb(85, 91, 98);
147
+ --cx-datatable-cell-hover-background-color: rgba(124, 182, 226, 0.2);
148
+ --cx-datatable-row-hover-background-color: rgba(124, 182, 226, 0.2);
149
+ --cx-datatable-toolbar-font-size: 14px;
150
+ --cx-datatable-header-font-size: 15px;
151
+ --cx-datatable-body-font-size: 15px;
152
+ --cx-datatable-cell-font-size: 15px;
153
+ --cx-datatable-cell-font-family: var(--cx-font-family);
154
+ /* Workflow */
155
+ --cx-workflow-background-color: #ffffff;
156
+ --cx-workflow-border-color: rgb(215, 226, 230);
157
+ --cx-workflow-text-color: #555b62;
158
+ --cx-workflow-hover-color: rgba(124, 182, 226, 0.2);
159
+ --cx-workflow-active-color: rgba(124, 182, 226, 0.2);
160
+ --cx-workflow-slider-track-color: rgb(215, 226, 230);
161
+ --cx-workflow-slider-fill-color: rgb(8, 122, 209);
162
+ --cx-workflow-slider-thumb-color: rgb(8, 122, 209);
163
+ --cx-workflow-slider-thumb-border-color: #ffffff;
164
+ --cx-workflow-list-label-font-size: 10px;
165
+ --cx-workflow-list-tick-font-size: 6px;
166
+ --cx-workflow-list-text-color: #555b62;
167
+ --cx-workflow-list-tick-color: rgb(215, 226, 230);
168
+ --cx-workflow-button-background-color: #ffffff;
169
+ --cx-workflow-button-border-color: rgb(215, 226, 230);
170
+ --cx-workflow-timeline-border-color: rgb(215, 226, 230);
119
171
  }
120
172
 
121
173
  *,
@@ -147,45 +199,35 @@ div.cX-bin-name-container,
147
199
  table.cX-bin-table,
148
200
  span.cX-bin,
149
201
  div.cX-DataTable,
150
- div.cX-DataTable-Container,
151
- table.cX-DataTable-Tooltip,
152
- div.cX-DataTable-Cell-Tooltip,
153
- div.cX-DataTable-Root,
154
- div.cX-DataTable-Vertical-Scrollbar,
155
- div.cX-DataTable-Horizontal-Scrollbar,
156
- div.cX-DataTable-Header-Viewport,
202
+ .cX-DataTable-Container,
203
+ .cX-DataTable-Tooltip,
204
+ .cX-DataTable-Cell-Tooltip,
205
+ .cX-DataTable-Root,
206
+ .cX-DataTable-Vertical-Scrollbar,
207
+ .cX-DataTable-Horizontal-Scrollbar,
208
+ .cX-DataTable-Header-Viewport,
157
209
  img.cX-DataTable-Toolbar-Image,
158
210
  svg.cX-DataTable-Toolbar-Image,
159
- svg.cX-DataTable-Toolbar-Image-Logo,
211
+ .cX-DataTable-Toolbar-Image-Logo,
160
212
  table.cX-DataTable,
161
- th.cX-DataTable-Cell-Head,
162
- th.cX-DataTable-Cell-Head-Active,
213
+ .cX-DataTable-Cell-Head,
214
+ .cX-DataTable-Cell-Head-Active,
163
215
  td.cX-DataTable-Cell,
164
216
  td.cX-DataTable-Cell-Active,
165
- a.cX-DataTable-Cell-Head,
166
- a.cX-DataTable-Cell-Head-Active,
167
- div.cX-DataFilter,
168
- div.cX-DataFilter-Toolbar,
169
- div.cX-DataFilter-Head,
170
- div.cX-DataFilter-Head-Active,
171
- div.cX-DataFilter-Toolbar svg.cX-DataFilter-Toolbar-Image,
172
- div.CanvasXpressPasswordContainer,
173
- img.CanvasXpressPassword,
174
- svg.CanvasXpressPassword,
175
- img.CanvasXpressMousePosition,
176
- svg.CanvasXpressMousePosition,
177
- div.CanvasXpressMarker,
178
- li.CanvasXpressListItemScrollTop,
179
- li.CanvasXpressListItemScrollTopActive,
180
- li.CanvasXpressListItemScrollBottom,
181
- li.CanvasXpressListItemScrollBottomActive,
182
- table.CanvasXpressListItemTable,
217
+ .cX-DataFilter,
218
+ .cX-DataFilter-Toolbar,
219
+ .cX-DataFilter-Head,
220
+ .cX-DataFilter-Head-Active,
221
+ .cX-DataFilter-Toolbar svg.cX-DataFilter-Toolbar-Image,
222
+ .cX-Password-Container,
223
+ .cX-Password-Icon,
224
+ .cX-Menu-Item-Scroll-Top,
225
+ .cX-Menu-Item-Scroll-Top-Active,
226
+ .cX-Menu-Item-Scroll-Bottom,
227
+ .cX-Menu-Item-Scroll-Bottom-Active,
183
228
  img.cX-Toolbar-Help,
184
229
  svg.cX-Toolbar-Help,
185
- div.cX-Toolbar-Help,
186
- input.CanvasXpressFormButton,
187
- input.CanvasXpressFormButtonActive,
188
- section.CanvasXpressTabMenuConfigurator>h1.CanvasXpressTabMenuConfigurator>label.CanvasXpressTabMenuConfigurator {
230
+ div.cX-Toolbar-Help {
189
231
  -webkit-touch-callout: none;
190
232
  /* iOS Safari */
191
233
  -webkit-user-select: none;
@@ -200,6 +242,7 @@ section.CanvasXpressTabMenuConfigurator>h1.CanvasXpressTabMenuConfigurator>label
200
242
  /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
201
243
  }
202
244
 
245
+ /* @category: shared */
203
246
  /*****************
204
247
  * SVG No border *
205
248
  *****************/
@@ -221,6 +264,16 @@ svg > * {
221
264
  pointer-events: none;
222
265
  }
223
266
 
267
+ svg.cX-DataTable-Toolbar-Image > *,
268
+ svg.cX-DataTable-Toolbar-Image-Logo > * {
269
+ pointer-events: auto;
270
+ }
271
+
272
+ svg.cX-DataTable-Toolbar-Image,
273
+ svg.cX-DataTable-Toolbar-Image-Logo {
274
+ pointer-events: auto;
275
+ }
276
+
224
277
  /*****************
225
278
  * SVG Border *
226
279
  *****************/
@@ -272,7 +325,7 @@ svg.cX-code {
272
325
  color: rgb(83, 105, 255);
273
326
  background: rgba(0, 0, 0, 0);
274
327
  padding: 15px;
275
- border-radius: 8px;
328
+ border-radius: var(--cx-border-radius);
276
329
  }
277
330
 
278
331
  .cX-Loader-Spinner {
@@ -295,30 +348,31 @@ svg.cX-code {
295
348
  }
296
349
  }
297
350
 
351
+ /* @category: widget */
298
352
  /*****************
299
353
  * Code *
300
354
  *****************/
301
355
 
302
- .cX-code-key {
356
+ .cX-Code-Key {
303
357
  color: var(--cx-code-key);
304
358
  font-weight: bold;
305
359
  }
306
360
 
307
- .cX-code-value,
308
- .cX-code-number,
309
- .cX-code-null {
361
+ .cX-Code-Value,
362
+ .cX-Code-Number,
363
+ .cX-Code-Null {
310
364
  color: var(--cx-code-value);
311
365
  }
312
366
 
313
- .cX-code-string {
367
+ .cX-Code-String {
314
368
  color: var(--cx-code-string);
315
369
  }
316
370
 
317
- .cX-code-boolean {
371
+ .cX-Code-Boolean {
318
372
  color: var(--cx-code-boolean);
319
373
  }
320
374
 
321
- .cX-code-comment {
375
+ .cX-Code-Comment {
322
376
  color: var(--cx-code-comment);
323
377
  }
324
378
 
@@ -327,7 +381,7 @@ svg.cX-code {
327
381
  background: transparent;
328
382
  }
329
383
 
330
- div.cX-code {
384
+ div.cX-Code {
331
385
  border: var(--cx-border);
332
386
  border-radius: var(--cx-border-radius);
333
387
  background-color: var(--cx-color-extra-light-gray);
@@ -341,7 +395,7 @@ div.cX-code {
341
395
  z-index: 10000;
342
396
  }
343
397
 
344
- div.cX-code-container {
398
+ .cX-Code-Container {
345
399
  clear: both;
346
400
  width: 600px;
347
401
  overflow: auto;
@@ -350,25 +404,28 @@ div.cX-code-container {
350
404
  top: 10px;
351
405
  }
352
406
 
353
- div.cX-code-content {
354
- margin: 2px 3px;
355
- padding: 2px 3px;
356
- }
357
-
358
- div.cX-code-toolbar {
407
+ .cX-Code-Toolbar {
359
408
  display: flex;
360
409
  flex-wrap: nowrap;
361
410
  overflow: hidden;
362
411
  justify-content: start;
363
412
  }
364
413
 
365
- div.cX-code-icons {
414
+ .cX-Code-Icons {
366
415
  display: flex;
367
416
  position: relative;
368
417
  margin-left: auto;
418
+ gap: 8px;
419
+ align-items: center;
420
+ }
421
+
422
+ .cX-Code-Icons img,
423
+ .cX-Code-Icons svg {
424
+ width: 24px;
425
+ height: 24px;
369
426
  }
370
427
 
371
- div.cX-code-error {
428
+ .cX-Code-Error {
372
429
  height: 36px;
373
430
  width: 280px;
374
431
  float: left;
@@ -384,9 +441,8 @@ div.cX-code-error {
384
441
  cursor: pointer;
385
442
  }
386
443
 
387
- pre.cX-code,
388
- pre.cX-code-content,
389
- pre.cX-code-content code {
444
+ .cX-Code-Content,
445
+ .cX-Code-Content code {
390
446
  padding: 0;
391
447
  margin: 0;
392
448
  font-size: inherit;
@@ -395,32 +451,25 @@ pre.cX-code-content code {
395
451
  border: none;
396
452
  }
397
453
 
398
- pre.cX-code {
454
+ .cX-Code-Content {
455
+ white-space: pre;
456
+ outline: none;
457
+ cursor: text;
458
+ font-size: small;
399
459
  text-align: left;
400
460
  word-break: inherit;
401
461
  word-wrap: inherit;
402
462
  background-color: inherit;
403
463
  border-radius: inherit;
404
- counter-reset: line;
405
- }
406
-
407
- pre.cX-code-content {
408
- white-space: pre;
409
- outline: none;
410
- cursor: text;
411
- font-size: small;
412
- }
413
-
414
- pre.cX-code-content:before {
415
464
  counter-reset: listing;
416
465
  }
417
466
 
418
- pre.cX-code-content code {
467
+ .cX-Code-Content code {
419
468
  counter-increment: listing;
420
469
  line-height: 1.5;
421
470
  }
422
471
 
423
- pre.cX-code-content code::before {
472
+ .cX-Code-Content code::before {
424
473
  content: counter(listing) " ";
425
474
  display: inline-block;
426
475
  width: 3em;
@@ -429,6 +478,7 @@ pre.cX-code-content code::before {
429
478
  background-color: var(--cx-color-extra-light-gray);
430
479
  }
431
480
 
481
+ /* @category: widget */
432
482
  /******************
433
483
  * Chat Interface *
434
484
  ******************/
@@ -501,7 +551,7 @@ div.cX-Chat {
501
551
 
502
552
  .cX-Chat-Configurator {
503
553
  padding-left: 5px;
504
- border-radius: 5px;
554
+ border-radius: var(--cx-border-radius);
505
555
  border-width: 0.5px;
506
556
  height: 24px;
507
557
  }
@@ -572,7 +622,7 @@ div.cX-Chat {
572
622
 
573
623
  .cX-Chat-Html-Panel-Title {
574
624
  font-family: var(--cx-font-family);
575
- font-size: 13px;
625
+ font-size: var(--cx-medium-font-size);
576
626
  font-weight: 600;
577
627
  color: var(--cx-color-ui-background);
578
628
  }
@@ -599,7 +649,7 @@ svg.cX-Chat-Html-Panel-Close {
599
649
  */
600
650
  .cX-Chat-LLM-Response {
601
651
  font-family: var(--cx-font-family);
602
- font-size: 16px;
652
+ font-size: var(--cx-large-font-size);
603
653
  line-height: 1.6;
604
654
  color: var(--cx-color-ui-font);
605
655
  background: var(--cx-background-widgets-color);
@@ -612,7 +662,7 @@ svg.cX-Chat-Html-Panel-Close {
612
662
  }
613
663
 
614
664
  .cX-Chat-LLM-Response h3 {
615
- font-size: 16px;
665
+ font-size: var(--cx-large-font-size);
616
666
  font-weight: 600;
617
667
  margin: 0 0 10px;
618
668
  color: var(--cx-color-widgets);
@@ -626,7 +676,7 @@ svg.cX-Chat-Html-Panel-Close {
626
676
 
627
677
  .cX-Chat-LLM-Response code {
628
678
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
629
- font-size: 12px;
679
+ font-size: var(--cx-small-font-size);
630
680
  background: var(--cx-background-widgets-color);
631
681
  border: var(--cx-border);
632
682
  border-radius: var(--cx-border-radius);
@@ -648,7 +698,7 @@ svg.cX-Chat-Html-Panel-Close {
648
698
  border: none;
649
699
  padding: 0;
650
700
  color: var(--cx-color-ui-font);
651
- font-size: 12px;
701
+ font-size: var(--cx-small-font-size);
652
702
  }
653
703
 
654
704
  .cX-Chat-LLM-Response ul {
@@ -682,7 +732,7 @@ svg.cX-Chat-Html-Panel-Close {
682
732
  margin-top: 12px;
683
733
  padding-top: 8px;
684
734
  border-top: var(--cx-border);
685
- font-size: 13px;
735
+ font-size: var(--cx-medium-font-size);
686
736
  }
687
737
 
688
738
  .cX-Chat-LLM-Links a {
@@ -728,39 +778,39 @@ svg.cX-Chat-Html-Panel-Close {
728
778
 
729
779
  .cX-Chat-Select-GT {
730
780
  font-weight: 700;
731
- font-size: 15px;
781
+ font-size: var(--cx-font-size);
732
782
  color: var(--cx-color-widgets);
733
783
  }
734
784
 
735
785
  .cX-Chat-Select-Score {
736
- font-size: 11px;
786
+ font-size: var(--cx-x-small-font-size);
737
787
  color: #ffffff;
738
788
  background: var(--cx-background-color);
739
789
  border: var(--cx-border);
740
- border-radius: 10px;
790
+ border-radius: var(--cx-border-radius);
741
791
  padding: 1px 7px;
742
792
  }
743
793
 
744
794
  .cX-Chat-Select-Desc {
745
- font-size: 13px;
795
+ font-size: var(--cx-medium-font-size);
746
796
  margin: 4px 0;
747
797
  color: var(--cx-color-ui-font);
748
798
  }
749
799
 
750
800
  .cX-Chat-Select-Clinical {
751
- font-size: 12px;
801
+ font-size: var(--cx-small-font-size);
752
802
  margin: 4px 0;
753
803
  color: var(--cx-color-gray);
754
804
  }
755
805
 
756
806
  .cX-Chat-Select-Factors {
757
- font-size: 12px;
807
+ font-size: var(--cx-small-font-size);
758
808
  margin: 4px 0 4px 16px;
759
809
  padding: 0;
760
810
  }
761
811
 
762
812
  .cX-Chat-Select-Next {
763
- font-size: 11px;
813
+ font-size: var(--cx-x-small-font-size);
764
814
  margin: 6px 0 4px;
765
815
  color: var(--cx-color-gray);
766
816
  }
@@ -768,7 +818,7 @@ svg.cX-Chat-Html-Panel-Close {
768
818
  .cX-Chat-LLM-Apply {
769
819
  margin-top: 8px;
770
820
  padding: 4px 12px;
771
- font-size: 12px;
821
+ font-size: var(--cx-small-font-size);
772
822
  font-family: var(--cx-font-family);
773
823
  background: var(--cx-color-widgets);
774
824
  color: var(--cx-background-widgets-color);
@@ -846,7 +896,7 @@ svg.cX-Chat-Html-Panel-Close {
846
896
  outline: none;
847
897
  border: none;
848
898
  font-family: monospace;
849
- font-size: 13px;
899
+ font-size: var(--cx-medium-font-size);
850
900
  box-sizing: border-box;
851
901
  resize: vertical;
852
902
  display: none;
@@ -861,7 +911,7 @@ svg.cX-Chat-Html-Panel-Close {
861
911
  outline: none;
862
912
  border: none;
863
913
  font-family: monospace;
864
- font-size: 13px;
914
+ font-size: var(--cx-medium-font-size);
865
915
  box-sizing: border-box;
866
916
  resize: vertical;
867
917
  display: none;
@@ -984,8 +1034,8 @@ textarea.cX-Chat-Code-Output {
984
1034
  /* Color Coding Classes */
985
1035
  .hint {
986
1036
  padding: 4px 10px;
987
- border-radius: 16px;
988
- font-size: 12px;
1037
+ border-radius: var(--cx-border-radius);
1038
+ font-size: var(--cx-small-font-size);
989
1039
  cursor: pointer;
990
1040
  font-weight: bold;
991
1041
  transition: all 0.2s;
@@ -1118,102 +1168,170 @@ textarea.cX-Chat-Code-Output {
1118
1168
  cursor: default;
1119
1169
  }
1120
1170
 
1171
+ /* @category: widget */
1121
1172
  /***************
1122
1173
  * Bin Data *
1123
1174
  ***************/
1124
1175
 
1125
- div.cX-bin,
1126
- div.cX-bin-name-container {
1127
- border: var(--cx-border);
1128
- border-radius: var(--cx-border-radius);
1176
+ /* Outer widget shell */
1177
+ div.cX-Bin {
1129
1178
  background-color: var(--cx-background-widgets-color);
1179
+ border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
1180
+ border-radius: var(--cx-border-radius);
1181
+ box-shadow: 0 4px 16px rgba(0,0,0,0.13);
1130
1182
  box-sizing: border-box;
1131
- }
1132
-
1133
- div.cX-bin {
1134
- cursor: move;
1135
1183
  color: var(--cx-font-color);
1136
- font: var(--cx-large-font);
1184
+ cursor: move;
1185
+ font-family: var(--cx-font-family);
1186
+ font-size: var(--cx-font-size);
1137
1187
  margin: 2px 3px;
1138
- padding: 2px 3px 5px 3px;
1188
+ overflow: hidden;
1139
1189
  position: absolute;
1140
1190
  white-space: nowrap;
1141
1191
  }
1142
1192
 
1143
- div.cX-bin-container {
1144
- background-color: var(--cx-background-widgets-color);
1145
- box-sizing: border-box;
1146
- clear: both;
1147
- text-align: left;
1193
+ /* Title row: Name label left, X button right */
1194
+ .cX-Bin-Title-Row {
1195
+ align-items: center;
1196
+ background-color: var(--cx-datatable-toolbar-background-color, var(--cx-background-hover-color));
1197
+ border-radius: var(--cx-border-radius) var(--cx-border-radius) 0 0;
1198
+ cursor: move;
1148
1199
  display: flex;
1149
- flex-direction: column;
1200
+ justify-content: space-between;
1201
+ padding: 8px 4px 0px 10px;
1150
1202
  }
1151
1203
 
1152
- div.cX-bin-name-container {
1153
- box-sizing: border-box;
1154
- border: none;
1155
- max-height: 400px;
1156
- overflow-y: auto;
1157
- padding: 5px;
1204
+ .cX-Bin-Title {
1205
+ font-family: var(--cx-font-family);
1206
+ font-size: var(--cx-font-size);
1207
+ font-weight: 600;
1208
+ color: var(--cx-datatable-banner-text-color);
1158
1209
  }
1159
1210
 
1160
- input.cX-bin {
1211
+ /* Body: padding wrapper */
1212
+ .cX-Bin-Body {
1161
1213
  background-color: var(--cx-background-widgets-color);
1162
- border: var(--cx-border);
1163
- color: var(--cx-font-color);
1164
- cursor: default;
1165
- font: var(--cx-large-font);
1166
- line-height: 24px;
1167
- padding-left: 3px;
1168
- border-radius: var(--cx-border-radius);
1169
- margin: 3px;
1214
+ cursor: move;
1215
+ padding: 8px 10px 0 10px;
1170
1216
  }
1171
1217
 
1172
- input.cX-bin-button {
1173
- float: left;
1174
- background-color: var(--cx-background-hover-color);
1175
- border: var(--cx-border);
1218
+ /* Section: label + content block */
1219
+ .cX-Bin-Section {
1220
+ margin-bottom: 8px;
1221
+ }
1222
+
1223
+ .cX-Bin-Section-Label {
1224
+ color: var(--cx-datatable-banner-text-color);
1225
+ font-family: var(--cx-font-family);
1226
+ font-size: var(--cx-font-size);
1227
+ font-weight: 600;
1228
+ margin-bottom: 4px;
1229
+ }
1230
+
1231
+ /* Name text input */
1232
+ .cX-Bin-Input {
1233
+ background-color: var(--cx-background-widgets-color);
1234
+ border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
1176
1235
  border-radius: var(--cx-border-radius);
1236
+ box-sizing: border-box;
1177
1237
  color: var(--cx-font-color);
1178
- cursor: pointer;
1179
- font: var(--cx-large-font-bold);
1180
- line-height: 24px;
1181
- margin: 0px 10px 10px 10px;
1182
- padding: 3px;
1238
+ cursor: default;
1239
+ font-family: var(--cx-font-family);
1240
+ font-size: var(--cx-font-size);
1241
+ padding: 3px 6px;
1242
+ width: 100%;
1183
1243
  }
1184
1244
 
1185
- table.cX-bin-table {
1186
- border-collapse: collapse !important;
1187
- color: var(--cx-font-color);
1245
+ .cX-Bin-Input-Center {
1246
+ text-align: center;
1247
+ font-weight: bold;
1248
+ }
1249
+
1250
+ /* Bin table — sized purely by content, no wrapper needed */
1251
+ .cX-Bin-Table {
1252
+ border: 1px var(--cx-border-style) var(--cx-datatable-banner-border-color);
1253
+ border-collapse: separate;
1254
+ border-radius: var(--cx-border-radius);
1255
+ border-spacing: 0;
1256
+ color: var(--cx-datatable-cell-text-color);
1188
1257
  cursor: default;
1189
- font: var(--cx-large-font-bold);
1190
- line-height: 24px;
1258
+ display: block;
1259
+ font-family: var(--cx-font-family);
1260
+ font-size: var(--cx-font-size);
1261
+ max-height: 300px;
1262
+ overflow-y: auto;
1263
+ width: 100%;
1191
1264
  }
1192
1265
 
1193
- th.cX-bin {
1266
+ .cX-Bin-Th {
1267
+ background-color: var(--cx-datatable-header-background-color, var(--cx-background-hover-color));
1268
+ border-bottom: 2px var(--cx-border-style) var(--cx-datatable-border-color);
1269
+ color: var(--cx-datatable-header-text-color);
1270
+ font-family: var(--cx-font-family);
1271
+ font-size: var(--cx-font-size);
1272
+ font-weight: bold;
1273
+ padding: 4px 6px;
1194
1274
  text-align: center;
1195
- line-height: 24px;
1196
- color: var(--cx-font-color);
1197
- background-color: var(--cx-background-hover-color);
1198
- border: var(--cx-border);
1199
- font: var(--cx-large-font-bold);
1200
1275
  }
1201
1276
 
1202
- span.cX-bin {
1203
- font: var(--cx-large-font-bold);
1204
- color: var(--cx-font-color);
1205
- margin-left: 5px;
1277
+ .cX-Bin-Td {
1278
+ border-bottom: 1px var(--cx-border-style) var(--cx-datatable-cell-border-color);
1279
+ padding: 3px 4px;
1280
+ vertical-align: middle;
1281
+ }
1282
+
1283
+ .cX-Bin-Td-Num {
1284
+ font-weight: bold;
1285
+ text-align: center;
1286
+ width: 32px;
1287
+ }
1288
+
1289
+ .cX-Bin-Row:last-child .cX-Bin-Td {
1290
+ border-bottom: none;
1291
+ }
1292
+
1293
+ .cX-Bin-Row:nth-child(even) .cX-Bin-Td {
1294
+ background-color: var(--cx-datatable-oddcell-background-color);
1295
+ }
1296
+
1297
+ .cX-Bin-Row:hover .cX-Bin-Td {
1298
+ background-color: var(--cx-datatable-row-hover-background-color);
1299
+ }
1300
+
1301
+ /* Footer: Apply + Done */
1302
+ .cX-Bin-Footer {
1303
+ border-top: 1px var(--cx-border-style) var(--cx-datatable-banner-border-color);
1304
+ display: flex;
1305
+ gap: 8px;
1306
+ margin-top: 8px;
1307
+ padding: 8px 0;
1308
+ }
1309
+
1310
+ .cX-Bin-Button {
1311
+ background-color: var(--cx-datatable-accent-color, var(--cx-background-hover-color));
1312
+ border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
1313
+ border-radius: var(--cx-border-radius);
1314
+ color: var(--cx-background-widgets-color);
1315
+ cursor: pointer;
1316
+ flex: 1;
1317
+ font-family: var(--cx-font-family);
1318
+ font-size: var(--cx-font-size);
1319
+ font-weight: bold;
1320
+ padding: 5px 8px;
1321
+ }
1322
+
1323
+ .cX-Bin-Button:hover {
1324
+ opacity: 0.85;
1206
1325
  }
1207
1326
 
1208
- svg.cX-bin::selection,
1209
- span.cX-bin::selection {
1327
+ svg.cX-Bin::selection {
1210
1328
  background: var(--cx-color-transparent) !important;
1211
1329
  border: 0px none !important;
1212
1330
  box-shadow: 0 0 0px var(--cx-color-transparent) !important;
1213
1331
  color: rgb(0, 0, 0);
1214
1332
  margin: 0px !important;
1215
1333
  }
1216
-
1334
+ /* @category: widget */
1217
1335
  /* BEGIN OF CUSTOMIZER CSS */
1218
1336
  /* https://cssgrid-generator.netlify.app/ */
1219
1337
 
@@ -1221,82 +1339,62 @@ span.cX-bin::selection {
1221
1339
  * CanvasXpress Customizer
1222
1340
  */
1223
1341
 
1224
- .customizerPanelLeft {
1342
+ .cX-Customizer-PanelLeft {
1225
1343
  display: grid;
1226
1344
  grid-template-columns: 1fr;
1227
- grid-template-rows: 1fr 8fr 1fr;
1345
+ grid-template-rows: auto;
1228
1346
  grid-column-gap: 0px;
1229
1347
  grid-row-gap: 0px;
1230
1348
  position: fixed;
1231
1349
  z-index: 10001;
1232
1350
  line-height: 100%;
1233
- background-color: rgb(255, 255, 255);
1351
+ background-color: var(--cx-customizer-background-color, var(--cx-background-hover-color));
1234
1352
  font-family: var(--cx-font-family);
1353
+ font-size: var(--cx-customizer-font-size, var(--cx-font-size)) !important;
1235
1354
  font-weight: normal;
1236
- color: var(--cx-font-color);
1237
- margin-left: 1px;
1238
- margin-top: 1px;
1239
- height: calc(100vh - 2px);
1240
- border-right: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
1241
- }
1242
-
1243
- .customizerLeftPanelTop,
1244
- .customizerLeftPanelBottom {
1245
- background: var(--cx-background-color);
1246
- border-top: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
1247
- border-left: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
1248
- border-bottom: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
1249
- border-right: none !important;
1355
+ color: var(--cx-customizer-text-color, var(--cx-font-color));
1356
+ margin-left: 0px;
1357
+ margin-top: 0px;
1358
+ max-height: 100vh;
1359
+ min-height: calc(100vh);
1250
1360
  }
1251
1361
 
1252
- .customizerLeftPanelTop {
1362
+ .cX-Customizer-LeftPanelItems {
1253
1363
  grid-area: 1 / 1 / 2 / 2;
1254
- border-top-left-radius: 10px;
1255
- }
1256
-
1257
- .customizerLeftPanelBottom {
1258
- grid-area: 3 / 1 / 4 / 2;
1259
- border-bottom-left-radius: 10px;
1260
- }
1261
-
1262
- .customizerLeftPanelMiddle {
1263
- grid-area: 2 / 1 / 3 / 2;
1264
- background: var(--cx-color-transparent);
1364
+ background: var(--cx-customizer-background-color, var(--cx-background-widgets-color));
1365
+ /* border-left: 1px solid var(--cx-customizer-border-color, var(--cx-datatable-border-color)) !important; */
1265
1366
  }
1266
1367
 
1267
- .customizerLeftPanelTop .customizerLeftItem:hover svg,
1268
- .customizerLeftPanelTop .customizerLeftItemActive svg,
1269
- .customizerLeftPanelBottom .customizerLeftItem:hover svg,
1270
- .customizerLeftPanelBottom .customizerLeftItemActive svg {
1271
- border: 1px solid rgb(255, 255, 255) !important;
1272
- background: var(--cx-color-transparent);
1368
+ .cX-Customizer-LeftPanelItems > div:first-child {
1369
+ background: var(--cx-color-widgets);
1273
1370
  }
1274
1371
 
1275
- .customizerRightPanel {
1276
- background: var(--cx-color-transparent);
1372
+ .cX-Customizer-RightPanel {
1373
+ background: var(--cx-customizer-background-color, var(--cx-background-widgets-color));
1374
+ border: 1px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-datatable-border-color)) !important;
1375
+ border-top: none !important;
1376
+ border-bottom: none !important;
1377
+ border-radius: 0 6px 6px 0;
1277
1378
  position: absolute;
1278
1379
  z-index: 10000;
1279
1380
  line-height: 100%;
1280
1381
  top: 0px;
1281
1382
  font-family: var(--cx-font-family);
1383
+ font-size: var(--cx-customizer-font-size, var(--cx-font-size)) !important;
1282
1384
  font-weight: normal;
1283
- color: var(--cx-font-color);
1385
+ color: var(--cx-customizer-text-color, var(--cx-font-color));
1284
1386
  max-height: 100vh;
1285
1387
  min-height: calc(100vh);
1286
1388
  overflow-y: auto;
1287
1389
  }
1288
1390
 
1289
- .customizerRightPanel {
1290
- border-right: 1px var(--cx-border-style) var(--cx-datatable-border-color)!important;
1291
- }
1292
-
1293
1391
  /*
1294
1392
  * CanvasXpress Customizer Left Items
1295
1393
  */
1296
1394
 
1297
- .customizerLeftItem,
1298
- .customizerLeftItemActive,
1299
- .customizerLeftItemNB {
1395
+ .cX-Customizer-LeftItem,
1396
+ .cX-Customizer-LeftItemActive,
1397
+ .cX-Customizer-LeftItemNB {
1300
1398
  display: grid;
1301
1399
  grid-template-columns: 1fr;
1302
1400
  grid-template-rows: 1fr 4fr;
@@ -1307,192 +1405,219 @@ span.cX-bin::selection {
1307
1405
  align-items: center;
1308
1406
  }
1309
1407
 
1310
- .customizerLeftItem,
1311
- .customizerLeftItemActive {
1312
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
1408
+ .cX-Customizer-LeftItem,
1409
+ .cX-Customizer-LeftItemActive {
1410
+ border: 1px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-datatable-border-color)) !important;
1411
+ border-bottom: 1px solid var(--cx-customizer-border-color, var(--cx-datatable-banner-border-color)) !important;
1412
+ background: var(--cx-customizer-background-color, var(--cx-background-widgets-color));
1313
1413
  }
1314
1414
 
1315
- .customizerLeftItem:hover,
1316
- .customizerLeftItemActive {
1317
- background: var(--cx-background-hover-color);
1415
+ .cX-Customizer-LeftItem:hover,
1416
+ .cX-Customizer-LeftItemActive {
1417
+ background: var(--cx-customizer-hover-color, var(--cx-background-hover-color));
1318
1418
  }
1319
1419
 
1320
- .customizerLeftItem:hover svg,
1321
- .customizerLeftItemActive svg {
1322
- background: rgb(255, 255, 255);
1420
+ .cX-Customizer-LeftItem:hover svg,
1421
+ .cX-Customizer-LeftItemActive svg {
1422
+ background: var(--cx-customizer-background-color, var(--cx-background-widgets-color));
1323
1423
  }
1324
1424
 
1325
- /*
1326
- .customizerLeftPanelTop > *,
1327
- .customizerLeftPanelBottom > *,
1328
- */
1329
- .customizerLeftItem:hover > *,
1330
- .customizerLeftItemActive > *,
1331
- .customizerLeftItemNB > * {
1332
- pointer-events: none;
1425
+ /* First div in the left Panel */
1426
+ .cX-Customizer-LeftItem:first-child:hover svg,
1427
+ .cX-Customizer-LeftItemActive:first-child svg {
1428
+ background: transparent !important;
1429
+ border: 1px solid var(--cx-customizer-close-text-color, #fff) !important;
1430
+ border-radius: var(--cx-border-radius);
1333
1431
  }
1334
1432
 
1433
+ .cX-Customizer-LeftItemActive {
1434
+ background: var(--cx-customizer-hover-color, var(--cx-background-hover-color));
1435
+ color: var(--cx-customizer-text-color, var(--cx-font-color));
1436
+ border-bottom: 4px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-datatable-border-color)) !important;
1437
+ }
1335
1438
 
1336
- .customizerLeftItemNB:hover svg {
1337
- border-color: var(--cx-background-border-hover-color) !important;
1338
- background: var(--cx-background-hover-color) !important;
1439
+ .cX-Customizer-LeftItem:hover > *,
1440
+ .cX-Customizer-LeftItemActive > *,
1441
+ .cX-Customizer-LeftItemNB > * {
1442
+ pointer-events: none;
1339
1443
  }
1340
1444
 
1341
- .customizerLeftItemTop {
1445
+ .cX-Customizer-LeftItemNB:hover svg {
1446
+ border-color: var(--cx-customizer-border-color, var(--cx-background-border-hover-color)) !important;
1447
+ background: var(--cx-customizer-hover-color, var(--cx-background-hover-color)) !important;
1448
+ }
1449
+
1450
+ .cX-Customizer-LeftItemTop {
1342
1451
  grid-area: 1 / 1 / 2 / 2;
1343
1452
  margin: auto;
1344
1453
  margin-top: 5px;
1454
+ font-size: var(--cx-small-font-size);
1345
1455
  }
1346
1456
 
1347
- .customizerLeftItemBottom {
1457
+ .cX-Customizer-LeftItemBottom {
1348
1458
  grid-area: 2 / 1 / 3 / 2;
1349
1459
  margin: auto;
1350
1460
  }
1351
1461
 
1352
- .customizerLeftIcon,
1353
- .customizerLeftIconNB {
1462
+ .cX-Customizer-LeftIcon,
1463
+ .cX-Customizer-LeftIconNB {
1354
1464
  padding: 5px;
1355
1465
  border-radius: var(--cx-border-radius);
1356
1466
  }
1357
1467
 
1358
- .customizerLeftIconNB {
1468
+ .cX-Customizer-LeftIconNB {
1359
1469
  border-width: 1px;
1360
1470
  border-style: solid;
1361
1471
  border-color: var(--cx-color-transparent) !important;
1362
1472
  }
1363
1473
 
1364
- .customizerLeftIcon {
1365
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
1474
+ .cX-Customizer-LeftIcon {
1475
+ border: 1px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-datatable-border-color)) !important;
1366
1476
  }
1367
1477
 
1368
1478
  /*
1369
1479
  * CanvasXpress Customizer Right Items
1370
1480
  */
1371
1481
 
1372
- .customizerRightItem {
1482
+ .cX-Customizer-RightItem {
1373
1483
  display: grid;
1374
1484
  grid-template-columns: 1fr;
1375
1485
  grid-template-rows: 3fr 2fr;
1376
1486
  grid-column-gap: 0px;
1377
1487
  grid-row-gap: 0px;
1378
1488
  border-radius: var(--cx-border-radius);
1379
- width: 95%;
1489
+ border: 1px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-datatable-border-color)) !important;
1490
+ width: 100%;
1491
+ background: var(--cx-customizer-background-color, var(--cx-background-widgets-color));
1492
+ margin: 4px;
1380
1493
  }
1381
1494
 
1382
- .customizerRightItem {
1383
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
1495
+ .cX-Customizer-RightItem:hover {
1496
+ background: var(--cx-customizer-hover-color, var(--cx-background-hover-color));
1497
+ }
1498
+
1499
+ /* Add top border to non-header items that follow another item (for separation) */
1500
+ .cX-Customizer-RightItem + .cX-Customizer-RightItem {
1501
+ border-top: 1px solid var(--cx-customizer-border-color, var(--cx-datatable-border-color)) !important;
1384
1502
  }
1385
1503
 
1386
- .customizerRightItem * {
1504
+ .cX-Customizer-RightItem * {
1387
1505
  pointer-events: none;
1388
1506
  }
1389
1507
 
1390
- .customizerRightItem :first-child input:first-child {
1508
+ .cX-Customizer-RightItem :first-child input:first-child {
1391
1509
  pointer-events: auto;
1392
1510
  }
1393
1511
 
1394
- .customizerRightItemTop {
1512
+ .cX-Customizer-RightItemTop {
1395
1513
  grid-area: 1 / 1 / 2 / 2;
1396
- padding-top: 5px;
1514
+ padding-top: 3px;
1397
1515
  margin: auto;
1398
1516
  }
1399
1517
 
1400
- .customizerRightItemBottom {
1518
+ .cX-Customizer-RightItemBottom {
1401
1519
  display: grid;
1402
1520
  grid-area: 2 / 1 / 3 / 2;
1403
1521
  margin: auto;
1522
+ padding: 0 6px 3px;
1523
+ font-size: var(--cx-small-font-size);
1524
+ color: var(--cx-customizer-text-color, var(--cx-font-color));
1404
1525
  }
1405
1526
 
1406
1527
  /*
1407
1528
  * CanvasXpress Customizer Right Items Comb
1408
1529
  */
1409
1530
 
1410
- .customizerRightItemCombo {
1531
+ .cX-Customizer-RightItemCombo {
1411
1532
  display: grid;
1412
- grid-template-columns: 1fr 5fr;
1533
+ grid-template-columns: 1fr 4.5fr;
1413
1534
  grid-template-rows: 2fr 1fr;
1414
- grid-column-gap: 0px;
1535
+ grid-column-gap: 2px;
1415
1536
  grid-row-gap: 0px;
1537
+ border-top: 1px solid var(--cx-customizer-border-color, var(--cx-datatable-border-color));
1538
+ min-height: 28px;
1539
+ background: var(--cx-customizer-background-color, var(--cx-background-widgets-color));
1540
+ width: 100%;
1541
+ box-sizing: border-box;
1416
1542
  }
1417
1543
 
1418
- .customizerRightItemCombo {
1419
- border-top: 1px var(--cx-border-style) var(--cx-datatable-border-color);
1544
+ .cX-Customizer-ContainerComboGroup {
1545
+ box-sizing: border-box;
1546
+ border-bottom-left-radius: var(--cx-border-radius);
1547
+ border-bottom-right-radius: var(--cx-border-radius);
1548
+ overflow: hidden;
1420
1549
  }
1421
1550
 
1422
- .customizerRightItemComboNB {
1423
- display: grid;
1424
- grid-template-columns: 1fr 5fr;
1425
- grid-template-rows: 2fr 1fr;
1426
- grid-column-gap: 0px;
1427
- grid-row-gap: 0px;
1428
- border: none !important;
1551
+ .cX-Customizer-ContainerComboGroup > .cX-Customizer-RightItemCombo:last-child {
1552
+ border-bottom-left-radius: var(--cx-border-radius);
1553
+ border-bottom-right-radius: var(--cx-border-radius);
1429
1554
  }
1430
1555
 
1431
- .customizerRightItemComboLeft {
1432
- grid-area: 1 / 1 / 3 / 2;
1556
+
1557
+ .cX-Customizer-RightItemComboLeft {
1558
+ grid-area: 1 / 1 / -1 / 2;
1433
1559
  display: flex;
1434
1560
  align-items: center;
1435
1561
  justify-content: center;
1436
1562
  }
1437
1563
 
1438
- .customizerRightItemComboTopRight {
1564
+ .cX-Customizer-RightItemComboTopRight {
1439
1565
  grid-area: 1 / 2 / 2 / 3;
1440
1566
  display: flex;
1441
1567
  align-items: center;
1442
1568
  justify-content: center;
1443
1569
  }
1444
1570
 
1445
- .customizerRightItemComboBottomRight {
1571
+ .cX-Customizer-RightItemComboBottomRight {
1446
1572
  grid-area: 2 / 2 / 3 / 3;
1447
1573
  display: flex;
1448
1574
  align-items: center;
1449
- padding-left: 15px;
1575
+ padding-left: 6px;
1450
1576
  padding-bottom: 2px;
1577
+ font-size: var(--cx-small-font-size);
1451
1578
  }
1452
1579
 
1453
1580
  /*
1454
1581
  * CanvasXpress Customizer Right Item Header
1455
1582
  */
1456
1583
 
1457
- .customizerRightItemHeader,
1458
- .customizerRightItemHeaderNB {
1584
+ .cX-Customizer-RightItemHeader,
1585
+ .cX-Customizer-RightItemHeaderNB {
1459
1586
  display: grid;
1460
1587
  grid-template-columns: 1fr;
1461
- grid-template-rows: 2fr 1fr;
1588
+ grid-template-rows: auto;
1462
1589
  grid-column-gap: 0px;
1463
1590
  grid-row-gap: 0px;
1464
- color: var(--cx-font-color);
1465
- padding-left: 5px;
1466
- }
1467
-
1468
- .customizerRightItemHeader,
1469
- .customizerRightItemHeaderNB {
1470
1591
  background: var(--cx-background-hover-color);
1592
+ color: var(--cx-font-color);
1593
+ padding: 2px 3px;
1594
+ font-size: var(--cx-medium-font-size);
1471
1595
  }
1472
1596
 
1473
- .customizerRightItemHeader {
1474
- border-bottom: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
1597
+ .cX-Customizer-RightItemHeader {
1598
+ border-bottom: 1px solid var(--cx-datatable-border-color) !important;
1475
1599
  }
1476
1600
 
1477
- .customizerRightItemHeaderNB {
1601
+ .cX-Customizer-RightItemHeaderNB {
1478
1602
  border-bottom: none !important;
1479
1603
  }
1480
1604
 
1481
- .customizerRightItemHeaderTop {
1482
- grid-area: 1 / 1 / 2 / 2;
1605
+ .cX-Customizer-RightItemHeaderTop {
1483
1606
  display: flex;
1484
1607
  align-items: center;
1608
+ min-height: 18px;
1485
1609
  }
1486
1610
 
1487
- .customizerRightItemHeaderBottom {
1488
- grid-area: 2 / 1 / 3 / 2;
1611
+ .cX-Customizer-RightItemHeaderBottom {
1489
1612
  display: flex;
1490
1613
  align-items: center;
1491
- padding-left: 10px;
1614
+ padding-left: 5px;
1492
1615
  overflow: auto;
1616
+ font-size: var(--cx-x-small-font-size);
1617
+ color: var(--cx-font-color);
1493
1618
  }
1494
1619
 
1495
- .customizerRightItemHeaderMain {
1620
+ .cX-Customizer-RightItemHeaderMain {
1496
1621
  grid-area: 1 / 1 / 3 / 2;
1497
1622
  display: flex;
1498
1623
  align-items: center;
@@ -1502,31 +1627,16 @@ span.cX-bin::selection {
1502
1627
  * CanvasXpress Customizer Right Item Sub Header
1503
1628
  */
1504
1629
 
1505
- .customizerRightItemSubHeader {
1506
- display: grid;
1507
- grid-template-columns: 1fr;
1508
- grid-template-rows: 1fr;
1509
- grid-column-gap: 0px;
1510
- grid-row-gap: 0px;
1511
- }
1512
-
1513
- .customizerRightItemSubHeader {
1514
- background: var(--cx-background-hover-color);
1515
- }
1516
-
1517
- .customizerRightItemSubHeaderRow {
1630
+ .cX-Customizer-RightItemSubHeaderRow {
1518
1631
  grid-area: 1 / 1 / 2 / 2;
1519
1632
  display: flex;
1520
1633
  align-items: center;
1521
1634
  }
1522
1635
 
1523
- .customizerRightItemSubHeaderRaw {
1636
+ .cX-Customizer-RightItemSubHeaderRaw {
1524
1637
  display: flex;
1525
1638
  align-items: center;
1526
1639
  border-radius: var(--cx-border-radius);
1527
- }
1528
-
1529
- .customizerRightItemSubHeaderRaw {
1530
1640
  border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
1531
1641
  background-color: var(--cx-background-hover-color);
1532
1642
  }
@@ -1535,233 +1645,259 @@ span.cX-bin::selection {
1535
1645
  * CanvasXpress Customizer Right Item Launcher
1536
1646
  */
1537
1647
 
1538
- .customizerRightItemLauncher {
1648
+ .cX-Customizer-RightItemLauncher {
1539
1649
  display: grid;
1540
1650
  grid-template-columns: 1fr 6fr;
1541
1651
  grid-template-rows: 1fr;
1542
1652
  grid-column-gap: 0px;
1543
1653
  grid-row-gap: 0px;
1654
+ width: 100%;
1655
+ box-sizing: border-box;
1656
+ border: none !important;
1657
+ box-shadow: none !important;
1658
+ min-height: 34px;
1659
+ background: var(--cx-background-widgets-color);
1660
+ overflow: hidden;
1544
1661
  }
1545
1662
 
1546
- .customizerRightItemLauncher {
1547
- border-top: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
1548
- }
1549
-
1550
- .customizerRightItemLauncher *,
1551
- .customizerRightItemLauncherNB * {
1663
+ .cX-Customizer-RightItemLauncher *,
1664
+ .cX-Customizer-RightItemLauncherNB * {
1552
1665
  pointer-events: none;
1553
1666
  }
1554
1667
 
1555
- .customizerRightItemLauncherNB > :last-child input:first-child {
1668
+ .cX-Customizer-RightItemLauncherNB > :last-child input:first-child {
1556
1669
  pointer-events: auto;
1557
1670
  }
1558
1671
 
1559
- .customizerRightItemLauncherNB {
1672
+ .cX-Customizer-RightItemLauncherNB {
1560
1673
  display: grid;
1561
1674
  grid-template-columns: 1fr 6fr;
1562
1675
  grid-template-rows: 1fr;
1563
1676
  grid-column-gap: 0px;
1564
1677
  grid-row-gap: 0px;
1678
+ width: 100%;
1679
+ box-sizing: border-box;
1565
1680
  border: none !important;
1681
+ box-shadow: none !important;
1682
+ overflow: hidden;
1566
1683
  }
1567
1684
 
1568
- .customizerRightItemLauncher:hover,
1569
- .customizerRightItemLauncherNB:hover {
1570
- background-color: var(--cx-background-hover-color);
1571
- }
1572
-
1573
- .customizerRightItemLauncherLeft {
1574
- grid-area: 1 / 1 / 2 / 2;
1575
- display: flex;
1576
- align-items: center;
1577
- justify-content: center;
1685
+ /* Launcher groups use the wrapper border; rows only get internal separators */
1686
+ .cX-Customizer-Container > .cX-Customizer-RightItemLauncher + .cX-Customizer-RightItemLauncher,
1687
+ .cX-Customizer-Container > .cX-Customizer-RightItemLauncherNB + .cX-Customizer-RightItemLauncher,
1688
+ .cX-Customizer-Container > .cX-Customizer-RightItemLauncher + .cX-Customizer-RightItemLauncherNB,
1689
+ .cX-Customizer-Container > .cX-Customizer-RightItemLauncherNB + .cX-Customizer-RightItemLauncherNB {
1690
+ border-top: 1px solid var(--cx-datatable-banner-border-color) !important;
1578
1691
  }
1579
1692
 
1580
- .customizerRightItemLauncherLeft {
1581
- background-color: var(--cx-background-hover-color);
1693
+ /* Override inline launcher width so rows do not cover the wrapper right border */
1694
+ .cX-Customizer-Container > .cX-Customizer-RightItemLauncher,
1695
+ .cX-Customizer-Container > .cX-Customizer-RightItemLauncherNB {
1696
+ width: calc(100% - 2px) !important;
1697
+ margin-left: 1px;
1698
+ margin-right: 1px;
1582
1699
  }
1583
1700
 
1584
- .customizerRightItemLauncherRight {
1585
- grid-area: 1 / 2 / 2 / 3;
1586
- display: flex;
1587
- align-items: center;
1588
- padding-left: 5px;
1701
+ /* Preserve bottom corner rounding on the last launcher row in each section */
1702
+ .cX-Customizer-Container > .cX-Customizer-RightItemLauncher:last-child,
1703
+ .cX-Customizer-Container > .cX-Customizer-RightItemLauncherNB:last-child {
1704
+ border-bottom-left-radius: 6px;
1705
+ border-bottom-right-radius: 6px;
1589
1706
  }
1590
1707
 
1591
- /*
1592
- * CanvasXpress Customizer Right Item Input
1593
- */
1594
-
1595
- .customizerRightItemInput {
1596
- display: grid;
1597
- grid-template-columns: 1fr 6fr;
1598
- grid-template-rows: repeat(2, 1fr);
1599
- grid-column-gap: 0px;
1600
- grid-row-gap: 0px;
1708
+ .cX-Customizer-RightItemLauncher:hover,
1709
+ .cX-Customizer-RightItemLauncherNB:hover {
1710
+ background-color: var(--cx-customizer-hover-color);
1601
1711
  }
1602
1712
 
1603
- .customizerRightItemInputTopLeft {
1713
+ .cX-Customizer-RightItemLauncherLeft {
1604
1714
  grid-area: 1 / 1 / 2 / 2;
1605
1715
  display: flex;
1606
1716
  align-items: center;
1717
+ justify-content: center;
1718
+ background-color: var(--cx-customizer-hover-color);
1607
1719
  }
1608
1720
 
1609
- .customizerRightItemInputTopRight {
1721
+ .cX-Customizer-RightItemLauncherRight {
1610
1722
  grid-area: 1 / 2 / 2 / 3;
1611
1723
  display: flex;
1612
1724
  align-items: center;
1613
- }
1614
-
1615
- .customizerRightItemInputBottom {
1616
- grid-area: 2 / 1 / 3 / 3;
1617
- display: flex;
1618
- align-items: center;
1725
+ padding-left: 8px;
1726
+ min-width: 0;
1727
+ max-width: 100%;
1728
+ overflow: hidden;
1619
1729
  }
1620
1730
 
1621
1731
  /*
1622
1732
  * CanvasXpress Customizer Right Item Cols
1623
1733
  */
1624
1734
 
1625
- .customizerRightItemFullCol {
1735
+ .cX-Customizer-RightItemFullCol {
1626
1736
  display: grid;
1627
1737
  grid-template-columns: 1fr;
1628
1738
  grid-template-rows: 1fr;
1629
1739
  grid-column-gap: 0px;
1630
1740
  grid-row-gap: 0px;
1631
- margin: 5px;
1741
+ margin: 3px;
1632
1742
  height: fit-content;
1633
1743
  }
1634
1744
 
1635
- .customizerRightItemHalfCol {
1745
+ .cX-Customizer-RightItemHalfCol {
1636
1746
  display: grid;
1637
1747
  grid-template-columns: repeat(2, 1fr);
1638
1748
  grid-template-rows: 1fr;
1639
1749
  grid-column-gap: 0px;
1640
1750
  grid-row-gap: 0px;
1641
- margin: 5px;
1751
+ margin: 3px;
1642
1752
  height: fit-content;
1643
1753
  }
1644
1754
 
1645
- .customizerRightItemThirdCol {
1755
+ .cX-Customizer-RightItemThirdCol {
1646
1756
  display: grid;
1647
1757
  grid-template-columns: repeat(3, 1fr);
1648
1758
  grid-template-rows: 1fr;
1649
1759
  grid-column-gap: 0px;
1650
1760
  grid-row-gap: 0px;
1651
- margin: 5px;
1761
+ margin: 3px;
1652
1762
  height: fit-content;
1653
1763
  }
1654
1764
 
1655
- .customizerRightItemFourthCol {
1765
+ .cX-Customizer-RightItemFourthCol {
1656
1766
  display: grid;
1657
1767
  grid-template-columns: repeat(4, 1fr);
1658
1768
  grid-template-rows: 1fr;
1659
1769
  grid-column-gap: 0px;
1660
1770
  grid-row-gap: 0px;
1661
- margin: 5px;
1771
+ margin: 3px;
1662
1772
  height: fit-content;
1663
1773
  }
1664
1774
 
1665
- .customizerRightItemFifthCol {
1775
+ .cX-Customizer-RightItemFifthCol {
1666
1776
  display: grid;
1667
1777
  grid-template-columns: repeat(5, 1fr);
1668
1778
  grid-template-rows: 1fr;
1669
1779
  grid-column-gap: 0px;
1670
1780
  grid-row-gap: 0px;
1671
- margin: 5px;
1781
+ margin: 3px;
1672
1782
  height: fit-content;
1673
1783
  }
1674
1784
 
1675
- .customizerRightItemSixthCol {
1785
+ .cX-Customizer-RightItemSixthCol {
1676
1786
  display: grid;
1677
1787
  grid-template-columns: repeat(6, 1fr);
1678
1788
  grid-template-rows: 1fr;
1679
1789
  grid-column-gap: 0px;
1680
1790
  grid-row-gap: 0px;
1681
- margin: 5px;
1791
+ margin: 3px;
1682
1792
  height: fit-content;
1683
1793
  }
1684
1794
 
1685
- .customizerRightItemCol1 {
1686
- grid-area: 1 / 1 / 2 / 2;
1795
+ .cX-Customizer-RightItemCol1,
1796
+ .cX-Customizer-RightItemCol2,
1797
+ .cX-Customizer-RightItemCol3,
1798
+ .cX-Customizer-RightItemCol4,
1799
+ .cX-Customizer-RightItemCol5,
1800
+ .cX-Customizer-RightItemCol6 {
1687
1801
  display: flex;
1688
1802
  align-items: center;
1689
1803
  justify-content: center;
1804
+ flex: 1 1 0%;
1805
+ min-width: 0;
1806
+ }
1807
+
1808
+ .cX-Customizer-RightItemCol1 {
1809
+ grid-area: 1 / 1 / 2 / 2;
1690
1810
  }
1691
1811
 
1692
- .customizerRightItemCol2 {
1812
+ .cX-Customizer-RightItemCol2 {
1693
1813
  grid-area: 1 / 2 / 2 / 3;
1694
- display: flex;
1695
- align-items: center;
1696
- justify-content: center;
1697
1814
  }
1698
1815
 
1699
- .customizerRightItemCol3 {
1816
+ .cX-Customizer-RightItemCol3 {
1700
1817
  grid-area: 1 / 3 / 2 / 4;
1701
- display: flex;
1702
- align-items: center;
1703
- justify-content: center;
1704
1818
  }
1705
1819
 
1706
- .customizerRightItemCol4 {
1820
+ .cX-Customizer-RightItemCol4 {
1707
1821
  grid-area: 1 / 4 / 2 / 5;
1708
- display: flex;
1709
- align-items: center;
1710
- justify-content: center;
1711
1822
  }
1712
1823
 
1713
- .customizerRightItemCol5 {
1824
+ .cX-Customizer-RightItemCol5 {
1714
1825
  grid-area: 1 / 5 / 2 / 6;
1715
- display: flex;
1716
- align-items: center;
1717
- justify-content: center;
1718
1826
  }
1719
1827
 
1720
- .customizerRightItemCol6 {
1828
+ .cX-Customizer-RightItemCol6 {
1721
1829
  grid-area: 1 / 6 / 2 / 7;
1830
+ }
1831
+
1832
+ .cX-Customizer-RightItemGrid .cX-Customizer-RightItemColor {
1722
1833
  display: flex;
1723
1834
  align-items: center;
1724
1835
  justify-content: center;
1836
+ width: 100%;
1837
+ height: 100%;
1838
+ }
1839
+
1840
+ .cX-Customizer-RightItemGrid .cX-Customizer-RightItemColor > .cX-Customizer-RightItemCol1 {
1841
+ width: 100%;
1842
+ }
1843
+
1844
+ .cX-Customizer-RightItemGrid .cX-Customizer-RightItemColor input[type="color"] {
1845
+ width: 26px !important;
1846
+ height: 26px !important;
1847
+ }
1848
+
1849
+ .cX-Customizer-ContainerRaw.cX-Customizer-RightItemText .cX-Customizer-RightItemColor input[type="color"] {
1850
+ width: 26px !important;
1851
+ height: 26px !important;
1725
1852
  }
1726
1853
 
1727
- .customizerRightItemColMid {
1854
+ .cX-Customizer-RightItemColMid {
1728
1855
  grid-area: 1 / 3 / 2 / 5;
1729
1856
  display: flex;
1730
1857
  align-items: center;
1731
1858
  justify-content: center;
1732
1859
  border-radius: var(--cx-border-radius);
1860
+ border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
1733
1861
  }
1734
1862
 
1735
- .customizerRightItemColMid {
1736
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
1863
+ .cX-Customizer-RightItemSelect>select:hover,
1864
+ .cX-Customizer-RightItemTextArea > textarea {
1865
+ overflow: hidden;
1866
+ resize: none;
1867
+ box-sizing: border-box;
1868
+ display: flex;
1869
+ align-items: center;
1870
+ vertical-align: middle;
1871
+ padding-top: 0;
1872
+ padding-bottom: 0;
1873
+ line-height: normal;
1737
1874
  }
1738
1875
 
1739
- .customizerRightItemSelect>select:hover,
1740
- .customizerRightItemTextArea>svg:hover,
1741
- .customizerRightItemTextArea>textarea:hover,
1742
- .customizerContainerRaw>svg:hover,
1743
- .customizerRightItemCol1>svg:hover,
1744
- .customizerRightItemCol2>svg:hover,
1745
- .customizerRightItemCol3>svg:hover,
1746
- .customizerRightItemCol4>svg:hover,
1747
- .customizerRightItemCol5>svg:hover,
1748
- .customizerRightItemCol6>svg:hover,
1749
- .customizerRightItem:hover {
1750
- background-color: var(--cx-background-hover-color);
1876
+ .cX-Customizer-RightItemTextArea>svg:hover,
1877
+ .cX-Customizer-RightItemTextArea>textarea:hover,
1878
+ .cX-Customizer-ContainerRaw>svg:hover,
1879
+ .cX-Customizer-RightItemCol1>svg:hover,
1880
+ .cX-Customizer-RightItemCol2>svg:hover,
1881
+ .cX-Customizer-RightItemCol3>svg:hover,
1882
+ .cX-Customizer-RightItemCol4>svg:hover,
1883
+ .cX-Customizer-RightItemCol5>svg:hover,
1884
+ .cX-Customizer-RightItemCol6>svg:hover,
1885
+ .cX-Customizer-RightItem:hover {
1886
+ background-color: var(--cx-customizer-hover-color);
1751
1887
  }
1752
1888
 
1753
1889
  /*
1754
1890
  * Other Customizer classes
1755
1891
  */
1756
1892
 
1757
- .customizerContainer {
1893
+ .cX-Customizer-Container {
1758
1894
  height: fit-content;
1759
1895
  border-radius: var(--cx-border-radius);
1760
- margin: 10px;
1896
+ margin: 6px;
1761
1897
  float: left;
1762
1898
  }
1763
1899
 
1764
- .customizerWrangling {
1900
+ .cX-Customizer-Wrangling {
1765
1901
  height: 204px;
1766
1902
  margin: 0px 0px 10px 10px;
1767
1903
  border-radius: var(--cx-border-radius);
@@ -1769,15 +1905,15 @@ span.cX-bin::selection {
1769
1905
  overflow-x: hidden;
1770
1906
  }
1771
1907
 
1772
- .customizerNumeric,
1773
- .customizerString,
1774
- .customizerUnique,
1775
- .customizerWrangling,
1776
- .customizerContainer {
1908
+ .cX-Customizer-Numeric,
1909
+ .cX-Customizer-String,
1910
+ .cX-Customizer-Unique,
1911
+ .cX-Customizer-Wrangling,
1912
+ .cX-Customizer-Container {
1777
1913
  border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
1778
1914
  }
1779
1915
 
1780
- .customizerWrangling:hover {
1916
+ .cX-Customizer-Wrangling:hover {
1781
1917
  border: 1px dashed var(--cx-color-red) !important;
1782
1918
  }
1783
1919
 
@@ -1786,19 +1922,19 @@ span.cX-bin::selection {
1786
1922
  * containers for moving in the wrangling *
1787
1923
  ***************************************************/
1788
1924
 
1789
- .customizerNumeric,
1790
- .customizerString,
1791
- .customizerUnique,
1792
- .customizerListNumeric,
1793
- .customizerListString,
1794
- .customizerListUnique {
1925
+ .cX-Customizer-Numeric,
1926
+ .cX-Customizer-String,
1927
+ .cX-Customizer-Unique,
1928
+ .cX-Customizer-ListNumeric,
1929
+ .cX-Customizer-ListString,
1930
+ .cX-Customizer-ListUnique {
1795
1931
  margin-top: 3px !important;
1796
1932
  display: block;
1797
1933
  }
1798
1934
 
1799
1935
  /***************************************************/
1800
1936
 
1801
- .customizerContainerRaw {
1937
+ .cX-Customizer-ContainerRaw {
1802
1938
  border: none !important;
1803
1939
  float: left;
1804
1940
  display: flex;
@@ -1806,7 +1942,20 @@ span.cX-bin::selection {
1806
1942
  justify-content: center;
1807
1943
  }
1808
1944
 
1809
- .customizerMask {
1945
+ /* Keep text+icon group labels compact so long labels don't make items look uneven */
1946
+ .cX-Customizer-ContainerRaw.cX-Customizer-RightItemTextImagesGroup .cX-Customizer-RightItemBottom {
1947
+ font-size: var(--cx-x-small-font-size);
1948
+ line-height: 1.05;
1949
+ }
1950
+
1951
+ .cX-Customizer-ContainerRaw.cX-Customizer-RightItemTextImagesGroup .cX-Customizer-RightItemBottom > span:first-child {
1952
+ white-space: nowrap;
1953
+ overflow: hidden;
1954
+ text-overflow: ellipsis;
1955
+ max-width: 100%;
1956
+ }
1957
+
1958
+ .cX-Customizer-Mask {
1810
1959
  background: var(--cx-color-transparent) !important;
1811
1960
  border: 0px none !important;
1812
1961
  box-shadow: 0 0 0px var(--cx-color-transparent) !important;
@@ -1818,9 +1967,9 @@ span.cX-bin::selection {
1818
1967
  height: 20px;
1819
1968
  }
1820
1969
 
1821
- .customizerNumeric,
1822
- .customizerString,
1823
- .customizerUnique {
1970
+ .cX-Customizer-Numeric,
1971
+ .cX-Customizer-String,
1972
+ .cX-Customizer-Unique {
1824
1973
  border-radius: var(--cx-border-radius);
1825
1974
  cursor: move;
1826
1975
  margin: 3px;
@@ -1833,26 +1982,25 @@ span.cX-bin::selection {
1833
1982
  position: relative;
1834
1983
  }
1835
1984
 
1836
- .customizerNumeric {
1985
+ .cX-Customizer-Numeric {
1837
1986
  color: var(--cx-font-color);
1838
1987
  background-color: var(--cx-color-transparent);
1839
1988
  }
1840
1989
 
1841
- .customizerString {
1990
+ .cX-Customizer-String {
1842
1991
  color: var(--cx-color-green);
1843
1992
  background-color: var(--cx-color-transparent);
1844
1993
  }
1845
1994
 
1846
- .customizerUnique {
1995
+ .cX-Customizer-Unique {
1847
1996
  color: var(--cx-color-blue);
1848
1997
  background-color: var(--cx-color-transparent);
1849
1998
  }
1850
- .customizerListNumeric,
1851
- .customizerListString,
1852
- .customizerListUnique {
1999
+ .cX-Customizer-ListNumeric,
2000
+ .cX-Customizer-ListString,
2001
+ .cX-Customizer-ListUnique {
1853
2002
  border: none;
1854
2003
  cursor: move;
1855
- color: var(--cx-font-color);
1856
2004
  margin: 0;
1857
2005
  padding: 0 0 0 3px;
1858
2006
  width: 350px;
@@ -1861,63 +2009,53 @@ span.cX-bin::selection {
1861
2009
  text-align: start;
1862
2010
  overflow: hidden;
1863
2011
  position: relative;
2012
+ background-color: var(--cx-color-transparent);
1864
2013
  }
1865
2014
 
1866
- .customizerListNumeric {
2015
+ .cX-Customizer-ListNumeric {
1867
2016
  color: var(--cx-font-color);
1868
2017
  }
1869
2018
 
1870
- .customizerListString {
2019
+ .cX-Customizer-ListString {
1871
2020
  color: var(--cx-color-green);
1872
2021
  }
1873
2022
 
1874
- .customizerListUnique {
2023
+ .cX-Customizer-ListUnique {
1875
2024
  color: var(--cx-color-blue);
1876
2025
  }
1877
2026
 
1878
- .customizerListNumeric,
1879
- .customizerListString,
1880
- .customizerListUnique {
1881
- background-color: var(--cx-color-transparent);
1882
- }
1883
-
1884
- .customizerListNumeric:hover,
1885
- .customizerListString:hover,
1886
- .customizerListUnique:hover {
1887
- background: var(--cx-background-hover-color);
2027
+ .cX-Customizer-ListNumeric:hover,
2028
+ .cX-Customizer-ListString:hover,
2029
+ .cX-Customizer-ListUnique:hover {
2030
+ background: var(--cx-customizer-hover-color);
1888
2031
  }
1889
2032
 
1890
- .customizerListNumeric:before,
1891
- .customizerListString:before,
1892
- .customizerListUnique:before {
2033
+ .cX-Customizer-ListNumeric:before,
2034
+ .cX-Customizer-ListString:before,
2035
+ .cX-Customizer-ListUnique:before {
1893
2036
  font: normal 10px courier;
1894
- }
1895
-
1896
- .customizerListNumeric:before,
1897
- .customizerListString:before,
1898
- .customizerListUnique:before {
1899
2037
  color: var(--cx-background-color);
1900
2038
  }
1901
2039
 
1902
- .customizerListNumeric:before {
2040
+ .cX-Customizer-ListNumeric:before {
1903
2041
  content: "\00a0#\00a0\00a0";
1904
2042
  }
1905
2043
 
1906
- .customizerListString:before {
2044
+ .cX-Customizer-ListString:before {
1907
2045
  content: "Abc\00a0";
1908
2046
  }
1909
2047
 
1910
- .customizerListUnique:before {
2048
+ .cX-Customizer-ListUnique:before {
1911
2049
  content: "Unq\00a0";
1912
2050
  }
1913
2051
 
1914
- .customizerMask::selection,
1915
- .customizerNumeric::selection,
1916
- .customizerString::selection,
1917
- .customizerUnique::selection,
1918
- .customizerListNumeric::selection,
1919
- .customizerListString::selection,
1920
- .customizerListUnique::selection {
2052
+ .cX-Customizer-Mask::selection,
2053
+ .cX-Customizer-Numeric::selection,
2054
+ .cX-Customizer-String::selection,
2055
+ .cX-Customizer-Unique::selection,
2056
+ .cX-Customizer-ListNumeric::selection,
2057
+ .cX-Customizer-ListString::selection,
2058
+ .cX-Customizer-ListUnique::selection {
1921
2059
  background: var(--cx-color-transparent);
1922
2060
  color: var(--cx-color-black);
1923
2061
  padding: 0;
@@ -1927,47 +2065,88 @@ span.cX-bin::selection {
1927
2065
  * Search Customizer
1928
2066
  */
1929
2067
 
1930
- input.customizerSearch {
1931
- margin: 9px;
1932
- background-color: var( --cx-background-widgets-color);
2068
+ select.cX-Customizer-Search,
2069
+ input.cX-Customizer-Search {
2070
+ margin: 6px;
2071
+ background-color: var(--cx-background-widgets-color);
1933
2072
  color: var(--cx-font-color);
1934
2073
  cursor: default;
1935
2074
  font: inherit;
1936
- height: 40px;
1937
- border-radius: 4px;
2075
+ height: 32px;
2076
+ border-radius: var(--cx-border-radius);
2077
+ border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
1938
2078
  float: left;
1939
2079
  clear: left;
1940
2080
  }
1941
2081
 
1942
- select.customizerSearch,
1943
- input.customizerSearch {
1944
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
2082
+ select.cX-Customizer-Search {
2083
+ padding-left: 3px;
2084
+ }
2085
+
2086
+ select.cX-Customizer-Search[size]:not([size="1"]) {
2087
+ height: auto;
1945
2088
  }
1946
2089
 
1947
- input.customizerSearch[type="color"] {
2090
+ input.cX-Customizer-Search[type="color"] {
1948
2091
  padding: 0;
1949
2092
  overflow: hidden;
1950
2093
  }
1951
2094
 
1952
- input.customizerSearch:not([type="color"]) {
1953
- padding: 5px;
2095
+ input.cX-Customizer-Search:not([type="color"]) {
2096
+ padding: 4px 6px;
1954
2097
  }
1955
2098
 
1956
- select.customizerSearch {
1957
- margin: 9px;
1958
- background-color: var( --cx-background-widgets-color);
1959
- color: var(--cx-font-color);
1960
- cursor: default;
1961
- font: inherit;
1962
- padding-left: 3px;
1963
- border-radius: 4px;
1964
- float: left;
1965
- clear: left;
2099
+ input[type="search"].cX-Customizer-SearchInput::-webkit-search-cancel-button {
2100
+ -webkit-appearance: auto;
2101
+ height: 16px;
2102
+ width: 16px;
2103
+ cursor: pointer;
2104
+ }
2105
+
2106
+ /* Compact, sidebar-like right-widget overrides */
2107
+ .cX-Customizer-RightPanel .cX-Customizer-RightItem,
2108
+ .cX-Customizer-RightPanel .cX-Customizer-RightItemHeader,
2109
+ .cX-Customizer-RightPanel .cX-Customizer-RightItemHeaderNB,
2110
+ .cX-Customizer-RightPanel .cX-Customizer-RightItemSubHeaderRaw,
2111
+ .cX-Customizer-RightPanel .cX-Customizer-Container,
2112
+ .cX-Customizer-RightPanel .cX-Customizer-Numeric,
2113
+ .cX-Customizer-RightPanel .cX-Customizer-String,
2114
+ .cX-Customizer-RightPanel .cX-Customizer-Unique,
2115
+ .cX-Customizer-RightPanel .cX-Customizer-Wrangling {
2116
+ border-color: var(--cx-datatable-banner-border-color) !important;
2117
+ border-radius: var(--cx-border-radius) !important;
2118
+ }
2119
+
2120
+ .cX-Customizer-RightPanel .cX-Customizer-RightItemHeader,
2121
+ .cX-Customizer-RightPanel .cX-Customizer-RightItemHeaderS {
2122
+ border-radius: var(--cx-border-radius) var(--cx-border-radius) 0 0 !important;
1966
2123
  }
1967
2124
 
1968
- span.customizerSearch {
2125
+ /* Headers that control sibling content keep square bottom corners */
2126
+ .cX-Customizer-RightPanel .cX-Customizer-RightItemHeader.cX-Customizer-RightItemHeaderLink,
2127
+ .cX-Customizer-RightPanel .cX-Customizer-RightItemHeaderS.cX-Customizer-RightItemHeaderLink {
2128
+ border-radius: var(--cx-border-radius) var(--cx-border-radius) 0 0 !important;
2129
+ }
2130
+
2131
+ /* Apply the same sibling-header shape everywhere these header-link widgets appear */
2132
+ .cX-Customizer-RightItemHeader.cX-Customizer-RightItemHeaderLink,
2133
+ .cX-Customizer-RightItemHeaderS.cX-Customizer-RightItemHeaderLink {
2134
+ border-radius: var(--cx-border-radius) var(--cx-border-radius) 0 0 !important;
2135
+ border-bottom-left-radius: 0 !important;
2136
+ border-bottom-right-radius: 0 !important;
2137
+ }
2138
+
2139
+ .cX-Customizer-RightPanel .cX-Customizer-RightItemTextArea > textarea,
2140
+ .cX-Customizer-RightPanel .cX-Customizer-RightItemSelect > select,
2141
+ .cX-Customizer-RightPanel input.cX-Customizer-Search,
2142
+ .cX-Customizer-RightPanel select.cX-Customizer-Search {
2143
+ font-size: var(--cx-small-font-size) !important;
2144
+ }
2145
+
2146
+ span.cX-Customizer-Search {
1969
2147
  color: var(--cx-font-color);
1970
2148
  font: inherit;
2149
+ font-size: var(--cx-small-font-size);
1971
2150
  line-height: 20px;
1972
2151
  list-style: none;
1973
2152
  position: relative;
@@ -1976,11 +2155,12 @@ span.customizerSearch {
1976
2155
  clear: left;
1977
2156
  }
1978
2157
 
1979
- span.customizerSearchSelect,
1980
- span.customizerSearchDescription,
1981
- span.customizerSearchCategory,
1982
- span.customizerSearchCurrent {
2158
+ span.cX-Customizer-SearchSelect,
2159
+ span.cX-Customizer-SearchDescription,
2160
+ span.cX-Customizer-SearchCategory,
2161
+ span.cX-Customizer-SearchCurrent {
1983
2162
  font: inherit;
2163
+ font-size: var(--cx-customizer-font-size, var(--cx-font-size));
1984
2164
  line-height: 28px;
1985
2165
  list-style: none;
1986
2166
  position: relative;
@@ -1991,61 +2171,61 @@ span.customizerSearchCurrent {
1991
2171
  left: 15px;
1992
2172
  }
1993
2173
 
1994
- span.customizerSearchSelect {
2174
+ span.cX-Customizer-SearchSelect {
1995
2175
  color: var(--cx-font-color);
1996
2176
  }
1997
2177
 
1998
- span.customizerSearchDescription,
1999
- span.customizerSearchCategory {
2178
+ span.cX-Customizer-SearchDescription,
2179
+ span.cX-Customizer-SearchCategory {
2000
2180
  overflow: hidden;
2001
2181
  text-overflow: ellipsis;
2002
2182
  white-space: nowrap;
2003
2183
  }
2004
2184
 
2005
- span.customizerSearchDescription,
2006
- span.customizerSearchCategory,
2007
- span.customizerSearchCurrent {
2185
+ span.cX-Customizer-SearchDescription,
2186
+ span.cX-Customizer-SearchCategory,
2187
+ span.cX-Customizer-SearchCurrent {
2008
2188
  color: var(--cx-background-color);
2009
2189
  }
2010
2190
 
2011
- span.customizerSearchSelect:before {
2191
+ span.cX-Customizer-SearchSelect:before {
2012
2192
  color: var(--cx-font-color);
2013
2193
  font-weight: bold;
2014
2194
  content: "Select property (";
2015
2195
  }
2016
2196
 
2017
- span.customizerSearchSelect:after {
2197
+ span.cX-Customizer-SearchSelect:after {
2018
2198
  color: var(--cx-font-color);
2019
2199
  font-weight: bold;
2020
2200
  content: ")";
2021
2201
  }
2022
2202
 
2023
- span.customizerSearchDescription:before {
2203
+ span.cX-Customizer-SearchDescription:before {
2024
2204
  color: var(--cx-font-color);
2025
2205
  font-weight: bold;
2026
2206
  content: "Description [ ";
2027
2207
  }
2028
2208
 
2029
- span.customizerSearchCategory:before {
2209
+ span.cX-Customizer-SearchCategory:before {
2030
2210
  color: var(--cx-font-color);
2031
2211
  font-weight: bold;
2032
2212
  content: "Category [ ";
2033
2213
  }
2034
2214
 
2035
- span.customizerSearchDescription:after,
2036
- span.customizerSearchCategory:after {
2215
+ span.cX-Customizer-SearchDescription:after,
2216
+ span.cX-Customizer-SearchCategory:after {
2037
2217
  color: var(--cx-font-color);
2038
2218
  font-weight: bold;
2039
2219
  content: " ]";
2040
2220
  }
2041
2221
 
2042
- span.customizerSearchCurrent:before {
2222
+ span.cX-Customizer-SearchCurrent:before {
2043
2223
  color: var(--cx-font-color);
2044
2224
  font-weight: bold;
2045
2225
  content: "Current Value [ ";
2046
2226
  }
2047
2227
 
2048
- span.customizerSearchCurrent:after {
2228
+ span.cX-Customizer-SearchCurrent:after {
2049
2229
  color: var(--cx-font-color);
2050
2230
  font-weight: bold;
2051
2231
  content: " ]";
@@ -2055,7 +2235,7 @@ span.customizerSearchCurrent:after {
2055
2235
  * Password
2056
2236
  */
2057
2237
 
2058
- div.CanvasXpressPassword {
2238
+ .cX-Password-Dialog {
2059
2239
  border-radius: var(--cx-border-radius);
2060
2240
  background-color: var(--cx-background-widgets-color);
2061
2241
  box-sizing: border-box;
@@ -2072,8 +2252,7 @@ div.CanvasXpressPassword {
2072
2252
  text-align: left;
2073
2253
  }
2074
2254
 
2075
- img.CanvasXpressPassword,
2076
- svg.CanvasXpressPassword {
2255
+ .cX-Password-Icon {
2077
2256
  background: var(--cx-color-transparent) !important;
2078
2257
  border: 0px none !important;
2079
2258
  box-shadow: 0 0 0px rgb(0 0 0 / 0%) !important;
@@ -2081,11 +2260,12 @@ svg.CanvasXpressPassword {
2081
2260
  cursor: default;
2082
2261
  float: right;
2083
2262
  margin: 5px 0px 0px 0px !important;
2084
- cursor: default;
2085
2263
  }
2086
2264
 
2087
- div.CanvasXpressPasswordContainer {
2265
+ .cX-Password-Container {
2088
2266
  box-sizing: border-box;
2267
+ background-color: var(--cx-background-widgets-color);
2268
+ border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
2089
2269
  border-radius: 0px 0px 5px 5px;
2090
2270
  color: var(--cx-font-color);
2091
2271
  display: block;
@@ -2096,18 +2276,20 @@ div.CanvasXpressPasswordContainer {
2096
2276
  margin-top: 5px;
2097
2277
  }
2098
2278
 
2099
- span.CanvasXpressPassword {
2279
+ .cX-Password-Label {
2100
2280
  margin-bottom: 5px;
2101
2281
  margin-left: 5px;
2102
2282
  float: left;
2103
2283
  }
2104
2284
 
2105
- input.CanvasXpressPassword {
2285
+ .cX-Password-Input {
2106
2286
  float: left;
2107
2287
  margin-bottom: 5px;
2108
2288
  padding: 5px;
2109
2289
  border-radius: var(--cx-border-radius);
2110
- border: 1px solid rgb(170, 170, 170);
2290
+ border: 1px solid var(--cx-datatable-border-color);
2291
+ background-color: var(--cx-background-widgets-color);
2292
+ color: var(--cx-font-color);
2111
2293
  width: 170px;
2112
2294
  }
2113
2295
 
@@ -2131,6 +2313,7 @@ div.CanvasXpressDragLayout {
2131
2313
  position: absolute;
2132
2314
  }
2133
2315
 
2316
+ /* @category: widget */
2134
2317
  /***********
2135
2318
  * Tooltip *
2136
2319
  ***********/
@@ -2139,8 +2322,8 @@ div.CanvasXpressDragLayout {
2139
2322
  position: absolute;
2140
2323
  }
2141
2324
 
2142
- div.CanvasXpressTooltip,
2143
- div.CanvasXpressTooltipInfo {
2325
+ div.cX-Tooltip-Container,
2326
+ .cX-Tooltip-Info {
2144
2327
  border: var(--cx-border);
2145
2328
  border-radius: var(--cx-border-radius);
2146
2329
  background-color: var(--cx-color-white);
@@ -2155,27 +2338,40 @@ div.CanvasXpressTooltipInfo {
2155
2338
  text-align: left;
2156
2339
  }
2157
2340
 
2158
- div.CanvasXpressTooltipInfo {
2341
+ .cX-Tooltip-Info {
2159
2342
  max-height: 800px;
2160
2343
  max-width: 350px;
2161
2344
  z-index: 1;
2162
2345
  }
2163
2346
 
2164
- div.CanvasXpressTooltip {
2347
+ div.cX-Tooltip-Container {
2165
2348
  box-sizing: border-box;
2166
2349
  }
2167
2350
 
2351
+ .cX-Tooltip-Toolbar {
2352
+ align-items: center;
2353
+ border-bottom: 1px var(--cx-border-style) var(--cx-datatable-banner-border-color);
2354
+ cursor: move;
2355
+ display: flex;
2356
+ flex-direction: row;
2357
+ justify-content: flex-end;
2358
+ gap: 4px;
2359
+ margin: -5px -6px 4px -6px;
2360
+ padding: 4px 6px;
2361
+ }
2362
+
2363
+ /* @category: widget */
2168
2364
  /*****************************************************/
2169
2365
  /* Generators */
2170
2366
  /* A collection of Tooltips/Speech Bubbles */
2171
2367
  /* https://css-generators.com/tooltip-speech-bubble/ */
2172
2368
  /*****************************************************/
2173
2369
 
2174
- div.CanvasXpressTooltipInfoNone,
2175
- div.CanvasXpressTooltipInfoBottom,
2176
- div.CanvasXpressTooltipInfoTop,
2177
- div.CanvasXpressTooltipInfoLeft,
2178
- div.CanvasXpressTooltipInfoRight {
2370
+ .cX-Tooltip-Info-None,
2371
+ .cX-Tooltip-Info-Bottom,
2372
+ .cX-Tooltip-Info-Top,
2373
+ .cX-Tooltip-Info-Left,
2374
+ .cX-Tooltip-Info-Right {
2179
2375
  color: var(--cx-font-color);
2180
2376
  font: var(--cx-font);
2181
2377
  max-height: 800px;
@@ -2186,7 +2382,7 @@ div.CanvasXpressTooltipInfoRight {
2186
2382
  z-index: 1;
2187
2383
  }
2188
2384
 
2189
- div.CanvasXpressTooltipInfoBottom {
2385
+ .cX-Tooltip-Info-Bottom {
2190
2386
  border-radius: var(--cx-callout-radius) var(--cx-callout-radius)
2191
2387
  min(var(--cx-callout-radius), 50% - var(--cx-callout-size) * tan(45deg))
2192
2388
  min(var(--cx-callout-radius), 50% - var(--cx-callout-size) * tan(45deg)) /
@@ -2207,7 +2403,7 @@ div.CanvasXpressTooltipInfoBottom {
2207
2403
  var(--cx-callout-size) 0;
2208
2404
  }
2209
2405
 
2210
- div.CanvasXpressTooltipInfoBottom:before {
2406
+ .cX-Tooltip-Info-Bottom:before {
2211
2407
  content: "";
2212
2408
  position: absolute;
2213
2409
  z-index: -1;
@@ -2250,7 +2446,7 @@ div.CanvasXpressTooltipInfoBottom:before {
2250
2446
  ) / 0 0 var(--cx-callout-size) 0;
2251
2447
  }
2252
2448
 
2253
- div.CanvasXpressTooltipInfoTop {
2449
+ .cX-Tooltip-Info-Top {
2254
2450
  border-radius: min(
2255
2451
  var(--cx-callout-radius),
2256
2452
  50% - var(--cx-callout-size) * tan(45deg)
@@ -2273,7 +2469,7 @@ div.CanvasXpressTooltipInfoTop {
2273
2469
  0 0 0;
2274
2470
  }
2275
2471
 
2276
- div.CanvasXpressTooltipInfoTop:before {
2472
+ .cX-Tooltip-Info-Top:before {
2277
2473
  content: "";
2278
2474
  position: absolute;
2279
2475
  z-index: -1;
@@ -2311,7 +2507,7 @@ div.CanvasXpressTooltipInfoTop:before {
2311
2507
  }
2312
2508
 
2313
2509
 
2314
- div.CanvasXpressTooltipInfoLeft {
2510
+ .cX-Tooltip-Info-Left {
2315
2511
  border-radius: var(--cx-callout-radius) /
2316
2512
  min(var(--cx-callout-radius), 50% - var(--cx-callout-size) * tan(45deg))
2317
2513
  var(--cx-callout-radius) var(--cx-callout-radius)
@@ -2332,7 +2528,7 @@ div.CanvasXpressTooltipInfoLeft {
2332
2528
  var(--cx-callout-size);
2333
2529
  }
2334
2530
 
2335
- div.CanvasXpressTooltipInfoLeft::before {
2531
+ .cX-Tooltip-Info-Left::before {
2336
2532
  content: "";
2337
2533
  position: absolute;
2338
2534
  inset: 0;
@@ -2373,7 +2569,7 @@ div.CanvasXpressTooltipInfoLeft::before {
2373
2569
  0/0 0 0 var(--cx-callout-size);
2374
2570
  }
2375
2571
 
2376
- div.CanvasXpressTooltipInfoRight {
2572
+ .cX-Tooltip-Info-Right {
2377
2573
  border-radius: var(--cx-callout-radius) / var(--cx-callout-radius)
2378
2574
  min(var(--cx-callout-radius), 50% - var(--cx-callout-size) * tan(45deg))
2379
2575
  min(var(--cx-callout-radius), 50% - var(--cx-callout-size) * tan(45deg))
@@ -2394,7 +2590,7 @@ div.CanvasXpressTooltipInfoRight {
2394
2590
  0 var(--cx-callout-size) 0 0;
2395
2591
  }
2396
2592
 
2397
- div.CanvasXpressTooltipInfoRight::before {
2593
+ .cX-Tooltip-Info-Right::before {
2398
2594
  content: "";
2399
2595
  position: absolute;
2400
2596
  inset: 0;
@@ -2480,6 +2676,7 @@ span.CanvasXpressMousePosition {
2480
2676
  z-index: 1;
2481
2677
  }
2482
2678
 
2679
+ /* @category: widget */
2483
2680
  /**********
2484
2681
  * Motion *
2485
2682
  **********/
@@ -2498,12 +2695,12 @@ span.CanvasXpressMousePosition {
2498
2695
  }
2499
2696
 
2500
2697
  .cX-Workflow-Wrapper.cX-Workflow-Mode-Repro .cX-Workflow-Widget {
2501
- background: rgba(255, 255, 255, 0.95);
2502
- border: 1px solid var(--cx-color-widgets);
2503
- border-radius: 12px;
2504
- padding: 15px;
2505
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
2506
- backdrop-filter: blur(8px);
2698
+ background: var(--cx-workflow-background-color);
2699
+ border: 1px var(--cx-border-style) var(--cx-workflow-border-color);
2700
+ border-radius: var(--cx-border-radius);
2701
+ padding: 12px;
2702
+ box-shadow: none;
2703
+ backdrop-filter: none;
2507
2704
  box-sizing: border-box;
2508
2705
  order: -1;
2509
2706
  }
@@ -2523,7 +2720,10 @@ span.CanvasXpressMousePosition {
2523
2720
 
2524
2721
  .cX-Workflow-Wrapper.cX-Workflow-Mode-Filter .cX-Workflow-Widget {
2525
2722
  position: relative;
2526
- border: none !important;
2723
+ border: 1px var(--cx-border-style) var(--cx-workflow-border-color) !important;
2724
+ border-radius: var(--cx-border-radius);
2725
+ background: var(--cx-workflow-background-color);
2726
+ padding: 12px;
2527
2727
  width: 90% !important;
2528
2728
  left: 5% !important;
2529
2729
  order: 1;
@@ -2543,50 +2743,51 @@ span.CanvasXpressMousePosition {
2543
2743
  pointer-events: none;
2544
2744
  }
2545
2745
 
2546
- /* Specific transitions based on layout context */
2547
- .cX-Workflow-Wrapper .cX-Workflow-Mode-Repro {
2548
- transition: transform var(--cx-transition-speed) ease, opacity var(--cx-transition-speed) ease;
2549
- transform: translateX(0);
2550
- }
2551
- .cX-Workflow-Wrapper.cX-Workflow-Hidden .cX-Workflow-Mode-Repro {
2552
- transform: translateX(-20px);
2553
- }
2554
-
2555
2746
  .cX-Workflow-Widget {
2556
2747
  font-family: var(--cx-font-family);
2748
+ color: var(--cx-workflow-text-color);
2749
+ background: var(--cx-workflow-background-color);
2557
2750
  }
2558
2751
 
2559
2752
  .cX-Workflow-Header {
2560
2753
  display: flex;
2561
2754
  justify-content: space-between;
2562
2755
  align-items: center;
2563
- margin-bottom: 12px;
2756
+ margin-bottom: 10px;
2757
+ padding-bottom: 8px;
2758
+ color: var(--cx-workflow-text-color);
2564
2759
  }
2565
2760
 
2566
2761
  .cX-Workflow-Close-Btn {
2567
2762
  cursor: pointer;
2763
+ border-radius: var(--cx-border-radius);
2764
+ background: var(--cx-workflow-button-background-color);
2568
2765
  }
2569
2766
 
2570
2767
  .cX-Workflow-Controls {
2571
2768
  display: flex;
2572
2769
  align-items: center;
2573
- gap: 18px;
2770
+ gap: 12px;
2574
2771
  padding-bottom: 5px;
2575
2772
  }
2576
2773
 
2577
2774
  .cX-Workflow-Play-Btn {
2578
2775
  cursor: pointer;
2776
+ border-radius: var(--cx-border-radius);
2777
+ background: var(--cx-workflow-button-background-color);
2579
2778
  }
2580
2779
 
2581
2780
  .cX-Workflow-Slider-Area {
2582
2781
  flex-grow: 1;
2583
2782
  position: relative;
2783
+ margin-right: 15px;
2784
+ margin-left: 5px;
2584
2785
  }
2585
2786
 
2586
2787
  .cX-Workflow-Slider-Track {
2587
2788
  position: relative;
2588
2789
  height: 6px;
2589
- background: var(--cx-color-extra-light-gray);
2790
+ background: var(--cx-workflow-slider-track-color);
2590
2791
  border-radius: 10px;
2591
2792
  cursor: pointer;
2592
2793
  }
@@ -2594,7 +2795,7 @@ span.CanvasXpressMousePosition {
2594
2795
  .cX-Workflow-Slider-Fill {
2595
2796
  position: absolute;
2596
2797
  height: 100%;
2597
- background: var(--cx-color-widgets);
2798
+ background: var(--cx-workflow-slider-fill-color);
2598
2799
  border-radius: 10px;
2599
2800
  width: 0%;
2600
2801
  }
@@ -2604,18 +2805,19 @@ span.CanvasXpressMousePosition {
2604
2805
  top: 50%;
2605
2806
  width: 22px;
2606
2807
  height: 22px;
2607
- background: var(--cx-color-widgets);
2608
- border: 2px solid white;
2808
+ background: var(--cx-workflow-slider-thumb-color);
2809
+ border: 2px solid var(--cx-workflow-slider-thumb-border-color);
2609
2810
  border-radius: 50%;
2610
2811
  transform: translate(-50%, -50%);
2611
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
2812
+ box-shadow: none;
2612
2813
  z-index: 10;
2613
2814
  }
2614
2815
 
2615
2816
  .cX-Workflow-Timeline-Container {
2616
- border-top: 1px solid #e2e8f0;
2817
+ border: 1px var(--cx-border-style) var(--cx-workflow-timeline-border-color);
2818
+ border-radius: var(--cx-border-radius);
2617
2819
  margin-top: 10px;
2618
- padding-top: 10px;
2820
+ /* padding-top: 10px; */
2619
2821
  max-height: 200px;
2620
2822
  overflow-y: auto;
2621
2823
  }
@@ -2624,33 +2826,38 @@ span.CanvasXpressMousePosition {
2624
2826
  display: flex;
2625
2827
  align-items: center;
2626
2828
  gap: 8px;
2627
- padding: 6px 0;
2829
+ padding: 6px 8px;
2628
2830
  cursor: pointer;
2831
+ border-radius: var(--cx-border-radius);
2832
+ }
2833
+
2834
+ .cX-Workflow-Timeline-Item:hover {
2835
+ background: var(--cx-workflow-hover-color);
2629
2836
  }
2630
2837
 
2631
2838
  .cX-Workflow-List-Label {
2632
2839
  position: absolute;
2633
2840
  transform: translateX(-50%);
2634
- font-size: var(--cx-small-font-size);
2635
- color: var(--cx-color-dark-gray);
2841
+ font-size: var(--cx-workflow-list-label-font-size);
2842
+ color: var(--cx-workflow-list-text-color);
2636
2843
  white-space: nowrap;
2637
2844
  }
2638
2845
 
2639
2846
  .cX-Workflow-List-Tick {
2640
2847
  position: absolute;
2641
2848
  transform: translateX(-50%);
2642
- font-size: 8px;
2643
- color: var(--cx-color-light-gray);
2849
+ font-size: var(--cx-workflow-list-tick-font-size);
2850
+ color: var(--cx-workflow-list-tick-color);
2644
2851
  }
2645
2852
 
2646
- /* Specific active state for the Workflow Timeline List */
2647
- .cX-Workflow-Timeline-Item.active {
2648
- background-color: var(--cx-background-hover-color) !important;
2649
- color: var(--cx-color-widgets) !important;
2650
- border-radius: var(--cx-border-radius) !important;
2651
- font-weight: bold;
2853
+ .cX-Workflow-Timeline-Item.cX-Workflow-Active {
2854
+ background-color: var(--cx-workflow-active-color);
2855
+ color: var(--cx-workflow-text-color);
2856
+ border-radius: var(--cx-border-radius);
2857
+ font-weight: bold;
2652
2858
  }
2653
2859
 
2860
+ /* @category: widget */
2654
2861
  /*************
2655
2862
  * Toolbar *
2656
2863
  *************/
@@ -2719,8 +2926,7 @@ span.CanvasXpressMousePosition {
2719
2926
  position: absolute;
2720
2927
  border: var(--cx-border);
2721
2928
  padding: 1px;
2722
- background-color: var(--cx-background-widgets-color);
2723
- background: #ffffff;
2929
+ background: var(--cx-background-widgets-color);
2724
2930
  display: grid;
2725
2931
  opacity: 0;
2726
2932
  z-index: 1001;
@@ -2730,22 +2936,22 @@ span.CanvasXpressMousePosition {
2730
2936
  }
2731
2937
 
2732
2938
  .cX-Toolbar-Edge-Top {
2733
- border-radius: 0 0 8px 8px;
2939
+ border-radius: 0 0 var(--cx-border-radius) var(--cx-border-radius);
2734
2940
  border-top: none;
2735
2941
  }
2736
2942
 
2737
2943
  .cX-Toolbar-Edge-Bottom {
2738
- border-radius: 8px 8px 0 0;
2944
+ border-radius: var(--cx-border-radius) var(--cx-border-radius) 0 0;
2739
2945
  border-bottom: none;
2740
2946
  }
2741
2947
 
2742
2948
  .cX-Toolbar-Edge-Left {
2743
- border-radius: 0 8px 8px 0;
2949
+ border-radius: 0 var(--cx-border-radius) var(--cx-border-radius) 0;
2744
2950
  border-left: none;
2745
2951
  }
2746
2952
 
2747
2953
  .cX-Toolbar-Edge-Right {
2748
- border-radius: 8px 0 0 8px;
2954
+ border-radius: var(--cx-border-radius) 0 0 var(--cx-border-radius);
2749
2955
  border-right: none;
2750
2956
  }
2751
2957
 
@@ -2805,42 +3011,109 @@ span.CanvasXpressMousePosition {
2805
3011
  * Tooltip *
2806
3012
  *************/
2807
3013
 
2808
- div.cX-Alt-Tooltip {
2809
- background-color: var(--cx-background-widgets-color);
2810
- border: var(--cx-border);
2811
- border-radius: var(--cx-border-radius);
2812
- box-shadow: 0 0 5px var(--cx-color-transparent);
2813
- color: var(--cx-font-color);
2814
- font: var(--cx-font);
2815
- font-size: var(--cx-font-size);
2816
- line-height: 100%;
2817
- padding: 5px;
2818
- position: absolute;
3014
+ .cX-Alt-Tooltip {
3015
+ position: fixed;
2819
3016
  display: none;
2820
- text-wrap: nowrap;
2821
- z-index: 1000000;
2822
- }
2823
-
2824
- /*********
2825
- * Marker *
2826
- **********/
2827
-
2828
- div.cX-Marker {
2829
- box-sizing: border-box;
2830
- border: var(--cx-border);
3017
+ z-index: 999999;
3018
+ background-color: rgba(0, 0, 0, 0.8);
3019
+ color: white;
3020
+ padding: 5px 10px;
2831
3021
  border-radius: var(--cx-border-radius);
2832
- background-color: var(--cx-background-widgets-color);
2833
- cursor: move;
2834
- font: var(--cx-font);
2835
- width: 308px;
2836
- left: 0px;
2837
- position: absolute;
2838
- top: 0px;
2839
- padding: 2px;
3022
+ font-size: var(--cx-small-font-size);
3023
+ white-space: nowrap;
3024
+ pointer-events: none;
2840
3025
  }
2841
3026
 
2842
- div.cX-Marker-Table-Container {
2843
- position: relative;
3027
+ /*
3028
+ * Parent Node
3029
+ */
3030
+
3031
+ .CanvasXpress-ParentNode {
3032
+ display: flex;
3033
+ flex-direction: column;
3034
+ max-width: -webkit-fill-available;
3035
+ width: fit-content;
3036
+ -moz-transform: none;
3037
+ -webkit-transform: none;
3038
+ -o-transform: none;
3039
+ -ms-transform: none;
3040
+ transform: none;
3041
+ }
3042
+
3043
+ /*
3044
+ * CanvasXpress
3045
+ */
3046
+
3047
+ canvas.CanvasXpress {
3048
+ width: 100%;
3049
+ height: 100%;
3050
+ display: block;
3051
+ flex-grow: 1;
3052
+ -moz-user-select: none;
3053
+ -khtml-user-select: none;
3054
+ -webkit-user-select: none;
3055
+ -o-user-select: none;
3056
+ user-select: none;
3057
+ -ms-user-select: none;
3058
+ }
3059
+
3060
+ canvas.CanvasXpress:hover {
3061
+ border: 1px solid rgba(35, 82, 124, 0.2);
3062
+ border-radius: var(--cx-border-radius);
3063
+ margin: -1px;
3064
+ }
3065
+
3066
+ canvas.CanvasXpressUpload {
3067
+ border: 1px solid rgba(35, 82, 124, 0.2);
3068
+ border-radius: var(--cx-border-radius);
3069
+ margin: -1px;
3070
+ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAQn0lEQVR4nO3dX4gd133A8W/CLSztUrZ0Hzbgh01Z6BZUWIpKHKKHDcigB1EMVcAPwmxBUIea1g95UMFNEEENJhFFEa6dGOMoxijCMW4QJlHjoAZHyK1TFOqAFCSQiAwrWIMMa1jDCrYPZxcvK91zZu6dmTNz5/uBQbZXvvu7c+f3u2fOnD8gSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSVJffSZ3AOqFWWARmN8+/hSY2f7v03v+7ifA3e0/V4HfAx8A17f/VIUsAKraDLAMfBH4K2CJkOhV+Bj4LfAu8N/bf96u6LUljehR4CTwHrDV8HEDOAMcBAZ1v1FJwT7gOeAOzSf9sGMNeInQApFUsSngKHCF/MmeOq4BXyPckkgawwxwnNAplzuxyx7rwGlgrvKzIk24KeAEcI/8iTzusYGF4AE+BdAwx4BvUk/CfLR93B7y8zlCq6Ou330K+A7hUWOvWQC01xLwAqFnf1wfAr8C/g94n/As/zbhcV4RA2Bh+1gEvgDsJ4wlGNdN4KvA2xW8ltR5U4Rvxk3Ga2b/FHiakLB1mQNWgFcZ//bkLHYUqueWgKuMlkCbhKQ/yoOj+powIIwBeJVQgEZ5D3fw0aF66hijJc4qYfDPI82HPNQMofVxg9EK2YnmQ87LPoA8Zgn3sY8QLtoZ4I+3f/b77T9vE8a+36wphgHwMvBkyf/vLmEA0Iu0uxPtceAbhNZNGf8J/C3F+ymkpEcJz9EvEEarlb2vvkoY7voE1YyrnwMul4xjDXiG0FfQJUco3yK4Ruh4lEa2TBiWWjbhizRV3wGeYrTOqwXCBV7m950e8Xe1xRShAK9T7hZnf45g1V1ThHvQMgk2zrFBaMYX7XFfpNxovqtMVhLMA5co/v7XgQM5AlW3DAjN45xDZc8Tb7aWSf5Nwn3+pM6ue5riHZ8WAUUdZLRe5zqOncTde59eJvlXt9/TpFui+OdmEdADpgmDSHIn/cOOW3x6wc5RPPnfo12P9eo2DVyk2Lm5R72Dm9Qh+wlJljvRU62Bk4QhuEX+/hvkGciT2wB4nmLn6A5OJuq9o4w+4myD0An1bcIjvZ1x7bvvtXfWzztE6Fc4R/2LbjzP5N7vF/U1ireSuvYoVBU5zmhJf44wMGWcC2cf8CzVtzxOjxHTpHmGYufsbK4Alc9pyiXWKqFgVLUg5m6HKPc4y+QvrmgROJYrQDXvBOW+8U/QTDPxIMXv8fcerzUQX1edJH3+1rFTsBeOUTypLlHNXPUyBoT71zL9Er/Ae/6UIk94ruJ5nGjLFJsfv0lo7udU9Ln2Dbo9rLcpA4otfvpsrgBVr1mKPT9fpz0DZ2aAXxKPdV+26LqnyBiKDZw4NJHeIp38q5Sfblq3AeGZvh1X1ThI+jr4abboVIujdLsT6GFF4HzWiLqtyBOgQ9miU6VmSDf7Nmn/2PDdReAW3vePY4r0DM/3sUNwIjxHuto/lS26cgaEb/62F6suKHIrsJIrOFVjjvTjtDeyRafczpN+wmIroMNOEf+A16hnZJ+6YZ70F8TjuYLTeKZIrzFvL7pSHYJX8oWmcaRG/DnqS1DsNnGSllHrjXeIf6hH8oWmlkm1Ar6XLzSNYo74B3oLv/31qXniQ8TX6ciaAZ/NHUBLHE78/GXgfhOBqBNuAz+L/Hya9DWlFjlHvAXgWG/tdZj4NfN6vtBUVmzJrfczxqX2GhDf9KUTtwHeAoTn+rGVcN0/Xg9zH/hR5OfTdGAEZp86tuYITfmF7X/+I0Lip1Z5vVxzXOqunxA2GRnmMfwCyWKeMKPvDGFgRpk94fYebZ3xp/wGxK8tBwU1ZIowHfMFql81V4p5k+HXzib93GuhMcvAK4z3DZ96/i/FpFYRbn0/QNfMEBbBbGIH3qsNvSd116PEr6Fn8oWW1qVOwDngn4EnaW5xi48a+j3qrt8QnggMy6U/bzCWiTRDWKRj1O24xjlc601FxPZmeCdjXEltbgEMCDP0vkk9c/DvAx9Efj4L3K3h92ryXGf4asvzDcZRWlsLwBLwEtVMq7wN/Br4X8IHdZOQ+DbvVZWbkZ/1abv1sQ0I22oV2Yxj2HEPeJUwDsCtnNWEp4lfk/PZIuuQecLWy6Mk/QYh6Q/S3laNJtcR4tdn2/aOaJ3DpJfjethxg/CYxSWvldMy8et0OVdgXVBm593dib+C3/Zqh9RYgOVskbXYgLBFdZnEX8XEV/vME79uXU5uj2nCFtVFE3+TsA6bTX210Tzx63clV2BtNE2YYls0+a/hKqtqt3lsARRSNvlP04FVVdR7B7APIGkAXKRY4q9j1VR3LGMBSDpLseS/xfBhlVIbOQ4g4VmKJf9VHL2n7nEkYMQhiiX/ZVw9Rd30LeLXdm/NU2yEn8mvLnud4df2nYxxZTUgvd/eFmEutcmvLuvsegB1KnLffwfv+dVtU8Rnr76QL7R8FklP6V3H3lF1337i13mr1wSsyxXS3/5PZItOqo6rAu+xQjr53T9dk8J9AXaZJszYiyX/NXp2UjSxUjsD9W5Z+dTc/k3C3GlpEhwkfr2fyhda82ZIP/N/Plt0UvVOE7/eD+ULrXmpb/81nM/fNqdw0tWoBsRvd9fp0UzWKUKCxwpAbBtlNW/n22sTi8AoDhO/3l/PF1rzniJ+Mm7gMl5tsrfpahEoL9b737vH3KnlvFeyRaa9ht23WgSKmyc+0K1Xzf/USKhV/PZvi1SnlUWgmNR5/Dn1bGfXSqmTcTxfaNol9TlZBIqZo/hGtdeAM0z4hjV3iF9MTvbJr2jyWwTSyp7LnWONMAJ2oua/pBZDfDNfaNo26gVrEXhQmW//2HEJeLzh2GtxkvgbnYg32WGjJr9F4OHGPZ97jyt0fLJQrPd/gx71hLZQVRerRSCo6tv/YcdrdLDTcIb4m7qQL7Teq/qbyiJQ/Tnde6yRocU8Ts9kquny1hivrdGdBv6x4tccAOe2//nHFb92V1whzO6bBf5w+7/9CeGLcBZ4BFhg9Jmus4Q+s+8D/wDcHyfYJqTu/xfzhdZbdX9L2RJI20cY+HaO+FTh2HGZDjw9u8DwN3AvY1x9VXfyWwTKmyI06y+QXiJv73GN0KJorVsMD977/2YVTf5V4lO2b1DsQrUIlLdA2B2rTCFYpaUt6SnigX87X2i9Uyb5F4kX7lcIiW0RqM8iYahwmSLQutuBfcSDPpYvtF4pm/yQLgBgEWjCCsX7CFq3jF5qu6/lbJH1xyjJD8UKAFgEmjBPeLJQ5HO8SIvmE6wQD3Y+V2A9MWryQ/ECABaBJkwDb1Ds8zyRKcYHHCceaGsq1QQaJ/mhXAEAi0ATBsDLFDvHrVhU9+vEA1U9xk1+KF8AwCLQlPOkz/E1WjDEPlYAbmWMa5JVkfwwWgEAi0ATBoR7/dQ5PpkrwB2vYAFoUlXJD6MXALAINGGGMB4jdn43CEOPs7EANKfK5IfxCgBYBJqwRPocn80WHfCtIUFZAKpVdfLD+AUALAJNKLLLVrahwrE+gI1cQU2YOpIfqikAYBGo2xTpW4HTuYLzKUC96kp+qK4AgEWgbo8TP6/3yPREYCURWNYOio6rM/mh2gIAFoG6pUYKruQIKlWZ9ucIagLUnfxQfQEAi0CdjhA/pz/PEVRqMxA/5PKaSH6opwCARaAuqU1IN8kwUWg2EtAWbgZSVlPJD/UVALAI1OU5WviFG1tYolc7o46pyeSHegsAWATqkGpxn8kR1JVIQDdyBNRBTSc/1F8AwCJQh9htwNUcAZ2JBLRFGNKo4XIkPzRTAMAiULXXiZ/DxmfgrkQC2sJdgWJyJT80VwDAIlClZ4ifw31NB7SYCOiFpgPqiJzJD80WALAIVCW1CtfhHEHF7kvu5Aio5XInPzRfAMAiUIV54ufuqRxBvZIIaqK2Qh5TG5If8hQAsAiMa0D8vH09R1BHE0GdyhFUC6VGTjaV/JCvAEDxIrBBC5fCboHY5qRZCsB0IqhVXB9wR6oF0NQmEDkLAKSLgC2A4WKf3Uu5gnozEtQWfpi7DSsCTe4Ak7sAwPAiYPLHtbIAPBEJagu4lCuwltpbBJre/qkNBQAeLAImf1rrbgEgzEeODQvews7AvXaKQI6939pSAODTImDyFxPLsWwFANL3t2/mC621TpBn48c2FQAIiW/yp80Tz7EsjwF3LAwJylZA+7StAKiYWgYCfbai4G4C/5H4O/9W0e+S+ig11Pf2KC9aVQGA9L5ly4QOQ0nlfSHys0+A600FEpN6JHgHZwnm5i1AN60x/HN7b9QXrbIFAOlWwCNkXMpY6qgDhFW4hvnVqC9cdQH4DfDDxN95kkwzl6SO+kri579sJIqC5kiPC1jDpcNz8RagW1KLgm4wxqKgVbcAAO4C/5L4O7OE/oLs2xxLLXeE+MSonwEfNxRLKZdIjw14LVt0/WULoFtSG4O09snaPLBOughk3+u8ZywA3ZGaZ7NGy1vRK6QLwBZhvTM1wwLQDVPEP6stOrLexlksAm1iAeiGU8TzpTOLpkwRBioUKQLuKFQ/C0D7HSC9clKnxtPMEX+Usfv4Hq4iVCcLQLvNEUbMxnLkHh359t9tkWKdglvAL4iPfNLoLADtNQAuM8Et5QMULwK3gEfzhDnRLADtNADeIJ0XV+l4C7lMEdgkzC/o9BtuGQtA+xRN/k0mZF2NMkVgp+rtzxLp5LEAtMs0cJFieTBRT8r2U7xjcKf6vUwHOz9axgLQHvuAaxS7/s9nirFWCxQ/ATvHOuG2wHUFRmMBaIenKd4KvsIYE37abhp4i3JFYIvwKOQ0YcixirMA5LUEvEPx6/waPWn1HqfYtlEPuzW4QJg11epx0S1hAchjgTAqtsw13pvk37Gf8rcEe28PXiVMovAW4eEsAM2ZIuwLeYHy1/L79Cz5d0wRxkGP0hrYe1wFzhAmJS1hCwEsAHVbJFxv5yj3pGv3cZGG7vk/08QvGdESIXkPVPy6H2wfd4GPCIsprFX8O3L6IfElom8xvN/kB8DfRf7fJeBvRglqQv0BYWWracI5XWT8xP1X4BvA/TFfZ2I8Adxg/NZAX47lxPkcpwWw0oL3N6nHHcLmH42qY0mwqv0I+AvCN9PNzLFIdfg+8JeE5b0a1YUCAKE59ANCIfgK8G7WaKRq/Bfw18DfE25HG9eVArDjPvBj4IuEivld4MOsEUnlvQ18efv4dc5AulYAdvst8E/A54DHgBcJnXtSG30I/Dvhi+sxwrd/dpMwy+4+oaK+DXyV0BO7DHyJMJ14IVtk6rvrhOvyJ4SEb13P/iQUgL2ubx8vbv/7NGHSxQLwZ8DnE///NPUuRjJLvc94P6nxtT9mxF1oJ9wnhMfKN4HfEa6/d/H2VC00zmNATZgu9wFIGpMFQOoxC4DUYxYAqccsAFKPWQCkHrMASD1mAZB6zAIg9ZgFQOoxC4DUYxYAqccsAFKPWQCkHrMASD1mAZB6zAIg9ZgFQOoxC4DUYxYAqccsAFKPWQCkHrMASD1mAZB6zAIg9ZgFQOoxC4DUYxYAqccsAFKPWQCkHrMASD02yB2AGvc/wO0hP/tdg3FIkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRl9P8s0/RVv6+5CQAAAABJRU5ErkJggg==');
3071
+ background-size: contain;
3072
+ background-repeat: no-repeat;
3073
+ }
3074
+
3075
+ canvas.CanvasXpress::selection {
3076
+ background: rgba(0, 0, 0, 0);
3077
+ color: rgb(0, 0, 0);
3078
+ }
3079
+
3080
+ /* Hide Efect */
3081
+
3082
+ .appear {
3083
+ transition: all var(--cx-transition-speed) linear;
3084
+ opacity: 1;
3085
+ }
3086
+
3087
+ .dissapear {
3088
+ display: none;
3089
+ }
3090
+
3091
+ .dissapearHidden {
3092
+ transition: all var(--cx-transition-speed) linear;
3093
+ opacity: 0;
3094
+ }
3095
+
3096
+ /* @category: widget */
3097
+ /*********
3098
+ * Marker *
3099
+ **********/
3100
+
3101
+ div.cX-Marker {
3102
+ box-sizing: border-box;
3103
+ border: var(--cx-border);
3104
+ border-radius: var(--cx-border-radius);
3105
+ background-color: var(--cx-background-widgets-color);
3106
+ cursor: move;
3107
+ font: var(--cx-font);
3108
+ width: 308px;
3109
+ left: 0px;
3110
+ position: absolute;
3111
+ top: 0px;
3112
+ padding: 2px;
3113
+ }
3114
+
3115
+ .cX-Marker-Table-Container {
3116
+ position: relative;
2844
3117
  width: 286px;
2845
3118
  left: 8px;
2846
3119
  top: 8px;
@@ -2882,7 +3155,7 @@ select.cX-Marker {
2882
3155
  border: var(--cx-border);
2883
3156
  }
2884
3157
 
2885
- div.cX-Marker-Button-Container {
3158
+ .cX-Marker-Button-Container {
2886
3159
  float: left;
2887
3160
  position: relative;
2888
3161
  top: 8px;
@@ -2894,8 +3167,8 @@ div.cX-Marker-Button-Container {
2894
3167
  gap: 8px;
2895
3168
  }
2896
3169
 
2897
- input.cX-Marker-Remove,
2898
- input.cX-Marker-Add-Update {
3170
+ .cX-Marker-Remove,
3171
+ .cX-Marker-Add-Update {
2899
3172
  float: left;
2900
3173
  border-radius: var(--cx-border-radius);
2901
3174
  border: var(--cx-border);
@@ -2906,14 +3179,15 @@ input.cX-Marker-Add-Update {
2906
3179
  cursor: pointer;
2907
3180
  }
2908
3181
 
2909
- input.cX-Marker-Remove {
3182
+ .cX-Marker-Remove {
2910
3183
  left: 0px;
2911
3184
  }
2912
3185
 
2913
- input.cX-Marker-Add-Update {
3186
+ .cX-Marker-Add-Update {
2914
3187
  left: 12px;
2915
3188
  }
2916
3189
 
3190
+ /* @category: widget */
2917
3191
  /******************
2918
3192
  * Data Table DOE *
2919
3193
  ******************/
@@ -2964,55 +3238,61 @@ tr.cX-DataTable-DOE {
2964
3238
  /* Data Table / Tooltips / Markers */
2965
3239
  /***********************************/
2966
3240
 
2967
- div.cX-DataTable-Container {
3241
+ .cX-DataTable-Container {
2968
3242
  max-height: 400px;
2969
3243
  max-width: 600px;
2970
- position: inherit;
3244
+ overflow: auto;
3245
+ overscroll-behavior: contain;
3246
+ pointer-events: auto;
3247
+ position: relative;
2971
3248
  }
2972
3249
 
2973
- div.cX-DataTable-Container > table > tbody > tr > th {
3250
+ .cX-DataTable-Container > table > tbody > tr > th {
2974
3251
  background-color: rgb(255, 255, 255);
2975
3252
  margin: 1px;
2976
3253
  }
2977
3254
 
2978
- div.cX-DataTable-Container > table > tbody > tr > td {
3255
+ .cX-DataTable-Container > table > tbody > tr > td {
2979
3256
  margin: 1px;
2980
3257
  }
2981
3258
 
2982
- div.cX-DataTable-Container > table > tbody > tr > td > div {
3259
+ .cX-DataTable-Container > table > tbody > tr > td > div {
2983
3260
  padding-right: 10px;
2984
3261
  }
2985
3262
 
2986
- div.cX-DataTable {
3263
+ .cX-DataTable {
2987
3264
  box-sizing: border-box;
2988
3265
  position: relative;
2989
3266
  }
2990
3267
 
2991
- div.cX-DataTable-Root,
2992
- div.cX-DataTable-Vertical-Scrollbar,
2993
- div.cX-DataTable-Horizontal-Scrollbar,
2994
- div.cX-DataTable-Header-Viewport {
3268
+ .cX-DataTable-Root,
3269
+ .cX-DataTable-Vertical-Scrollbar,
3270
+ .cX-DataTable-Horizontal-Scrollbar,
3271
+ .cX-DataTable-Header-Viewport {
2995
3272
  box-sizing: border-box;
2996
3273
  position: absolute;
2997
3274
  }
2998
3275
 
2999
- div.cX-DataTable-Vertical-Scrollbar,
3000
- div.cX-DataTable-Horizontal-Scrollbar {
3276
+ .cX-DataTable-Vertical-Scrollbar,
3277
+ .cX-DataTable-Horizontal-Scrollbar {
3001
3278
  background-color: var(--cx-background-widgets-color);
3002
3279
  }
3003
3280
 
3004
- div.cX-DataTable {
3005
- background-color: var(--cx-datatable-background-color);
3006
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
3281
+ .cX-DataTable {
3282
+ background-color: transparent;
3283
+ border: 1px var(--cx-border-style) var(--cx-datatable-banner-border-color);
3007
3284
  border-radius: var(--cx-border-radius);
3008
3285
  clear: both;
3286
+ color: var(--cx-font-color);
3287
+ font-family: var(--cx-font-family);
3288
+ font-size: var(--cx-font-size);
3009
3289
  overflow: hidden;
3010
3290
  z-index: 10001;
3011
3291
  }
3012
3292
 
3013
3293
  /* Data Table Banner */
3014
3294
 
3015
- div.cX-DataTable-Banner {
3295
+ .cX-DataTable-Banner {
3016
3296
  background-color: var(--cx-datatable-banner-background-color);
3017
3297
  border-bottom: 1px var(--cx-border-style) var(--cx-datatable-banner-border-color);
3018
3298
  color: var(--cx-datatable-banner-text-color);
@@ -3020,7 +3300,7 @@ div.cX-DataTable-Banner {
3020
3300
  align-items: center;
3021
3301
  }
3022
3302
 
3023
- div.cX-DataTable-Search {
3303
+ .cX-DataTable-Search {
3024
3304
  margin-left: auto;
3025
3305
  }
3026
3306
 
@@ -3032,53 +3312,65 @@ input.cX-DataTable-Search {
3032
3312
  margin-right: 10px;
3033
3313
  padding: 10px;
3034
3314
  outline: none;
3035
- font-size: 14px;
3315
+ font-size: var(--cx-small-font-size);
3036
3316
  display: flex;
3037
3317
  }
3038
3318
 
3039
- input[type="search"]::-webkit-search-cancel-button.cX-DataTable-Search {
3319
+ input[type="search"].cX-DataTable-Search::-webkit-search-cancel-button {
3040
3320
  -webkit-appearance: auto;
3041
- appearance: none;
3042
- color: var(--cx-datatable-banner-text-color);
3043
3321
  height: 16px;
3044
3322
  width: 16px;
3323
+ cursor: pointer;
3045
3324
  }
3046
3325
 
3047
3326
  /* Data Table Toolbar */
3048
3327
 
3049
- div.cX-DataTable-Toolbar {
3328
+ .cX-DataTable-Toolbar {
3050
3329
  background-color: var(--cx-datatable-toolbar-background-color);
3051
- border-bottom: 1px var(--cx-border-style) var(--cx-datatable-toolbar-border-color);
3330
+ border-bottom: 1px var(--cx-border-style) var(--cx-datatable-banner-border-color);
3052
3331
  display: flex;
3053
3332
  align-items: center;
3054
3333
  justify-content: flex-end;
3334
+ gap: 4px;
3335
+ padding-right: 4px;
3336
+ font-size: var(--cx-datatable-toolbar-font-size);
3337
+ position: relative;
3338
+ top: 0px;
3339
+ left: 0px;
3055
3340
  -moz-transition: height var(--cx-transition-speed) ease;
3056
3341
  -webkit-transition: height var(--cx-transition-speed) ease;
3057
3342
  -o-transition: height var(--cx-transition-speed) ease;
3058
3343
  transition: height var(--cx-transition-speed) ease;
3059
3344
  }
3060
3345
 
3061
- div.cX-DataTable-Toolbar-Zero {
3062
- background-color: var(--cx-datatable-toolbar-background-color);
3063
- border-bottom: none;
3346
+ .cX-DataTable-Toolbar-Zero {
3347
+ background-color: transparent;
3348
+ border: none;
3349
+ font-size: var(--cx-datatable-toolbar-font-size);
3064
3350
  -moz-transition: height var(--cx-transition-speed) ease;
3065
3351
  -webkit-transition: height var(--cx-transition-speed) ease;
3066
3352
  -o-transition: height var(--cx-transition-speed) ease;
3067
3353
  transition: height var(--cx-transition-speed) ease;
3068
3354
  }
3069
3355
 
3356
+ .cX-DataTable-Toolbar,
3357
+ .cX-DataTable-Toolbar-Zero,
3358
+ .cX-DataTable-Banner,
3359
+ .cX-DataTable-Status,
3360
+ .cX-DataTable-Container {
3361
+ font-family: var(--cx-font-family);
3362
+ color: var(--cx-font-color);
3363
+ }
3364
+
3070
3365
  svg.cX-DataTable-Toolbar-Image {
3071
3366
  background: var(--cx-color-transparent) !important;
3072
3367
  border-radius: var(--cx-border-radius);
3368
+ border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
3073
3369
  padding: 2px;
3074
3370
  box-shadow: 0 0 0px var(--cx-color-transparent) !important;
3075
3371
  cursor: pointer;
3076
3372
  float: right;
3077
- margin: 0px 8px 0px 0px !important;
3078
- }
3079
-
3080
- svg.cX-DataTable-Toolbar-Image {
3081
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
3373
+ margin: 0px 4px 0px 0px !important;
3082
3374
  }
3083
3375
 
3084
3376
  svg.cX-DataTable-Toolbar-Image-Logo {
@@ -3087,7 +3379,7 @@ svg.cX-DataTable-Toolbar-Image-Logo {
3087
3379
  margin: 5px 0px 0px 10px !important;
3088
3380
  }
3089
3381
 
3090
- div.cX-DataTable-Toolbar-Spacer {
3382
+ .cX-DataTable-Toolbar-Spacer {
3091
3383
  float: right;
3092
3384
  margin-top: 5px;
3093
3385
  margin-left: 8px;
@@ -3097,11 +3389,11 @@ div.cX-DataTable-Toolbar-Spacer {
3097
3389
 
3098
3390
  /* Data Table Body */
3099
3391
 
3100
- div.cX-DataTable-Root {
3392
+ .cX-DataTable-Root {
3101
3393
  border: none;
3102
3394
  }
3103
3395
 
3104
- div.cX-DataTable-Header-Viewport {
3396
+ .cX-DataTable-Header-Viewport {
3105
3397
  border-bottom: 1px var(--cx-border-style) var(--cx-datatable-border-color);
3106
3398
  border-left: none;
3107
3399
  border-right: 1px var(--cx-border-style) var(--cx-datatable-border-color);
@@ -3110,7 +3402,7 @@ div.cX-DataTable-Header-Viewport {
3110
3402
  z-index: 1;
3111
3403
  }
3112
3404
 
3113
- div.cX-DataTable-Vertical-Scrollbar {
3405
+ .cX-DataTable-Vertical-Scrollbar {
3114
3406
  overflow-x: hidden;
3115
3407
  overflow-y: auto;
3116
3408
  right: 5px;
@@ -3118,11 +3410,12 @@ div.cX-DataTable-Vertical-Scrollbar {
3118
3410
  width: 16px;
3119
3411
  }
3120
3412
 
3121
- img.cX-DataTable-Vertical-Scrollbar-Image {
3413
+ .cX-DataTable-Vertical-Scrollbar-Image {
3122
3414
  max-height: unset !important;
3415
+ width: 1px !important;
3123
3416
  }
3124
3417
 
3125
- div.cX-DataTable-Horizontal-Scrollbar {
3418
+ .cX-DataTable-Horizontal-Scrollbar {
3126
3419
  bottom: 5px;
3127
3420
  height: 16px;
3128
3421
  left: 2px;
@@ -3130,13 +3423,14 @@ div.cX-DataTable-Horizontal-Scrollbar {
3130
3423
  overflow-y: hidden;
3131
3424
  }
3132
3425
 
3133
- img.cX-DataTable-Horizontal-Scrollbar-Image {
3426
+ .cX-DataTable-Horizontal-Scrollbar-Image {
3134
3427
  max-width: unset !important;
3428
+ height: 1px !important;
3135
3429
  }
3136
3430
 
3137
3431
  /* Data Table Status */
3138
3432
 
3139
- div.cX-DataTable-Status {
3433
+ .cX-DataTable-Status {
3140
3434
  background-color: var(--cx-datatable-status-background-color);
3141
3435
  border-top: 1px var(--cx-border-style) var(--cx-datatable-status-border-color);
3142
3436
  position: relative;
@@ -3148,21 +3442,21 @@ div.cX-DataTable-Status {
3148
3442
  color: var(--cx-datatable-status-text-color);
3149
3443
  }
3150
3444
 
3151
- div.cX-DataTable-Status-Left {
3445
+ .cX-DataTable-Status-Left {
3152
3446
  display:flex;
3153
3447
  }
3154
3448
 
3155
- span.cX-DataTable-Dimensions {
3449
+ .cX-DataTable-Dimensions {
3156
3450
  display: flex;
3157
3451
  align-items: center;
3158
3452
  margin-left: 20px;
3159
- font-size: medium;
3453
+ font-size: var(--cx-font-size);
3160
3454
  color: var(--cx-datatable-status-text-color);
3161
3455
  }
3162
3456
 
3163
3457
  /* Data Table Pagination */
3164
3458
 
3165
- div.cX-DataTable-Pagination {
3459
+ .cX-DataTable-Pagination {
3166
3460
  background-color: var(--cx-datatable-pagination-background-color);
3167
3461
  border-top: 1px var(--cx-border-style) var(--cx-datatable-pagination-border-color);
3168
3462
  position: relative;
@@ -3174,37 +3468,37 @@ div.cX-DataTable-Pagination {
3174
3468
  color: var(--cx-datatable-pagination-text-color);
3175
3469
  }
3176
3470
 
3177
- span.cX-DataTable-Pagination-Size {
3471
+ .cX-DataTable-Pagination-Size {
3178
3472
  display: flex;
3179
3473
  align-items: center;
3180
3474
  margin-left: auto;
3181
3475
  gap: 10px;
3182
3476
  }
3183
3477
 
3184
- select.cX-DataTable-Pagination-Size-Select {
3478
+ .cX-DataTable-Pagination-Size-Select {
3185
3479
  background-color: var(--cx-datatable-background-color);
3186
3480
  border: 1px var(--cx-border-style) var(--cx-datatable-pagination-border-color);
3187
3481
  border-radius: var(--cx-border-radius);
3188
- color: var(--cx-datatable-pagination-text-color);
3482
+ color: var(--cx-datatable-pagination-select-text-color);
3189
3483
  height: 20px;
3190
3484
  padding: 2px;
3191
3485
  outline: none;
3192
- font-size: var(--cx-font-size);
3486
+ font-size: var(--cx-medium-font-size);
3193
3487
  cursor: pointer;
3194
3488
  }
3195
3489
 
3196
- span.cX-DataTable-Pagination-Rows {
3490
+ .cX-DataTable-Pagination-Rows {
3197
3491
  display: flex;
3198
3492
  align-items: center;
3199
3493
  margin: auto;
3200
3494
  gap: 10px;
3201
3495
  }
3202
3496
 
3203
- span.cX-DataTable-Pagination-Label-Bold {
3497
+ .cX-DataTable-Pagination-Label-Bold {
3204
3498
  font-weight: bold;
3205
3499
  }
3206
3500
 
3207
- span.cX-DataTable-Pagination-Controls {
3501
+ .cX-DataTable-Pagination-Controls {
3208
3502
  cursor: pointer;
3209
3503
  margin-right: auto;
3210
3504
  display: flex;
@@ -3213,7 +3507,7 @@ span.cX-DataTable-Pagination-Controls {
3213
3507
  padding-bottom: 5px;
3214
3508
  }
3215
3509
 
3216
- div.cX-DataTable-Pagination-Control-Disabled {
3510
+ .cX-DataTable-Pagination-Control-Disabled {
3217
3511
  opacity: 0.2;
3218
3512
  cursor: none;
3219
3513
  }
@@ -3221,26 +3515,52 @@ div.cX-DataTable-Pagination-Control-Disabled {
3221
3515
  /* Data Table Table */
3222
3516
 
3223
3517
  table.cX-DataTable,
3224
- table.cX-DataTable-Tooltip {
3518
+ .cX-DataTable-Tooltip {
3225
3519
  border: none !important;
3226
3520
  color: var(--cx-font-color);
3227
3521
  position: absolute;
3228
3522
  table-layout: fixed;
3229
3523
  }
3230
3524
 
3231
- table.cX-DataTable-Tooltip {
3525
+ .cX-DataTable-Tooltip {
3232
3526
  position: inherit;
3233
3527
  }
3234
3528
 
3235
- tr.cX-DataTable-Row,
3236
- tr.cX-DataTable-Row-Active {
3529
+ .cX-DataTable-Container table.cX-DataTable-Tooltip {
3530
+ border-collapse: collapse;
3531
+ }
3532
+
3533
+ .cX-DataTable-Container .cX-DataTable-Row th,
3534
+ .cX-DataTable-Container .cX-DataTable-Row td {
3535
+ border: 1px solid var(--cx-datatable-cell-border-color);
3536
+ }
3537
+
3538
+ .cX-DataTable-Container .cX-DataTable-Row {
3539
+ display: table-row !important;
3540
+ }
3541
+
3542
+ .cX-DataTable-Container th.cX-DataTable-Cell-Head {
3543
+ background: none;
3544
+ display: table-cell !important;
3545
+ font-weight: bold;
3546
+ padding: 0 !important;
3547
+ position: static;
3548
+ }
3549
+
3550
+ .cX-DataTable-Container td.cX-DataTable-Cell {
3551
+ display: table-cell !important;
3552
+ position: static;
3553
+ }
3554
+
3555
+ .cX-DataTable-Row,
3556
+ .cX-DataTable-Row-Active {
3237
3557
  display: flex;
3238
3558
  align-content: center;
3239
3559
  position: relative;
3240
3560
  }
3241
3561
 
3242
- tr.cX-DataTable-Row-Active td,
3243
- tr.cX-DataTable-Row-Active th {
3562
+ .cX-DataTable-Row-Active td,
3563
+ .cX-DataTable-Row-Active th {
3244
3564
  background-color: var(--cx-datatable-row-hover-background-color)!important;
3245
3565
  }
3246
3566
 
@@ -3255,8 +3575,8 @@ tr.cX-DataTable-Row-Active th {
3255
3575
 
3256
3576
  /* Data Table Header th */
3257
3577
 
3258
- th.cX-DataTable-Cell-Head,
3259
- th.cX-DataTable-Cell-Head-Active {
3578
+ .cX-DataTable-Cell-Head,
3579
+ .cX-DataTable-Cell-Head-Active {
3260
3580
  background: var(--cx-datatable-accent-color);
3261
3581
  border-top: none;
3262
3582
  border-bottom: var(--cx-datatable-cell-border-color);
@@ -3264,7 +3584,8 @@ th.cX-DataTable-Cell-Head-Active {
3264
3584
  border-right: var(--cx-datatable-cell-border-color);
3265
3585
  color: var(--cx-datatable-header-text-color);
3266
3586
  cursor: pointer;
3267
- font: var(--cx-x-large-font);
3587
+ font-size: var(--cx-datatable-header-font-size);
3588
+ font-family: var(--cx-datatable-cell-font-family);
3268
3589
  font-weight: bold;
3269
3590
  font-variant-numeric: tabular-nums;
3270
3591
  padding: 0 3px 0 0 !important;
@@ -3275,16 +3596,16 @@ th.cX-DataTable-Cell-Head-Active {
3275
3596
  position: relative;
3276
3597
  }
3277
3598
 
3278
- th.cX-DataTable-Cell-Head > div.cX-DataTable-Cell,
3279
- th.cX-DataTable-Cell-Head-Active > div.cX-DataTable-Cell,
3280
- th.cX-DataTable-Cell-Head > div.cX-DataTable-Cell-Number,
3281
- th.cX-DataTable-Cell-Head-Active > div.cX-DataTable-Cell-Number {
3599
+ .cX-DataTable-Cell-Head > .cX-DataTable-Cell,
3600
+ .cX-DataTable-Cell-Head-Active > .cX-DataTable-Cell,
3601
+ .cX-DataTable-Cell-Head > .cX-DataTable-Cell-Number,
3602
+ .cX-DataTable-Cell-Head-Active > .cX-DataTable-Cell-Number {
3282
3603
  align-content: center;
3283
3604
  overflow: hidden;
3284
3605
  cursor: pointer;
3285
3606
  }
3286
3607
 
3287
- a.cX-DataTable-Cell-Header-Menu {
3608
+ .cX-DataTable-Cell-Header-Menu {
3288
3609
  cursor: pointer;
3289
3610
  font-style: normal !important;
3290
3611
  position: absolute;
@@ -3297,21 +3618,21 @@ a.cX-DataTable-Cell-Header-Menu {
3297
3618
  right: 8px;
3298
3619
  }
3299
3620
 
3300
- div.cX-DataTable-Cell a.cX-DataTable-Cell-Header-Menu {
3621
+ .cX-DataTable-Cell .cX-DataTable-Cell-Header-Menu {
3301
3622
  right: 10px;
3302
3623
  left: auto;
3303
3624
  }
3304
3625
 
3305
- div.cX-DataTable-Cell-Number a.cX-DataTable-Cell-Header-Menu {
3626
+ .cX-DataTable-Cell-Number .cX-DataTable-Cell-Header-Menu {
3306
3627
  right: auto;
3307
3628
  left: 3px;
3308
3629
  }
3309
3630
 
3310
- a.cX-DataTable-Cell-Header-Menu:hover {
3631
+ .cX-DataTable-Cell-Header-Menu:hover {
3311
3632
  transform: scale(1.8);
3312
3633
  }
3313
3634
 
3314
- div.cX-DataTable-Cell-Header-Filter {
3635
+ .cX-DataTable-Cell-Header-Filter {
3315
3636
  cursor: pointer;
3316
3637
  display: flex;
3317
3638
  align-items: center;
@@ -3322,17 +3643,17 @@ div.cX-DataTable-Cell-Header-Filter {
3322
3643
  right: 18px;
3323
3644
  }
3324
3645
 
3325
- div.cX-DataTable-Cell div.cX-DataTable-Cell-Header-Filter {
3646
+ .cX-DataTable-Cell .cX-DataTable-Cell-Header-Filter {
3326
3647
  right: 22px;
3327
3648
  left: auto;
3328
3649
  }
3329
3650
 
3330
- div.cX-DataTable-Cell-Number div.cX-DataTable-Cell-Header-Filter {
3651
+ .cX-DataTable-Cell-Number .cX-DataTable-Cell-Header-Filter {
3331
3652
  left: 19px;
3332
3653
  right: auto;
3333
3654
  }
3334
3655
 
3335
- div.cX-DataTable-Cell-Header-Sort {
3656
+ .cX-DataTable-Cell-Header-Sort {
3336
3657
  cursor: pointer;
3337
3658
  display: flex;
3338
3659
  align-items: center;
@@ -3342,21 +3663,21 @@ div.cX-DataTable-Cell-Header-Sort {
3342
3663
  transform: translateY(-50%);
3343
3664
  }
3344
3665
 
3345
- svg.cX-DataTable-Cell-Header-Filter-Image:hover {
3666
+ .cX-DataTable-Cell-Header-Filter-Image:hover {
3346
3667
  transform: scale(1.4);
3347
3668
  }
3348
3669
 
3349
- div.cX-DataTable-Cell div.cX-DataTable-Cell-Header-Sort {
3670
+ .cX-DataTable-Cell .cX-DataTable-Cell-Header-Sort {
3350
3671
  right: 34px;
3351
3672
  left: auto;
3352
3673
  }
3353
3674
 
3354
- div.cX-DataTable-Cell-Number div.cX-DataTable-Cell-Header-Sort {
3675
+ .cX-DataTable-Cell-Number .cX-DataTable-Cell-Header-Sort {
3355
3676
  left: 31px;
3356
3677
  right: auto;
3357
3678
  }
3358
3679
 
3359
- span.cX-DataTable-Cell-Header-Resize {
3680
+ .cX-DataTable-Cell-Header-Resize {
3360
3681
  background: var(--cx-datatable-cell-border-color);
3361
3682
  cursor: col-resize;
3362
3683
  position: absolute;
@@ -3366,13 +3687,13 @@ span.cX-DataTable-Cell-Header-Resize {
3366
3687
  height: 30%;
3367
3688
  }
3368
3689
 
3369
- span.cX-DataTable-Cell-Head-Text {
3690
+ .cX-DataTable-Cell-Head-Text {
3370
3691
  color: var(--cx-datatable-header-text-color)
3371
3692
  }
3372
3693
 
3373
3694
  /* Data Table Cells td */
3374
3695
 
3375
- svg.cX-DataTable-Cell-Hierarchy-Icon {
3696
+ .cX-DataTable-Cell-Hierarchy-Icon {
3376
3697
  float: left;
3377
3698
  margin-left: -10px;
3378
3699
  margin-right: 10px;
@@ -3385,7 +3706,8 @@ td.cX-DataTable-Cell-Active {
3385
3706
  border-bottom: var(--cx-datatable-cell-border-color);
3386
3707
  border-left: none !important;
3387
3708
  border-right: var(--cx-datatable-cell-border-color);
3388
- font: var(--cx-x-large-font);
3709
+ font-size: var(--cx-datatable-body-font-size);
3710
+ font-family: var(--cx-datatable-cell-font-family);
3389
3711
  font-variant-numeric: tabular-nums;
3390
3712
  color: var(--cx-datatable-cell-text-color);
3391
3713
  padding: 0 3px 0 0 !important;
@@ -3395,14 +3717,16 @@ td.cX-DataTable-Cell-Active {
3395
3717
  position: relative;
3396
3718
  }
3397
3719
 
3398
- div.cX-DataTable-Cell,
3399
- div.cX-DataTable-Cell-Number,
3400
- div.cX-DataTable-Cell-Link,
3401
- div.cX-DataTable-Cell-Active,
3402
- div.cX-DataTable-Cell-Number-Active,
3403
- div.cX-DataTable-Cell-Link-Active,
3404
- div.cX-DataTable-Cell-Tooltip {
3720
+ .cX-DataTable-Cell,
3721
+ .cX-DataTable-Cell-Number,
3722
+ .cX-DataTable-Cell-Link,
3723
+ .cX-DataTable-Cell-Active,
3724
+ .cX-DataTable-Cell-Number-Active,
3725
+ .cX-DataTable-Cell-Link-Active,
3726
+ .cX-DataTable-Cell-Tooltip {
3405
3727
  box-sizing: border-box;
3728
+ font-size: var(--cx-datatable-cell-font-size);
3729
+ font-family: var(--cx-datatable-cell-font-family);
3406
3730
  color: var(--cx-datatable-cell-text-color);
3407
3731
  margin: 0px !important;
3408
3732
  overflow: hidden;
@@ -3411,22 +3735,22 @@ div.cX-DataTable-Cell-Tooltip {
3411
3735
  word-break: break-word;
3412
3736
  }
3413
3737
 
3414
- div.cX-DataTable-Cell,
3415
- div.cX-DataTable-Cell-Link,
3416
- div.cX-DataTable-Cell-Active,
3417
- div.cX-DataTable-Cell-Link-Active {
3738
+ .cX-DataTable-Cell,
3739
+ .cX-DataTable-Cell-Link,
3740
+ .cX-DataTable-Cell-Active,
3741
+ .cX-DataTable-Cell-Link-Active {
3418
3742
  padding-left: 15px;
3419
3743
  text-align: left;
3420
3744
  }
3421
3745
 
3422
- div.cX-DataTable-Cell-Number,
3423
- div.cX-DataTable-Cell-Number-Active {
3746
+ .cX-DataTable-Cell-Number,
3747
+ .cX-DataTable-Cell-Number-Active {
3424
3748
  padding-right: 15px;
3425
3749
  text-align: right;
3426
3750
  }
3427
3751
 
3428
- div.cX-DataTable-Cell-Link,
3429
- div.cX-DataTable-Cell-Link-Active {
3752
+ .cX-DataTable-Cell-Link,
3753
+ .cX-DataTable-Cell-Link-Active {
3430
3754
  text-decoration: underline var(--cx-border);
3431
3755
  text-underline-offset: 2px;
3432
3756
  cursor: pointer;
@@ -3434,23 +3758,23 @@ div.cX-DataTable-Cell-Link-Active {
3434
3758
  align-items: center;
3435
3759
  }
3436
3760
 
3437
- div.cX-DataTable-Cell-Active,
3438
- div.cX-DataTable-Cell-Number-Active,
3439
- div.cX-DataTable-Cell-Link-Active {
3761
+ .cX-DataTable-Cell-Active,
3762
+ .cX-DataTable-Cell-Number-Active,
3763
+ .cX-DataTable-Cell-Link-Active {
3440
3764
  background-color: var(--cx-datatable-cell-hover-background-color) !important;
3441
3765
  border: 1px var(--cx-border-style) var(--cx-datatable-activecell-border-color) !important;
3442
3766
  }
3443
3767
 
3444
- span.cX-DataTable-Cell-Text {
3768
+ .cX-DataTable-Cell-Text {
3445
3769
  color: var(--cx-datatable-cell-text-color)
3446
3770
  }
3447
3771
 
3448
- td.cX-DataTable-Cell > div.cX-DataTable-Cell:hover,
3449
- td.cX-DataTable-Cell > div.cX-DataTable-Cell-Number:hover {
3772
+ td.cX-DataTable-Cell > .cX-DataTable-Cell:hover,
3773
+ td.cX-DataTable-Cell > .cX-DataTable-Cell-Number:hover {
3450
3774
  background-color: var(--cx-datatable-cell-hover-background-color);
3451
3775
  }
3452
3776
 
3453
- div.cX-DataTable-Cell-Tooltip {
3777
+ .cX-DataTable-Cell-Tooltip {
3454
3778
  width: 100px;
3455
3779
  line-height: 32px;
3456
3780
  /*
@@ -3464,7 +3788,7 @@ div.cX-DataTable-Cell-Tooltip {
3464
3788
  text-overflow: ellipsis;
3465
3789
  }
3466
3790
 
3467
- div.cX-DataTable-Upload {
3791
+ .cX-DataTable-Upload {
3468
3792
  background-image: url('data:image/png;base64,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');
3469
3793
  background-size: contain;
3470
3794
  background-repeat: no-repeat;
@@ -3473,33 +3797,52 @@ div.cX-DataTable-Upload {
3473
3797
  position: relative;
3474
3798
  }
3475
3799
 
3476
- div.cX-DataTable-Upload div.cX-DataTable-Root {
3800
+ .cX-DataTable-Upload .cX-DataTable-Root {
3477
3801
  opacity: 0.1;
3478
3802
  }
3479
3803
 
3804
+ /************************************/
3805
+ /* Tooltip DataTable */
3806
+ /************************************/
3807
+
3808
+ .cX-DataTable-Container .cX-DataTable-Row:not(:first-child):hover {
3809
+ background-color: var(--cx-datatable-row-hover-background-color) !important;
3810
+ }
3811
+
3812
+ .cX-DataTable-Container .cX-DataTable-Cell-Tooltip {
3813
+ font-size: var(--cx-small-font-size);
3814
+ line-height: 1.4;
3815
+ overflow: hidden;
3816
+ padding: 5px 10px;
3817
+ text-overflow: ellipsis;
3818
+ white-space: nowrap;
3819
+ width: 120px;
3820
+ }
3821
+
3822
+ /* @category: widget */
3480
3823
  /***************/
3481
3824
  /* Data Filter */
3482
3825
  /***************/
3483
3826
 
3484
- div.cX-DataFilter,
3485
- div.cX-DataFilter-Toolbar,
3486
- span.cX-DataFilter-Toolbar-Text,
3487
- span.cX-DataFilter-Text,
3488
- span.cX-DataFilter-Text-Active {
3827
+ .cX-DataFilter,
3828
+ .cX-DataFilter-Toolbar,
3829
+ .cX-DataFilter-Toolbar-Text,
3830
+ .cX-DataFilter-Text,
3831
+ .cX-DataFilter-Text-Active {
3489
3832
  font-family: var(--cx-font-family);
3490
3833
  font-size: var(--cx-x-large-font-size);
3491
3834
  color: var(--cx-font-color);
3492
3835
  }
3493
3836
 
3494
- div.cX-DataFilter,
3495
- div.cX-DataFilter-Toolbar {
3837
+ .cX-DataFilter,
3838
+ .cX-DataFilter-Toolbar {
3496
3839
  box-sizing: border-box;
3497
3840
  line-height: 100%;
3498
3841
  margin: 0px;
3499
3842
  position: absolute;
3500
3843
  }
3501
3844
 
3502
- div.cX-DataFilter {
3845
+ .cX-DataFilter {
3503
3846
  top: 0px;
3504
3847
  left: 0px;
3505
3848
  display: none;
@@ -3507,72 +3850,81 @@ div.cX-DataFilter {
3507
3850
  height: 100%;
3508
3851
  }
3509
3852
 
3510
- div.cX-DataFilter-Toolbar {
3511
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
3853
+ .cX-DataFilter-Toolbar {
3854
+ border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-datatable-border-color)) !important;
3512
3855
  border-radius: var(--cx-border-radius);
3513
3856
  width: 100%;
3514
3857
  left: 0px;
3515
3858
  top: 0px;
3516
3859
  }
3517
3860
 
3518
- div.cX-DataFilter-Toolbar-Top-Container {
3861
+ .cX-DataFilter-Toolbar-Top-Container {
3519
3862
  float: left;
3520
3863
  position: relative;
3521
3864
  width: 100%;
3522
3865
  z-index: 10001;
3523
- background-color: var(--cx-datatable-banner-background-color);
3524
- border-bottom: 1px var(--cx-border-style) var(--cx-datatable-border-color);
3866
+ background-color: var(--cx-datafilter-toolbar-background-color, var(--cx-datatable-banner-background-color));
3867
+ border-bottom: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-datatable-border-color));
3525
3868
  border-radius: var(--cx-border-radius) var(--cx-border-radius) 0px 0px;
3526
3869
  display: flex;
3527
3870
  align-items: center;
3871
+ gap: 4px;
3872
+ padding: 0px 4px;
3528
3873
  top: 0px;
3529
3874
  left: 0px;
3530
3875
  }
3531
3876
 
3532
- div.cX-DataFilter-Toolbar-Bottom-Container {
3877
+ .cX-DataFilter-Toolbar-Bottom-Container {
3533
3878
  position: relative;
3534
3879
  background-color: transparent;
3535
3880
  border: none;
3536
3881
  width: 100%;
3537
3882
  display: flex;
3538
3883
  align-items: center;
3884
+ justify-content: flex-end;
3885
+ gap: 4px;
3886
+ padding: 0px 4px;
3539
3887
  top: 0px;
3540
3888
  left: 0px;
3541
3889
  }
3542
3890
 
3543
- span.cX-DataFilter-Toolbar-Text,
3544
- span.cX-DataFilter-Text,
3545
- span.cX-DataFilter-Text-Active {
3891
+ .cX-DataFilter-Toolbar-Text,
3892
+ .cX-DataFilter-Text,
3893
+ .cX-DataFilter-Text-Active {
3546
3894
  left: 8px;
3547
3895
  line-height: 100%;
3548
3896
  position: relative;
3549
3897
  top: 6px;
3550
3898
  background-repeat: no-repeat;
3551
3899
  background-position: -0px;
3900
+ color: var(--cx-datafilter-text-color, var(--cx-font-color));
3901
+ font-size: var(--cx-datafilter-font-size, var(--cx-font-size));
3552
3902
  }
3553
3903
 
3554
- span.cX-DataFilter-Toolbar-Text {
3555
- font-size: medium;
3556
- float: left;
3904
+ .cX-DataFilter-Toolbar-Text {
3905
+ flex: 1;
3906
+ top: 0px;
3907
+ left: 0px;
3908
+ padding-left: 8px;
3909
+ font-size: var(--cx-font-size);
3557
3910
  }
3558
3911
 
3559
-
3560
- svg.cX-DataFilter-Toolbar-Image {
3561
- float: left;
3562
- position: relative;
3563
- top: -8px;
3912
+ svg.cX-DataFilter-Toolbar-Image,
3913
+ svg.cX-DataFilter-Toolbar-ImageNB {
3914
+ margin: 0px !important;
3915
+ cursor: pointer;
3564
3916
  }
3565
3917
 
3566
3918
 
3567
- div.cX-DataFilter-Content {
3919
+ .cX-DataFilter-Content {
3568
3920
  box-sizing: border-box;
3569
- background-color: var(--cx-background-widgets-color);
3570
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
3571
- border-radius: 0px 0px 4px 4px;
3921
+ background-color: var(--cx-datafilter-background-color, var(--cx-background-widgets-color));
3922
+ border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-datatable-border-color));
3923
+ border-radius: 0px 0px var(--cx-border-radius) var(--cx-border-radius);
3572
3924
  border-top: 0px;
3573
3925
  font-family: var(--cx-font-family);
3574
- font-size: var(--cx-x-large-font-size);
3575
- color: var(--cx-font-color);
3926
+ font-size: var(--cx-datafilter-font-size, var(--cx-font-size));
3927
+ color: var(--cx-datafilter-text-color, var(--cx-font-color));
3576
3928
  overflow-y: auto;
3577
3929
  overflow-x: hidden;
3578
3930
  padding: 2px;
@@ -3587,6 +3939,8 @@ input[type=checkbox].cX-Checkbox {
3587
3939
  height: 14px;
3588
3940
  width: 14px;
3589
3941
  margin: 2px;
3942
+ vertical-align: middle;
3943
+ flex-shrink: 0;
3590
3944
  }
3591
3945
 
3592
3946
  label.cX-Checkbox-Label {
@@ -3600,34 +3954,33 @@ label.cX-Checkbox-Label {
3600
3954
  }
3601
3955
 
3602
3956
  input.cX-DataFilter-Search {
3603
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
3957
+ border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-datatable-border-color));
3604
3958
  border-radius: var(--cx-border-radius);
3605
- color: var(--cx-font-color);
3959
+ color: var(--cx-datafilter-text-color, var(--cx-font-color));
3606
3960
  cursor: default;
3607
3961
  width: calc(100% - 10px);
3608
3962
  margin-left: 5px;
3609
3963
  padding-left: 5px;
3610
- height: 25px;
3964
+ height: 32px;
3611
3965
  outline: none;
3612
- font-size: 14px;
3966
+ font-size: var(--cx-datafilter-font-size, var(--cx-font-size));
3613
3967
  display: flex;
3614
3968
  }
3615
3969
 
3616
- input[type="search"]::-webkit-search-cancel-button.cX-DataFilter-Search {
3970
+ input[type="search"].cX-DataFilter-Search::-webkit-search-cancel-button {
3617
3971
  -webkit-appearance: auto;
3618
- appearance: none;
3619
- color: var(--cx-font-color);
3620
3972
  height: 16px;
3621
3973
  width: 16px;
3974
+ cursor: pointer;
3622
3975
  }
3623
3976
 
3624
- div.cX-DataFilter-Container,
3625
- div.cX-DataFilter-Container-Mask,
3626
- div.cX-DataFilter-Container-Hoverable {
3977
+ .cX-DataFilter-Container,
3978
+ .cX-DataFilter-Container-Mask,
3979
+ .cX-DataFilter-Container-Hoverable {
3627
3980
  box-sizing: border-box;
3628
3981
  }
3629
3982
 
3630
- div.cX-DataFilter-Container {
3983
+ .cX-DataFilter-Container {
3631
3984
  border: 0px;
3632
3985
  left: 0px;
3633
3986
  margin: 0px;
@@ -3636,50 +3989,58 @@ div.cX-DataFilter-Container {
3636
3989
  width: 100%;
3637
3990
  }
3638
3991
 
3639
- div.cX-DataFilter-Container-Mask {
3640
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
3992
+ .cX-DataFilter-Container-Mask {
3993
+ border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-datatable-border-color));
3641
3994
  margin: 5px;
3642
3995
  overflow-x: hidden;
3643
3996
  overflow-y: scroll;
3644
3997
  }
3645
3998
 
3646
- div.cX-DataFilter-Container-Hoverable:hover {
3647
- background-color: var(--cx-background-hover-color);
3999
+ .cX-DataFilter-Container-Hoverable:hover {
4000
+ background-color: var(--cx-datafilter-hover-color, var(--cx-background-hover-color));
3648
4001
  }
3649
4002
 
3650
- div.cX-DataFilter-Container-Hoverable {
3651
- border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
4003
+ .cX-DataFilter-Container-Hoverable {
4004
+ border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-datatable-border-color));
3652
4005
  border-radius: var(--cx-border-radius);
3653
4006
  margin: 2px;
3654
4007
  margin-bottom: 4px;
3655
4008
  }
3656
4009
 
3657
- div.cX-DataFilter-Head,
3658
- div.cX-DataFilter-Head-Active {
4010
+ .cX-DataFilter-Head,
4011
+ .cX-DataFilter-Head-Active {
4012
+ background: var(--cx-background-hover-color);
3659
4013
  border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
3660
- border-radius: 4px;
4014
+ border-radius: var(--cx-border-radius);
3661
4015
  box-sizing: border-box;
3662
4016
  color: var(--cx-font-color);
3663
4017
  cursor: pointer;
3664
- float: left;
4018
+ display: flex;
4019
+ align-items: center;
4020
+ gap: 6px;
4021
+ padding: 0 8px;
3665
4022
  height: 38px;
3666
4023
  margin-top: 2px;
3667
4024
  overflow: hidden;
3668
- padding: 2px;
3669
- text-align: left;
3670
- vertical-align: middle;
3671
4025
  width: 100%;
3672
4026
  }
3673
4027
 
3674
- div.cX-DataFilter-Head-Active {
3675
- background:var(--cx-background-hover-color);
4028
+ .cX-DataFilter-Head .cX-DataFilter-Text,
4029
+ .cX-DataFilter-Head-Active .cX-DataFilter-Text,
4030
+ .cX-DataFilter-Head-Active .cX-DataFilter-Text-Active {
4031
+ top: 0px;
4032
+ left: 0px;
4033
+ font-size: var(--cx-font-size);
4034
+ }
4035
+
4036
+ .cX-DataFilter-Head-Active {
3676
4037
  border-bottom: var(--cx-border-transparent) !important;
3677
- border-radius: 4px 4px 0px 0px;
4038
+ border-radius: var(--cx-border-radius) var(--cx-border-radius) 0px 0px;
3678
4039
  }
3679
4040
 
3680
4041
  svg.cX-DataFilter-Toolbar-Image {
3681
4042
  border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
3682
- border-radius: 5px !important;
4043
+ border-radius: var(--cx-border-radius) !important;
3683
4044
  padding: 2px;
3684
4045
  }
3685
4046
 
@@ -3688,15 +4049,7 @@ svg.cX-DataFilter-Toolbar-ImageNB {
3688
4049
  z-index: 10002;
3689
4050
  }
3690
4051
 
3691
- span.cX-DataFilter-Text {
3692
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAASElEQVR42mNkoBAwUt2A/0AAlgACsg0A6QWZQ4whOA2AsgkagtcAYgwhaAAhQ4gyAJ8htHcBRWFAUSxQlA7AEuSmRFLBwBsAAMDpRxF7e4BAAAAAAElFTkSuQmCC);
3693
- }
3694
-
3695
- span.cX-DataFilter-Text-Active {
3696
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAASUlEQVR42mNkoBAwjhqAMOA/EBCtCQiwGoAkjhOA7MFqADGGoGvGGga4DMGmGWcgohuCSzNOA5ANwacZrwFIhuBVM4gS0oAZAAD1oisRsByngAAAAABJRU5ErkJggg==);
3697
- }
3698
-
3699
- div.cX-DataFilter-Container-Mask-NoOverflow {
4052
+ .cX-DataFilter-Container-Mask-NoOverflow {
3700
4053
  border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
3701
4054
  box-sizing: border-box;
3702
4055
  margin: 5px;
@@ -3706,21 +4059,24 @@ div.cX-DataFilter-Container-Mask-NoOverflow {
3706
4059
  input.cX-DataFilter-Container-Input-Left {
3707
4060
  float: left;
3708
4061
  margin: 10px;
3709
- border: none;
4062
+ border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-datatable-border-color));
3710
4063
  border-radius: var(--cx-border-radius);
3711
- font-size: small;
3712
- color: var(--cx-background-color);
4064
+ font-size: var(--cx-small-font-size);
4065
+ color: var(--cx-datafilter-text-color, var(--cx-font-color));
4066
+ background-color: var(--cx-datafilter-background-color, var(--cx-background-widgets-color));
3713
4067
  }
3714
4068
 
3715
4069
  input.cX-DataFilter-Container-Input-Right {
3716
4070
  float: right;
3717
4071
  margin: 10px;
3718
- border: none;
4072
+ border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-datatable-border-color));
3719
4073
  border-radius: var(--cx-border-radius);
3720
- font-size: small;
3721
- color: var(--cx-background-color);
4074
+ font-size: var(--cx-small-font-size);
4075
+ color: var(--cx-datafilter-text-color, var(--cx-font-color));
4076
+ background-color: var(--cx-datafilter-background-color, var(--cx-background-widgets-color));
3722
4077
  }
3723
4078
 
4079
+ /* @category: widget */
3724
4080
  /***************/
3725
4081
  /* Toggle */
3726
4082
  /***************/
@@ -3729,7 +4085,7 @@ div.cX-Toggle {
3729
4085
  border: none;
3730
4086
  margin: 5px;
3731
4087
  height: 18px;
3732
- font-size: medium;
4088
+ font-size: inherit;
3733
4089
  }
3734
4090
 
3735
4091
  label.cX-Toggle {
@@ -3738,7 +4094,7 @@ label.cX-Toggle {
3738
4094
 
3739
4095
  div.cX-Toggle-Switch {
3740
4096
  display: inline-block;
3741
- background: rgb(204, 204, 204);
4097
+ background: var(--cx-color-light-gray);
3742
4098
  border-radius: 16px;
3743
4099
  width: 28px;
3744
4100
  height: 18px;
@@ -3754,7 +4110,7 @@ div.cX-Toggle-Switch:after {
3754
4110
 
3755
4111
  div.cX-Toggle-Switch:before {
3756
4112
  display: block;
3757
- background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(238, 238, 238) 100%);
4113
+ background: linear-gradient(to bottom, var(--cx-color-white) 0%, var(--cx-color-extra-light-gray) 100%);
3758
4114
  border-radius: 50%;
3759
4115
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
3760
4116
  width: 14px;
@@ -3766,7 +4122,7 @@ div.cX-Toggle-Switch:before {
3766
4122
  }
3767
4123
 
3768
4124
  label.cX-Toggle:hover div.cX-Toggle-Switch:before {
3769
- background: linear-gradient(to bottom, rgb(255, 255, 255)0%, rgb(255, 255, 255)100%);
4125
+ background: linear-gradient(to bottom, var(--cx-color-white) 0%, var(--cx-color-white) 100%);
3770
4126
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
3771
4127
  }
3772
4128
 
@@ -3789,70 +4145,70 @@ span.cX-Toggle {
3789
4145
  position: relative;
3790
4146
  }
3791
4147
 
4148
+ /* @category: widget */
3792
4149
  /****************/
3793
4150
  /* Range Slider */
3794
4151
  /****************/
3795
4152
 
3796
- div.CanvasXpressRangeSliderContainer {
4153
+ div.cX-RangeSlider-Container {
3797
4154
  border: none;
3798
4155
  margin: auto;
3799
4156
  height: 110px;
3800
4157
  }
3801
4158
 
3802
- div.CanvasXpressRangeSliderContainerTop {
4159
+ div.cX-RangeSlider-Container-Top {
3803
4160
  height: 18px;
3804
4161
  margin: 5px;
3805
4162
  position: relative;
3806
4163
  display: flex;
3807
4164
  }
3808
4165
 
3809
- span.CanvasXpressRangeSliderContainerTop {
4166
+ span.cX-RangeSlider-Container-Top {
3810
4167
  border: none;
3811
4168
  }
3812
4169
 
3813
- div.CanvasXpressRangeSliderContainerBottom {
4170
+ div.cX-RangeSlider-Container-Bottom {
3814
4171
  height: 80px;
3815
4172
  position: relative;
3816
4173
  }
3817
4174
 
3818
- div.CanvasXpressRangeSliderInput {
3819
- position: relative;
3820
- z-index: 10001;
3821
- height: 22px;
3822
- margin: 8px 0;
4175
+ div.cX-RangeSlider-Input {
4176
+ display: flex;
4177
+ justify-content: space-between;
4178
+ align-items: center;
4179
+ margin: 4px 0;
4180
+ height: 32px;
3823
4181
  }
3824
4182
 
3825
- input.CanvasXpressRangeSliderMin,
3826
- input.CanvasXpressRangeSliderMax {
3827
- color: var(--cx-toggle-switch-background-color);
3828
- border: 1px solid var(--cx-background-widgets-color);
4183
+ input.cX-RangeSlider-Min,
4184
+ input.cX-RangeSlider-Max {
4185
+ border: none;
3829
4186
  border-radius: var(--cx-border-radius);
3830
4187
  font: var(--cx-font);
3831
4188
  color: var(--cx-font-color);
3832
- margin-bottom: 2px;
4189
+ background-color: var(--cx-background-widgets-color);
4190
+ height: 22px;
3833
4191
  line-height: 100%;
3834
- width: 60px;
4192
+ width: calc(50% - 6px);
3835
4193
  }
3836
4194
 
3837
- input.CanvasXpressRangeSliderMin {
3838
- float: left;
4195
+ input.cX-RangeSlider-Min {
3839
4196
  margin-left: 1px;
3840
4197
  }
3841
4198
 
3842
- input.CanvasXpressRangeSliderMax {
3843
- float: right;
4199
+ input.cX-RangeSlider-Max {
3844
4200
  margin-right: 1px;
3845
4201
  text-align: right;
3846
4202
  }
3847
4203
 
3848
- div.CanvasXpressRangeSlider {
4204
+ div.cX-RangeSlider {
3849
4205
  position: relative;
3850
4206
  z-index: 10001;
3851
4207
  height: 8px;
3852
4208
  margin: 0 15px;
3853
4209
  }
3854
4210
 
3855
- div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderTrack {
4211
+ div.cX-RangeSlider>div.cX-RangeSlider-Track {
3856
4212
  position: absolute;
3857
4213
  z-index: 10001;
3858
4214
  left: 0;
@@ -3863,7 +4219,7 @@ div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderTrack {
3863
4219
  background-color: rgb(238, 238, 238);
3864
4220
  }
3865
4221
 
3866
- div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderRange {
4222
+ div.cX-RangeSlider>div.cX-RangeSlider-Range {
3867
4223
  background-color: var(--cx-toggle-switch-background-color);
3868
4224
  position: absolute;
3869
4225
  z-index: 10002;
@@ -3874,8 +4230,8 @@ div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderRange {
3874
4230
  border-radius: var(--cx-border-radius);
3875
4231
  }
3876
4232
 
3877
- div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbLeft,
3878
- div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbRight {
4233
+ div.cX-RangeSlider>div.cX-RangeSlider-Thumb-Left,
4234
+ div.cX-RangeSlider>div.cX-RangeSlider-Thumb-Right {
3879
4235
  position: absolute;
3880
4236
  z-index: 10003;
3881
4237
  width: 18px;
@@ -3884,28 +4240,28 @@ div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbRight {
3884
4240
  transition: box-shadow var(--cx-transition-speed) ease-in-out;
3885
4241
  }
3886
4242
 
3887
- div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbLeft,
3888
- div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbRight {
4243
+ div.cX-RangeSlider>div.cX-RangeSlider-Thumb-Left,
4244
+ div.cX-RangeSlider>div.cX-RangeSlider-Thumb-Right {
3889
4245
  background-color: var(--cx-toggle-switch-background-color);
3890
4246
  box-shadow: 0 0 0 0 var(--cx-background-hover-color);
3891
4247
  }
3892
4248
 
3893
- div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbLeft {
4249
+ div.cX-RangeSlider>div.cX-RangeSlider-Thumb-Left {
3894
4250
  left: 0%;
3895
4251
  transform: translate(-15px, -5px);
3896
4252
  }
3897
4253
 
3898
- div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbRight {
4254
+ div.cX-RangeSlider>div.cX-RangeSlider-Thumb-Right {
3899
4255
  right: 0%;
3900
4256
  transform: translate(15px, -5px);
3901
4257
  }
3902
4258
 
3903
- div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbLeft:hover,
3904
- div.CanvasXpressRangeSlider>div.CanvasXpressRangeSliderThumbRight:hover {
4259
+ div.cX-RangeSlider>div.cX-RangeSlider-Thumb-Left:hover,
4260
+ div.cX-RangeSlider>div.cX-RangeSlider-Thumb-Right:hover {
3905
4261
  box-shadow: 0 0 0 10px var(--cx-background-hover-color);
3906
4262
  }
3907
4263
 
3908
- input[type=range].customizerRightItemRangeSelect {
4264
+ input[type=range].cX-Customizer-RightItemRangeSelect {
3909
4265
  -webkit-appearance: none;
3910
4266
  appearance: none;
3911
4267
  width: 100%;
@@ -3916,7 +4272,7 @@ input[type=range].customizerRightItemRangeSelect {
3916
4272
  opacity: 1;
3917
4273
  }
3918
4274
 
3919
- input[type=range].customizerRightItemRangeSelect::-webkit-slider-thumb {
4275
+ input[type=range].cX-Customizer-RightItemRangeSelect::-webkit-slider-thumb {
3920
4276
  -webkit-appearance: none;
3921
4277
  appearance: none;
3922
4278
  width: 15px;
@@ -3926,7 +4282,7 @@ input[type=range].customizerRightItemRangeSelect::-webkit-slider-thumb {
3926
4282
  cursor: pointer;
3927
4283
  }
3928
4284
 
3929
- input[type=range].customizerRightItemRangeSelect::-moz-range-thumb {
4285
+ input[type=range].cX-Customizer-RightItemRangeSelect::-moz-range-thumb {
3930
4286
  width: 15px;
3931
4287
  height: 15px;
3932
4288
  border-radius: 50%;
@@ -3956,21 +4312,21 @@ input[type=range]::-webkit-slider-thumb {
3956
4312
  -webkit-appearance: none;
3957
4313
  }
3958
4314
 
3959
- div.CanvasXpressRangeSliderTicks,
3960
- div.CanvasXpressRangeSliderTicksLog {
4315
+ div.cX-RangeSlider-Ticks,
4316
+ div.cX-RangeSlider-Ticks-Log {
3961
4317
  display: flex;
3962
4318
  padding: 0px 10px;
3963
4319
  height: 18px;
3964
4320
  margin-top: 10px;
3965
4321
  }
3966
4322
 
3967
- div.CanvasXpressRangeSliderTicks {
4323
+ div.cX-RangeSlider-Ticks {
3968
4324
  justify-content: space-between;
3969
4325
  }
3970
4326
 
3971
- span.CanvasXpressRangeSliderTicksLong,
3972
- span.CanvasXpressRangeSliderTicksLongSmall,
3973
- span.CanvasXpressRangeSliderTicks {
4327
+ span.cX-RangeSlider-Ticks-Long,
4328
+ span.cX-RangeSlider-Ticks-Long-Small,
4329
+ span.cX-RangeSlider-Ticks {
3974
4330
  position: relative;
3975
4331
  display: flex;
3976
4332
  justify-content: center;
@@ -3979,21 +4335,15 @@ span.CanvasXpressRangeSliderTicks {
3979
4335
  margin-bottom: 10px;
3980
4336
  }
3981
4337
 
3982
- span.CanvasXpressRangeSliderTicksLong {
4338
+ span.cX-RangeSlider-Ticks-Long,
4339
+ span.cX-RangeSlider-Ticks-Long-Small {
3983
4340
  color: var(--cx-font-color);
3984
4341
  height: 10px;
3985
4342
  line-height: 35px;
3986
- font-size: x-small;
3987
- }
3988
-
3989
- span.CanvasXpressRangeSliderTicksLongSmall {
3990
- color: var(--cx-font-color);
3991
- height: 10px;
3992
- line-height: 35px;
3993
- font-size: x-small;
4343
+ font-size: var(--cx-small-font-size);
3994
4344
  }
3995
4345
 
3996
- span.CanvasXpressRangeSliderTicks {
4346
+ span.cX-RangeSlider-Ticks {
3997
4347
  height: 5px;
3998
4348
  line-height: 10px;
3999
4349
  }
@@ -4007,6 +4357,7 @@ input[type=number]::-webkit-inner-spin-button {
4007
4357
  -webkit-appearance: none;
4008
4358
  }
4009
4359
 
4360
+ /* @category: shared */
4010
4361
  /***************/
4011
4362
  /* Scrollbars */
4012
4363
  /***************/
@@ -4018,14 +4369,7 @@ div.cX-DataTable-Vertical-Scrollbar::-webkit-scrollbar-button,
4018
4369
  /*div.cX-DataFilter-Content::-webkit-scrollbar-button,*/
4019
4370
  div.cX-DataFilter-Container-Mask::-webkit-scrollbar-button,
4020
4371
  div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar-button,
4021
- div.CanvasXpressDataExplorer::-webkit-scrollbar-button,
4022
- div.CanvasXpressDataCustomizer::-webkit-scrollbar-button,
4023
- select.CanvasXpressSearchCustomizer::-webkit-scrollbar-button,
4024
- select.CanvasXpressConfigurator::-webkit-scrollbar-button,
4025
- div.CanvasXpressConfiguratorExample::-webkit-scrollbar-button,
4026
- div.CanvasXpressConfiguratorExampleContent::-webkit-scrollbar-button,
4027
- select.CanvasXpressSlider::-webkit-scrollbar-button,
4028
- div.cX-bin-name-container::-webkit-scrollbar-button {
4372
+ div.cX-Bin-Name-Container::-webkit-scrollbar-button {
4029
4373
  width: 4px;
4030
4374
  height: 4px;
4031
4375
  }
@@ -4034,21 +4378,15 @@ div.cX-bin-name-container::-webkit-scrollbar-button {
4034
4378
 
4035
4379
  /*div.cX-DataFilter-Content::-webkit-scrollbar-track,*/
4036
4380
  div.cX-DataFilter-Container-Mask::-webkit-scrollbar-track,
4037
- div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar-track,
4038
- select.CanvasXpressSearchCustomizer::-webkit-scrollbar-track,
4039
- select.CanvasXpressConfigurator::-webkit-scrollbar-track,
4040
- select.CanvasXpressSlider::-webkit-scrollbar-track {
4041
- background-color: rgb(255, 255, 255);
4381
+ div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar-track {
4382
+ background-color: var(--cx-background-widgets-color);
4042
4383
  }
4043
4384
 
4044
4385
  div.cX-DataTable-Horizontal-Scrollbar::-webkit-scrollbar-track,
4045
4386
  div.cX-DataTable-Vertical-Scrollbar::-webkit-scrollbar-track,
4046
- div.CanvasXpressDataExplorer::-webkit-scrollbar-track,
4047
- div.CanvasXpressDataCustomizer::-webkit-scrollbar-track,
4048
- div.CanvasXpressConfiguratorExample::-webkit-scrollbar-track,
4049
- div.CanvasXpressConfiguratorExampleContent::-webkit-scrollbar-track,
4050
- div.cX-bin-name-container::-webkit-scrollbar-track {
4051
- background-color: rgb(245, 245, 245);
4387
+ div.cX-Bin-Name-Container::-webkit-scrollbar-track {
4388
+ background-color: var(--cx-background-hover-color);
4389
+ border-radius: var(--cx-border-radius);
4052
4390
  }
4053
4391
 
4054
4392
  /* All tracks -hovers */
@@ -4058,41 +4396,27 @@ div.cX-DataTable-Vertical-Scrollbar::-webkit-scrollbar-track:hover,
4058
4396
  /*div.cX-DataFilter-Content::-webkit-scrollbar-track:hover,*/
4059
4397
  div.cX-DataFilter-Container-Mask::-webkit-scrollbar-track:hover,
4060
4398
  div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar-track:hover,
4061
- div.CanvasXpressDataExplorer::-webkit-scrollbar-track:hover,
4062
- div.CanvasXpressDataCustomizer::-webkit-scrollbar-track:hover,
4063
- select.CanvasXpressSearchCustomizer::-webkit-scrollbar-track:hover,
4064
- select.CanvasXpressConfigurator::-webkit-scrollbar-track:hover,
4065
- div.CanvasXpressConfiguratorExample::-webkit-scrollbar-track:hover,
4066
- div.CanvasXpressConfiguratorExampleContent::-webkit-scrollbar-track:hover,
4067
- select.CanvasXpressSlider::-webkit-scrollbar-track:hover,
4068
- div.cX-bin-name-container::-webkit-scrollbar-track:hover {
4399
+ div.cX-Bin-Name-Container::-webkit-scrollbar-track:hover {
4069
4400
  background-color: var(--cx-background-hover-color);
4070
- border-radius: 8px;
4401
+ border-radius: var(--cx-border-radius);
4071
4402
  }
4072
4403
 
4073
4404
  /* scrollbar background could be of two different colors but match the style tracks above */
4074
4405
 
4075
4406
  /*div.cX-DataFilter-Content::-webkit-scrollbar,*/
4076
4407
  div.cX-DataFilter-Container-Mask::-webkit-scrollbar,
4077
- div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar,
4078
- select.CanvasXpressSearchCustomizer::-webkit-scrollbar,
4079
- select.CanvasXpressConfigurator::-webkit-scrollbar,
4080
- select.CanvasXpressSlider::-webkit-scrollbar {
4408
+ div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar {
4081
4409
  width: 8px;
4082
4410
  height: 8px;
4083
- background-color: rgb(255, 255, 255);
4411
+ background-color: var(--cx-scrollbar-background-color);
4084
4412
  }
4085
4413
 
4086
4414
  div.cX-DataTable-Horizontal-Scrollbar::-webkit-scrollbar,
4087
4415
  div.cX-DataTable-Vertical-Scrollbar::-webkit-scrollbar,
4088
- div.CanvasXpressDataExplorer::-webkit-scrollbar,
4089
- div.CanvasXpressDataCustomizer::-webkit-scrollbar,
4090
- div.CanvasXpressConfiguratorExample::-webkit-scrollbar,
4091
- div.CanvasXpressConfiguratorExampleContent::-webkit-scrollbar,
4092
- div.cX-bin-name-container::-webkit-scrollbar {
4416
+ div.cX-Bin-Name-Container::-webkit-scrollbar {
4093
4417
  width: 8px;
4094
4418
  height: 8px;
4095
- background-color: rgb(245, 245, 245);
4419
+ background-color: var(--cx-scrollbar-alt-background-color);
4096
4420
  }
4097
4421
 
4098
4422
  /* All tracks thumbs */
@@ -4102,51 +4426,48 @@ div.cX-DataTable-Vertical-Scrollbar::-webkit-scrollbar-thumb,
4102
4426
  /*div.cX-DataFilter-Content::-webkit-scrollbar-thumb,*/
4103
4427
  div.cX-DataFilter-Container-Mask::-webkit-scrollbar-thumb,
4104
4428
  div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar-thumb,
4105
- div.CanvasXpressDataExplorer::-webkit-scrollbar-thumb,
4106
- div.CanvasXpressDataCustomizer::-webkit-scrollbar-thumb,
4107
- select.CanvasXpressSearchCustomizer::-webkit-scrollbar-thumb,
4108
- select.CanvasXpressConfigurator::-webkit-scrollbar-thumb,
4109
- div.CanvasXpressConfiguratorExample::-webkit-scrollbar-thumb,
4110
- div.CanvasXpressConfiguratorExampleContent::-webkit-scrollbar-thumb,
4111
- select.CanvasXpressSlider::-webkit-scrollbar-thumb,
4112
- div.cX-bin-name-container::-webkit-scrollbar-thumb {
4113
- background-color: var(--cx-background-contrast-color);
4114
- border-radius: 8px;
4429
+ div.cX-Bin-Name-Container::-webkit-scrollbar-thumb {
4430
+ background-color: var(--cx-scrollbar-thumb-color);
4431
+ border-radius: var(--cx-border-radius);
4115
4432
  border: none;
4116
4433
  }
4117
4434
 
4118
- div.cX-DataFilter::selection,
4119
- div.cX-DataFilter-Toolbar::selection {
4120
- background: var(--cx-color-transparent);
4121
- color: var(--cx-font-color);
4435
+ div.cX-DataTable-Horizontal-Scrollbar::-webkit-scrollbar-thumb:hover,
4436
+ div.cX-DataTable-Vertical-Scrollbar::-webkit-scrollbar-thumb:hover,
4437
+ /*div.cX-DataFilter-Content::-webkit-scrollbar-thumb:hover,*/
4438
+ div.cX-DataFilter-Container-Mask::-webkit-scrollbar-thumb:hover,
4439
+ div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar-thumb:hover,
4440
+ div.cX-Bin-Name-Container::-webkit-scrollbar-thumb:hover {
4441
+ background-color: var(--cx-scrollbar-thumb-hover-color);
4122
4442
  }
4123
4443
 
4124
- div.cX-DataFilter-Container-Item::selection {
4444
+ .cX-DataFilter::selection,
4445
+ .cX-DataFilter-Toolbar::selection {
4125
4446
  background: var(--cx-color-transparent);
4126
- color: var(--cx-background-color);
4447
+ color: var(--cx-font-color);
4127
4448
  }
4128
-
4449
+ /* @category: widget */
4129
4450
  /*****************
4130
4451
  * Context Menus *
4131
4452
  *****************/
4132
4453
 
4133
- .cX-Container-Menus {
4454
+ .cX-Menu-Container {
4134
4455
  position: sticky;
4135
4456
  z-index: 100000;
4136
4457
  background: transparent;
4137
4458
  height: 0px;
4138
4459
  }
4139
4460
 
4140
- div.CanvasXpressLink {
4461
+ .cX-Menu {
4141
4462
  box-sizing: border-box;
4142
- background-color: rgb(255, 255, 255);
4463
+ background-color: var(--cx-context-menu-background-color, var(--cx-background-widgets-color));
4143
4464
  background-image: url(data:image/gif;base64,R0lGODlh+gABAIcAAOLj4/Dw8P///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAP8ALAAAAAD6AAEAAAgfAAMIHEiwoMGBAAQcXMiwocOHECNKnEixosWLGCMGBAA7);
4144
4465
  background-repeat: repeat-y;
4145
- border: 1px solid rgb(83, 105, 255);
4146
- border-radius: 3px;
4466
+ border: 1px var(--cx-border-style) var(--cx-context-menu-border-color, var(--cx-datatable-border-color));
4467
+ border-radius: var(--cx-border-radius);
4147
4468
  box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
4148
- color: var(--cx-font-color);
4149
- font: var(--cx-font);
4469
+ color: var(--cx-context-menu-text-color, var(--cx-font-color));
4470
+ font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
4150
4471
  line-height: 100%;
4151
4472
  margin: 0px;
4152
4473
  padding: 0px;
@@ -4154,14 +4475,14 @@ div.CanvasXpressLink {
4154
4475
  -moz-box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
4155
4476
  }
4156
4477
 
4157
- div.CanvasXpressMenu {
4478
+ .cX-Menu-Sub {
4158
4479
  box-sizing: border-box;
4159
- background-color: rgb(255, 255, 255);
4160
- border: var(--cx-border);
4161
- border-radius: 3px;
4480
+ background-color: var(--cx-context-menu-background-color, var(--cx-background-widgets-color));
4481
+ border: 1px var(--cx-border-style) var(--cx-context-menu-border-color, var(--cx-datatable-border-color));
4482
+ border-radius: var(--cx-border-radius);
4162
4483
  box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
4163
- color: var(--cx-font-color);
4164
- font: var(--cx-x-large-font);
4484
+ color: var(--cx-context-menu-text-color, var(--cx-font-color));
4485
+ font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
4165
4486
  line-height: 100%;
4166
4487
  margin: 0px;
4167
4488
  padding: 0px;
@@ -4169,7 +4490,7 @@ div.CanvasXpressMenu {
4169
4490
  -moz-box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
4170
4491
  }
4171
4492
 
4172
- ul.CanvasXpressList {
4493
+ ul.cX-Menu-List {
4173
4494
  background: transparent;
4174
4495
  border: 0px none;
4175
4496
  list-style: none;
@@ -4179,9 +4500,9 @@ ul.CanvasXpressList {
4179
4500
  height: calc(100% - 100px);
4180
4501
  }
4181
4502
 
4182
- li.CanvasXpressListItemSep {
4503
+ .cX-Menu-Item-Sep {
4183
4504
  display: block;
4184
- font: var(--cx-x-large-font);
4505
+ font: var(--cx-font);
4185
4506
  color: var(--cx-font-color);
4186
4507
  font-size: 1px;
4187
4508
  height: 100%;
@@ -4193,37 +4514,18 @@ li.CanvasXpressListItemSep {
4193
4514
  white-space: nowrap;
4194
4515
  }
4195
4516
 
4196
- input.CanvasXpressListItem {
4197
- display: block;
4198
- font: var(--cx-x-large-font);
4199
- color: var(--cx-font-color);
4200
- line-height: 100%;
4201
- list-style: none;
4202
- margin: 0px;
4203
- padding: 1px;
4204
- white-space: nowrap;
4205
- }
4206
-
4207
- input[type=file] {
4517
+ input[type=file] {
4208
4518
  display: block;
4209
4519
  }
4210
4520
 
4211
- div.CanvasXpressListItem {
4212
- box-sizing: border-box;
4213
- border: 1px solid rgb(83, 105, 255);
4214
- font: var(--cx-x-large-font);
4215
- color: var(--cx-font-color);
4216
- line-height: 24px;
4217
- }
4218
-
4219
- li.CanvasXpressListItem {
4220
- border-color: rgba(0, 0, 0, 0);
4521
+ .cX-Menu-Item,
4522
+ .cX-Menu-Item-Active {
4221
4523
  border-style: solid;
4222
4524
  border-width: 1px 0px;
4223
4525
  cursor: default;
4224
4526
  display: block;
4225
- font: var(--cx-x-large-font);
4226
- color: var(--cx-font-color);
4527
+ font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
4528
+ color: var(--cx-context-menu-text-color, var(--cx-font-color));
4227
4529
  height: 100%;
4228
4530
  line-height: 100%;
4229
4531
  list-style: none;
@@ -4234,37 +4536,27 @@ li.CanvasXpressListItem {
4234
4536
  text-align: left;
4235
4537
  }
4236
4538
 
4237
- li.CanvasXpressListItem:hover,
4238
- li.CanvasXpressListItemActive {
4239
- background: rgba(83, 105, 255, 0.1);
4240
- border-color: rgb(83, 105, 255);
4241
- border-style: solid;
4242
- border-width: 1px 0px;
4243
- cursor: default;
4244
- display: block;
4245
- font: var(--cx-x-large-font);
4246
- color: var(--cx-font-color);
4247
- height: 100%;
4248
- line-height: 100%;
4249
- list-style: none;
4250
- margin: 0px;
4251
- padding: 0px;
4252
- width: 100%;
4253
- white-space: nowrap;
4254
- text-align: left;
4539
+ .cX-Menu-Item {
4540
+ border-color: rgba(0, 0, 0, 0);
4255
4541
  }
4256
4542
 
4257
- li.CanvasXpressListItemActive > :first-child,
4258
- li.CanvasXpressListItemActive > :first-child > svg:first-child {
4543
+ .cX-Menu-Item:hover,
4544
+ .cX-Menu-Item-Active {
4545
+ background: var(--cx-context-menu-hover-color, rgba(83, 105, 255, 0.1));
4546
+ border-color: var(--cx-context-menu-border-color, rgb(83, 105, 255));
4547
+ }
4548
+
4549
+ .cX-Menu-Item-Active > :first-child,
4550
+ .cX-Menu-Item-Active > :first-child > svg:first-child {
4259
4551
  pointer-events: none;
4260
4552
  }
4261
4553
 
4262
- li.CanvasXpressListItemActive > :first-child > div:last-child,
4263
- li.CanvasXpressListItemActive > :first-child > input:last-child {
4554
+ .cX-Menu-Item-Active > :first-child > div:last-child,
4555
+ .cX-Menu-Item-Active > :first-child > input:last-child {
4264
4556
  pointer-events: auto;
4265
4557
  }
4266
4558
 
4267
- li.CanvasXpressListItemScrollTop {
4559
+ .cX-Menu-Item-Scroll-Top {
4268
4560
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAFCAYAAACw/UeDAAAARUlEQVR42mNkQAMXL178z0Ah0NfXZ0Tmo3BAFkhLS+M1IDw8kmHlyuV41Tx9+hTFIjiDWAtggBSLGMmxgFSLGKkRB4QAAILWJXgE49MrAAAAAElFTkSuQmCC);
4269
4561
  background-repeat: no-repeat;
4270
4562
  background-position: 50% 50%;
@@ -4275,7 +4567,7 @@ li.CanvasXpressListItemScrollTop {
4275
4567
  width: 100%;
4276
4568
  }
4277
4569
 
4278
- li.CanvasXpressListItemScrollTopActive {
4570
+ .cX-Menu-Item-Scroll-Top-Active {
4279
4571
  background-color: rgb(219, 236, 244);
4280
4572
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAFCAYAAACw/UeDAAAAbUlEQVR42mNkQAOHb/38z0AhsFVjZ0Tmo3BAFmjIsOHULMLJwKDs1sFwd1cFw5vvuC258eQXikWMyBYoSOC2QIYXYgEMgCx68hm3RQ9eICxihFkgzI/bAk0xVAuQLbr+CrdFbz9CLGKkRhwQAgBYqyubRxy5uAAAAABJRU5ErkJggg==);
4281
4573
  background-repeat: no-repeat;
@@ -4289,7 +4581,7 @@ li.CanvasXpressListItemScrollTopActive {
4289
4581
  width: 100%;
4290
4582
  }
4291
4583
 
4292
- li.CanvasXpressListItemScrollBottom {
4584
+ .cX-Menu-Item-Scroll-Bottom {
4293
4585
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAFCAYAAACw/UeDAAAASUlEQVR42mO8ePHifwYaA0YQAbJIWloar8Lw8EgMsZUrl+PV8/TpUwZ9fX1GRpgAqRYRawHcJ6RaRIoFGJbALCIcyvgBsgUgAACiryV42XltywAAAABJRU5ErkJggg==);
4294
4586
  background-repeat: no-repeat;
4295
4587
  background-position: 50% 50%;
@@ -4300,7 +4592,7 @@ li.CanvasXpressListItemScrollBottom {
4300
4592
  width: 100%;
4301
4593
  }
4302
4594
 
4303
- li.CanvasXpressListItemScrollBottomActive {
4595
+ .cX-Menu-Item-Scroll-Bottom-Active {
4304
4596
  background-color: rgb(219, 236, 244);
4305
4597
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAFCAYAAACw/UeDAAAAcklEQVR42mM8fOvnfwYaA0YQAbJImJ8NpyJNMQYGZbcODPG7uyoYrr/Cbfjbj78YbNXYGRlhAiCLFCRwWyTDi2oRyIInn3Fb8OAFxAK4T5At0pDBbZEIJ8QikAVvvuO24MYThAUYlsAsIjPo4QDZAhAAAK/AK5vjVTSgAAAAAElFTkSuQmCC);
4306
4598
  background-repeat: no-repeat;
@@ -4314,17 +4606,10 @@ li.CanvasXpressListItemScrollBottomActive {
4314
4606
  width: 100%;
4315
4607
  }
4316
4608
 
4317
- li.CanvasXpressListItemScrollSearch {
4318
- border-color: rgb(170, 204, 246);
4319
- border-style: solid;
4320
- border-width: 1px;
4321
- width: 100%;
4322
- }
4323
-
4324
- input.CanvasXpressListItemScrollSearch {
4325
- color: var(--cx-font-color);
4609
+ .cX-Menu-Item-Scroll-Search {
4610
+ color: var(--cx-context-menu-text-color, var(--cx-font-color));
4326
4611
  cursor: default;
4327
- font: var(--cx-x-large-font);
4612
+ font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
4328
4613
  line-height: 24px;
4329
4614
  list-style: none;
4330
4615
  margin: 3px;
@@ -4334,14 +4619,14 @@ input.CanvasXpressListItemScrollSearch {
4334
4619
  width: 93%;
4335
4620
  }
4336
4621
 
4337
- a.CanvasXpressListItemA {
4622
+ .cX-Menu-Item-A {
4338
4623
  border-color: rgba(0, 0, 0, 0);
4339
4624
  border-style: solid;
4340
4625
  border-width: 0px 1px;
4341
- color: var(--cx-font-color);
4626
+ color: var(--cx-context-menu-text-color, var(--cx-font-color));
4342
4627
  cursor: pointer;
4343
4628
  display: flex;
4344
- font: var(--cx-x-large-font);
4629
+ font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
4345
4630
  line-height: 24px;
4346
4631
  list-style: none;
4347
4632
  margin: 0px;
@@ -4353,14 +4638,14 @@ a.CanvasXpressListItemA {
4353
4638
  white-space: nowrap;
4354
4639
  }
4355
4640
 
4356
- a.CanvasXpressListItemAActive {
4357
- border-color: rgb(170, 204, 246);
4641
+ .cX-Menu-Item-A-Active {
4642
+ border-color: var(--cx-context-menu-border-color, rgb(170, 204, 246));
4358
4643
  border-style: solid;
4359
4644
  border-width: 0px 1px;
4360
- color: var(--cx-font-color);
4645
+ color: var(--cx-context-menu-text-color, var(--cx-font-color));
4361
4646
  cursor: pointer;
4362
4647
  display: flex;
4363
- font: var(--cx-x-large-font);
4648
+ font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
4364
4649
  line-height: 24px;
4365
4650
  list-style: none;
4366
4651
  margin: 0px;
@@ -4372,15 +4657,15 @@ a.CanvasXpressListItemAActive {
4372
4657
  white-space: nowrap;
4373
4658
  }
4374
4659
 
4375
- a.CanvasXpressListItemAArrow {
4660
+ .cX-Menu-Item-A-Arrow {
4376
4661
  background: url(data:image/gif;base64,R0lGODlhDAAJAIcAACluvipxvzJ1vyxwwCt1yjp6zkD/QDiC1jmE0zyE0z2I3UeLyUGJ2VWUzlKg7FSg6Weg1WKq8Y7D9orD/JXL/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAMAAAYALAAAAAAMAAkAAAgzAA8YGEiwoAEFCQwaJEABgUKCBCRMYPDQAIEHESAIeEjAQYMAFQksAFDR4oCSBgqgNBAQADs=) no-repeat scroll right 50% transparent;
4377
4662
  border-color: rgba(0, 0, 0, 0);
4378
4663
  border-style: solid;
4379
4664
  border-width: 0px 1px;
4380
- color: var(--cx-font-color);
4665
+ color: var(--cx-context-menu-text-color, var(--cx-font-color));
4381
4666
  cursor: pointer;
4382
4667
  display: flex;
4383
- font: var(--cx-x-large-font);
4668
+ font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
4384
4669
  line-height: 24px;
4385
4670
  list-style: none;
4386
4671
  margin: 0px;
@@ -4392,15 +4677,15 @@ a.CanvasXpressListItemAArrow {
4392
4677
  white-space: nowrap;
4393
4678
  }
4394
4679
 
4395
- a.CanvasXpressListItemAArrowActive {
4680
+ .cX-Menu-Item-A-Arrow-Active {
4396
4681
  background: url(data:image/gif;base64,R0lGODlhDAAJAIcAACluvipxvzJ1vyxwwCt1yjp6zkD/QDiC1jmE0zyE0z2I3UeLyUGJ2VWUzlKg7FSg6Weg1WKq8Y7D9orD/JXL/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAMAAAYALAAAAAAMAAkAAAgzAA8YGEiwoAEFCQwaJEABgUKCBCRMYPDQAIEHESAIeEjAQYMAFQksAFDR4oCSBgqgNBAQADs=) no-repeat scroll right 50% transparent;
4397
- border-color: rgb(170, 204, 246);
4682
+ border-color: var(--cx-context-menu-border-color, rgb(170, 204, 246));
4398
4683
  border-style: solid;
4399
4684
  border-width: 0px 1px;
4400
- color: var(--cx-font-color);
4685
+ color: var(--cx-context-menu-text-color, var(--cx-font-color));
4401
4686
  cursor: pointer;
4402
4687
  display: flex;
4403
- font: var(--cx-x-large-font);
4688
+ font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
4404
4689
  line-height: 24px;
4405
4690
  list-style: none;
4406
4691
  margin: 0px;
@@ -4412,13 +4697,12 @@ a.CanvasXpressListItemAArrowActive {
4412
4697
  white-space: nowrap;
4413
4698
  }
4414
4699
 
4415
- img.CanvasXpressListIcon,
4416
- svg.CanvasXpressListIcon {
4700
+ .cX-Menu-List-Icon {
4417
4701
  background-position: center;
4418
4702
  border: 0px none !important;
4419
- color: var(--cx-font-color);
4703
+ color: var(--cx-context-menu-text-color, var(--cx-font-color));
4420
4704
  cursor: pointer;
4421
- font: var(--cx-x-large-font);
4705
+ font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
4422
4706
  height: 24px;
4423
4707
  line-height: 24px;
4424
4708
  list-style: none;
@@ -4434,27 +4718,21 @@ svg.CanvasXpressListIcon {
4434
4718
  box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
4435
4719
  }
4436
4720
 
4437
- span.CanvasXpressListItemText {
4438
- color: var(--cx-font-color);
4721
+ .cX-Menu-Item-Text {
4722
+ color: var(--cx-context-menu-text-color, var(--cx-font-color));
4439
4723
  cursor: pointer;
4440
- font: var(--cx-x-large-font);
4724
+ font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
4441
4725
  line-height: 24px;
4442
4726
  list-style: none;
4443
- margin-right: 10px;
4444
4727
  white-space: nowrap;
4445
4728
  }
4446
4729
 
4447
- input.CanvasXpressListItemText {
4448
- color: var(--cx-font-color);
4449
- cursor: pointer;
4450
- font: var(--cx-x-large-font);
4451
- line-height: 24px;
4452
- list-style: none;
4453
- white-space: nowrap;
4730
+ span.cX-Menu-Item-Text {
4731
+ margin-right: 10px;
4454
4732
  }
4455
4733
 
4456
- span.CanvasXpressListItemTextShort {
4457
- color: var(--cx-font-color);
4734
+ .cX-Menu-Item-Text-Short {
4735
+ color: var(--cx-context-menu-text-color, var(--cx-font-color));
4458
4736
  cursor: pointer;
4459
4737
  float: right;
4460
4738
  font: var(--cx-small-font-italic);
@@ -4465,13 +4743,13 @@ span.CanvasXpressListItemTextShort {
4465
4743
  white-space: nowrap;
4466
4744
  }
4467
4745
 
4468
- span.CanvasXpressListItemTextSep {
4469
- background-color: rgb(224, 224, 224);
4746
+ .cX-Menu-Item-Text-Sep {
4747
+ background-color: var(--cx-context-menu-hover-color, rgb(224, 224, 224));
4470
4748
  border-bottom: 1px solid;
4471
4749
  border-bottom-color: rgb(255, 255, 255);
4472
4750
  display: block;
4473
- font: var(--cx-x-large-font);
4474
- color: var(--cx-font-color);
4751
+ font: var(--cx-small-font-size) var(--cx-font-family);
4752
+ color: var(--cx-context-menu-text-color, var(--cx-font-color));
4475
4753
  font-size: 1px;
4476
4754
  line-height: 1px;
4477
4755
  list-style: none;
@@ -4479,351 +4757,7 @@ span.CanvasXpressListItemTextSep {
4479
4757
  overflow: hidden;
4480
4758
  white-space: nowrap;
4481
4759
  }
4482
-
4483
- table.CanvasXpressListItemTable {
4484
- border: collapse;
4485
- line-height: 20px;
4486
- color: var(--cx-font-color);
4487
- font: var(--cx-x-large-font);
4488
- color: var(--cx-font-color);
4489
- line-height: 24px;
4490
- padding-left: 3px;
4491
- }
4492
-
4493
- img.cX-Toolbar-Help,
4494
- svg.cX-Toolbar-Help {
4495
- background: rgba(0, 0, 0, 0) !important;
4496
- border: 0px none !important;
4497
- box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
4498
- float: right;
4499
- margin: 0px 0px 0px 2px !important;
4500
- }
4501
-
4502
- div.cX-Toolbar-Help {
4503
- box-sizing: border-box;
4504
- background-color: rgb(255, 255, 255);
4505
- border-radius: var(--cx-border-radius);
4506
- border: 1px solid rgb(83, 105, 255);
4507
- box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
4508
- color: var(--cx-font-color);
4509
- font: var(--cx-x-large-font);
4510
- line-height: 24px;
4511
- }
4512
-
4513
- p.cX-Toolbar-Help {
4514
- font: var(--cx-x-large-font);
4515
- color: var(--cx-font-color);
4516
- line-height: 24px;
4517
- margin: 0px;
4518
- padding: 5px 5px 5px 20px;
4519
- }
4520
-
4521
- div.CanvasXpressForm {
4522
- box-sizing: border-box;
4523
- border: 1px solid rgb(83, 105, 255);
4524
- border-radius: var(--cx-border-radius);
4525
- background-color: rgb(255, 255, 255);
4526
- color: var(--cx-font-color);
4527
- cursor: move;
4528
- font: var(--cx-x-large-font);
4529
- margin: 8px;
4530
- padding: 8px;
4531
- position: absolute;
4532
- white-space: nowrap;
4533
- }
4534
-
4535
- input.CanvasXpressFormButton {
4536
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAAFklEQVR42mP88OHDf0aSiGfPntGaAAAL8XAJa+SuYgAAAABJRU5ErkJggg==);
4537
- background-repeat: repeat-x;
4538
- border: 1px solid rgb(83, 105, 255);
4539
- border-radius: 5px 5px 5px 5px;
4540
- color: var(--cx-font-color);
4541
- cursor: pointer;
4542
- float: left;
4543
- height: 22px;
4544
- margin-top: 2px;
4545
- overflow: hidden;
4546
- padding: 2px;
4547
- vertical-align: middle;
4548
- }
4549
-
4550
- input.CanvasXpressFormButtonActive {
4551
- background-color: rgb(255, 255, 255);
4552
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAAFklEQVR42mN89fnvf0aSiBvPf9GaAABVL3D5nF6uqAAAAABJRU5ErkJggg==);
4553
- background-repeat: repeat-x;
4554
- border: 1px solid rgb(83, 105, 255);
4555
- border-radius: 5px 5px 0px 0px;
4556
- color: var(--cx-font-color);
4557
- cursor: pointer;
4558
- float: left;
4559
- height: 22px;
4560
- margin-top: 2px;
4561
- overflow: hidden;
4562
- padding: 2px;
4563
- vertical-align: middle;
4564
- }
4565
-
4566
- input.CanvasXpressFormText {
4567
- background-color: rgb(255, 255, 255);
4568
- border: 1px solid rgb(83, 105, 255);
4569
- color: var(--cx-font-color);
4570
- font: var(--cx-x-large-font);
4571
- line-height: 24px;
4572
- padding-left: 3px;
4573
- }
4574
-
4575
- form.CanvasXpressFormForm {
4576
- background-color: rgb(255, 255, 255);
4577
- border: 1px solid rgb(83, 105, 255);
4578
- color: var(--cx-font-color);
4579
- font: var(--cx-x-large-font);
4580
- line-height: 24px;
4581
- margin: 8px;
4582
- overflow: auto;
4583
- padding-left: 3px;
4584
- }
4585
-
4586
- div.CanvasXpressConfiguratorColor {
4587
- box-sizing: content-box;
4588
- border: 1px solid rgb(83, 105, 255);
4589
- font: var(--cx-font);
4590
- color: rgb(34, 34, 34);
4591
- line-height: 18px;
4592
- }
4593
-
4594
- div.CanvasXpressConfiguratorColorMain {
4595
- box-sizing: content-box;
4596
- background-image: url(data:image/png;base64,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);
4597
- background-repeat: no-repeat;
4598
- box-sizing: content-box;
4599
- border: none;
4600
- font: var(--cx-font);
4601
- color:var(--cx-font-color);
4602
- float: left;
4603
- cursor: crosshair;
4604
- }
4605
-
4606
- div.CanvasXpressConfiguratorColorExtra {
4607
- box-sizing: content-box;
4608
- background-image: url(data:image/gif;base64,R0lGODlhDwAPAKEBAAAAAP///////////yH5BAEKAAIALAAAAAAPAA8AAAIklB8Qx53b4otSUWcvyiz4/4AeQJbmKY4p1HHapBlwPL/uVRsFADs=);
4609
- background-repeat: no-repeat;
4610
- border: none;
4611
- font: var(--cx-font);
4612
- color: var(--cx-font-color);
4613
- cursor: crosshair;
4614
- overflow: hidden;
4615
- }
4616
-
4617
- /*
4618
- * Slider
4619
- */
4620
-
4621
- div.CanvasXpressSlider {
4622
- background: rgba(0, 0, 0, 0);
4623
- border: 1px solid rgba(35, 82, 124, 0.2);
4624
- border-radius: 50%;
4625
- height: 36px;
4626
- position: absolute;
4627
- margin-left: 3px;
4628
- margin-right: 3px;
4629
- width: 36px;
4630
- }
4631
-
4632
- div.CanvasXpressSliderRemote {
4633
- background: rgba(0, 0, 0, 0);
4634
- height: 36px;
4635
- position: absolute;
4636
- margin-left: 3px;
4637
- margin-right: 3px;
4638
- width: 36px;
4639
- }
4640
-
4641
- div.CanvasXpressSlider:hover {
4642
- background: rgba(0, 0, 0, 0.4);
4643
- }
4644
-
4645
- @media screen and (max-width: 480px) {
4646
- div.CanvasXpressSlider {
4647
- width: 20px;
4648
- height: 20px;
4649
- }
4650
- }
4651
-
4652
- div.CanvasXpressSliderLeft {
4653
- left: -50px;
4654
- }
4655
-
4656
- div.CanvasXpressSliderLeft img,
4657
- div.CanvasXpressSliderLeft svg {
4658
- margin: 5px 5px 3px 3px;
4659
- }
4660
-
4661
- @media screen and (max-width: 480px) {
4662
- div.CanvasXpressSliderLeft {
4663
- left: -25px;
4664
- }
4665
-
4666
- div.CanvasXpressSliderLeft img,
4667
- div.CanvasXpressSliderLeft svg {
4668
- margin: -4px 0px 0px -2px;
4669
- }
4670
- }
4671
-
4672
- div.CanvasXpressSliderRight {
4673
- right: -50px;
4674
- }
4675
-
4676
- div.CanvasXpressSliderRight img,
4677
- div.CanvasXpressSliderRight svg {
4678
- margin: 5px 3px 3px 8px;
4679
- }
4680
-
4681
- @media screen and (max-width: 480px) {
4682
- div.CanvasXpressSliderRight {
4683
- right: -25px;
4684
- }
4685
-
4686
- div.CanvasXpressSliderRight img,
4687
- div.CanvasXpressSliderRight svg {
4688
- margin: -4px -2px 0px 2px;
4689
- }
4690
- }
4691
-
4692
- div.CanvasXpressSliderDotsContainer {
4693
- top: 25%;
4694
- }
4695
-
4696
- div.CanvasXpressSliderDots {
4697
- width: 10px;
4698
- height: 10px;
4699
- }
4700
-
4701
- @media screen and (max-width: 480px) {
4702
- div.CanvasXpressSliderDots {
4703
- width: 5px;
4704
- height: 5px;
4705
- margin-left: 1px;
4706
- margin-right: 1px;
4707
- }
4708
- }
4709
-
4710
- input.CanvasXpressSlider,
4711
- select.CanvasXpressSlider {
4712
- padding: 2px 3px 2px 2px;
4713
- cursor: default;
4714
- color: var(--cx-font-color);
4715
- border-left: none;
4716
- border-right: none;
4717
- border-top: none;
4718
- border-bottom: 1px solid rgb(83, 105, 255);
4719
- background: rgba(0, 0, 0, 0);
4720
- width: 100%;
4721
- max-Width: 100%;
4722
- line-height: 22px;
4723
- margin: 0;
4724
- }
4725
-
4726
- input.CanvasXpressSlider:focus,
4727
- select.CanvasXpressSlider:focus {
4728
- outline: 0;
4729
- }
4730
-
4731
- /*
4732
- * Parent Node
4733
- */
4734
-
4735
- div.CanvasXpress-ParentNode {
4736
- display: flex;
4737
- flex-direction: column;
4738
- max-width: -webkit-fill-available;
4739
- width: fit-content;
4740
- -moz-transform: none;
4741
- -webkit-transform: none;
4742
- -o-transform: none;
4743
- -ms-transform: none;
4744
- transform: none;
4745
- }
4746
-
4747
- /*
4748
- * CanvasXpress
4749
- */
4750
-
4751
- canvas.CanvasXpress {
4752
- width: 100%;
4753
- height: 100%;
4754
- display: block;
4755
- flex-grow: 1;
4756
- -moz-user-select: none;
4757
- -khtml-user-select: none;
4758
- -webkit-user-select: none;
4759
- -o-user-select: none;
4760
- user-select: none;
4761
- -ms-user-select: none;
4762
- }
4763
-
4764
- canvas.CanvasXpress:hover {
4765
- border: 1px solid rgba(35, 82, 124, 0.2);
4766
- border-radius: 6px;
4767
- margin: -1px;
4768
- }
4769
-
4770
- canvas.CanvasXpressUpload {
4771
- border: 1px solid rgba(35, 82, 124, 0.2);
4772
- border-radius: 6px;
4773
- margin: -1px;
4774
- background-image: url('data:image/png;base64,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');
4775
- background-size: contain;
4776
- background-repeat: no-repeat;
4777
- }
4778
-
4779
- canvas.CanvasXpress::selection {
4780
- background: rgba(0, 0, 0, 0);
4781
- color: rgb(0, 0, 0);
4782
- }
4783
-
4784
- div.CanvasXpressPlay {
4785
- background-color: rgba(0, 0, 0, 0.05);
4786
- background-image: url('data:image/png;base64,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');
4787
- background-position-x: 50%;
4788
- background-position-y: center;
4789
- background-size: 25%;
4790
- background-repeat: no-repeat;
4791
- position: absolute;
4792
- }
4793
-
4794
- div.CanvasXpressPlay:hover {
4795
- background-color: rgba(0, 0, 0, 0);
4796
- }
4797
-
4798
- div.CanvasXpressContainer {
4799
- box-sizing: border-box;
4800
- position: relative;
4801
- float: left;
4802
- }
4803
-
4804
- div.CanvasXpressWrapper {
4805
- box-sizing: border-box;
4806
- position: relative;
4807
- float: left;
4808
- line-height: 100%;
4809
- }
4810
-
4811
- /* Hide Efect */
4812
-
4813
- .appear {
4814
- transition: all var(--cx-transition-speed) linear;
4815
- opacity: 1;
4816
- }
4817
-
4818
- .dissapear {
4819
- display: none;
4820
- }
4821
-
4822
- .dissapearHidden {
4823
- transition: all var(--cx-transition-speed) linear;
4824
- opacity: 0;
4825
- }
4826
-
4760
+ /* @category: widget */
4827
4761
  /***********
4828
4762
  * Resizer *
4829
4763
  ***********/
@@ -4835,8 +4769,8 @@ div.CanvasXpressWrapper {
4835
4769
  background: rgb(83, 105, 255);
4836
4770
  color: white;
4837
4771
  padding: 4px 10px;
4838
- border-radius: 4px;
4839
- font-size: 12px;
4772
+ border-radius: var(--cx-border-radius);
4773
+ font-size: var(--cx-small-font-size);
4840
4774
  font-weight: bold;
4841
4775
  pointer-events: none;
4842
4776
  opacity: 0;
@@ -4919,6 +4853,7 @@ div.CanvasXpressWrapper {
4919
4853
  cursor: se-resize !important;
4920
4854
  }
4921
4855
 
4856
+ /* @category: shared */
4922
4857
  /******************
4923
4858
  * New Viewport *
4924
4859
  ******************/
@@ -5112,6 +5047,7 @@ body.has-fullscreen {
5112
5047
  * End Viewport *
5113
5048
  ******************/
5114
5049
 
5050
+ /* @category: shared */
5115
5051
  /* Magic Effects */
5116
5052
 
5117
5053
  /*