canvasxpress-cli 70.4.0 → 70.6.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.
- package/package.json +1 -1
- package/src/canvasXpress.css +1538 -518
- package/src/canvasXpress.js +3 -3
package/src/canvasXpress.css
CHANGED
|
@@ -1,6 +1,118 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
2
|
/* @category: shared */
|
|
3
3
|
|
|
4
|
+
/*
|
|
5
|
+
* GENERATED by tools/ui-consistency/gen-token-css.mjs from tools/ui-consistency/tokens.json.
|
|
6
|
+
* Do not edit by hand: change tokens.json and regenerate.
|
|
7
|
+
* Spec: docs/architecture/widgets/ui-design-tokens.md
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
:root {
|
|
11
|
+
/* color */
|
|
12
|
+
--cx-color-white: #ffffff;
|
|
13
|
+
--cx-color-black: #000000;
|
|
14
|
+
--cx-color-gray-25: #f7f8fa;
|
|
15
|
+
--cx-color-gray-50: #f2f4f7;
|
|
16
|
+
--cx-color-gray-100: #e6e8ec;
|
|
17
|
+
--cx-color-gray-200: #d0d4da;
|
|
18
|
+
--cx-color-gray-300: #b9c0cb;
|
|
19
|
+
--cx-color-gray-400: #8a9099;
|
|
20
|
+
--cx-color-gray-500: #6b7280;
|
|
21
|
+
--cx-color-gray-600: #57606a;
|
|
22
|
+
--cx-color-gray-700: #3a414c;
|
|
23
|
+
--cx-color-gray-800: #2a2f36;
|
|
24
|
+
--cx-color-gray-850: #23262d;
|
|
25
|
+
--cx-color-gray-900: #1b1e24;
|
|
26
|
+
--cx-color-gray-950: #0e1013;
|
|
27
|
+
--cx-color-indigo-100: #dce2ff;
|
|
28
|
+
--cx-color-indigo-300: #8a99ff;
|
|
29
|
+
--cx-color-indigo-400: #7b8cff;
|
|
30
|
+
--cx-color-indigo-500: #5369ff;
|
|
31
|
+
--cx-color-indigo-600: #3d58ff;
|
|
32
|
+
--cx-color-indigo-700: #2f44d6;
|
|
33
|
+
--cx-color-indigo-a10: rgba(83, 105, 255, 0.1);
|
|
34
|
+
--cx-color-indigo-a20: rgba(83, 105, 255, 0.2);
|
|
35
|
+
--cx-color-indigo-dark-a20: rgba(123, 140, 255, 0.2);
|
|
36
|
+
--cx-color-blue-300: #8cc4f2;
|
|
37
|
+
--cx-color-blue-400: #4c9fe0;
|
|
38
|
+
--cx-color-blue-500: #087ad1;
|
|
39
|
+
--cx-color-blue-700: #065fa3;
|
|
40
|
+
--cx-color-blue-a15: rgba(8, 122, 209, 0.15);
|
|
41
|
+
--cx-color-red-50: #fce8e6;
|
|
42
|
+
--cx-color-red-400: #f07167;
|
|
43
|
+
--cx-color-red-600: #c0392b;
|
|
44
|
+
--cx-color-green-50: #e6f4ea;
|
|
45
|
+
--cx-color-green-400: #4caf50;
|
|
46
|
+
--cx-color-green-700: #2e7d32;
|
|
47
|
+
--cx-color-amber-50: #fff7e0;
|
|
48
|
+
--cx-color-amber-300: #fcd34d;
|
|
49
|
+
--cx-color-amber-500: #b26a00;
|
|
50
|
+
--cx-color-amber-800: #92400e;
|
|
51
|
+
--cx-color-black-a35: rgba(0, 0, 0, 0.35);
|
|
52
|
+
--cx-color-black-a55: rgba(0, 0, 0, 0.55);
|
|
53
|
+
/* radius */
|
|
54
|
+
--cx-radius-none: 0;
|
|
55
|
+
--cx-radius-sm: 4px;
|
|
56
|
+
--cx-radius-md: 6px;
|
|
57
|
+
--cx-radius-lg: 10px;
|
|
58
|
+
--cx-radius-pill: 999px;
|
|
59
|
+
--cx-radius-round: 50%;
|
|
60
|
+
/* space */
|
|
61
|
+
--cx-space-0: 0;
|
|
62
|
+
--cx-space-1: 2px;
|
|
63
|
+
--cx-space-2: 4px;
|
|
64
|
+
--cx-space-3: 6px;
|
|
65
|
+
--cx-space-4: 8px;
|
|
66
|
+
--cx-space-5: 10px;
|
|
67
|
+
--cx-space-6: 12px;
|
|
68
|
+
--cx-space-7: 16px;
|
|
69
|
+
--cx-space-8: 20px;
|
|
70
|
+
--cx-space-9: 24px;
|
|
71
|
+
--cx-space-10: 32px;
|
|
72
|
+
/* font */
|
|
73
|
+
--cx-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
|
|
74
|
+
--cx-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
|
|
75
|
+
/* fontSize */
|
|
76
|
+
--cx-font-size-xs: 11px;
|
|
77
|
+
--cx-font-size-sm: 12px;
|
|
78
|
+
--cx-font-size-md: 13px;
|
|
79
|
+
--cx-font-size-lg: 14px;
|
|
80
|
+
--cx-font-size-xl: 16px;
|
|
81
|
+
--cx-font-size-2xl: 20px;
|
|
82
|
+
/* fontWeight */
|
|
83
|
+
--cx-font-weight-regular: 400;
|
|
84
|
+
--cx-font-weight-medium: 500;
|
|
85
|
+
--cx-font-weight-bold: 700;
|
|
86
|
+
/* lineHeight */
|
|
87
|
+
--cx-line-height-tight: 1.2;
|
|
88
|
+
--cx-line-height-base: 1.45;
|
|
89
|
+
--cx-line-height-loose: 1.6;
|
|
90
|
+
/* shadow */
|
|
91
|
+
--cx-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.12);
|
|
92
|
+
--cx-shadow-2: 0 4px 16px rgba(0, 0, 0, 0.18);
|
|
93
|
+
--cx-shadow-3: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
94
|
+
/* duration */
|
|
95
|
+
--cx-duration-fast: 0.15s;
|
|
96
|
+
--cx-duration-base: 0.3s;
|
|
97
|
+
--cx-duration-slow: 0.5s;
|
|
98
|
+
/* z */
|
|
99
|
+
--cx-z-behind: -1;
|
|
100
|
+
--cx-z-base: 1;
|
|
101
|
+
--cx-z-raised: 10;
|
|
102
|
+
--cx-z-toolbar: 1000;
|
|
103
|
+
--cx-z-toolbar-edge: 1001;
|
|
104
|
+
--cx-z-resizer: 2000;
|
|
105
|
+
--cx-z-fullscreen: 9999;
|
|
106
|
+
--cx-z-panel: 10000;
|
|
107
|
+
--cx-z-panel-active: 10001;
|
|
108
|
+
--cx-z-popover: 10002;
|
|
109
|
+
--cx-z-popover-high: 10006;
|
|
110
|
+
--cx-z-modal: 100000;
|
|
111
|
+
--cx-z-modal-popover: 100001;
|
|
112
|
+
--cx-z-tooltip: 1000000;
|
|
113
|
+
}
|
|
114
|
+
/* @category: shared */
|
|
115
|
+
|
|
4
116
|
/*
|
|
5
117
|
* Favorite Colors
|
|
6
118
|
* rgb(51, 122, 183) - #337ab7
|
|
@@ -8,6 +120,62 @@
|
|
|
8
120
|
* rgb(83, 105, 255) - #5369ff
|
|
9
121
|
*/
|
|
10
122
|
|
|
123
|
+
/*
|
|
124
|
+
* Semantic UI roles (--cx-ui-*), the base theme. Components move onto these in P3; a
|
|
125
|
+
* dataUIStyle preset overrides the roles it owns on each chart wrapper (setUIColors). The
|
|
126
|
+
* primitives they reference are in 00-tokens-primitive.css. Spec:
|
|
127
|
+
* docs/architecture/widgets/ui-design-tokens.md
|
|
128
|
+
*/
|
|
129
|
+
/* GEN:semantic-light -- generated from tools/ui-consistency/tokens.json by gen-token-css.mjs; do not edit */
|
|
130
|
+
:root {
|
|
131
|
+
--cx-ui-surface: var(--cx-color-white);
|
|
132
|
+
--cx-ui-surface-alt: var(--cx-color-gray-25);
|
|
133
|
+
--cx-ui-surface-sunken: var(--cx-color-gray-50);
|
|
134
|
+
--cx-ui-surface-raised: var(--cx-color-white);
|
|
135
|
+
--cx-ui-chrome: var(--cx-color-white);
|
|
136
|
+
--cx-ui-chrome-border: var(--cx-color-gray-100);
|
|
137
|
+
--cx-ui-on-chrome: var(--cx-color-gray-900);
|
|
138
|
+
--cx-ui-chrome-strong: var(--cx-color-white);
|
|
139
|
+
--cx-ui-on-chrome-strong: var(--cx-color-gray-900);
|
|
140
|
+
--cx-ui-text: var(--cx-color-gray-900);
|
|
141
|
+
--cx-ui-text-muted: var(--cx-color-gray-600);
|
|
142
|
+
--cx-ui-text-subtle: var(--cx-color-gray-400);
|
|
143
|
+
--cx-ui-border: var(--cx-color-gray-200);
|
|
144
|
+
--cx-ui-border-subtle: var(--cx-color-gray-100);
|
|
145
|
+
--cx-ui-divider: var(--cx-color-gray-100);
|
|
146
|
+
--cx-ui-border-accent: var(--cx-color-indigo-500);
|
|
147
|
+
--cx-ui-accent: var(--cx-color-indigo-500);
|
|
148
|
+
--cx-ui-accent-strong: var(--cx-color-indigo-600);
|
|
149
|
+
--cx-ui-accent-hover: var(--cx-color-indigo-700);
|
|
150
|
+
--cx-ui-accent-tint: var(--cx-color-indigo-a20);
|
|
151
|
+
--cx-ui-accent-tint-subtle: var(--cx-color-indigo-a10);
|
|
152
|
+
--cx-ui-on-accent: var(--cx-color-white);
|
|
153
|
+
--cx-ui-focus: var(--cx-color-indigo-600);
|
|
154
|
+
--cx-ui-info: var(--cx-color-blue-500);
|
|
155
|
+
--cx-ui-info-strong: var(--cx-color-blue-700);
|
|
156
|
+
--cx-ui-info-tint: var(--cx-color-blue-a15);
|
|
157
|
+
--cx-ui-danger: var(--cx-color-red-600);
|
|
158
|
+
--cx-ui-danger-tint: var(--cx-color-red-50);
|
|
159
|
+
--cx-ui-success: var(--cx-color-green-700);
|
|
160
|
+
--cx-ui-success-tint: var(--cx-color-green-50);
|
|
161
|
+
--cx-ui-warning: var(--cx-color-amber-500);
|
|
162
|
+
--cx-ui-warning-strong: var(--cx-color-amber-800);
|
|
163
|
+
--cx-ui-warning-tint: var(--cx-color-amber-50);
|
|
164
|
+
--cx-ui-backdrop: var(--cx-color-black-a35);
|
|
165
|
+
--cx-ui-scrollbar-track: var(--cx-color-white);
|
|
166
|
+
--cx-ui-scrollbar-track-alt: var(--cx-color-gray-50);
|
|
167
|
+
--cx-ui-scrollbar-thumb: var(--cx-color-gray-200);
|
|
168
|
+
--cx-ui-scrollbar-thumb-hover: var(--cx-color-gray-400);
|
|
169
|
+
--cx-ui-control-on: var(--cx-color-indigo-500);
|
|
170
|
+
--cx-ui-active-cell: var(--cx-color-indigo-100);
|
|
171
|
+
--cx-ui-code-key: rgb(215, 48, 39);
|
|
172
|
+
--cx-ui-code-value: rgb(69, 117, 180);
|
|
173
|
+
--cx-ui-code-string: rgb(168, 82, 2);
|
|
174
|
+
--cx-ui-code-boolean: rgb(102, 102, 0);
|
|
175
|
+
--cx-ui-code-comment: rgb(58, 115, 0);
|
|
176
|
+
}
|
|
177
|
+
/* /GEN:semantic-light */
|
|
178
|
+
|
|
11
179
|
:root {
|
|
12
180
|
/* Colors */
|
|
13
181
|
--cx-color-red: rgb(255, 0, 0);
|
|
@@ -20,31 +188,26 @@
|
|
|
20
188
|
--cx-color-gray: rgb(128, 128, 128);
|
|
21
189
|
--cx-color-black: rgb(0, 0, 0);
|
|
22
190
|
--cx-color-transparent: rgba(0, 0, 0, 0);
|
|
23
|
-
/* Greys
|
|
191
|
+
/* Greys. DEPRECATED (unused by CanvasXpress; removed in a future version): extra-dark,
|
|
192
|
+
dark and medium gray -- use the --cx-color-gray-* scale in 00-tokens-primitive.css */
|
|
24
193
|
--cx-color-extra-dark-gray: rgb(34, 34, 34);
|
|
25
194
|
--cx-color-dark-gray: rgb(64, 64, 64);
|
|
26
195
|
--cx-color-medium-gray: rgb(180, 180, 180);
|
|
27
196
|
--cx-color-light-gray: rgb(204, 204, 204);
|
|
28
197
|
--cx-color-extra-light-gray: rgb(238, 238, 238);
|
|
29
|
-
/* Icons
|
|
198
|
+
/* Icons. DEPRECATED (never used: icon colours come from dataUIStyle via
|
|
199
|
+
changeSVGIconColors; removed in a future version) */
|
|
30
200
|
--cx-icon-class-a: #5369ff;
|
|
31
201
|
--cx-icon-class-b: #292929;
|
|
32
202
|
--cx-icon-class-c: #999999;
|
|
33
203
|
--cx-icon-class-r: #ff0000;
|
|
34
|
-
/* Coding colors
|
|
35
|
-
|
|
36
|
-
--cx-code-value: rgb(69, 117, 180);
|
|
37
|
-
--cx-code-string: rgb(168, 82, 2);
|
|
38
|
-
--cx-code-number: rgb(69, 117, 180);
|
|
39
|
-
--cx-code-boolean: rgb(102, 102, 0);
|
|
40
|
-
--cx-code-null: rgb(69, 117, 180);
|
|
41
|
-
--cx-code-comment: rgb(58, 115, 0);
|
|
204
|
+
/* Coding colors: the --cx-ui-code-* roles (light and dark). --cx-code-key / -value / -string /
|
|
205
|
+
-boolean / -comment are read as override hooks in 03-code.css; -number and -null were never used. */
|
|
42
206
|
/* Favorite UI colors */
|
|
43
207
|
--cx-color-ui-background: rgb(255, 255, 255);
|
|
44
208
|
--cx-color-ui-font: rgb(34, 34, 34);
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
/* Favorite UI Styles - Not used but just to remember */
|
|
209
|
+
/* Favorite UI Styles. DEPRECATED (never used: a preset's colours come from
|
|
210
|
+
CanvasXpress.styleDef as --cx-ui-* roles; removed in a future version) */
|
|
48
211
|
--cx-color-modern: rgb(83, 105, 255);
|
|
49
212
|
--cx-color-modern-hover: rgba(83, 105, 255, 0.1) ;
|
|
50
213
|
--cx-color-stripped: rgb(230, 230, 230) ;
|
|
@@ -61,134 +224,63 @@
|
|
|
61
224
|
--cx-x-small-font-size: 11px;
|
|
62
225
|
--cx-small-font-size: 12px;
|
|
63
226
|
--cx-medium-font-size: 13px;
|
|
64
|
-
--cx-font-size: 15px;
|
|
65
227
|
--cx-large-font-size: 16px;
|
|
66
228
|
--cx-x-large-font-size: 17px;
|
|
67
|
-
--cx-font-color: var(--cx-color-ui-font);
|
|
68
|
-
--cx-font: var(--cx-font-size) var(--cx-font-family);
|
|
69
229
|
--cx-large-font: var(--cx-large-font-size) var(--cx-font-family);
|
|
70
230
|
--cx-x-large-font: var(--cx-x-large-font-size) var(--cx-font-family);
|
|
71
|
-
--cx-font-bold: bold var(--cx-font-size) var(--cx-font-family);
|
|
72
231
|
--cx-large-font-bold: bold var(--cx-large-font-size) var(--cx-font-family);
|
|
73
232
|
--cx-x-large-font-bold: bold var(--cx-x-large-font-size) var(--cx-font-family);
|
|
74
|
-
--cx-font-italic: italic var(--cx-font-size) var(--cx-font-family);
|
|
75
233
|
--cx-large-font-italic: italic var(--cx-large-font-size) var(--cx-font-family);
|
|
76
234
|
--cx-x-large-font-italic: italic var(--cx-x-large-font-size) var(--cx-font-family);
|
|
77
235
|
--cx-small-font-italic: italic var(--cx-small-font-size) var(--cx-font-family);
|
|
78
236
|
/* Background */
|
|
79
|
-
--cx-background-widgets-color: var(--cx-color-ui-background);
|
|
80
|
-
--cx-background-color: var(--cx-color-widgets);
|
|
81
|
-
--cx-background-hover-color: var(--cx-color-widgets-hover);
|
|
82
|
-
--cx-background-border-hover-color: var(--cx-color-white);
|
|
83
|
-
--cx-background-accent-color: var(--cx-color-widgets-hover);
|
|
84
|
-
--cx-background-contrast-color: var(--cx-background-color);
|
|
85
237
|
/* Border */
|
|
86
|
-
--cx-border: var(--cx-border-width) var(--cx-border-style) var(--cx-color-widgets);
|
|
87
238
|
/* Callouts */
|
|
88
239
|
--cx-callout-size: 8px;
|
|
89
240
|
--cx-callout-radius: 10px;
|
|
90
241
|
--cx-callout-border-width: 1px;
|
|
91
242
|
--cx-callout-background-color: var(--cx-color-ui-background);
|
|
92
|
-
--cx-callout-border-color: var(--cx-color-widgets);
|
|
93
243
|
/* Transitions */
|
|
94
244
|
--cx-transition-speed: 0.5s;
|
|
95
245
|
/* UI: These are the exposed variables */
|
|
96
246
|
--cx-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif !important;
|
|
97
|
-
--cx-border-radius: 5px;
|
|
98
247
|
--cx-border-width: 1px;
|
|
99
248
|
--cx-border-style: solid;
|
|
100
249
|
--cx-border-transparent: var(--cx-border-width) var(--cx-border-style) var(--cx-color-transparent);
|
|
101
250
|
/* Scrollbar */
|
|
102
|
-
--cx-scrollbar-background-color: rgb(255, 255, 255);
|
|
103
|
-
--cx-scrollbar-alt-background-color: rgb(245, 245, 245);
|
|
104
|
-
--cx-scrollbar-thumb-color: #aaaaaa;
|
|
105
|
-
--cx-scrollbar-thumb-hover-color: #888888;
|
|
106
251
|
/* Customizer */
|
|
107
|
-
--cx-customizer-close-background-color: rgb(8, 122, 209);
|
|
108
|
-
--cx-customizer-close-text-color: rgb(255, 255, 255);
|
|
109
|
-
--cx-customizer-background-color: rgb(255, 255, 255);
|
|
110
|
-
--cx-customizer-border-color: rgb(8, 122, 209);
|
|
111
|
-
--cx-customizer-text-color: #555b62;
|
|
112
|
-
--cx-customizer-font-size: 12px;
|
|
113
|
-
--cx-customizer-hover-color: rgba(124, 182, 226, 0.2);
|
|
114
252
|
/* Data Filter */
|
|
115
|
-
--cx-toggle-switch-background-color: rgb(8, 122, 209);
|
|
116
|
-
--cx-datafilter-background-color: #ffffff;
|
|
117
|
-
--cx-datafilter-border-color: #087ad1;
|
|
118
|
-
--cx-datafilter-toolbar-background-color: #cccccc;
|
|
119
|
-
--cx-datafilter-text-color: #555b62;
|
|
120
|
-
--cx-datafilter-font-size: 12px;
|
|
121
|
-
--cx-datafilter-hover-color: rgba(124, 182, 226, 0.2);
|
|
122
253
|
/* Context Menu */
|
|
123
|
-
--cx-context-menu-background-color: #ffffff;
|
|
124
|
-
--cx-context-menu-border-color: #087ad1;
|
|
125
|
-
--cx-context-menu-text-color: #555b62;
|
|
126
|
-
--cx-context-menu-font-size: 11px;
|
|
127
|
-
--cx-context-menu-hover-color: rgba(124, 182, 226, 0.2);
|
|
128
254
|
/* Data Table */
|
|
129
|
-
--cx-datatable-accent-color: rgb(8, 122, 209);
|
|
130
|
-
--cx-datatable-background-color: rgb(255, 255, 255);
|
|
131
|
-
--cx-datatable-border-color: rgb(8, 122, 209);
|
|
132
|
-
--cx-datatable-banner-background-color: rgb(255, 255, 255);
|
|
133
|
-
--cx-datatable-banner-border-color: rgb(215, 226, 230);
|
|
134
|
-
--cx-datatable-banner-text-color: rgb(85, 91, 98);
|
|
135
|
-
--cx-datatable-toolbar-border-color: rgb(215, 226, 230);
|
|
136
|
-
--cx-datatable-header-background-color: rgb(255, 255, 255);
|
|
137
|
-
--cx-datatable-header-text-color: rgb(85, 91, 98);
|
|
138
|
-
--cx-datatable-cell-background-color: rgb(255, 255, 255);
|
|
139
|
-
--cx-datatable-oddcell-background-color: rgb(247, 248, 249);
|
|
140
|
-
--cx-datatable-cell-border-color: rgb(215, 226, 230);
|
|
141
|
-
--cx-datatable-cell-text-color: rgb(85, 91, 98);
|
|
142
|
-
--cx-datatable-activecell-border-color: rgb(124, 182, 226);
|
|
143
|
-
--cx-datatable-status-background-color: rgb(255, 255, 255);
|
|
144
|
-
--cx-datatable-status-border-color: rgb(215, 226, 230);
|
|
145
|
-
--cx-datatable-status-text-color: rgb(85, 91, 98);
|
|
146
|
-
--cx-datatable-pagination-background-color: rgb(255, 255, 255);
|
|
147
|
-
--cx-datatable-pagination-border-color: rgb(215, 226, 230);
|
|
148
|
-
--cx-datatable-pagination-text-color: rgb(85, 91, 98);
|
|
149
|
-
--cx-datatable-cell-hover-background-color: rgba(124, 182, 226, 0.2);
|
|
150
|
-
--cx-datatable-row-hover-background-color: rgba(124, 182, 226, 0.2);
|
|
151
255
|
--cx-datatable-toolbar-font-size: 14px;
|
|
152
256
|
--cx-datatable-header-font-size: 15px;
|
|
153
257
|
--cx-datatable-body-font-size: 15px;
|
|
154
258
|
--cx-datatable-cell-font-size: 15px;
|
|
155
259
|
--cx-datatable-cell-font-family: var(--cx-font-family);
|
|
156
260
|
/* Workflow */
|
|
157
|
-
--cx-workflow-background-color: #ffffff;
|
|
158
|
-
--cx-workflow-border-color: rgb(215, 226, 230);
|
|
159
|
-
--cx-workflow-text-color: #555b62;
|
|
160
|
-
--cx-workflow-hover-color: rgba(124, 182, 226, 0.2);
|
|
161
|
-
--cx-workflow-active-color: rgba(124, 182, 226, 0.2);
|
|
162
|
-
--cx-workflow-slider-track-color: rgb(215, 226, 230);
|
|
163
|
-
--cx-workflow-slider-fill-color: rgb(8, 122, 209);
|
|
164
|
-
--cx-workflow-slider-thumb-color: rgb(8, 122, 209);
|
|
165
|
-
--cx-workflow-slider-thumb-border-color: #ffffff;
|
|
166
|
-
--cx-workflow-list-label-font-size: 10px;
|
|
167
|
-
--cx-workflow-list-tick-font-size: 6px;
|
|
168
|
-
--cx-workflow-list-text-color: #555b62;
|
|
169
|
-
--cx-workflow-list-tick-color: rgb(215, 226, 230);
|
|
170
|
-
--cx-workflow-button-background-color: #ffffff;
|
|
171
|
-
--cx-workflow-button-border-color: rgb(215, 226, 230);
|
|
172
|
-
--cx-workflow-timeline-border-color: rgb(215, 226, 230);
|
|
173
261
|
}
|
|
174
262
|
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
:
|
|
263
|
+
/*
|
|
264
|
+
* Scoped to CanvasXpress DOM (plan D4). These used to be page-wide rules that restyled the host
|
|
265
|
+
* page; :where() keeps their specificity exactly as it was (zero for the scope part).
|
|
266
|
+
*/
|
|
267
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *),
|
|
268
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *)::after,
|
|
269
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *)::before {
|
|
178
270
|
box-sizing: border-box;
|
|
179
271
|
}
|
|
180
272
|
|
|
181
|
-
input[type="color"]::-webkit-color-swatch-wrapper {
|
|
273
|
+
:where([data-cx-ui-scope]) input[type="color"]::-webkit-color-swatch-wrapper {
|
|
182
274
|
padding: 0;
|
|
183
275
|
}
|
|
184
276
|
|
|
185
|
-
input[type="color"]::-webkit-color-swatch {
|
|
277
|
+
:where([data-cx-ui-scope]) input[type="color"]::-webkit-color-swatch {
|
|
186
278
|
border: none;
|
|
187
279
|
}
|
|
188
280
|
|
|
189
|
-
.unselectable,
|
|
190
|
-
img,
|
|
191
|
-
svg,
|
|
281
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).unselectable,
|
|
282
|
+
:where([data-cx-ui-scope]) img,
|
|
283
|
+
:where([data-cx-ui-scope]) svg,
|
|
192
284
|
.cX-Toolbar-Font,
|
|
193
285
|
.cX-Toolbar-Round,
|
|
194
286
|
.cX-Toolbar-Stripe,
|
|
@@ -244,6 +336,251 @@ div.cX-Toolbar-Help {
|
|
|
244
336
|
/* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
|
|
245
337
|
}
|
|
246
338
|
|
|
339
|
+
/*
|
|
340
|
+
* Derived properties: declared on every UI-token scope, not only :root. A custom property that
|
|
341
|
+
* references another resolves where it is DECLARED, so on :root alone these would read the page
|
|
342
|
+
* defaults instead of the chart's dataUIStyle (setUIColors writes a chart's tokens on its
|
|
343
|
+
* cX-DOM root and on its <body>-level dialogs/menus, each marked data-cx-ui-scope), nor under a
|
|
344
|
+
* dark-theme container (01b-theme-dark.css).
|
|
345
|
+
*/
|
|
346
|
+
:root,
|
|
347
|
+
[data-cx-ui-scope],
|
|
348
|
+
[data-cx-ui-theme] {
|
|
349
|
+
--cx-font: var(--cx-font-size) var(--cx-font-family);
|
|
350
|
+
--cx-font-bold: bold var(--cx-font-size) var(--cx-font-family);
|
|
351
|
+
--cx-font-italic: italic var(--cx-font-size) var(--cx-font-family);
|
|
352
|
+
--cx-callout-border-color: var(--cx-color-widgets, var(--cx-ui-accent));
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
/* GEN:legacy-defaults -- generated from tools/ui-consistency/presets-runtime.json (the default
|
|
356
|
+
dataUIStyle, modern) by gen-token-css.mjs; do not edit. Outside any chart only: each chart
|
|
357
|
+
writes its own preset on its cX-DOM root. */
|
|
358
|
+
:root {
|
|
359
|
+
--cx-border-radius: 5px;
|
|
360
|
+
--cx-color: normal 15px system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
|
|
361
|
+
--cx-color-bold: bold 15px system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
|
|
362
|
+
--cx-color-italic: italic 15px system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
|
|
363
|
+
--cx-context-menu-font-size: 13px;
|
|
364
|
+
--cx-customizer-font-size: 12px;
|
|
365
|
+
--cx-datafilter-font-size: 12px;
|
|
366
|
+
--cx-font-size: 15px;
|
|
367
|
+
--cx-workflow-list-label-font-size: 10px;
|
|
368
|
+
--cx-workflow-list-tick-font-size: 6px;
|
|
369
|
+
}
|
|
370
|
+
/* /GEN:legacy-defaults */
|
|
371
|
+
@charset "UTF-8";
|
|
372
|
+
/* @category: shared */
|
|
373
|
+
|
|
374
|
+
/*
|
|
375
|
+
* GENERATED by tools/ui-consistency/gen-token-css.mjs from tools/ui-consistency/tokens.json.
|
|
376
|
+
* Do not edit by hand: change tokens.json and regenerate.
|
|
377
|
+
* Spec: docs/architecture/widgets/ui-design-tokens.md
|
|
378
|
+
*/
|
|
379
|
+
|
|
380
|
+
/* A light container re-establishes the light roles for its own chrome, e.g. a light dashboard
|
|
381
|
+
on a page that is dark. (A chart root keeps its preset: its inline roles win here.) */
|
|
382
|
+
:where([data-cx-ui-theme="light"]) {
|
|
383
|
+
color-scheme: light;
|
|
384
|
+
--cx-ui-surface: var(--cx-color-white);
|
|
385
|
+
--cx-ui-surface-alt: var(--cx-color-gray-25);
|
|
386
|
+
--cx-ui-surface-sunken: var(--cx-color-gray-50);
|
|
387
|
+
--cx-ui-surface-raised: var(--cx-color-white);
|
|
388
|
+
--cx-ui-chrome: var(--cx-color-white);
|
|
389
|
+
--cx-ui-chrome-border: var(--cx-color-gray-100);
|
|
390
|
+
--cx-ui-on-chrome: var(--cx-color-gray-900);
|
|
391
|
+
--cx-ui-chrome-strong: var(--cx-color-white);
|
|
392
|
+
--cx-ui-on-chrome-strong: var(--cx-color-gray-900);
|
|
393
|
+
--cx-ui-text: var(--cx-color-gray-900);
|
|
394
|
+
--cx-ui-text-muted: var(--cx-color-gray-600);
|
|
395
|
+
--cx-ui-text-subtle: var(--cx-color-gray-400);
|
|
396
|
+
--cx-ui-border: var(--cx-color-gray-200);
|
|
397
|
+
--cx-ui-border-subtle: var(--cx-color-gray-100);
|
|
398
|
+
--cx-ui-divider: var(--cx-color-gray-100);
|
|
399
|
+
--cx-ui-border-accent: var(--cx-color-indigo-500);
|
|
400
|
+
--cx-ui-accent: var(--cx-color-indigo-500);
|
|
401
|
+
--cx-ui-accent-strong: var(--cx-color-indigo-600);
|
|
402
|
+
--cx-ui-accent-hover: var(--cx-color-indigo-700);
|
|
403
|
+
--cx-ui-accent-tint: var(--cx-color-indigo-a20);
|
|
404
|
+
--cx-ui-accent-tint-subtle: var(--cx-color-indigo-a10);
|
|
405
|
+
--cx-ui-on-accent: var(--cx-color-white);
|
|
406
|
+
--cx-ui-focus: var(--cx-color-indigo-600);
|
|
407
|
+
--cx-ui-info: var(--cx-color-blue-500);
|
|
408
|
+
--cx-ui-info-strong: var(--cx-color-blue-700);
|
|
409
|
+
--cx-ui-info-tint: var(--cx-color-blue-a15);
|
|
410
|
+
--cx-ui-danger: var(--cx-color-red-600);
|
|
411
|
+
--cx-ui-danger-tint: var(--cx-color-red-50);
|
|
412
|
+
--cx-ui-success: var(--cx-color-green-700);
|
|
413
|
+
--cx-ui-success-tint: var(--cx-color-green-50);
|
|
414
|
+
--cx-ui-warning: var(--cx-color-amber-500);
|
|
415
|
+
--cx-ui-warning-strong: var(--cx-color-amber-800);
|
|
416
|
+
--cx-ui-warning-tint: var(--cx-color-amber-50);
|
|
417
|
+
--cx-ui-backdrop: var(--cx-color-black-a35);
|
|
418
|
+
--cx-ui-scrollbar-track: var(--cx-color-white);
|
|
419
|
+
--cx-ui-scrollbar-track-alt: var(--cx-color-gray-50);
|
|
420
|
+
--cx-ui-scrollbar-thumb: var(--cx-color-gray-200);
|
|
421
|
+
--cx-ui-scrollbar-thumb-hover: var(--cx-color-gray-400);
|
|
422
|
+
--cx-ui-control-on: var(--cx-color-indigo-500);
|
|
423
|
+
--cx-ui-active-cell: var(--cx-color-indigo-100);
|
|
424
|
+
--cx-ui-code-key: rgb(215, 48, 39);
|
|
425
|
+
--cx-ui-code-value: rgb(69, 117, 180);
|
|
426
|
+
--cx-ui-code-string: rgb(168, 82, 2);
|
|
427
|
+
--cx-ui-code-boolean: rgb(102, 102, 0);
|
|
428
|
+
--cx-ui-code-comment: rgb(58, 115, 0);
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
@media (prefers-color-scheme: light) {
|
|
432
|
+
:where([data-cx-ui-theme="auto"]) {
|
|
433
|
+
color-scheme: light;
|
|
434
|
+
--cx-ui-surface: var(--cx-color-white);
|
|
435
|
+
--cx-ui-surface-alt: var(--cx-color-gray-25);
|
|
436
|
+
--cx-ui-surface-sunken: var(--cx-color-gray-50);
|
|
437
|
+
--cx-ui-surface-raised: var(--cx-color-white);
|
|
438
|
+
--cx-ui-chrome: var(--cx-color-white);
|
|
439
|
+
--cx-ui-chrome-border: var(--cx-color-gray-100);
|
|
440
|
+
--cx-ui-on-chrome: var(--cx-color-gray-900);
|
|
441
|
+
--cx-ui-chrome-strong: var(--cx-color-white);
|
|
442
|
+
--cx-ui-on-chrome-strong: var(--cx-color-gray-900);
|
|
443
|
+
--cx-ui-text: var(--cx-color-gray-900);
|
|
444
|
+
--cx-ui-text-muted: var(--cx-color-gray-600);
|
|
445
|
+
--cx-ui-text-subtle: var(--cx-color-gray-400);
|
|
446
|
+
--cx-ui-border: var(--cx-color-gray-200);
|
|
447
|
+
--cx-ui-border-subtle: var(--cx-color-gray-100);
|
|
448
|
+
--cx-ui-divider: var(--cx-color-gray-100);
|
|
449
|
+
--cx-ui-border-accent: var(--cx-color-indigo-500);
|
|
450
|
+
--cx-ui-accent: var(--cx-color-indigo-500);
|
|
451
|
+
--cx-ui-accent-strong: var(--cx-color-indigo-600);
|
|
452
|
+
--cx-ui-accent-hover: var(--cx-color-indigo-700);
|
|
453
|
+
--cx-ui-accent-tint: var(--cx-color-indigo-a20);
|
|
454
|
+
--cx-ui-accent-tint-subtle: var(--cx-color-indigo-a10);
|
|
455
|
+
--cx-ui-on-accent: var(--cx-color-white);
|
|
456
|
+
--cx-ui-focus: var(--cx-color-indigo-600);
|
|
457
|
+
--cx-ui-info: var(--cx-color-blue-500);
|
|
458
|
+
--cx-ui-info-strong: var(--cx-color-blue-700);
|
|
459
|
+
--cx-ui-info-tint: var(--cx-color-blue-a15);
|
|
460
|
+
--cx-ui-danger: var(--cx-color-red-600);
|
|
461
|
+
--cx-ui-danger-tint: var(--cx-color-red-50);
|
|
462
|
+
--cx-ui-success: var(--cx-color-green-700);
|
|
463
|
+
--cx-ui-success-tint: var(--cx-color-green-50);
|
|
464
|
+
--cx-ui-warning: var(--cx-color-amber-500);
|
|
465
|
+
--cx-ui-warning-strong: var(--cx-color-amber-800);
|
|
466
|
+
--cx-ui-warning-tint: var(--cx-color-amber-50);
|
|
467
|
+
--cx-ui-backdrop: var(--cx-color-black-a35);
|
|
468
|
+
--cx-ui-scrollbar-track: var(--cx-color-white);
|
|
469
|
+
--cx-ui-scrollbar-track-alt: var(--cx-color-gray-50);
|
|
470
|
+
--cx-ui-scrollbar-thumb: var(--cx-color-gray-200);
|
|
471
|
+
--cx-ui-scrollbar-thumb-hover: var(--cx-color-gray-400);
|
|
472
|
+
--cx-ui-control-on: var(--cx-color-indigo-500);
|
|
473
|
+
--cx-ui-active-cell: var(--cx-color-indigo-100);
|
|
474
|
+
--cx-ui-code-key: rgb(215, 48, 39);
|
|
475
|
+
--cx-ui-code-value: rgb(69, 117, 180);
|
|
476
|
+
--cx-ui-code-string: rgb(168, 82, 2);
|
|
477
|
+
--cx-ui-code-boolean: rgb(102, 102, 0);
|
|
478
|
+
--cx-ui-code-comment: rgb(58, 115, 0);
|
|
479
|
+
}
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
/* The dark theme: the semantic roles for data-cx-ui-theme="dark" (and "auto" on a dark OS). */
|
|
483
|
+
:where([data-cx-ui-theme="dark"],
|
|
484
|
+
[data-cx-ui-theme="dark"] [data-cx-ui-scope]:not([data-cx-ui-theme="light"]):not([data-cx-ui-theme="auto"])) {
|
|
485
|
+
color-scheme: dark;
|
|
486
|
+
--cx-ui-surface: var(--cx-color-gray-900) !important;
|
|
487
|
+
--cx-ui-surface-alt: var(--cx-color-gray-850) !important;
|
|
488
|
+
--cx-ui-surface-sunken: var(--cx-color-gray-950) !important;
|
|
489
|
+
--cx-ui-surface-raised: var(--cx-color-gray-850) !important;
|
|
490
|
+
--cx-ui-chrome: var(--cx-color-gray-850) !important;
|
|
491
|
+
--cx-ui-chrome-border: var(--cx-color-gray-800) !important;
|
|
492
|
+
--cx-ui-on-chrome: var(--cx-color-gray-100) !important;
|
|
493
|
+
--cx-ui-chrome-strong: var(--cx-color-gray-850) !important;
|
|
494
|
+
--cx-ui-on-chrome-strong: var(--cx-color-gray-100) !important;
|
|
495
|
+
--cx-ui-text: var(--cx-color-gray-100) !important;
|
|
496
|
+
--cx-ui-text-muted: var(--cx-color-gray-400) !important;
|
|
497
|
+
--cx-ui-text-subtle: var(--cx-color-gray-500) !important;
|
|
498
|
+
--cx-ui-border: var(--cx-color-gray-700) !important;
|
|
499
|
+
--cx-ui-border-subtle: var(--cx-color-gray-800) !important;
|
|
500
|
+
--cx-ui-divider: var(--cx-color-gray-800) !important;
|
|
501
|
+
--cx-ui-border-accent: var(--cx-color-indigo-400) !important;
|
|
502
|
+
--cx-ui-accent: var(--cx-color-indigo-400) !important;
|
|
503
|
+
--cx-ui-accent-strong: var(--cx-color-indigo-300) !important;
|
|
504
|
+
--cx-ui-accent-hover: var(--cx-color-indigo-400) !important;
|
|
505
|
+
--cx-ui-accent-tint: var(--cx-color-indigo-dark-a20) !important;
|
|
506
|
+
--cx-ui-accent-tint-subtle: var(--cx-color-indigo-dark-a20) !important;
|
|
507
|
+
--cx-ui-on-accent: var(--cx-color-gray-950) !important;
|
|
508
|
+
--cx-ui-focus: var(--cx-color-indigo-300) !important;
|
|
509
|
+
--cx-ui-info: var(--cx-color-blue-400) !important;
|
|
510
|
+
--cx-ui-info-strong: var(--cx-color-blue-300) !important;
|
|
511
|
+
--cx-ui-info-tint: var(--cx-color-blue-a15) !important;
|
|
512
|
+
--cx-ui-danger: var(--cx-color-red-400) !important;
|
|
513
|
+
--cx-ui-danger-tint: rgba(240, 113, 103, 0.15) !important;
|
|
514
|
+
--cx-ui-success: var(--cx-color-green-400) !important;
|
|
515
|
+
--cx-ui-success-tint: rgba(76, 175, 80, 0.15) !important;
|
|
516
|
+
--cx-ui-warning: var(--cx-color-amber-300) !important;
|
|
517
|
+
--cx-ui-warning-strong: var(--cx-color-amber-300) !important;
|
|
518
|
+
--cx-ui-warning-tint: rgba(252, 211, 77, 0.12) !important;
|
|
519
|
+
--cx-ui-backdrop: var(--cx-color-black-a55) !important;
|
|
520
|
+
--cx-ui-scrollbar-track: var(--cx-color-gray-900) !important;
|
|
521
|
+
--cx-ui-scrollbar-track-alt: var(--cx-color-gray-850) !important;
|
|
522
|
+
--cx-ui-scrollbar-thumb: var(--cx-color-gray-700) !important;
|
|
523
|
+
--cx-ui-scrollbar-thumb-hover: var(--cx-color-gray-500) !important;
|
|
524
|
+
--cx-ui-control-on: var(--cx-color-indigo-400) !important;
|
|
525
|
+
--cx-ui-active-cell: var(--cx-color-indigo-400) !important;
|
|
526
|
+
--cx-ui-code-key: #ff7b72 !important;
|
|
527
|
+
--cx-ui-code-value: #79c0ff !important;
|
|
528
|
+
--cx-ui-code-string: #ffa657 !important;
|
|
529
|
+
--cx-ui-code-boolean: #e3d26f !important;
|
|
530
|
+
--cx-ui-code-comment: #7ee787 !important;
|
|
531
|
+
}
|
|
532
|
+
|
|
533
|
+
@media (prefers-color-scheme: dark) {
|
|
534
|
+
:where([data-cx-ui-theme="auto"],
|
|
535
|
+
[data-cx-ui-theme="auto"] [data-cx-ui-scope]:not([data-cx-ui-theme="light"]):not([data-cx-ui-theme="dark"])) {
|
|
536
|
+
color-scheme: dark;
|
|
537
|
+
--cx-ui-surface: var(--cx-color-gray-900) !important;
|
|
538
|
+
--cx-ui-surface-alt: var(--cx-color-gray-850) !important;
|
|
539
|
+
--cx-ui-surface-sunken: var(--cx-color-gray-950) !important;
|
|
540
|
+
--cx-ui-surface-raised: var(--cx-color-gray-850) !important;
|
|
541
|
+
--cx-ui-chrome: var(--cx-color-gray-850) !important;
|
|
542
|
+
--cx-ui-chrome-border: var(--cx-color-gray-800) !important;
|
|
543
|
+
--cx-ui-on-chrome: var(--cx-color-gray-100) !important;
|
|
544
|
+
--cx-ui-chrome-strong: var(--cx-color-gray-850) !important;
|
|
545
|
+
--cx-ui-on-chrome-strong: var(--cx-color-gray-100) !important;
|
|
546
|
+
--cx-ui-text: var(--cx-color-gray-100) !important;
|
|
547
|
+
--cx-ui-text-muted: var(--cx-color-gray-400) !important;
|
|
548
|
+
--cx-ui-text-subtle: var(--cx-color-gray-500) !important;
|
|
549
|
+
--cx-ui-border: var(--cx-color-gray-700) !important;
|
|
550
|
+
--cx-ui-border-subtle: var(--cx-color-gray-800) !important;
|
|
551
|
+
--cx-ui-divider: var(--cx-color-gray-800) !important;
|
|
552
|
+
--cx-ui-border-accent: var(--cx-color-indigo-400) !important;
|
|
553
|
+
--cx-ui-accent: var(--cx-color-indigo-400) !important;
|
|
554
|
+
--cx-ui-accent-strong: var(--cx-color-indigo-300) !important;
|
|
555
|
+
--cx-ui-accent-hover: var(--cx-color-indigo-400) !important;
|
|
556
|
+
--cx-ui-accent-tint: var(--cx-color-indigo-dark-a20) !important;
|
|
557
|
+
--cx-ui-accent-tint-subtle: var(--cx-color-indigo-dark-a20) !important;
|
|
558
|
+
--cx-ui-on-accent: var(--cx-color-gray-950) !important;
|
|
559
|
+
--cx-ui-focus: var(--cx-color-indigo-300) !important;
|
|
560
|
+
--cx-ui-info: var(--cx-color-blue-400) !important;
|
|
561
|
+
--cx-ui-info-strong: var(--cx-color-blue-300) !important;
|
|
562
|
+
--cx-ui-info-tint: var(--cx-color-blue-a15) !important;
|
|
563
|
+
--cx-ui-danger: var(--cx-color-red-400) !important;
|
|
564
|
+
--cx-ui-danger-tint: rgba(240, 113, 103, 0.15) !important;
|
|
565
|
+
--cx-ui-success: var(--cx-color-green-400) !important;
|
|
566
|
+
--cx-ui-success-tint: rgba(76, 175, 80, 0.15) !important;
|
|
567
|
+
--cx-ui-warning: var(--cx-color-amber-300) !important;
|
|
568
|
+
--cx-ui-warning-strong: var(--cx-color-amber-300) !important;
|
|
569
|
+
--cx-ui-warning-tint: rgba(252, 211, 77, 0.12) !important;
|
|
570
|
+
--cx-ui-backdrop: var(--cx-color-black-a55) !important;
|
|
571
|
+
--cx-ui-scrollbar-track: var(--cx-color-gray-900) !important;
|
|
572
|
+
--cx-ui-scrollbar-track-alt: var(--cx-color-gray-850) !important;
|
|
573
|
+
--cx-ui-scrollbar-thumb: var(--cx-color-gray-700) !important;
|
|
574
|
+
--cx-ui-scrollbar-thumb-hover: var(--cx-color-gray-500) !important;
|
|
575
|
+
--cx-ui-control-on: var(--cx-color-indigo-400) !important;
|
|
576
|
+
--cx-ui-active-cell: var(--cx-color-indigo-400) !important;
|
|
577
|
+
--cx-ui-code-key: #ff7b72 !important;
|
|
578
|
+
--cx-ui-code-value: #79c0ff !important;
|
|
579
|
+
--cx-ui-code-string: #ffa657 !important;
|
|
580
|
+
--cx-ui-code-boolean: #e3d26f !important;
|
|
581
|
+
--cx-ui-code-comment: #7ee787 !important;
|
|
582
|
+
}
|
|
583
|
+
}
|
|
247
584
|
/* @category: shared */
|
|
248
585
|
/*****************
|
|
249
586
|
* SVG No border *
|
|
@@ -262,7 +599,7 @@ svg.cX-DataFilter-Toolbar-ImageNB {
|
|
|
262
599
|
margin: 5px 8px 0px 0px !important;
|
|
263
600
|
}
|
|
264
601
|
|
|
265
|
-
svg > * {
|
|
602
|
+
:where([data-cx-ui-scope]) svg > * {
|
|
266
603
|
pointer-events: none;
|
|
267
604
|
}
|
|
268
605
|
|
|
@@ -282,7 +619,7 @@ svg.cX-DataTable-Toolbar-Image-Logo {
|
|
|
282
619
|
|
|
283
620
|
svg.cX-code {
|
|
284
621
|
border-radius: var(--cx-border-radius);
|
|
285
|
-
border: var(--cx-border) !important;
|
|
622
|
+
border: var(--cx-border, 1px solid var(--cx-ui-border-accent)) !important;
|
|
286
623
|
padding: 5px;
|
|
287
624
|
}
|
|
288
625
|
|
|
@@ -290,14 +627,14 @@ svg.cX-code {
|
|
|
290
627
|
* draggable *
|
|
291
628
|
***************/
|
|
292
629
|
|
|
293
|
-
.draggable {
|
|
630
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).draggable {
|
|
294
631
|
cursor: move;
|
|
295
632
|
cursor: grab;
|
|
296
633
|
cursor: -moz-grab;
|
|
297
634
|
cursor: -webkit-grab;
|
|
298
635
|
}
|
|
299
636
|
|
|
300
|
-
.draggable:active {
|
|
637
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).draggable:active {
|
|
301
638
|
cursor: grabbing;
|
|
302
639
|
cursor: -moz-grabbing;
|
|
303
640
|
cursor: -webkit-grabbing;
|
|
@@ -307,9 +644,9 @@ svg.cX-code {
|
|
|
307
644
|
* Hover / Active *
|
|
308
645
|
*****************/
|
|
309
646
|
|
|
310
|
-
.simulate-hover {
|
|
311
|
-
border-color: var(--cx-background-border-hover-color) !important;
|
|
312
|
-
background: var(--cx-background-hover-color) !important;
|
|
647
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).simulate-hover {
|
|
648
|
+
border-color: var(--cx-background-border-hover-color, var(--cx-ui-surface)) !important;
|
|
649
|
+
background: var(--cx-background-hover-color, var(--cx-ui-accent-tint)) !important;
|
|
313
650
|
}
|
|
314
651
|
|
|
315
652
|
/*****************
|
|
@@ -321,7 +658,7 @@ svg.cX-code {
|
|
|
321
658
|
top: 50%;
|
|
322
659
|
left: 50%;
|
|
323
660
|
transform: translate(-50%, -50%);
|
|
324
|
-
z-index:
|
|
661
|
+
z-index: var(--cx-z-modal);
|
|
325
662
|
display: none;
|
|
326
663
|
text-align: center;
|
|
327
664
|
color: rgb(83, 105, 255);
|
|
@@ -350,58 +687,172 @@ svg.cX-code {
|
|
|
350
687
|
}
|
|
351
688
|
}
|
|
352
689
|
|
|
690
|
+
/*
|
|
691
|
+
* Dark theme (P7): the icon colour classes carry light literals (icons.js, and the dataUIStyle's
|
|
692
|
+
* via changeSVGIconColors, written into each icon's <style>), so a dark subtree re-points the UI
|
|
693
|
+
* ones onto the dark roles: accent to the accent, near-black to the text, the icons' white inner
|
|
694
|
+
* fills to the surface. Attribute + class outranks the icon's own class rule. Classes that depict
|
|
695
|
+
* something (palette swatches cl*, theme tiles) keep their colours.
|
|
696
|
+
*/
|
|
697
|
+
[data-cx-ui-theme="dark"] .cxa,
|
|
698
|
+
[data-cx-ui-theme="dark"] .cxa1,
|
|
699
|
+
[data-cx-ui-theme="dark"] .cxa3,
|
|
700
|
+
[data-cx-ui-theme="dark"] .cxtxa,
|
|
701
|
+
[data-cx-ui-theme="dark"] .cxblue,
|
|
702
|
+
[data-cx-ui-theme="dark"] .cxac {
|
|
703
|
+
stroke: var(--cx-ui-accent);
|
|
704
|
+
}
|
|
705
|
+
|
|
706
|
+
[data-cx-ui-theme="dark"] .cxa0 {
|
|
707
|
+
fill: var(--cx-ui-accent);
|
|
708
|
+
}
|
|
709
|
+
|
|
710
|
+
[data-cx-ui-theme="dark"] .cxa2,
|
|
711
|
+
[data-cx-ui-theme="dark"] .cxaa {
|
|
712
|
+
stroke: var(--cx-ui-accent);
|
|
713
|
+
fill: var(--cx-ui-accent);
|
|
714
|
+
}
|
|
715
|
+
|
|
716
|
+
[data-cx-ui-theme="dark"] .cxb,
|
|
717
|
+
[data-cx-ui-theme="dark"] .cxb3,
|
|
718
|
+
[data-cx-ui-theme="dark"] .cxbc,
|
|
719
|
+
[data-cx-ui-theme="dark"] .cxtxb,
|
|
720
|
+
[data-cx-ui-theme="dark"] .cursor2 {
|
|
721
|
+
stroke: var(--cx-ui-text);
|
|
722
|
+
}
|
|
723
|
+
|
|
724
|
+
[data-cx-ui-theme="dark"] .cxb0,
|
|
725
|
+
[data-cx-ui-theme="dark"] .cursor3 {
|
|
726
|
+
fill: var(--cx-ui-text);
|
|
727
|
+
}
|
|
728
|
+
|
|
729
|
+
[data-cx-ui-theme="dark"] .cxb2,
|
|
730
|
+
[data-cx-ui-theme="dark"] .cxbb {
|
|
731
|
+
stroke: var(--cx-ui-text);
|
|
732
|
+
fill: var(--cx-ui-text);
|
|
733
|
+
}
|
|
734
|
+
|
|
735
|
+
[data-cx-ui-theme="dark"] .cxab {
|
|
736
|
+
stroke: var(--cx-ui-accent);
|
|
737
|
+
fill: var(--cx-ui-text);
|
|
738
|
+
}
|
|
739
|
+
|
|
740
|
+
[data-cx-ui-theme="dark"] .cxaw {
|
|
741
|
+
stroke: var(--cx-ui-accent);
|
|
742
|
+
fill: var(--cx-ui-surface);
|
|
743
|
+
}
|
|
744
|
+
|
|
745
|
+
[data-cx-ui-theme="dark"] .cxbw {
|
|
746
|
+
stroke: var(--cx-ui-text);
|
|
747
|
+
fill: var(--cx-ui-surface);
|
|
748
|
+
}
|
|
749
|
+
|
|
750
|
+
@media (prefers-color-scheme: dark) {
|
|
751
|
+
[data-cx-ui-theme="auto"] .cxa,
|
|
752
|
+
[data-cx-ui-theme="auto"] .cxa1,
|
|
753
|
+
[data-cx-ui-theme="auto"] .cxa3,
|
|
754
|
+
[data-cx-ui-theme="auto"] .cxtxa,
|
|
755
|
+
[data-cx-ui-theme="auto"] .cxblue,
|
|
756
|
+
[data-cx-ui-theme="auto"] .cxac {
|
|
757
|
+
stroke: var(--cx-ui-accent);
|
|
758
|
+
}
|
|
759
|
+
|
|
760
|
+
[data-cx-ui-theme="auto"] .cxa0 {
|
|
761
|
+
fill: var(--cx-ui-accent);
|
|
762
|
+
}
|
|
763
|
+
|
|
764
|
+
[data-cx-ui-theme="auto"] .cxa2,
|
|
765
|
+
[data-cx-ui-theme="auto"] .cxaa {
|
|
766
|
+
stroke: var(--cx-ui-accent);
|
|
767
|
+
fill: var(--cx-ui-accent);
|
|
768
|
+
}
|
|
769
|
+
|
|
770
|
+
[data-cx-ui-theme="auto"] .cxb,
|
|
771
|
+
[data-cx-ui-theme="auto"] .cxb3,
|
|
772
|
+
[data-cx-ui-theme="auto"] .cxbc,
|
|
773
|
+
[data-cx-ui-theme="auto"] .cxtxb,
|
|
774
|
+
[data-cx-ui-theme="auto"] .cursor2 {
|
|
775
|
+
stroke: var(--cx-ui-text);
|
|
776
|
+
}
|
|
777
|
+
|
|
778
|
+
[data-cx-ui-theme="auto"] .cxb0,
|
|
779
|
+
[data-cx-ui-theme="auto"] .cursor3 {
|
|
780
|
+
fill: var(--cx-ui-text);
|
|
781
|
+
}
|
|
782
|
+
|
|
783
|
+
[data-cx-ui-theme="auto"] .cxb2,
|
|
784
|
+
[data-cx-ui-theme="auto"] .cxbb {
|
|
785
|
+
stroke: var(--cx-ui-text);
|
|
786
|
+
fill: var(--cx-ui-text);
|
|
787
|
+
}
|
|
788
|
+
|
|
789
|
+
[data-cx-ui-theme="auto"] .cxab {
|
|
790
|
+
stroke: var(--cx-ui-accent);
|
|
791
|
+
fill: var(--cx-ui-text);
|
|
792
|
+
}
|
|
793
|
+
|
|
794
|
+
[data-cx-ui-theme="auto"] .cxaw {
|
|
795
|
+
stroke: var(--cx-ui-accent);
|
|
796
|
+
fill: var(--cx-ui-surface);
|
|
797
|
+
}
|
|
798
|
+
|
|
799
|
+
[data-cx-ui-theme="auto"] .cxbw {
|
|
800
|
+
stroke: var(--cx-ui-text);
|
|
801
|
+
fill: var(--cx-ui-surface);
|
|
802
|
+
}
|
|
803
|
+
}
|
|
353
804
|
/* @category: widget */
|
|
354
805
|
/*****************
|
|
355
806
|
* Code *
|
|
356
807
|
*****************/
|
|
357
808
|
|
|
358
809
|
.cX-Code-Key {
|
|
359
|
-
color: var(--cx-code-key);
|
|
810
|
+
color: var(--cx-code-key, var(--cx-ui-code-key));
|
|
360
811
|
font-weight: bold;
|
|
361
812
|
}
|
|
362
813
|
|
|
363
814
|
.cX-Code-Value,
|
|
364
815
|
.cX-Code-Number,
|
|
365
816
|
.cX-Code-Null {
|
|
366
|
-
color: var(--cx-code-value);
|
|
817
|
+
color: var(--cx-code-value, var(--cx-ui-code-value));
|
|
367
818
|
}
|
|
368
819
|
|
|
369
820
|
.cX-Code-String {
|
|
370
|
-
color: var(--cx-code-string);
|
|
821
|
+
color: var(--cx-code-string, var(--cx-ui-code-string));
|
|
371
822
|
}
|
|
372
823
|
|
|
373
824
|
.cX-Code-Boolean {
|
|
374
|
-
color: var(--cx-code-boolean);
|
|
825
|
+
color: var(--cx-code-boolean, var(--cx-ui-code-boolean));
|
|
375
826
|
}
|
|
376
827
|
|
|
377
828
|
.cX-Code-Comment {
|
|
378
|
-
color: var(--cx-code-comment);
|
|
829
|
+
color: var(--cx-code-comment, var(--cx-ui-code-comment));
|
|
379
830
|
}
|
|
380
831
|
|
|
381
832
|
.cX-Container-Code {
|
|
382
|
-
z-index:
|
|
833
|
+
z-index: var(--cx-z-modal);
|
|
383
834
|
background: transparent;
|
|
384
835
|
}
|
|
385
836
|
|
|
386
837
|
div.cX-Code {
|
|
387
|
-
border: var(--cx-border);
|
|
838
|
+
border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
|
|
388
839
|
border-radius: var(--cx-border-radius);
|
|
389
|
-
background-color: var(--cx-
|
|
390
|
-
color: var(--cx-font-color);
|
|
840
|
+
background-color: var(--cx-ui-surface-sunken);
|
|
841
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
391
842
|
font: var(--cx-font);
|
|
392
843
|
margin: 2px 3px;
|
|
393
844
|
padding: 10px 20px 20px 10px;
|
|
394
845
|
position: absolute;
|
|
395
846
|
white-space: nowrap;
|
|
396
847
|
overflow: hidden;
|
|
397
|
-
z-index:
|
|
848
|
+
z-index: var(--cx-z-panel);
|
|
398
849
|
}
|
|
399
850
|
|
|
400
851
|
.cX-Code-Container {
|
|
401
852
|
clear: both;
|
|
402
853
|
width: 600px;
|
|
403
854
|
overflow: auto;
|
|
404
|
-
background-color: var(--cx-
|
|
855
|
+
background-color: var(--cx-ui-surface);
|
|
405
856
|
position: relative;
|
|
406
857
|
top: 10px;
|
|
407
858
|
}
|
|
@@ -435,10 +886,10 @@ div.cX-Code {
|
|
|
435
886
|
resize: none;
|
|
436
887
|
top: 5px;
|
|
437
888
|
left: 20px;
|
|
438
|
-
background-color: var(--cx-
|
|
889
|
+
background-color: var(--cx-ui-surface-sunken);
|
|
439
890
|
overflow: hidden;
|
|
440
891
|
white-space: nowrap;
|
|
441
|
-
color: var(--cx-
|
|
892
|
+
color: var(--cx-ui-danger);
|
|
442
893
|
position: relative;
|
|
443
894
|
cursor: pointer;
|
|
444
895
|
}
|
|
@@ -475,9 +926,9 @@ div.cX-Code {
|
|
|
475
926
|
content: counter(listing) " ";
|
|
476
927
|
display: inline-block;
|
|
477
928
|
width: 3em;
|
|
478
|
-
border-right: 1px solid
|
|
929
|
+
border-right: 1px solid var(--cx-ui-border);
|
|
479
930
|
text-align: right;
|
|
480
|
-
background-color: var(--cx-
|
|
931
|
+
background-color: var(--cx-ui-surface-sunken);
|
|
481
932
|
}
|
|
482
933
|
|
|
483
934
|
/* @category: widget */
|
|
@@ -486,10 +937,13 @@ div.cX-Code {
|
|
|
486
937
|
******************/
|
|
487
938
|
|
|
488
939
|
.cX-Container-Chat {
|
|
940
|
+
/* was inheriting the host page's font (serif in a bare page) */
|
|
941
|
+
color: var(--cx-ui-text);
|
|
942
|
+
font-family: var(--cx-font-sans);
|
|
489
943
|
height: fit-content;
|
|
490
944
|
opacity: 0;
|
|
491
945
|
visibility: hidden;
|
|
492
|
-
background:
|
|
946
|
+
background: var(--cx-ui-surface);
|
|
493
947
|
transition: all var(--cx-transition-speed) ease;
|
|
494
948
|
width: 100%;
|
|
495
949
|
display: none;
|
|
@@ -511,9 +965,9 @@ div.cX-Chat {
|
|
|
511
965
|
width: 100%;
|
|
512
966
|
max-width: 900px;
|
|
513
967
|
background: white;
|
|
514
|
-
border: 1px solid
|
|
968
|
+
border: 1px solid var(--cx-ui-border);
|
|
515
969
|
border-radius: var(--cx-border-radius);
|
|
516
|
-
box-shadow:
|
|
970
|
+
box-shadow: var(--cx-shadow-1);
|
|
517
971
|
overflow: hidden;
|
|
518
972
|
margin-top: 2px;
|
|
519
973
|
}
|
|
@@ -521,14 +975,14 @@ div.cX-Chat {
|
|
|
521
975
|
.cX-Chat-Toolbar-Container {
|
|
522
976
|
width: 100%;
|
|
523
977
|
height: 35px;
|
|
524
|
-
background:
|
|
525
|
-
border-bottom: 1px solid
|
|
978
|
+
background: var(--cx-ui-surface-sunken);
|
|
979
|
+
border-bottom: 1px solid var(--cx-ui-border);
|
|
526
980
|
display: flex;
|
|
527
981
|
align-items: center;
|
|
528
982
|
justify-content: space-between;
|
|
529
983
|
padding: 0 10px;
|
|
530
984
|
box-sizing: border-box;
|
|
531
|
-
color:
|
|
985
|
+
color: var(--cx-ui-text-muted);
|
|
532
986
|
}
|
|
533
987
|
|
|
534
988
|
.cX-Chat-Toolbar-Container .cX-Chat-Left-Toolbar-Container,
|
|
@@ -541,12 +995,12 @@ div.cX-Chat {
|
|
|
541
995
|
.cX-Chat-Configurator-Container {
|
|
542
996
|
display: none;
|
|
543
997
|
width: 100%;
|
|
544
|
-
background:
|
|
545
|
-
border-bottom: 1px solid
|
|
998
|
+
background: var(--cx-ui-surface-sunken);
|
|
999
|
+
border-bottom: 1px solid var(--cx-ui-border);
|
|
546
1000
|
padding: 4px 20px;
|
|
547
1001
|
box-sizing: border-box;
|
|
548
1002
|
font-size: medium;
|
|
549
|
-
color:
|
|
1003
|
+
color: var(--cx-ui-text-muted);
|
|
550
1004
|
align-items: center;
|
|
551
1005
|
gap: 8px;
|
|
552
1006
|
}
|
|
@@ -562,7 +1016,7 @@ div.cX-Chat {
|
|
|
562
1016
|
display: flex;
|
|
563
1017
|
width: 100%;
|
|
564
1018
|
min-height: 100px;
|
|
565
|
-
background:
|
|
1019
|
+
background: var(--cx-ui-surface);
|
|
566
1020
|
pointer-events: none;
|
|
567
1021
|
}
|
|
568
1022
|
|
|
@@ -584,7 +1038,7 @@ div.cX-Chat {
|
|
|
584
1038
|
}
|
|
585
1039
|
|
|
586
1040
|
.cX-Chat-Messages-Container:has(.cX-Chat-Messages:not(:empty)) {
|
|
587
|
-
border-top: var(--cx-border);
|
|
1041
|
+
border-top: var(--cx-border, 1px solid var(--cx-ui-border-accent));
|
|
588
1042
|
}
|
|
589
1043
|
|
|
590
1044
|
.cX-Chat-Messages {
|
|
@@ -598,8 +1052,8 @@ div.cX-Chat {
|
|
|
598
1052
|
position: fixed;
|
|
599
1053
|
width: 500px;
|
|
600
1054
|
height: 400px;
|
|
601
|
-
background-color: var(--cx-background-widgets-color);
|
|
602
|
-
border: var(--cx-border);
|
|
1055
|
+
background-color: var(--cx-background-widgets-color, var(--cx-ui-surface));
|
|
1056
|
+
border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
|
|
603
1057
|
border-radius: var(--cx-border-radius);
|
|
604
1058
|
z-index: 10005;
|
|
605
1059
|
box-sizing: border-box;
|
|
@@ -608,7 +1062,7 @@ div.cX-Chat {
|
|
|
608
1062
|
overflow: hidden;
|
|
609
1063
|
cursor: move;
|
|
610
1064
|
resize: both;
|
|
611
|
-
box-shadow:
|
|
1065
|
+
box-shadow: var(--cx-shadow-2);
|
|
612
1066
|
}
|
|
613
1067
|
|
|
614
1068
|
.cX-Chat-Html-Panel-Header {
|
|
@@ -616,8 +1070,8 @@ div.cX-Chat {
|
|
|
616
1070
|
align-items: center;
|
|
617
1071
|
justify-content: space-between;
|
|
618
1072
|
padding: 6px 10px;
|
|
619
|
-
background: var(--cx-background-color);
|
|
620
|
-
border-bottom: var(--cx-border);
|
|
1073
|
+
background: var(--cx-background-color, var(--cx-ui-scrollbar-thumb));
|
|
1074
|
+
border-bottom: var(--cx-border, 1px solid var(--cx-ui-border-accent));
|
|
621
1075
|
flex-shrink: 0;
|
|
622
1076
|
user-select: none;
|
|
623
1077
|
}
|
|
@@ -654,8 +1108,8 @@ svg.cX-Chat-Html-Panel-Close {
|
|
|
654
1108
|
font-size: var(--cx-large-font-size);
|
|
655
1109
|
line-height: 1.6;
|
|
656
1110
|
color: var(--cx-color-ui-font);
|
|
657
|
-
background: var(--cx-background-widgets-color);
|
|
658
|
-
border: var(--cx-border);
|
|
1111
|
+
background: var(--cx-background-widgets-color, var(--cx-ui-surface));
|
|
1112
|
+
border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
|
|
659
1113
|
border-radius: var(--cx-border-radius);
|
|
660
1114
|
padding: 16px 20px;
|
|
661
1115
|
margin: 10px;
|
|
@@ -667,8 +1121,8 @@ svg.cX-Chat-Html-Panel-Close {
|
|
|
667
1121
|
font-size: var(--cx-large-font-size);
|
|
668
1122
|
font-weight: 600;
|
|
669
1123
|
margin: 0 0 10px;
|
|
670
|
-
color: var(--cx-color-widgets);
|
|
671
|
-
border-bottom: var(--cx-border);
|
|
1124
|
+
color: var(--cx-color-widgets, var(--cx-ui-accent));
|
|
1125
|
+
border-bottom: var(--cx-border, 1px solid var(--cx-ui-border-accent));
|
|
672
1126
|
padding-bottom: 6px;
|
|
673
1127
|
}
|
|
674
1128
|
|
|
@@ -679,16 +1133,16 @@ svg.cX-Chat-Html-Panel-Close {
|
|
|
679
1133
|
.cX-Chat-LLM-Response code {
|
|
680
1134
|
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
|
|
681
1135
|
font-size: var(--cx-small-font-size);
|
|
682
|
-
background: var(--cx-background-widgets-color);
|
|
683
|
-
border: var(--cx-border);
|
|
1136
|
+
background: var(--cx-background-widgets-color, var(--cx-ui-surface));
|
|
1137
|
+
border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
|
|
684
1138
|
border-radius: var(--cx-border-radius);
|
|
685
1139
|
padding: 1px 5px;
|
|
686
1140
|
color: var(--cx-color-ui-font);
|
|
687
1141
|
}
|
|
688
1142
|
|
|
689
1143
|
.cX-Chat-LLM-Response pre {
|
|
690
|
-
background: var(--cx-background-widgets-color);
|
|
691
|
-
border: var(--cx-border);
|
|
1144
|
+
background: var(--cx-background-widgets-color, var(--cx-ui-surface));
|
|
1145
|
+
border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
|
|
692
1146
|
border-radius: var(--cx-border-radius);
|
|
693
1147
|
padding: 12px 14px;
|
|
694
1148
|
overflow-x: auto;
|
|
@@ -733,12 +1187,12 @@ svg.cX-Chat-Html-Panel-Close {
|
|
|
733
1187
|
.cX-Chat-LLM-Links {
|
|
734
1188
|
margin-top: 12px;
|
|
735
1189
|
padding-top: 8px;
|
|
736
|
-
border-top: var(--cx-border);
|
|
1190
|
+
border-top: var(--cx-border, 1px solid var(--cx-ui-border-accent));
|
|
737
1191
|
font-size: var(--cx-medium-font-size);
|
|
738
1192
|
}
|
|
739
1193
|
|
|
740
1194
|
.cX-Chat-LLM-Links a {
|
|
741
|
-
color: var(--cx-color-widgets);
|
|
1195
|
+
color: var(--cx-color-widgets, var(--cx-ui-accent));
|
|
742
1196
|
text-decoration: none;
|
|
743
1197
|
}
|
|
744
1198
|
|
|
@@ -750,16 +1204,16 @@ svg.cX-Chat-Html-Panel-Close {
|
|
|
750
1204
|
* Chat HTML Panel — select_canvasxpress_chart cards
|
|
751
1205
|
*/
|
|
752
1206
|
.cX-Chat-Select-Top {
|
|
753
|
-
background: var(--cx-background-widgets-color);
|
|
754
|
-
border: 2px solid var(--cx-color-widgets);
|
|
1207
|
+
background: var(--cx-background-widgets-color, var(--cx-ui-surface));
|
|
1208
|
+
border: 2px solid var(--cx-color-widgets, var(--cx-ui-accent));
|
|
755
1209
|
border-radius: var(--cx-border-radius);
|
|
756
1210
|
padding: 12px 14px;
|
|
757
1211
|
margin-bottom: 10px;
|
|
758
1212
|
}
|
|
759
1213
|
|
|
760
1214
|
.cX-Chat-Select-Alt {
|
|
761
|
-
background: var(--cx-background-widgets-color);
|
|
762
|
-
border: var(--cx-border);
|
|
1215
|
+
background: var(--cx-background-widgets-color, var(--cx-ui-surface));
|
|
1216
|
+
border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
|
|
763
1217
|
border-radius: var(--cx-border-radius);
|
|
764
1218
|
padding: 10px 12px;
|
|
765
1219
|
}
|
|
@@ -781,14 +1235,14 @@ svg.cX-Chat-Html-Panel-Close {
|
|
|
781
1235
|
.cX-Chat-Select-GT {
|
|
782
1236
|
font-weight: 700;
|
|
783
1237
|
font-size: var(--cx-font-size);
|
|
784
|
-
color: var(--cx-color-widgets);
|
|
1238
|
+
color: var(--cx-color-widgets, var(--cx-ui-accent));
|
|
785
1239
|
}
|
|
786
1240
|
|
|
787
1241
|
.cX-Chat-Select-Score {
|
|
788
1242
|
font-size: var(--cx-x-small-font-size);
|
|
789
|
-
color:
|
|
790
|
-
background: var(--cx-background-color);
|
|
791
|
-
border: var(--cx-border);
|
|
1243
|
+
color: var(--cx-ui-on-accent);
|
|
1244
|
+
background: var(--cx-background-color, var(--cx-ui-scrollbar-thumb));
|
|
1245
|
+
border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
|
|
792
1246
|
border-radius: var(--cx-border-radius);
|
|
793
1247
|
padding: 1px 7px;
|
|
794
1248
|
}
|
|
@@ -822,8 +1276,8 @@ svg.cX-Chat-Html-Panel-Close {
|
|
|
822
1276
|
padding: 4px 12px;
|
|
823
1277
|
font-size: var(--cx-small-font-size);
|
|
824
1278
|
font-family: var(--cx-font-family);
|
|
825
|
-
background: var(--cx-color-widgets);
|
|
826
|
-
color: var(--cx-background-widgets-color);
|
|
1279
|
+
background: var(--cx-color-widgets, var(--cx-ui-accent));
|
|
1280
|
+
color: var(--cx-background-widgets-color, var(--cx-ui-surface));
|
|
827
1281
|
border: none;
|
|
828
1282
|
border-radius: var(--cx-border-radius);
|
|
829
1283
|
cursor: pointer;
|
|
@@ -838,7 +1292,7 @@ svg.cX-Chat-Html-Panel-Close {
|
|
|
838
1292
|
outline: none;
|
|
839
1293
|
font-size: medium;
|
|
840
1294
|
line-height: 1.5;
|
|
841
|
-
color:
|
|
1295
|
+
color: var(--cx-ui-text);
|
|
842
1296
|
min-height: 50px;
|
|
843
1297
|
height: 100%;
|
|
844
1298
|
white-space: pre-wrap;
|
|
@@ -848,7 +1302,7 @@ svg.cX-Chat-Html-Panel-Close {
|
|
|
848
1302
|
|
|
849
1303
|
.cX-Chat-Question[empty]:empty::before {
|
|
850
1304
|
content: attr(data-placeholder);
|
|
851
|
-
color:
|
|
1305
|
+
color: var(--cx-ui-text-subtle);
|
|
852
1306
|
}
|
|
853
1307
|
|
|
854
1308
|
.cX-Chat-Icon-Container {
|
|
@@ -863,8 +1317,8 @@ svg.cX-Chat-Html-Panel-Close {
|
|
|
863
1317
|
.cX-Chat-Suggestions-Container {
|
|
864
1318
|
display: none;
|
|
865
1319
|
padding: 12px 18px 18px 18px;
|
|
866
|
-
border-top: 1px solid
|
|
867
|
-
background:
|
|
1320
|
+
border-top: 1px solid var(--cx-ui-border);
|
|
1321
|
+
background: var(--cx-ui-surface-sunken);
|
|
868
1322
|
}
|
|
869
1323
|
|
|
870
1324
|
.cX-Chat-Suggestions {
|
|
@@ -880,8 +1334,8 @@ svg.cX-Chat-Html-Panel-Close {
|
|
|
880
1334
|
.cX-Chat-Thumbs-Container {
|
|
881
1335
|
width: 100%;
|
|
882
1336
|
height: 36px;
|
|
883
|
-
background:
|
|
884
|
-
border-top: 1px solid
|
|
1337
|
+
background: var(--cx-ui-surface-sunken);
|
|
1338
|
+
border-top: 1px solid var(--cx-ui-border);
|
|
885
1339
|
display: none;
|
|
886
1340
|
align-items: center;
|
|
887
1341
|
padding: 0 10px;
|
|
@@ -904,21 +1358,6 @@ svg.cX-Chat-Html-Panel-Close {
|
|
|
904
1358
|
display: none;
|
|
905
1359
|
}
|
|
906
1360
|
|
|
907
|
-
.cX-Chat-Output {
|
|
908
|
-
width: 100%;
|
|
909
|
-
max-width: 900px;
|
|
910
|
-
margin-top: 5px;
|
|
911
|
-
min-height: 100px;
|
|
912
|
-
padding: 5px;
|
|
913
|
-
outline: none;
|
|
914
|
-
border: none;
|
|
915
|
-
font-family: monospace;
|
|
916
|
-
font-size: var(--cx-medium-font-size);
|
|
917
|
-
box-sizing: border-box;
|
|
918
|
-
resize: vertical;
|
|
919
|
-
display: none;
|
|
920
|
-
}
|
|
921
|
-
|
|
922
1361
|
/*
|
|
923
1362
|
* Chat Output Container (Tabs & Content)
|
|
924
1363
|
*/
|
|
@@ -926,8 +1365,8 @@ div.cX-Chat-Output-Container {
|
|
|
926
1365
|
position: absolute;
|
|
927
1366
|
width: calc(var(--base-w) + 18px);
|
|
928
1367
|
height: calc(var(--base-h) + 82px);
|
|
929
|
-
background-color: var(--cx-background-widgets-color);
|
|
930
|
-
border: var(--cx-border);
|
|
1368
|
+
background-color: var(--cx-background-widgets-color, var(--cx-ui-surface));
|
|
1369
|
+
border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
|
|
931
1370
|
border-radius: var(--cx-border-radius);
|
|
932
1371
|
z-index: 10005;
|
|
933
1372
|
display: none; /* Toggled by JS */
|
|
@@ -943,7 +1382,7 @@ svg.cX-Chat-Output-Close {
|
|
|
943
1382
|
top: 8px;
|
|
944
1383
|
right: 8px;
|
|
945
1384
|
cursor: pointer;
|
|
946
|
-
z-index:
|
|
1385
|
+
z-index: var(--cx-z-raised);
|
|
947
1386
|
background: var(--cx-color-transparent) !important;
|
|
948
1387
|
border: none !important;
|
|
949
1388
|
box-shadow: 0 0 0px var(--cx-color-transparent) !important;
|
|
@@ -953,19 +1392,19 @@ svg.cX-Chat-Output-Close {
|
|
|
953
1392
|
button.cX-Chat-Output-Tab {
|
|
954
1393
|
display: inline-block;
|
|
955
1394
|
vertical-align: bottom;
|
|
956
|
-
background-color: var(--cx-background-hover-color);
|
|
957
|
-
border: var(--cx-border);
|
|
1395
|
+
background-color: var(--cx-background-hover-color, var(--cx-ui-accent-tint));
|
|
1396
|
+
border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
|
|
958
1397
|
border-bottom: none;
|
|
959
1398
|
padding: 5px 10px;
|
|
960
1399
|
margin: 10px 0 0 10px;
|
|
961
1400
|
cursor: pointer;
|
|
962
1401
|
font: var(--cx-large-font);
|
|
963
|
-
color: var(--cx-font-color);
|
|
1402
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
964
1403
|
border-radius: var(--cx-border-radius) var(--cx-border-radius) 0 0;
|
|
965
1404
|
outline: none;
|
|
966
1405
|
position: relative;
|
|
967
1406
|
top: 1px; /* Overlaps the content border to look like a real tab */
|
|
968
|
-
z-index:
|
|
1407
|
+
z-index: var(--cx-z-base);
|
|
969
1408
|
box-sizing: border-box;
|
|
970
1409
|
line-height: 24px;
|
|
971
1410
|
}
|
|
@@ -976,13 +1415,13 @@ button.cX-Chat-Output-Tab + button.cX-Chat-Output-Tab {
|
|
|
976
1415
|
}
|
|
977
1416
|
|
|
978
1417
|
button.cX-Chat-Output-Tab:hover {
|
|
979
|
-
background-color: var(--cx-background-widgets-color);
|
|
1418
|
+
background-color: var(--cx-background-widgets-color, var(--cx-ui-surface));
|
|
980
1419
|
}
|
|
981
1420
|
|
|
982
1421
|
button.cX-Chat-Output-Tab.Active {
|
|
983
|
-
background-color: var(--cx-background-widgets-color);
|
|
1422
|
+
background-color: var(--cx-background-widgets-color, var(--cx-ui-surface));
|
|
984
1423
|
font: var(--cx-large-font-bold);
|
|
985
|
-
border-bottom: 1px solid var(--cx-background-widgets-color);
|
|
1424
|
+
border-bottom: 1px solid var(--cx-background-widgets-color, var(--cx-ui-surface));
|
|
986
1425
|
z-index: 3;
|
|
987
1426
|
}
|
|
988
1427
|
|
|
@@ -1007,9 +1446,9 @@ textarea.cX-Chat-Code-Output {
|
|
|
1007
1446
|
height: calc(100% - 46px);
|
|
1008
1447
|
/* 500px total - 46px for the tabs area */
|
|
1009
1448
|
border: none;
|
|
1010
|
-
border-top: var(--cx-border);
|
|
1011
|
-
background-color: var(--cx-background-widgets-color);
|
|
1012
|
-
color: var(--cx-font-color);
|
|
1449
|
+
border-top: var(--cx-border, 1px solid var(--cx-ui-border-accent));
|
|
1450
|
+
background-color: var(--cx-background-widgets-color, var(--cx-ui-surface));
|
|
1451
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
1013
1452
|
overflow: auto;
|
|
1014
1453
|
/* Enables scrolling for the tab content */
|
|
1015
1454
|
padding: 10px;
|
|
@@ -1046,7 +1485,7 @@ textarea.cX-Chat-Code-Output {
|
|
|
1046
1485
|
}
|
|
1047
1486
|
|
|
1048
1487
|
/* Color Coding Classes */
|
|
1049
|
-
.hint {
|
|
1488
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).hint {
|
|
1050
1489
|
padding: 4px 10px;
|
|
1051
1490
|
border-radius: var(--cx-border-radius);
|
|
1052
1491
|
font-size: var(--cx-small-font-size);
|
|
@@ -1060,128 +1499,657 @@ textarea.cX-Chat-Code-Output {
|
|
|
1060
1499
|
border-color: #e2e8f0;
|
|
1061
1500
|
}
|
|
1062
1501
|
|
|
1063
|
-
.hint.graph {
|
|
1502
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.graph {
|
|
1064
1503
|
background: #f3e8ff;
|
|
1065
1504
|
color: #9333ea;
|
|
1066
1505
|
border-color: #e9d5ff;
|
|
1067
1506
|
}
|
|
1068
1507
|
|
|
1069
|
-
.hint.graph:hover {
|
|
1508
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.graph:hover {
|
|
1070
1509
|
background: #9333ea;
|
|
1071
1510
|
color: white;
|
|
1072
1511
|
}
|
|
1073
1512
|
|
|
1074
|
-
.hint.column {
|
|
1513
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.column {
|
|
1075
1514
|
background: #eff6ff;
|
|
1076
1515
|
color: #2563eb;
|
|
1077
1516
|
border-color: #dbeafe;
|
|
1078
1517
|
}
|
|
1079
1518
|
|
|
1080
|
-
.hint.column:hover {
|
|
1519
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.column:hover {
|
|
1081
1520
|
background: #2563eb;
|
|
1082
1521
|
color: white;
|
|
1083
1522
|
}
|
|
1084
1523
|
|
|
1085
|
-
.hint.map_name {
|
|
1524
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.map_name {
|
|
1086
1525
|
background: #e0e7ff;
|
|
1087
1526
|
color: #3730a3;
|
|
1088
1527
|
border-color: #c7d2fe;
|
|
1089
1528
|
}
|
|
1090
1529
|
|
|
1091
|
-
.hint.data,
|
|
1092
|
-
.hint.data_multi {
|
|
1530
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.data,
|
|
1531
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.data_multi {
|
|
1093
1532
|
background: #ccfbf1;
|
|
1094
1533
|
color: #0d9488;
|
|
1095
1534
|
border-color: #99f6e4;
|
|
1096
1535
|
}
|
|
1097
1536
|
|
|
1098
|
-
.hint.data:hover,
|
|
1099
|
-
.hint.data_multi:hover {
|
|
1537
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.data:hover,
|
|
1538
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.data_multi:hover {
|
|
1100
1539
|
background: #0d9488;
|
|
1101
1540
|
color: white;
|
|
1102
1541
|
}
|
|
1103
1542
|
|
|
1104
|
-
.hint.text {
|
|
1543
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.text {
|
|
1105
1544
|
background: #fce7f3;
|
|
1106
1545
|
color: #db2777;
|
|
1107
1546
|
border-color: #fbcfe8;
|
|
1108
1547
|
}
|
|
1109
1548
|
|
|
1110
|
-
.hint.text:hover {
|
|
1549
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.text:hover {
|
|
1111
1550
|
background: #db2777;
|
|
1112
1551
|
color: white;
|
|
1113
1552
|
}
|
|
1114
1553
|
|
|
1115
|
-
.hint.number {
|
|
1554
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.number {
|
|
1116
1555
|
background: #fef08a;
|
|
1117
1556
|
color: #b45309;
|
|
1118
1557
|
border-color: #fde047;
|
|
1119
1558
|
}
|
|
1120
1559
|
|
|
1121
|
-
.hint.enum {
|
|
1560
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.enum {
|
|
1122
1561
|
background: #ffedd5;
|
|
1123
1562
|
color: #ea580c;
|
|
1124
1563
|
border-color: #fed7aa;
|
|
1125
1564
|
}
|
|
1126
1565
|
|
|
1127
|
-
.hint.enum:hover {
|
|
1566
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.enum:hover {
|
|
1128
1567
|
background: #ea580c;
|
|
1129
1568
|
color: white;
|
|
1130
1569
|
}
|
|
1131
1570
|
|
|
1132
|
-
.hint.toggle {
|
|
1571
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.toggle {
|
|
1133
1572
|
background: #dcfce7;
|
|
1134
1573
|
color: #16a34a;
|
|
1135
1574
|
border-color: #bbf7d0;
|
|
1136
1575
|
}
|
|
1137
1576
|
|
|
1138
|
-
.hint.toggle:hover {
|
|
1577
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.toggle:hover {
|
|
1139
1578
|
background: #16a34a;
|
|
1140
1579
|
color: white;
|
|
1141
1580
|
}
|
|
1142
1581
|
|
|
1143
|
-
.hint.filter,
|
|
1144
|
-
.hint.sort {
|
|
1582
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.filter,
|
|
1583
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.sort {
|
|
1145
1584
|
background: #fee2e2;
|
|
1146
1585
|
color: #dc2626;
|
|
1147
1586
|
border-color: #fecaca;
|
|
1148
1587
|
}
|
|
1149
1588
|
|
|
1150
|
-
.hint.filter:hover,
|
|
1151
|
-
.hint.sort:hover {
|
|
1589
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.filter:hover,
|
|
1590
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.sort:hover {
|
|
1152
1591
|
background: #dc2626;
|
|
1153
1592
|
color: white;
|
|
1154
1593
|
}
|
|
1155
1594
|
|
|
1156
|
-
.hint.connector {
|
|
1595
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.connector {
|
|
1157
1596
|
background: #f1f5f9;
|
|
1158
1597
|
color: #64748b;
|
|
1159
1598
|
border-color: #cbd5e1;
|
|
1160
1599
|
}
|
|
1161
1600
|
|
|
1162
|
-
.hint.connector:hover {
|
|
1601
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.connector:hover {
|
|
1163
1602
|
background: #64748b;
|
|
1164
1603
|
color: white;
|
|
1165
1604
|
}
|
|
1166
1605
|
|
|
1167
|
-
.hint.finish {
|
|
1606
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.finish {
|
|
1168
1607
|
background: #fef3c7;
|
|
1169
1608
|
color: #92400e;
|
|
1170
1609
|
border-color: #fde68a;
|
|
1171
1610
|
}
|
|
1172
1611
|
|
|
1173
|
-
.hint.finish:hover {
|
|
1612
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.finish:hover {
|
|
1174
1613
|
background: #d97706;
|
|
1175
1614
|
color: white;
|
|
1176
1615
|
}
|
|
1177
1616
|
|
|
1178
|
-
.hint.disabled {
|
|
1617
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).hint.disabled {
|
|
1179
1618
|
background: #f8fafc;
|
|
1180
1619
|
color: #94a3b8;
|
|
1181
1620
|
border-color: #e2e8f0;
|
|
1182
1621
|
cursor: default;
|
|
1183
1622
|
}
|
|
1184
1623
|
|
|
1624
|
+
/* @category: shared */
|
|
1625
|
+
|
|
1626
|
+
/*
|
|
1627
|
+
* UI primitives (UI design-system plan P3; spec docs/architecture/widgets/ui-design-tokens.md §9).
|
|
1628
|
+
*
|
|
1629
|
+
* The one set of component rules both CanvasXpress and CanvasXpress-Dashboards build on:
|
|
1630
|
+
* buttons, fields, modals, tabs, chips, badges, notices and cards. Every value is a semantic
|
|
1631
|
+
* role (--cx-ui-*) or a primitive step (--cx-space-*, --cx-radius-*, --cx-font-size-*,
|
|
1632
|
+
* --cx-shadow-*, --cx-z-*) -- never a literal -- so a dataUIStyle preset, dark mode (P7) or a
|
|
1633
|
+
* host override re-themes them in one place.
|
|
1634
|
+
*
|
|
1635
|
+
* Borders: the dialog frame uses border-subtle (the preset's grid colour, as the old dialogs did);
|
|
1636
|
+
* separators inside a component use the neutral divider role.
|
|
1637
|
+
*
|
|
1638
|
+
* Class names are new (nothing in the engine used them before), so adding this file changes no
|
|
1639
|
+
* existing widget; widgets adopt them one at a time (P3b/P4/P5), each change gated and reviewed.
|
|
1640
|
+
*/
|
|
1641
|
+
|
|
1642
|
+
/* ---- Button ------------------------------------------------------------------------------ */
|
|
1643
|
+
|
|
1644
|
+
.cX-Button {
|
|
1645
|
+
display: inline-flex;
|
|
1646
|
+
align-items: center;
|
|
1647
|
+
justify-content: center;
|
|
1648
|
+
gap: var(--cx-space-2);
|
|
1649
|
+
padding: var(--cx-space-3) var(--cx-space-6);
|
|
1650
|
+
border: 1px solid var(--cx-ui-border);
|
|
1651
|
+
border-radius: var(--cx-radius-md);
|
|
1652
|
+
background: var(--cx-ui-surface);
|
|
1653
|
+
color: var(--cx-ui-text);
|
|
1654
|
+
font-family: var(--cx-font-sans);
|
|
1655
|
+
font-size: var(--cx-font-size-md);
|
|
1656
|
+
font-weight: var(--cx-font-weight-medium);
|
|
1657
|
+
line-height: var(--cx-line-height-tight);
|
|
1658
|
+
white-space: nowrap;
|
|
1659
|
+
cursor: pointer;
|
|
1660
|
+
user-select: none;
|
|
1661
|
+
transition: background-color var(--cx-duration-fast), border-color var(--cx-duration-fast),
|
|
1662
|
+
color var(--cx-duration-fast);
|
|
1663
|
+
}
|
|
1664
|
+
|
|
1665
|
+
.cX-Button:hover {
|
|
1666
|
+
background: var(--cx-ui-accent-tint);
|
|
1667
|
+
}
|
|
1668
|
+
|
|
1669
|
+
.cX-Button:focus-visible {
|
|
1670
|
+
outline: 2px solid var(--cx-ui-focus);
|
|
1671
|
+
outline-offset: 2px;
|
|
1672
|
+
}
|
|
1673
|
+
|
|
1674
|
+
.cX-Button:disabled,
|
|
1675
|
+
.cX-Button[aria-disabled="true"] {
|
|
1676
|
+
opacity: 0.5;
|
|
1677
|
+
cursor: not-allowed;
|
|
1678
|
+
pointer-events: none;
|
|
1679
|
+
}
|
|
1680
|
+
|
|
1681
|
+
.cX-Button--primary {
|
|
1682
|
+
background: var(--cx-ui-accent-strong);
|
|
1683
|
+
border-color: var(--cx-ui-accent-strong);
|
|
1684
|
+
color: var(--cx-ui-on-accent);
|
|
1685
|
+
}
|
|
1686
|
+
|
|
1687
|
+
.cX-Button--primary:hover {
|
|
1688
|
+
background: var(--cx-ui-accent-hover);
|
|
1689
|
+
border-color: var(--cx-ui-accent-hover);
|
|
1690
|
+
}
|
|
1691
|
+
|
|
1692
|
+
.cX-Button--ghost {
|
|
1693
|
+
background: transparent;
|
|
1694
|
+
border-color: transparent;
|
|
1695
|
+
}
|
|
1696
|
+
|
|
1697
|
+
.cX-Button--danger {
|
|
1698
|
+
color: var(--cx-ui-danger);
|
|
1699
|
+
border-color: var(--cx-ui-danger);
|
|
1700
|
+
}
|
|
1701
|
+
|
|
1702
|
+
.cX-Button--danger:hover {
|
|
1703
|
+
background: var(--cx-ui-danger-tint);
|
|
1704
|
+
}
|
|
1705
|
+
|
|
1706
|
+
.cX-Button--icon {
|
|
1707
|
+
padding: var(--cx-space-2);
|
|
1708
|
+
background: transparent;
|
|
1709
|
+
border-color: transparent;
|
|
1710
|
+
}
|
|
1711
|
+
|
|
1712
|
+
.cX-Button--sm {
|
|
1713
|
+
padding: var(--cx-space-1) var(--cx-space-4);
|
|
1714
|
+
font-size: var(--cx-font-size-sm);
|
|
1715
|
+
}
|
|
1716
|
+
|
|
1717
|
+
/* ---- Fields: input, select, textarea, label, hint, error ---------------------------------- */
|
|
1718
|
+
|
|
1719
|
+
.cX-Field {
|
|
1720
|
+
display: flex;
|
|
1721
|
+
font-family: var(--cx-font-sans);
|
|
1722
|
+
flex-direction: column;
|
|
1723
|
+
gap: var(--cx-space-1);
|
|
1724
|
+
}
|
|
1725
|
+
|
|
1726
|
+
.cX-Field-Label {
|
|
1727
|
+
color: var(--cx-ui-text-muted);
|
|
1728
|
+
font-size: var(--cx-font-size-sm);
|
|
1729
|
+
font-weight: var(--cx-font-weight-medium);
|
|
1730
|
+
}
|
|
1731
|
+
|
|
1732
|
+
.cX-Field-Hint {
|
|
1733
|
+
color: var(--cx-ui-text-muted);
|
|
1734
|
+
font-size: var(--cx-font-size-xs);
|
|
1735
|
+
}
|
|
1736
|
+
|
|
1737
|
+
.cX-Field-Error {
|
|
1738
|
+
color: var(--cx-ui-danger);
|
|
1739
|
+
font-size: var(--cx-font-size-xs);
|
|
1740
|
+
}
|
|
1741
|
+
|
|
1742
|
+
.cX-Input,
|
|
1743
|
+
.cX-Select,
|
|
1744
|
+
.cX-Textarea {
|
|
1745
|
+
width: 100%;
|
|
1746
|
+
padding: var(--cx-space-2) var(--cx-space-4);
|
|
1747
|
+
border: 1px solid var(--cx-ui-border);
|
|
1748
|
+
border-radius: var(--cx-radius-md);
|
|
1749
|
+
background: var(--cx-ui-surface);
|
|
1750
|
+
color: var(--cx-ui-text);
|
|
1751
|
+
font-family: var(--cx-font-sans);
|
|
1752
|
+
font-size: var(--cx-font-size-md);
|
|
1753
|
+
line-height: var(--cx-line-height-base);
|
|
1754
|
+
}
|
|
1755
|
+
|
|
1756
|
+
.cX-Textarea {
|
|
1757
|
+
font-family: var(--cx-font-mono);
|
|
1758
|
+
resize: vertical;
|
|
1759
|
+
}
|
|
1760
|
+
|
|
1761
|
+
.cX-Input::placeholder,
|
|
1762
|
+
.cX-Textarea::placeholder {
|
|
1763
|
+
color: var(--cx-ui-text-subtle);
|
|
1764
|
+
}
|
|
1765
|
+
|
|
1766
|
+
.cX-Input:focus,
|
|
1767
|
+
.cX-Select:focus,
|
|
1768
|
+
.cX-Textarea:focus {
|
|
1769
|
+
border-color: var(--cx-ui-focus);
|
|
1770
|
+
outline: 2px solid var(--cx-ui-accent-tint);
|
|
1771
|
+
outline-offset: 0;
|
|
1772
|
+
}
|
|
1773
|
+
|
|
1774
|
+
.cX-Input:disabled,
|
|
1775
|
+
.cX-Select:disabled,
|
|
1776
|
+
.cX-Textarea:disabled {
|
|
1777
|
+
background: var(--cx-ui-surface-sunken);
|
|
1778
|
+
color: var(--cx-ui-text-subtle);
|
|
1779
|
+
cursor: not-allowed;
|
|
1780
|
+
}
|
|
1781
|
+
|
|
1782
|
+
.cX-Input--invalid {
|
|
1783
|
+
border-color: var(--cx-ui-danger);
|
|
1784
|
+
}
|
|
1785
|
+
|
|
1786
|
+
/* The native clear (x) of every engine search box -- was repeated in 06, 12 and 13 */
|
|
1787
|
+
input[type="search"].cX-Customizer-SearchInput::-webkit-search-cancel-button,
|
|
1788
|
+
input[type="search"].cX-DataTable-Search::-webkit-search-cancel-button,
|
|
1789
|
+
input[type="search"].cX-DataFilter-Search::-webkit-search-cancel-button {
|
|
1790
|
+
-webkit-appearance: auto;
|
|
1791
|
+
height: 16px;
|
|
1792
|
+
width: 16px;
|
|
1793
|
+
cursor: pointer;
|
|
1794
|
+
}
|
|
1795
|
+
|
|
1796
|
+
/* Status / validation line under a form (setUIStatus in dom.js) */
|
|
1797
|
+
.cX-Status {
|
|
1798
|
+
min-height: 1.4em;
|
|
1799
|
+
color: var(--cx-ui-text-muted);
|
|
1800
|
+
font-size: var(--cx-font-size-sm);
|
|
1801
|
+
line-height: var(--cx-line-height-base);
|
|
1802
|
+
}
|
|
1803
|
+
|
|
1804
|
+
.cX-Status--error {
|
|
1805
|
+
color: var(--cx-ui-danger);
|
|
1806
|
+
}
|
|
1807
|
+
|
|
1808
|
+
.cX-Status--ok {
|
|
1809
|
+
color: var(--cx-ui-success);
|
|
1810
|
+
}
|
|
1811
|
+
|
|
1812
|
+
/* A checkbox or radio with its label */
|
|
1813
|
+
.cX-Check {
|
|
1814
|
+
display: inline-flex;
|
|
1815
|
+
align-items: center;
|
|
1816
|
+
gap: var(--cx-space-3);
|
|
1817
|
+
color: var(--cx-ui-text);
|
|
1818
|
+
font-size: var(--cx-font-size-md);
|
|
1819
|
+
cursor: pointer;
|
|
1820
|
+
}
|
|
1821
|
+
|
|
1822
|
+
.cX-Check input {
|
|
1823
|
+
margin: 0;
|
|
1824
|
+
cursor: pointer;
|
|
1825
|
+
}
|
|
1826
|
+
|
|
1827
|
+
/*
|
|
1828
|
+
* Checkbox and radio: one control for every native checkbox / radio inside CanvasXpress DOM
|
|
1829
|
+
* ([data-cx-ui-scope]) and inside a host container that opts in (.cX-UI-Controls, e.g. the
|
|
1830
|
+
* dashboards). Drawn with appearance: none so it looks the same in every browser and follows the
|
|
1831
|
+
* theme: a grey-bordered box (or ring); checked, the accent fill with a check in the on-accent
|
|
1832
|
+
* colour (or an accent ring and dot). --cx-check-color overrides the accent per item (e.g. the
|
|
1833
|
+
* colorful preset's DataFilter cards). Zero specificity, so a component's own size still applies.
|
|
1834
|
+
*/
|
|
1835
|
+
:where([data-cx-ui-scope], .cX-UI-Controls) :where(input[type="checkbox"], input[type="radio"]) {
|
|
1836
|
+
-webkit-appearance: none;
|
|
1837
|
+
appearance: none;
|
|
1838
|
+
display: inline-grid;
|
|
1839
|
+
place-content: center;
|
|
1840
|
+
box-sizing: border-box;
|
|
1841
|
+
width: 16px;
|
|
1842
|
+
height: 16px;
|
|
1843
|
+
margin: 0;
|
|
1844
|
+
border: 1.5px solid var(--cx-ui-text-subtle);
|
|
1845
|
+
border-radius: var(--cx-radius-sm);
|
|
1846
|
+
background-color: var(--cx-ui-surface);
|
|
1847
|
+
vertical-align: middle;
|
|
1848
|
+
flex-shrink: 0;
|
|
1849
|
+
cursor: pointer;
|
|
1850
|
+
transition: background-color var(--cx-duration-fast), border-color var(--cx-duration-fast);
|
|
1851
|
+
}
|
|
1852
|
+
|
|
1853
|
+
:where([data-cx-ui-scope], .cX-UI-Controls) :where(input[type="radio"]) {
|
|
1854
|
+
border-radius: var(--cx-radius-round);
|
|
1855
|
+
}
|
|
1856
|
+
|
|
1857
|
+
:where([data-cx-ui-scope], .cX-UI-Controls) :where(input[type="checkbox"], input[type="radio"])::before {
|
|
1858
|
+
content: "";
|
|
1859
|
+
/* fixed sizes: a percentage resolves to 0 inside the centred, content-sized grid */
|
|
1860
|
+
width: 9px;
|
|
1861
|
+
height: 9px;
|
|
1862
|
+
transform: scale(0);
|
|
1863
|
+
transition: transform var(--cx-duration-fast);
|
|
1864
|
+
}
|
|
1865
|
+
|
|
1866
|
+
/* the check mark: a clipped square in the on-accent colour */
|
|
1867
|
+
:where([data-cx-ui-scope], .cX-UI-Controls) :where(input[type="checkbox"])::before {
|
|
1868
|
+
background-color: var(--cx-ui-on-accent);
|
|
1869
|
+
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
|
|
1870
|
+
}
|
|
1871
|
+
|
|
1872
|
+
/* the radio dot */
|
|
1873
|
+
:where([data-cx-ui-scope], .cX-UI-Controls) :where(input[type="radio"])::before {
|
|
1874
|
+
width: 8px;
|
|
1875
|
+
height: 8px;
|
|
1876
|
+
border-radius: var(--cx-radius-round);
|
|
1877
|
+
background-color: var(--cx-check-color, var(--cx-ui-accent));
|
|
1878
|
+
}
|
|
1879
|
+
|
|
1880
|
+
:where([data-cx-ui-scope], .cX-UI-Controls) :where(input[type="checkbox"], input[type="radio"]):hover {
|
|
1881
|
+
border-color: var(--cx-check-color, var(--cx-ui-accent));
|
|
1882
|
+
}
|
|
1883
|
+
|
|
1884
|
+
:where([data-cx-ui-scope], .cX-UI-Controls) :where(input[type="checkbox"]):checked,
|
|
1885
|
+
:where([data-cx-ui-scope], .cX-UI-Controls) :where(input[type="checkbox"]):indeterminate {
|
|
1886
|
+
border-color: var(--cx-check-color, var(--cx-ui-accent));
|
|
1887
|
+
background-color: var(--cx-check-color, var(--cx-ui-accent));
|
|
1888
|
+
}
|
|
1889
|
+
|
|
1890
|
+
:where([data-cx-ui-scope], .cX-UI-Controls) :where(input[type="radio"]):checked {
|
|
1891
|
+
border-color: var(--cx-check-color, var(--cx-ui-accent));
|
|
1892
|
+
}
|
|
1893
|
+
|
|
1894
|
+
:where([data-cx-ui-scope], .cX-UI-Controls) :where(input[type="checkbox"], input[type="radio"]):checked::before {
|
|
1895
|
+
transform: scale(1);
|
|
1896
|
+
}
|
|
1897
|
+
|
|
1898
|
+
/* indeterminate: a bar instead of the check */
|
|
1899
|
+
:where([data-cx-ui-scope], .cX-UI-Controls) :where(input[type="checkbox"]):indeterminate::before {
|
|
1900
|
+
height: 2px;
|
|
1901
|
+
clip-path: none;
|
|
1902
|
+
transform: scale(1);
|
|
1903
|
+
}
|
|
1904
|
+
|
|
1905
|
+
:where([data-cx-ui-scope], .cX-UI-Controls) :where(input[type="checkbox"], input[type="radio"]):focus-visible {
|
|
1906
|
+
outline: 2px solid var(--cx-ui-focus);
|
|
1907
|
+
outline-offset: 2px;
|
|
1908
|
+
}
|
|
1909
|
+
|
|
1910
|
+
:where([data-cx-ui-scope], .cX-UI-Controls) :where(input[type="checkbox"], input[type="radio"]):disabled {
|
|
1911
|
+
opacity: 0.45;
|
|
1912
|
+
cursor: not-allowed;
|
|
1913
|
+
}
|
|
1914
|
+
|
|
1915
|
+
/* A scrolling list inside a form (e.g. checkbox choices, per-row settings) */
|
|
1916
|
+
.cX-List {
|
|
1917
|
+
display: flex;
|
|
1918
|
+
flex-direction: column;
|
|
1919
|
+
gap: var(--cx-space-2);
|
|
1920
|
+
max-height: 160px;
|
|
1921
|
+
padding: var(--cx-space-3) var(--cx-space-4);
|
|
1922
|
+
border: 1px solid var(--cx-ui-border);
|
|
1923
|
+
border-radius: var(--cx-radius-md);
|
|
1924
|
+
overflow-y: auto;
|
|
1925
|
+
}
|
|
1926
|
+
|
|
1927
|
+
/* ---- Modal ----------------------------------------------------------------------------- */
|
|
1928
|
+
|
|
1929
|
+
.cX-Modal-Overlay {
|
|
1930
|
+
position: fixed;
|
|
1931
|
+
inset: 0;
|
|
1932
|
+
display: flex;
|
|
1933
|
+
align-items: center;
|
|
1934
|
+
justify-content: center;
|
|
1935
|
+
background: var(--cx-ui-backdrop);
|
|
1936
|
+
z-index: var(--cx-z-modal);
|
|
1937
|
+
}
|
|
1938
|
+
|
|
1939
|
+
.cX-Modal {
|
|
1940
|
+
display: flex;
|
|
1941
|
+
flex-direction: column;
|
|
1942
|
+
min-width: 320px;
|
|
1943
|
+
max-width: min(640px, 92vw);
|
|
1944
|
+
max-height: 86vh;
|
|
1945
|
+
border: 1px solid var(--cx-ui-border-subtle);
|
|
1946
|
+
border-radius: var(--cx-radius-lg);
|
|
1947
|
+
background: var(--cx-ui-surface-raised);
|
|
1948
|
+
box-shadow: var(--cx-shadow-3);
|
|
1949
|
+
color: var(--cx-ui-text);
|
|
1950
|
+
font-family: var(--cx-font-sans);
|
|
1951
|
+
font-size: var(--cx-font-size-md);
|
|
1952
|
+
}
|
|
1953
|
+
|
|
1954
|
+
.cX-Modal-Head {
|
|
1955
|
+
display: flex;
|
|
1956
|
+
align-items: center;
|
|
1957
|
+
justify-content: space-between;
|
|
1958
|
+
gap: var(--cx-space-4);
|
|
1959
|
+
padding: var(--cx-space-6) var(--cx-space-7);
|
|
1960
|
+
border-bottom: 1px solid var(--cx-ui-divider);
|
|
1961
|
+
}
|
|
1962
|
+
|
|
1963
|
+
.cX-Modal-Title {
|
|
1964
|
+
margin: 0;
|
|
1965
|
+
font-size: var(--cx-font-size-xl);
|
|
1966
|
+
font-weight: var(--cx-font-weight-bold);
|
|
1967
|
+
}
|
|
1968
|
+
|
|
1969
|
+
.cX-Modal-Body {
|
|
1970
|
+
display: flex;
|
|
1971
|
+
flex: 1 1 auto;
|
|
1972
|
+
flex-direction: column;
|
|
1973
|
+
gap: var(--cx-space-6);
|
|
1974
|
+
padding: var(--cx-space-7);
|
|
1975
|
+
overflow: auto;
|
|
1976
|
+
}
|
|
1977
|
+
|
|
1978
|
+
.cX-Modal-Foot {
|
|
1979
|
+
display: flex;
|
|
1980
|
+
justify-content: flex-end;
|
|
1981
|
+
gap: var(--cx-space-4);
|
|
1982
|
+
padding: var(--cx-space-6) var(--cx-space-7);
|
|
1983
|
+
border-top: 1px solid var(--cx-ui-divider);
|
|
1984
|
+
}
|
|
1985
|
+
|
|
1986
|
+
/* ---- Popover menu (a floating list of actions) ------------------------------------------ */
|
|
1987
|
+
|
|
1988
|
+
.cX-Popover {
|
|
1989
|
+
position: fixed;
|
|
1990
|
+
min-width: 170px;
|
|
1991
|
+
padding: var(--cx-space-2) 0;
|
|
1992
|
+
border: 1px solid var(--cx-ui-border-subtle);
|
|
1993
|
+
border-radius: var(--cx-radius-md);
|
|
1994
|
+
background: var(--cx-ui-surface-raised);
|
|
1995
|
+
box-shadow: var(--cx-shadow-2);
|
|
1996
|
+
color: var(--cx-ui-text);
|
|
1997
|
+
font-family: var(--cx-font-sans);
|
|
1998
|
+
font-size: var(--cx-font-size-md);
|
|
1999
|
+
z-index: var(--cx-z-modal-popover);
|
|
2000
|
+
}
|
|
2001
|
+
|
|
2002
|
+
.cX-Popover-Item {
|
|
2003
|
+
padding: var(--cx-space-3) var(--cx-space-7);
|
|
2004
|
+
cursor: pointer;
|
|
2005
|
+
}
|
|
2006
|
+
|
|
2007
|
+
.cX-Popover-Item:hover,
|
|
2008
|
+
.cX-Popover-Item:focus-visible {
|
|
2009
|
+
background: var(--cx-ui-accent-tint);
|
|
2010
|
+
outline: none;
|
|
2011
|
+
}
|
|
2012
|
+
|
|
2013
|
+
/* ---- Tabs ------------------------------------------------------------------------------ */
|
|
2014
|
+
|
|
2015
|
+
.cX-Tabs {
|
|
2016
|
+
display: flex;
|
|
2017
|
+
font-family: var(--cx-font-sans);
|
|
2018
|
+
gap: var(--cx-space-1);
|
|
2019
|
+
border-bottom: 1px solid var(--cx-ui-divider);
|
|
2020
|
+
}
|
|
2021
|
+
|
|
2022
|
+
.cX-Tab {
|
|
2023
|
+
padding: var(--cx-space-3) var(--cx-space-6);
|
|
2024
|
+
border: none;
|
|
2025
|
+
border-bottom: 2px solid transparent;
|
|
2026
|
+
background: none;
|
|
2027
|
+
color: var(--cx-ui-text-muted);
|
|
2028
|
+
font-family: var(--cx-font-sans);
|
|
2029
|
+
font-size: var(--cx-font-size-md);
|
|
2030
|
+
cursor: pointer;
|
|
2031
|
+
}
|
|
2032
|
+
|
|
2033
|
+
.cX-Tab:hover {
|
|
2034
|
+
color: var(--cx-ui-text);
|
|
2035
|
+
}
|
|
2036
|
+
|
|
2037
|
+
.cX-Tab--active {
|
|
2038
|
+
border-bottom-color: var(--cx-ui-accent);
|
|
2039
|
+
color: var(--cx-ui-accent-strong);
|
|
2040
|
+
}
|
|
2041
|
+
|
|
2042
|
+
.cX-Tab:focus-visible {
|
|
2043
|
+
outline: 2px solid var(--cx-ui-focus);
|
|
2044
|
+
outline-offset: -2px;
|
|
2045
|
+
}
|
|
2046
|
+
|
|
2047
|
+
/* ---- Chip & Badge ---------------------------------------------------------------------- */
|
|
2048
|
+
|
|
2049
|
+
.cX-Chip {
|
|
2050
|
+
display: inline-flex;
|
|
2051
|
+
font-family: var(--cx-font-sans);
|
|
2052
|
+
align-items: center;
|
|
2053
|
+
gap: var(--cx-space-1);
|
|
2054
|
+
padding: var(--cx-space-1) var(--cx-space-4);
|
|
2055
|
+
border: 1px solid transparent;
|
|
2056
|
+
border-radius: var(--cx-radius-pill);
|
|
2057
|
+
background: var(--cx-ui-accent-tint-subtle);
|
|
2058
|
+
color: var(--cx-ui-text);
|
|
2059
|
+
font-size: var(--cx-font-size-sm);
|
|
2060
|
+
}
|
|
2061
|
+
|
|
2062
|
+
.cX-Chip--interactive {
|
|
2063
|
+
cursor: pointer;
|
|
2064
|
+
}
|
|
2065
|
+
|
|
2066
|
+
.cX-Chip--interactive:hover {
|
|
2067
|
+
background: var(--cx-ui-accent-tint);
|
|
2068
|
+
}
|
|
2069
|
+
|
|
2070
|
+
.cX-Badge {
|
|
2071
|
+
display: inline-flex;
|
|
2072
|
+
font-family: var(--cx-font-sans);
|
|
2073
|
+
align-items: center;
|
|
2074
|
+
padding: 0 var(--cx-space-3);
|
|
2075
|
+
border-radius: var(--cx-radius-pill);
|
|
2076
|
+
background: var(--cx-ui-surface-sunken);
|
|
2077
|
+
color: var(--cx-ui-text-muted);
|
|
2078
|
+
font-size: var(--cx-font-size-xs);
|
|
2079
|
+
font-weight: var(--cx-font-weight-bold);
|
|
2080
|
+
line-height: var(--cx-line-height-loose);
|
|
2081
|
+
}
|
|
2082
|
+
|
|
2083
|
+
.cX-Badge--accent {
|
|
2084
|
+
background: var(--cx-ui-accent-tint);
|
|
2085
|
+
color: var(--cx-ui-accent-strong);
|
|
2086
|
+
}
|
|
2087
|
+
|
|
2088
|
+
.cX-Badge--info {
|
|
2089
|
+
background: var(--cx-ui-info-tint);
|
|
2090
|
+
color: var(--cx-ui-info-strong);
|
|
2091
|
+
}
|
|
2092
|
+
|
|
2093
|
+
.cX-Badge--success {
|
|
2094
|
+
background: var(--cx-ui-success-tint);
|
|
2095
|
+
color: var(--cx-ui-success);
|
|
2096
|
+
}
|
|
2097
|
+
|
|
2098
|
+
.cX-Badge--warning {
|
|
2099
|
+
background: var(--cx-ui-warning-tint);
|
|
2100
|
+
color: var(--cx-ui-warning-strong);
|
|
2101
|
+
}
|
|
2102
|
+
|
|
2103
|
+
.cX-Badge--danger {
|
|
2104
|
+
background: var(--cx-ui-danger-tint);
|
|
2105
|
+
color: var(--cx-ui-danger);
|
|
2106
|
+
}
|
|
2107
|
+
|
|
2108
|
+
/* ---- Notice ---------------------------------------------------------------------------- */
|
|
2109
|
+
|
|
2110
|
+
.cX-Notice {
|
|
2111
|
+
font-family: var(--cx-font-sans);
|
|
2112
|
+
padding: var(--cx-space-4) var(--cx-space-6);
|
|
2113
|
+
border: 1px solid var(--cx-ui-divider);
|
|
2114
|
+
border-radius: var(--cx-radius-md);
|
|
2115
|
+
background: var(--cx-ui-surface-sunken);
|
|
2116
|
+
color: var(--cx-ui-text);
|
|
2117
|
+
font-size: var(--cx-font-size-md);
|
|
2118
|
+
}
|
|
2119
|
+
|
|
2120
|
+
.cX-Notice--info {
|
|
2121
|
+
border-color: var(--cx-ui-info);
|
|
2122
|
+
background: var(--cx-ui-info-tint);
|
|
2123
|
+
}
|
|
2124
|
+
|
|
2125
|
+
.cX-Notice--success {
|
|
2126
|
+
border-color: var(--cx-ui-success);
|
|
2127
|
+
background: var(--cx-ui-success-tint);
|
|
2128
|
+
}
|
|
2129
|
+
|
|
2130
|
+
.cX-Notice--warning {
|
|
2131
|
+
border-color: var(--cx-ui-warning);
|
|
2132
|
+
background: var(--cx-ui-warning-tint);
|
|
2133
|
+
color: var(--cx-ui-warning-strong);
|
|
2134
|
+
}
|
|
2135
|
+
|
|
2136
|
+
.cX-Notice--danger {
|
|
2137
|
+
border-color: var(--cx-ui-danger);
|
|
2138
|
+
background: var(--cx-ui-danger-tint);
|
|
2139
|
+
color: var(--cx-ui-danger);
|
|
2140
|
+
}
|
|
2141
|
+
|
|
2142
|
+
/* ---- Card ------------------------------------------------------------------------------ */
|
|
2143
|
+
|
|
2144
|
+
.cX-Card {
|
|
2145
|
+
font-family: var(--cx-font-sans);
|
|
2146
|
+
padding: var(--cx-space-7);
|
|
2147
|
+
border: 1px solid var(--cx-ui-divider);
|
|
2148
|
+
border-radius: var(--cx-radius-lg);
|
|
2149
|
+
background: var(--cx-ui-surface);
|
|
2150
|
+
box-shadow: var(--cx-shadow-1);
|
|
2151
|
+
color: var(--cx-ui-text);
|
|
2152
|
+
}
|
|
1185
2153
|
/* @category: widget */
|
|
1186
2154
|
/* BEGIN OF CUSTOMIZER CSS */
|
|
1187
2155
|
/* https://cssgrid-generator.netlify.app/ */
|
|
@@ -1197,13 +2165,13 @@ textarea.cX-Chat-Code-Output {
|
|
|
1197
2165
|
grid-column-gap: 0px;
|
|
1198
2166
|
grid-row-gap: 0px;
|
|
1199
2167
|
position: fixed;
|
|
1200
|
-
z-index:
|
|
2168
|
+
z-index: var(--cx-z-panel-active);
|
|
1201
2169
|
line-height: 100%;
|
|
1202
|
-
background-color: var(--cx-customizer-background-color, var(--cx-
|
|
2170
|
+
background-color: var(--cx-customizer-background-color, var(--cx-ui-surface));
|
|
1203
2171
|
font-family: var(--cx-font-family);
|
|
1204
2172
|
font-size: var(--cx-customizer-font-size, var(--cx-font-size)) !important;
|
|
1205
2173
|
font-weight: normal;
|
|
1206
|
-
color: var(--cx-customizer-text-color, var(--cx-
|
|
2174
|
+
color: var(--cx-customizer-text-color, var(--cx-ui-text));
|
|
1207
2175
|
margin-left: 0px;
|
|
1208
2176
|
margin-top: 0px;
|
|
1209
2177
|
/* --cx-view-h: set when the page is not the viewport (a VS Code notebook webview) */
|
|
@@ -1213,29 +2181,29 @@ textarea.cX-Chat-Code-Output {
|
|
|
1213
2181
|
|
|
1214
2182
|
.cX-Customizer-LeftPanelItems {
|
|
1215
2183
|
grid-area: 1 / 1 / 2 / 2;
|
|
1216
|
-
background: var(--cx-customizer-background-color, var(--cx-
|
|
1217
|
-
/* border-left: 1px solid var(--cx-customizer-border-color, var(--cx-
|
|
2184
|
+
background: var(--cx-customizer-background-color, var(--cx-ui-surface));
|
|
2185
|
+
/* border-left: 1px solid var(--cx-customizer-border-color, var(--cx-ui-border-accent)) !important; */
|
|
1218
2186
|
}
|
|
1219
2187
|
|
|
1220
2188
|
.cX-Customizer-LeftPanelItems > div:first-child {
|
|
1221
|
-
background: var(--cx-color-widgets);
|
|
1222
|
-
color: var(--cx-customizer-close-text-color,
|
|
2189
|
+
background: var(--cx-color-widgets, var(--cx-ui-accent));
|
|
2190
|
+
color: var(--cx-customizer-close-text-color, var(--cx-ui-on-accent));
|
|
1223
2191
|
}
|
|
1224
2192
|
|
|
1225
2193
|
.cX-Customizer-RightPanel {
|
|
1226
|
-
background: var(--cx-customizer-background-color, var(--cx-
|
|
1227
|
-
border: 1px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-
|
|
2194
|
+
background: var(--cx-customizer-background-color, var(--cx-ui-surface));
|
|
2195
|
+
border: 1px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-ui-border-accent)) !important;
|
|
1228
2196
|
border-top: none !important;
|
|
1229
2197
|
border-bottom: none !important;
|
|
1230
2198
|
border-radius: 0 6px 6px 0;
|
|
1231
2199
|
position: absolute;
|
|
1232
|
-
z-index:
|
|
2200
|
+
z-index: var(--cx-z-panel);
|
|
1233
2201
|
line-height: 100%;
|
|
1234
2202
|
top: 0px;
|
|
1235
2203
|
font-family: var(--cx-font-family);
|
|
1236
2204
|
font-size: var(--cx-customizer-font-size, var(--cx-font-size)) !important;
|
|
1237
2205
|
font-weight: normal;
|
|
1238
|
-
color: var(--cx-customizer-text-color, var(--cx-
|
|
2206
|
+
color: var(--cx-customizer-text-color, var(--cx-ui-text));
|
|
1239
2207
|
/* --cx-view-h: set when the page is not the viewport (a VS Code notebook webview) */
|
|
1240
2208
|
max-height: var(--cx-view-h, 100vh);
|
|
1241
2209
|
min-height: var(--cx-view-h, 100vh);
|
|
@@ -1261,33 +2229,33 @@ textarea.cX-Chat-Code-Output {
|
|
|
1261
2229
|
|
|
1262
2230
|
.cX-Customizer-LeftItem,
|
|
1263
2231
|
.cX-Customizer-LeftItemActive {
|
|
1264
|
-
border: 1px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-
|
|
1265
|
-
border-bottom: 1px solid var(--cx-customizer-border-color, var(--cx-
|
|
1266
|
-
background: var(--cx-customizer-background-color, var(--cx-
|
|
2232
|
+
border: 1px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-ui-border-accent)) !important;
|
|
2233
|
+
border-bottom: 1px solid var(--cx-customizer-border-color, var(--cx-ui-border-accent)) !important;
|
|
2234
|
+
background: var(--cx-customizer-background-color, var(--cx-ui-surface));
|
|
1267
2235
|
}
|
|
1268
2236
|
|
|
1269
2237
|
.cX-Customizer-LeftItem:hover,
|
|
1270
2238
|
.cX-Customizer-LeftItemActive {
|
|
1271
|
-
background: var(--cx-customizer-hover-color, var(--cx-
|
|
2239
|
+
background: var(--cx-customizer-hover-color, var(--cx-ui-accent-tint));
|
|
1272
2240
|
}
|
|
1273
2241
|
|
|
1274
2242
|
.cX-Customizer-LeftItem:hover svg,
|
|
1275
2243
|
.cX-Customizer-LeftItemActive svg {
|
|
1276
|
-
background: var(--cx-customizer-background-color, var(--cx-
|
|
2244
|
+
background: var(--cx-customizer-background-color, var(--cx-ui-surface));
|
|
1277
2245
|
}
|
|
1278
2246
|
|
|
1279
2247
|
/* First div in the left Panel */
|
|
1280
2248
|
.cX-Customizer-LeftItem:first-child:hover svg,
|
|
1281
2249
|
.cX-Customizer-LeftItemActive:first-child svg {
|
|
1282
2250
|
background: transparent !important;
|
|
1283
|
-
border: 1px solid var(--cx-customizer-close-text-color,
|
|
2251
|
+
border: 1px solid var(--cx-customizer-close-text-color, var(--cx-ui-on-accent)) !important;
|
|
1284
2252
|
border-radius: var(--cx-border-radius);
|
|
1285
2253
|
}
|
|
1286
2254
|
|
|
1287
2255
|
.cX-Customizer-LeftItemActive {
|
|
1288
|
-
background: var(--cx-customizer-hover-color, var(--cx-
|
|
1289
|
-
color: var(--cx-customizer-text-color, var(--cx-
|
|
1290
|
-
border-bottom: 4px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-
|
|
2256
|
+
background: var(--cx-customizer-hover-color, var(--cx-ui-accent-tint));
|
|
2257
|
+
color: var(--cx-customizer-text-color, var(--cx-ui-text));
|
|
2258
|
+
border-bottom: 4px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-ui-border-accent)) !important;
|
|
1291
2259
|
}
|
|
1292
2260
|
|
|
1293
2261
|
.cX-Customizer-LeftItem:hover > *,
|
|
@@ -1297,8 +2265,8 @@ textarea.cX-Chat-Code-Output {
|
|
|
1297
2265
|
}
|
|
1298
2266
|
|
|
1299
2267
|
.cX-Customizer-LeftItemNB:hover svg {
|
|
1300
|
-
border-color: var(--cx-customizer-border-color, var(--cx-
|
|
1301
|
-
background: var(--cx-customizer-hover-color, var(--cx-
|
|
2268
|
+
border-color: var(--cx-customizer-border-color, var(--cx-ui-border-accent)) !important;
|
|
2269
|
+
background: var(--cx-customizer-hover-color, var(--cx-ui-accent-tint)) !important;
|
|
1302
2270
|
}
|
|
1303
2271
|
|
|
1304
2272
|
.cX-Customizer-LeftItemTop {
|
|
@@ -1326,7 +2294,7 @@ textarea.cX-Chat-Code-Output {
|
|
|
1326
2294
|
}
|
|
1327
2295
|
|
|
1328
2296
|
.cX-Customizer-LeftIcon {
|
|
1329
|
-
border: 1px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-
|
|
2297
|
+
border: 1px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-ui-border-accent)) !important;
|
|
1330
2298
|
}
|
|
1331
2299
|
|
|
1332
2300
|
/*
|
|
@@ -1348,7 +2316,7 @@ textarea.cX-Chat-Code-Output {
|
|
|
1348
2316
|
margin: 6px 10px;
|
|
1349
2317
|
padding: 4px 6px;
|
|
1350
2318
|
gap: 6px;
|
|
1351
|
-
border: 1px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-
|
|
2319
|
+
border: 1px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-ui-border-accent)) !important;
|
|
1352
2320
|
border-radius: var(--cx-border-radius);
|
|
1353
2321
|
}
|
|
1354
2322
|
|
|
@@ -1376,12 +2344,12 @@ textarea.cX-Chat-Code-Output {
|
|
|
1376
2344
|
|
|
1377
2345
|
.cX-Customizer-Compact .cX-Customizer-LeftItem:hover,
|
|
1378
2346
|
.cX-Customizer-Compact .cX-Customizer-LeftItemNB:hover {
|
|
1379
|
-
background: var(--cx-customizer-hover-color, var(--cx-
|
|
2347
|
+
background: var(--cx-customizer-hover-color, var(--cx-ui-accent-tint));
|
|
1380
2348
|
}
|
|
1381
2349
|
|
|
1382
2350
|
.cX-Customizer-Compact .cX-Customizer-LeftItemActive {
|
|
1383
|
-
background: var(--cx-customizer-hover-color, var(--cx-
|
|
1384
|
-
border-left: 3px var(--cx-border-style) var(--cx-color-widgets, var(--cx-
|
|
2351
|
+
background: var(--cx-customizer-hover-color, var(--cx-ui-accent-tint));
|
|
2352
|
+
border-left: 3px var(--cx-border-style) var(--cx-color-widgets, var(--cx-ui-accent)) !important;
|
|
1385
2353
|
}
|
|
1386
2354
|
|
|
1387
2355
|
.cX-Customizer-Compact .cX-Customizer-LeftItem:hover svg,
|
|
@@ -1442,19 +2410,19 @@ textarea.cX-Chat-Code-Output {
|
|
|
1442
2410
|
grid-column-gap: 0px;
|
|
1443
2411
|
grid-row-gap: 0px;
|
|
1444
2412
|
border-radius: var(--cx-border-radius);
|
|
1445
|
-
border: 1px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-
|
|
2413
|
+
border: 1px var(--cx-border-style) var(--cx-customizer-border-color, var(--cx-ui-border-accent)) !important;
|
|
1446
2414
|
width: 100%;
|
|
1447
|
-
background: var(--cx-customizer-background-color, var(--cx-
|
|
2415
|
+
background: var(--cx-customizer-background-color, var(--cx-ui-surface));
|
|
1448
2416
|
margin: 4px;
|
|
1449
2417
|
}
|
|
1450
2418
|
|
|
1451
2419
|
.cX-Customizer-RightItem:hover {
|
|
1452
|
-
background: var(--cx-customizer-hover-color, var(--cx-
|
|
2420
|
+
background: var(--cx-customizer-hover-color, var(--cx-ui-accent-tint));
|
|
1453
2421
|
}
|
|
1454
2422
|
|
|
1455
2423
|
/* Add top border to non-header items that follow another item (for separation) */
|
|
1456
2424
|
.cX-Customizer-RightItem + .cX-Customizer-RightItem {
|
|
1457
|
-
border-top: 1px solid var(--cx-customizer-border-color, var(--cx-
|
|
2425
|
+
border-top: 1px solid var(--cx-customizer-border-color, var(--cx-ui-border-accent)) !important;
|
|
1458
2426
|
}
|
|
1459
2427
|
|
|
1460
2428
|
.cX-Customizer-RightItem * {
|
|
@@ -1477,7 +2445,7 @@ textarea.cX-Chat-Code-Output {
|
|
|
1477
2445
|
margin: auto;
|
|
1478
2446
|
padding: 0 6px 3px;
|
|
1479
2447
|
font-size: var(--cx-small-font-size);
|
|
1480
|
-
color: var(--cx-customizer-text-color, var(--cx-
|
|
2448
|
+
color: var(--cx-customizer-text-color, var(--cx-ui-text));
|
|
1481
2449
|
}
|
|
1482
2450
|
|
|
1483
2451
|
/*
|
|
@@ -1490,9 +2458,9 @@ textarea.cX-Chat-Code-Output {
|
|
|
1490
2458
|
grid-template-rows: 2fr 1fr;
|
|
1491
2459
|
grid-column-gap: 2px;
|
|
1492
2460
|
grid-row-gap: 0px;
|
|
1493
|
-
border-top: 1px solid var(--cx-customizer-border-color, var(--cx-
|
|
2461
|
+
border-top: 1px solid var(--cx-customizer-border-color, var(--cx-ui-border-accent));
|
|
1494
2462
|
min-height: 28px;
|
|
1495
|
-
background: var(--cx-customizer-background-color, var(--cx-
|
|
2463
|
+
background: var(--cx-customizer-background-color, var(--cx-ui-surface));
|
|
1496
2464
|
width: 100%;
|
|
1497
2465
|
box-sizing: border-box;
|
|
1498
2466
|
}
|
|
@@ -1544,14 +2512,14 @@ textarea.cX-Chat-Code-Output {
|
|
|
1544
2512
|
grid-template-rows: auto;
|
|
1545
2513
|
grid-column-gap: 0px;
|
|
1546
2514
|
grid-row-gap: 0px;
|
|
1547
|
-
background: var(--cx-background-hover-color);
|
|
1548
|
-
color: var(--cx-font-color);
|
|
2515
|
+
background: var(--cx-background-hover-color, var(--cx-ui-accent-tint));
|
|
2516
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
1549
2517
|
padding: 2px 3px;
|
|
1550
2518
|
font-size: var(--cx-medium-font-size);
|
|
1551
2519
|
}
|
|
1552
2520
|
|
|
1553
2521
|
.cX-Customizer-RightItemHeader {
|
|
1554
|
-
border-bottom: 1px solid var(--cx-datatable-border-color) !important;
|
|
2522
|
+
border-bottom: 1px solid var(--cx-datatable-border-color, var(--cx-ui-border-accent)) !important;
|
|
1555
2523
|
}
|
|
1556
2524
|
|
|
1557
2525
|
.cX-Customizer-RightItemHeaderNB {
|
|
@@ -1570,7 +2538,7 @@ textarea.cX-Chat-Code-Output {
|
|
|
1570
2538
|
padding-left: 5px;
|
|
1571
2539
|
overflow: auto;
|
|
1572
2540
|
font-size: var(--cx-x-small-font-size);
|
|
1573
|
-
color: var(--cx-font-color);
|
|
2541
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
1574
2542
|
}
|
|
1575
2543
|
|
|
1576
2544
|
/*
|
|
@@ -1674,8 +2642,8 @@ textarea.cX-Chat-Code-Output {
|
|
|
1674
2642
|
display: flex;
|
|
1675
2643
|
align-items: center;
|
|
1676
2644
|
border-radius: var(--cx-border-radius);
|
|
1677
|
-
border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
|
|
1678
|
-
background-color: var(--cx-background-hover-color);
|
|
2645
|
+
border: 1px var(--cx-border-style) var(--cx-datatable-border-color, var(--cx-ui-border-accent)) !important;
|
|
2646
|
+
background-color: var(--cx-background-hover-color, var(--cx-ui-accent-tint));
|
|
1679
2647
|
}
|
|
1680
2648
|
|
|
1681
2649
|
/*
|
|
@@ -1693,7 +2661,7 @@ textarea.cX-Chat-Code-Output {
|
|
|
1693
2661
|
border: none !important;
|
|
1694
2662
|
box-shadow: none !important;
|
|
1695
2663
|
min-height: 34px;
|
|
1696
|
-
background: var(--cx-background-widgets-color);
|
|
2664
|
+
background: var(--cx-background-widgets-color, var(--cx-ui-surface));
|
|
1697
2665
|
overflow: hidden;
|
|
1698
2666
|
}
|
|
1699
2667
|
|
|
@@ -1724,7 +2692,7 @@ textarea.cX-Chat-Code-Output {
|
|
|
1724
2692
|
.cX-Customizer-Container > .cX-Customizer-RightItemLauncherNB + .cX-Customizer-RightItemLauncher,
|
|
1725
2693
|
.cX-Customizer-Container > .cX-Customizer-RightItemLauncher + .cX-Customizer-RightItemLauncherNB,
|
|
1726
2694
|
.cX-Customizer-Container > .cX-Customizer-RightItemLauncherNB + .cX-Customizer-RightItemLauncherNB {
|
|
1727
|
-
border-top: 1px solid var(--cx-datatable-banner-border-color) !important;
|
|
2695
|
+
border-top: 1px solid var(--cx-datatable-banner-border-color, var(--cx-ui-chrome-border)) !important;
|
|
1728
2696
|
}
|
|
1729
2697
|
|
|
1730
2698
|
/* Override inline launcher width so rows do not cover the wrapper right border */
|
|
@@ -1744,7 +2712,7 @@ textarea.cX-Chat-Code-Output {
|
|
|
1744
2712
|
|
|
1745
2713
|
.cX-Customizer-RightItemLauncher:hover,
|
|
1746
2714
|
.cX-Customizer-RightItemLauncherNB:hover {
|
|
1747
|
-
background-color: var(--cx-customizer-hover-color);
|
|
2715
|
+
background-color: var(--cx-customizer-hover-color, var(--cx-ui-accent-tint));
|
|
1748
2716
|
}
|
|
1749
2717
|
|
|
1750
2718
|
.cX-Customizer-RightItemLauncherLeft {
|
|
@@ -1752,7 +2720,7 @@ textarea.cX-Chat-Code-Output {
|
|
|
1752
2720
|
display: flex;
|
|
1753
2721
|
align-items: center;
|
|
1754
2722
|
justify-content: center;
|
|
1755
|
-
background-color: var(--cx-customizer-hover-color);
|
|
2723
|
+
background-color: var(--cx-customizer-hover-color, var(--cx-ui-accent-tint));
|
|
1756
2724
|
}
|
|
1757
2725
|
|
|
1758
2726
|
.cX-Customizer-RightItemLauncherRight {
|
|
@@ -1894,7 +2862,7 @@ textarea.cX-Chat-Code-Output {
|
|
|
1894
2862
|
align-items: center;
|
|
1895
2863
|
justify-content: center;
|
|
1896
2864
|
border-radius: var(--cx-border-radius);
|
|
1897
|
-
border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
|
|
2865
|
+
border: 1px var(--cx-border-style) var(--cx-datatable-border-color, var(--cx-ui-border-accent)) !important;
|
|
1898
2866
|
}
|
|
1899
2867
|
|
|
1900
2868
|
.cX-Customizer-RightItemSelect>select,
|
|
@@ -1920,7 +2888,7 @@ textarea.cX-Chat-Code-Output {
|
|
|
1920
2888
|
.cX-Customizer-RightItemCol5>svg:hover,
|
|
1921
2889
|
.cX-Customizer-RightItemCol6>svg:hover,
|
|
1922
2890
|
.cX-Customizer-RightItem:hover {
|
|
1923
|
-
background-color: var(--cx-customizer-hover-color);
|
|
2891
|
+
background-color: var(--cx-customizer-hover-color, var(--cx-ui-accent-tint));
|
|
1924
2892
|
}
|
|
1925
2893
|
|
|
1926
2894
|
/*
|
|
@@ -1947,7 +2915,7 @@ textarea.cX-Chat-Code-Output {
|
|
|
1947
2915
|
.cX-Customizer-Unique,
|
|
1948
2916
|
.cX-Customizer-Wrangling,
|
|
1949
2917
|
.cX-Customizer-Container {
|
|
1950
|
-
border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
|
|
2918
|
+
border: 1px var(--cx-border-style) var(--cx-datatable-border-color, var(--cx-ui-border-accent)) !important;
|
|
1951
2919
|
}
|
|
1952
2920
|
|
|
1953
2921
|
.cX-Customizer-Wrangling:hover {
|
|
@@ -2078,7 +3046,7 @@ textarea.cX-Chat-Code-Output {
|
|
|
2078
3046
|
}
|
|
2079
3047
|
|
|
2080
3048
|
.cX-Customizer-Numeric {
|
|
2081
|
-
color: var(--cx-font-color);
|
|
3049
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
2082
3050
|
background-color: var(--cx-color-transparent);
|
|
2083
3051
|
}
|
|
2084
3052
|
|
|
@@ -2108,7 +3076,7 @@ textarea.cX-Chat-Code-Output {
|
|
|
2108
3076
|
}
|
|
2109
3077
|
|
|
2110
3078
|
.cX-Customizer-ListNumeric {
|
|
2111
|
-
color: var(--cx-font-color);
|
|
3079
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
2112
3080
|
}
|
|
2113
3081
|
|
|
2114
3082
|
.cX-Customizer-ListString {
|
|
@@ -2122,14 +3090,14 @@ textarea.cX-Chat-Code-Output {
|
|
|
2122
3090
|
.cX-Customizer-ListNumeric:hover,
|
|
2123
3091
|
.cX-Customizer-ListString:hover,
|
|
2124
3092
|
.cX-Customizer-ListUnique:hover {
|
|
2125
|
-
background: var(--cx-customizer-hover-color);
|
|
3093
|
+
background: var(--cx-customizer-hover-color, var(--cx-ui-accent-tint));
|
|
2126
3094
|
}
|
|
2127
3095
|
|
|
2128
3096
|
.cX-Customizer-ListNumeric:before,
|
|
2129
3097
|
.cX-Customizer-ListString:before,
|
|
2130
3098
|
.cX-Customizer-ListUnique:before {
|
|
2131
3099
|
font: normal 10px courier;
|
|
2132
|
-
color: var(--cx-background-color);
|
|
3100
|
+
color: var(--cx-background-color, var(--cx-ui-scrollbar-thumb));
|
|
2133
3101
|
}
|
|
2134
3102
|
|
|
2135
3103
|
.cX-Customizer-ListNumeric:before {
|
|
@@ -2163,13 +3131,13 @@ textarea.cX-Chat-Code-Output {
|
|
|
2163
3131
|
select.cX-Customizer-Search,
|
|
2164
3132
|
input.cX-Customizer-Search {
|
|
2165
3133
|
margin: 6px;
|
|
2166
|
-
background-color: var(--cx-background-widgets-color);
|
|
2167
|
-
color: var(--cx-font-color);
|
|
3134
|
+
background-color: var(--cx-background-widgets-color, var(--cx-ui-surface));
|
|
3135
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
2168
3136
|
cursor: default;
|
|
2169
3137
|
font: inherit;
|
|
2170
3138
|
height: 32px;
|
|
2171
3139
|
border-radius: var(--cx-border-radius);
|
|
2172
|
-
border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
|
|
3140
|
+
border: 1px var(--cx-border-style) var(--cx-datatable-border-color, var(--cx-ui-border-accent));
|
|
2173
3141
|
float: left;
|
|
2174
3142
|
clear: left;
|
|
2175
3143
|
}
|
|
@@ -2191,13 +3159,6 @@ input.cX-Customizer-Search:not([type="color"]) {
|
|
|
2191
3159
|
padding: 4px 6px;
|
|
2192
3160
|
}
|
|
2193
3161
|
|
|
2194
|
-
input[type="search"].cX-Customizer-SearchInput::-webkit-search-cancel-button {
|
|
2195
|
-
-webkit-appearance: auto;
|
|
2196
|
-
height: 16px;
|
|
2197
|
-
width: 16px;
|
|
2198
|
-
cursor: pointer;
|
|
2199
|
-
}
|
|
2200
|
-
|
|
2201
3162
|
/* Compact, sidebar-like right-widget overrides */
|
|
2202
3163
|
.cX-Customizer-RightPanel .cX-Customizer-RightItem,
|
|
2203
3164
|
.cX-Customizer-RightPanel .cX-Customizer-RightItemHeader,
|
|
@@ -2208,7 +3169,7 @@ input[type="search"].cX-Customizer-SearchInput::-webkit-search-cancel-button {
|
|
|
2208
3169
|
.cX-Customizer-RightPanel .cX-Customizer-String,
|
|
2209
3170
|
.cX-Customizer-RightPanel .cX-Customizer-Unique,
|
|
2210
3171
|
.cX-Customizer-RightPanel .cX-Customizer-Wrangling {
|
|
2211
|
-
border-color: var(--cx-datatable-banner-border-color) !important;
|
|
3172
|
+
border-color: var(--cx-datatable-banner-border-color, var(--cx-ui-chrome-border)) !important;
|
|
2212
3173
|
border-radius: var(--cx-border-radius) !important;
|
|
2213
3174
|
}
|
|
2214
3175
|
|
|
@@ -2239,7 +3200,7 @@ input[type="search"].cX-Customizer-SearchInput::-webkit-search-cancel-button {
|
|
|
2239
3200
|
}
|
|
2240
3201
|
|
|
2241
3202
|
span.cX-Customizer-Search {
|
|
2242
|
-
color: var(--cx-font-color);
|
|
3203
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
2243
3204
|
font: inherit;
|
|
2244
3205
|
font-size: var(--cx-small-font-size);
|
|
2245
3206
|
line-height: 20px;
|
|
@@ -2267,7 +3228,7 @@ span.cX-Customizer-SearchCurrent {
|
|
|
2267
3228
|
}
|
|
2268
3229
|
|
|
2269
3230
|
span.cX-Customizer-SearchSelect {
|
|
2270
|
-
color: var(--cx-font-color);
|
|
3231
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
2271
3232
|
}
|
|
2272
3233
|
|
|
2273
3234
|
span.cX-Customizer-SearchDescription,
|
|
@@ -2280,48 +3241,48 @@ span.cX-Customizer-SearchCategory {
|
|
|
2280
3241
|
span.cX-Customizer-SearchDescription,
|
|
2281
3242
|
span.cX-Customizer-SearchCategory,
|
|
2282
3243
|
span.cX-Customizer-SearchCurrent {
|
|
2283
|
-
color: var(--cx-background-color);
|
|
3244
|
+
color: var(--cx-background-color, var(--cx-ui-scrollbar-thumb));
|
|
2284
3245
|
}
|
|
2285
3246
|
|
|
2286
3247
|
span.cX-Customizer-SearchSelect:before {
|
|
2287
|
-
color: var(--cx-font-color);
|
|
3248
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
2288
3249
|
font-weight: bold;
|
|
2289
3250
|
content: "Select property (";
|
|
2290
3251
|
}
|
|
2291
3252
|
|
|
2292
3253
|
span.cX-Customizer-SearchSelect:after {
|
|
2293
|
-
color: var(--cx-font-color);
|
|
3254
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
2294
3255
|
font-weight: bold;
|
|
2295
3256
|
content: ")";
|
|
2296
3257
|
}
|
|
2297
3258
|
|
|
2298
3259
|
span.cX-Customizer-SearchDescription:before {
|
|
2299
|
-
color: var(--cx-font-color);
|
|
3260
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
2300
3261
|
font-weight: bold;
|
|
2301
3262
|
content: "Description [ ";
|
|
2302
3263
|
}
|
|
2303
3264
|
|
|
2304
3265
|
span.cX-Customizer-SearchCategory:before {
|
|
2305
|
-
color: var(--cx-font-color);
|
|
3266
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
2306
3267
|
font-weight: bold;
|
|
2307
3268
|
content: "Category [ ";
|
|
2308
3269
|
}
|
|
2309
3270
|
|
|
2310
3271
|
span.cX-Customizer-SearchDescription:after,
|
|
2311
3272
|
span.cX-Customizer-SearchCategory:after {
|
|
2312
|
-
color: var(--cx-font-color);
|
|
3273
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
2313
3274
|
font-weight: bold;
|
|
2314
3275
|
content: " ]";
|
|
2315
3276
|
}
|
|
2316
3277
|
|
|
2317
3278
|
span.cX-Customizer-SearchCurrent:before {
|
|
2318
|
-
color: var(--cx-font-color);
|
|
3279
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
2319
3280
|
font-weight: bold;
|
|
2320
3281
|
content: "Current Value [ ";
|
|
2321
3282
|
}
|
|
2322
3283
|
|
|
2323
3284
|
span.cX-Customizer-SearchCurrent:after {
|
|
2324
|
-
color: var(--cx-font-color);
|
|
3285
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
2325
3286
|
font-weight: bold;
|
|
2326
3287
|
content: " ]";
|
|
2327
3288
|
}
|
|
@@ -2332,10 +3293,10 @@ span.cX-Customizer-SearchCurrent:after {
|
|
|
2332
3293
|
|
|
2333
3294
|
.cX-Password-Dialog {
|
|
2334
3295
|
border-radius: var(--cx-border-radius);
|
|
2335
|
-
background-color: var(--cx-background-widgets-color);
|
|
3296
|
+
background-color: var(--cx-background-widgets-color, var(--cx-ui-surface));
|
|
2336
3297
|
box-sizing: border-box;
|
|
2337
3298
|
cursor: move;
|
|
2338
|
-
color: var(--cx-font-color);
|
|
3299
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
2339
3300
|
font: normal 16px arial, tahoma, sans-serif;
|
|
2340
3301
|
margin: 2px 3px;
|
|
2341
3302
|
overflow: hidden;
|
|
@@ -2359,10 +3320,10 @@ span.cX-Customizer-SearchCurrent:after {
|
|
|
2359
3320
|
|
|
2360
3321
|
.cX-Password-Container {
|
|
2361
3322
|
box-sizing: border-box;
|
|
2362
|
-
background-color: var(--cx-background-widgets-color);
|
|
2363
|
-
border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
|
|
3323
|
+
background-color: var(--cx-background-widgets-color, var(--cx-ui-surface));
|
|
3324
|
+
border: 1px var(--cx-border-style) var(--cx-datatable-border-color, var(--cx-ui-border-accent));
|
|
2364
3325
|
border-radius: 0px 0px 5px 5px;
|
|
2365
|
-
color: var(--cx-font-color);
|
|
3326
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
2366
3327
|
display: block;
|
|
2367
3328
|
left: 0px;
|
|
2368
3329
|
line-height: 100%;
|
|
@@ -2382,9 +3343,9 @@ span.cX-Customizer-SearchCurrent:after {
|
|
|
2382
3343
|
margin-bottom: 5px;
|
|
2383
3344
|
padding: 5px;
|
|
2384
3345
|
border-radius: var(--cx-border-radius);
|
|
2385
|
-
border: 1px solid var(--cx-datatable-border-color);
|
|
2386
|
-
background-color: var(--cx-background-widgets-color);
|
|
2387
|
-
color: var(--cx-font-color);
|
|
3346
|
+
border: 1px solid var(--cx-datatable-border-color, var(--cx-ui-border-accent));
|
|
3347
|
+
background-color: var(--cx-background-widgets-color, var(--cx-ui-surface));
|
|
3348
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
2388
3349
|
width: 170px;
|
|
2389
3350
|
}
|
|
2390
3351
|
|
|
@@ -2425,9 +3386,9 @@ div.CanvasXpressDragLayout {
|
|
|
2425
3386
|
/* Keep the tinted header background from the classic look, just tighter. */
|
|
2426
3387
|
.cX-Customizer-Compact .cX-Customizer-RightItemHeader,
|
|
2427
3388
|
.cX-Customizer-Compact .cX-Customizer-RightItemHeaderNB {
|
|
2428
|
-
background: var(--cx-background-hover-color);
|
|
3389
|
+
background: var(--cx-background-hover-color, var(--cx-ui-accent-tint));
|
|
2429
3390
|
padding: 6px 10px !important;
|
|
2430
|
-
border-bottom: 1px solid var(--cx-datatable-border-color) !important;
|
|
3391
|
+
border-bottom: 1px solid var(--cx-datatable-border-color, var(--cx-ui-border-accent)) !important;
|
|
2431
3392
|
}
|
|
2432
3393
|
|
|
2433
3394
|
.cX-Customizer-Compact .cX-Customizer-RightItemHeaderMain {
|
|
@@ -2450,7 +3411,7 @@ div.CanvasXpressDragLayout {
|
|
|
2450
3411
|
|
|
2451
3412
|
/* Help text: muted caption */
|
|
2452
3413
|
.cX-Customizer-Compact .cX-Customizer-RightItemHeaderMain > :last-child {
|
|
2453
|
-
color: var(--cx-font-color);
|
|
3414
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
2454
3415
|
opacity: 0.55;
|
|
2455
3416
|
font-size: var(--cx-x-small-font-size) !important;
|
|
2456
3417
|
line-height: 1rem !important;
|
|
@@ -2542,7 +3503,7 @@ div.CanvasXpressDragLayout {
|
|
|
2542
3503
|
|
|
2543
3504
|
.cX-Customizer-Compact .cX-Customizer-RightItemLauncher:hover,
|
|
2544
3505
|
.cX-Customizer-Compact .cX-Customizer-RightItemLauncherNB:hover {
|
|
2545
|
-
background-color: var(--cx-customizer-hover-color) !important;
|
|
3506
|
+
background-color: var(--cx-customizer-hover-color, var(--cx-ui-accent-tint)) !important;
|
|
2546
3507
|
}
|
|
2547
3508
|
|
|
2548
3509
|
/* Accented-card launchers hover in the card's colour (beats the compact rule above). */
|
|
@@ -2606,11 +3567,11 @@ div.CanvasXpressDragLayout {
|
|
|
2606
3567
|
|
|
2607
3568
|
div.cX-Tooltip-Container,
|
|
2608
3569
|
.cX-Tooltip-Info {
|
|
2609
|
-
border: var(--cx-border);
|
|
3570
|
+
border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
|
|
2610
3571
|
border-radius: var(--cx-border-radius);
|
|
2611
3572
|
background-color: var(--cx-color-white);
|
|
2612
3573
|
cursor: move;
|
|
2613
|
-
color: var(--cx-font-color);
|
|
3574
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
2614
3575
|
font: var(--cx-large-font);
|
|
2615
3576
|
margin: 2px 3px;
|
|
2616
3577
|
overflow: hidden;
|
|
@@ -2623,7 +3584,7 @@ div.cX-Tooltip-Container,
|
|
|
2623
3584
|
.cX-Tooltip-Info {
|
|
2624
3585
|
max-height: 800px;
|
|
2625
3586
|
max-width: 350px;
|
|
2626
|
-
z-index:
|
|
3587
|
+
z-index: var(--cx-z-base);
|
|
2627
3588
|
}
|
|
2628
3589
|
|
|
2629
3590
|
div.cX-Tooltip-Container {
|
|
@@ -2632,7 +3593,7 @@ div.cX-Tooltip-Container {
|
|
|
2632
3593
|
|
|
2633
3594
|
.cX-Tooltip-Toolbar {
|
|
2634
3595
|
align-items: center;
|
|
2635
|
-
border-bottom: 1px var(--cx-border-style) var(--cx-datatable-banner-border-color);
|
|
3596
|
+
border-bottom: 1px var(--cx-border-style) var(--cx-datatable-banner-border-color, var(--cx-ui-chrome-border));
|
|
2636
3597
|
cursor: move;
|
|
2637
3598
|
display: flex;
|
|
2638
3599
|
flex-direction: row;
|
|
@@ -2644,8 +3605,10 @@ div.cX-Tooltip-Container {
|
|
|
2644
3605
|
|
|
2645
3606
|
/* @category: widget */
|
|
2646
3607
|
/*****************************************************/
|
|
2647
|
-
/*
|
|
2648
|
-
/*
|
|
3608
|
+
/* Tooltip callouts (speech bubbles) */
|
|
3609
|
+
/* Was 08-generators.css (renamed, UI design-system */
|
|
3610
|
+
/* plan P3): the arrowed tooltip/info callouts, */
|
|
3611
|
+
/* generated with the tool below. */
|
|
2649
3612
|
/* https://css-generators.com/tooltip-speech-bubble/ */
|
|
2650
3613
|
/*****************************************************/
|
|
2651
3614
|
|
|
@@ -2654,14 +3617,14 @@ div.cX-Tooltip-Container {
|
|
|
2654
3617
|
.cX-Tooltip-Info-Top,
|
|
2655
3618
|
.cX-Tooltip-Info-Left,
|
|
2656
3619
|
.cX-Tooltip-Info-Right {
|
|
2657
|
-
color: var(--cx-font-color);
|
|
3620
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
2658
3621
|
font: var(--cx-font);
|
|
2659
3622
|
max-height: 800px;
|
|
2660
3623
|
padding: 10px;
|
|
2661
3624
|
position: absolute;
|
|
2662
3625
|
white-space: nowrap;
|
|
2663
3626
|
text-align: left;
|
|
2664
|
-
z-index:
|
|
3627
|
+
z-index: var(--cx-z-base);
|
|
2665
3628
|
}
|
|
2666
3629
|
|
|
2667
3630
|
.cX-Tooltip-Info-Bottom {
|
|
@@ -2688,7 +3651,7 @@ div.cX-Tooltip-Container {
|
|
|
2688
3651
|
.cX-Tooltip-Info-Bottom:before {
|
|
2689
3652
|
content: "";
|
|
2690
3653
|
position: absolute;
|
|
2691
|
-
z-index: -
|
|
3654
|
+
z-index: var(--cx-z-behind);
|
|
2692
3655
|
padding: var(--cx-callout-border-width);
|
|
2693
3656
|
border-radius: inherit;
|
|
2694
3657
|
clip-path: polygon(
|
|
@@ -2754,7 +3717,7 @@ div.cX-Tooltip-Container {
|
|
|
2754
3717
|
.cX-Tooltip-Info-Top:before {
|
|
2755
3718
|
content: "";
|
|
2756
3719
|
position: absolute;
|
|
2757
|
-
z-index: -
|
|
3720
|
+
z-index: var(--cx-z-behind);
|
|
2758
3721
|
padding: var(--cx-callout-border-width);
|
|
2759
3722
|
border-radius: inherit;
|
|
2760
3723
|
clip-path: polygon(
|
|
@@ -2814,7 +3777,7 @@ div.cX-Tooltip-Container {
|
|
|
2814
3777
|
content: "";
|
|
2815
3778
|
position: absolute;
|
|
2816
3779
|
inset: 0;
|
|
2817
|
-
z-index: -
|
|
3780
|
+
z-index: var(--cx-z-behind);
|
|
2818
3781
|
padding: var(--cx-callout-border-width);
|
|
2819
3782
|
border-radius: inherit;
|
|
2820
3783
|
clip-path: polygon(
|
|
@@ -2876,7 +3839,7 @@ div.cX-Tooltip-Container {
|
|
|
2876
3839
|
content: "";
|
|
2877
3840
|
position: absolute;
|
|
2878
3841
|
inset: 0;
|
|
2879
|
-
z-index: -
|
|
3842
|
+
z-index: var(--cx-z-behind);
|
|
2880
3843
|
padding: var(--cx-callout-border-width);
|
|
2881
3844
|
border-radius: inherit;
|
|
2882
3845
|
clip-path: polygon(
|
|
@@ -2921,12 +3884,12 @@ div.CanvasXpressMousePosition {
|
|
|
2921
3884
|
border: 0px none !important;
|
|
2922
3885
|
box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
|
|
2923
3886
|
cursor: move;
|
|
2924
|
-
color: var(--cx-font-color);
|
|
3887
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
2925
3888
|
font: var(--cx-font);
|
|
2926
3889
|
position: absolute;
|
|
2927
3890
|
white-space: nowrap;
|
|
2928
3891
|
text-align: left;
|
|
2929
|
-
z-index:
|
|
3892
|
+
z-index: var(--cx-z-base);
|
|
2930
3893
|
}
|
|
2931
3894
|
|
|
2932
3895
|
img.CanvasXpressMousePosition,
|
|
@@ -2948,14 +3911,14 @@ span.CanvasXpressMousePosition {
|
|
|
2948
3911
|
border: 0px none !important;
|
|
2949
3912
|
box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important;
|
|
2950
3913
|
cursor: move;
|
|
2951
|
-
color: var(--cx-font-color);
|
|
3914
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
2952
3915
|
font: var(--cx-font);
|
|
2953
3916
|
position: absolute;
|
|
2954
3917
|
left: 4px;
|
|
2955
3918
|
top: -20px;
|
|
2956
3919
|
white-space: nowrap;
|
|
2957
3920
|
text-align: left;
|
|
2958
|
-
z-index:
|
|
3921
|
+
z-index: var(--cx-z-base);
|
|
2959
3922
|
}
|
|
2960
3923
|
|
|
2961
3924
|
/* @category: widget */
|
|
@@ -2977,8 +3940,8 @@ span.CanvasXpressMousePosition {
|
|
|
2977
3940
|
}
|
|
2978
3941
|
|
|
2979
3942
|
.cX-Workflow-Wrapper.cX-Workflow-Mode-Repro .cX-Workflow-Widget {
|
|
2980
|
-
background: var(--cx-workflow-background-color);
|
|
2981
|
-
border: 1px var(--cx-border-style) var(--cx-workflow-border-color);
|
|
3943
|
+
background: var(--cx-workflow-background-color, var(--cx-ui-surface));
|
|
3944
|
+
border: 1px var(--cx-border-style) var(--cx-workflow-border-color, var(--cx-ui-divider));
|
|
2982
3945
|
border-radius: var(--cx-border-radius);
|
|
2983
3946
|
padding: 12px;
|
|
2984
3947
|
box-shadow: none;
|
|
@@ -3002,9 +3965,9 @@ span.CanvasXpressMousePosition {
|
|
|
3002
3965
|
|
|
3003
3966
|
.cX-Workflow-Wrapper.cX-Workflow-Mode-Filter .cX-Workflow-Widget {
|
|
3004
3967
|
position: relative;
|
|
3005
|
-
border: 1px var(--cx-border-style) var(--cx-workflow-border-color) !important;
|
|
3968
|
+
border: 1px var(--cx-border-style) var(--cx-workflow-border-color, var(--cx-ui-divider)) !important;
|
|
3006
3969
|
border-radius: var(--cx-border-radius);
|
|
3007
|
-
background: var(--cx-workflow-background-color);
|
|
3970
|
+
background: var(--cx-workflow-background-color, var(--cx-ui-surface));
|
|
3008
3971
|
padding: 12px;
|
|
3009
3972
|
width: 90% !important;
|
|
3010
3973
|
left: 5% !important;
|
|
@@ -3027,8 +3990,8 @@ span.CanvasXpressMousePosition {
|
|
|
3027
3990
|
|
|
3028
3991
|
.cX-Workflow-Widget {
|
|
3029
3992
|
font-family: var(--cx-font-family);
|
|
3030
|
-
color: var(--cx-workflow-text-color);
|
|
3031
|
-
background: var(--cx-workflow-background-color);
|
|
3993
|
+
color: var(--cx-workflow-text-color, var(--cx-ui-text));
|
|
3994
|
+
background: var(--cx-workflow-background-color, var(--cx-ui-surface));
|
|
3032
3995
|
}
|
|
3033
3996
|
|
|
3034
3997
|
.cX-Workflow-Header {
|
|
@@ -3037,13 +4000,13 @@ span.CanvasXpressMousePosition {
|
|
|
3037
4000
|
align-items: center;
|
|
3038
4001
|
margin-bottom: 10px;
|
|
3039
4002
|
padding-bottom: 8px;
|
|
3040
|
-
color: var(--cx-workflow-text-color);
|
|
4003
|
+
color: var(--cx-workflow-text-color, var(--cx-ui-text));
|
|
3041
4004
|
}
|
|
3042
4005
|
|
|
3043
4006
|
.cX-Workflow-Close-Btn {
|
|
3044
4007
|
cursor: pointer;
|
|
3045
4008
|
border-radius: var(--cx-border-radius);
|
|
3046
|
-
background: var(--cx-workflow-button-background-color);
|
|
4009
|
+
background: var(--cx-workflow-button-background-color, var(--cx-ui-surface));
|
|
3047
4010
|
}
|
|
3048
4011
|
|
|
3049
4012
|
.cX-Workflow-Controls {
|
|
@@ -3056,7 +4019,7 @@ span.CanvasXpressMousePosition {
|
|
|
3056
4019
|
.cX-Workflow-Play-Btn {
|
|
3057
4020
|
cursor: pointer;
|
|
3058
4021
|
border-radius: var(--cx-border-radius);
|
|
3059
|
-
background: var(--cx-workflow-button-background-color);
|
|
4022
|
+
background: var(--cx-workflow-button-background-color, var(--cx-ui-surface));
|
|
3060
4023
|
}
|
|
3061
4024
|
|
|
3062
4025
|
.cX-Workflow-Slider-Area {
|
|
@@ -3069,7 +4032,7 @@ span.CanvasXpressMousePosition {
|
|
|
3069
4032
|
.cX-Workflow-Slider-Track {
|
|
3070
4033
|
position: relative;
|
|
3071
4034
|
height: 6px;
|
|
3072
|
-
background: var(--cx-workflow-slider-track-color);
|
|
4035
|
+
background: var(--cx-workflow-slider-track-color, var(--cx-ui-divider));
|
|
3073
4036
|
border-radius: 10px;
|
|
3074
4037
|
cursor: pointer;
|
|
3075
4038
|
}
|
|
@@ -3077,7 +4040,7 @@ span.CanvasXpressMousePosition {
|
|
|
3077
4040
|
.cX-Workflow-Slider-Fill {
|
|
3078
4041
|
position: absolute;
|
|
3079
4042
|
height: 100%;
|
|
3080
|
-
background: var(--cx-workflow-slider-fill-color);
|
|
4043
|
+
background: var(--cx-workflow-slider-fill-color, var(--cx-ui-accent));
|
|
3081
4044
|
border-radius: 10px;
|
|
3082
4045
|
width: 0%;
|
|
3083
4046
|
}
|
|
@@ -3087,12 +4050,12 @@ span.CanvasXpressMousePosition {
|
|
|
3087
4050
|
top: 50%;
|
|
3088
4051
|
width: 22px;
|
|
3089
4052
|
height: 22px;
|
|
3090
|
-
background: var(--cx-workflow-slider-thumb-color);
|
|
3091
|
-
border: 2px solid var(--cx-workflow-slider-thumb-border-color);
|
|
4053
|
+
background: var(--cx-workflow-slider-thumb-color, var(--cx-ui-accent));
|
|
4054
|
+
border: 2px solid var(--cx-workflow-slider-thumb-border-color, var(--cx-ui-surface));
|
|
3092
4055
|
border-radius: 50%;
|
|
3093
4056
|
transform: translate(-50%, -50%);
|
|
3094
4057
|
box-shadow: none;
|
|
3095
|
-
z-index:
|
|
4058
|
+
z-index: var(--cx-z-raised);
|
|
3096
4059
|
}
|
|
3097
4060
|
|
|
3098
4061
|
.cX-Workflow-Settings {
|
|
@@ -3101,12 +4064,12 @@ span.CanvasXpressMousePosition {
|
|
|
3101
4064
|
gap: 12px;
|
|
3102
4065
|
padding-top: 5px;
|
|
3103
4066
|
font-size: var(--cx-workflow-list-label-font-size);
|
|
3104
|
-
color: var(--cx-workflow-text-color);
|
|
4067
|
+
color: var(--cx-workflow-text-color, var(--cx-ui-text));
|
|
3105
4068
|
}
|
|
3106
4069
|
|
|
3107
4070
|
.cX-Workflow-Settings span.cX-Toggle {
|
|
3108
4071
|
font-size: var(--cx-workflow-list-label-font-size);
|
|
3109
|
-
color: var(--cx-workflow-text-color);
|
|
4072
|
+
color: var(--cx-workflow-text-color, var(--cx-ui-text));
|
|
3110
4073
|
}
|
|
3111
4074
|
|
|
3112
4075
|
.cX-Workflow-Duration-Area {
|
|
@@ -3131,7 +4094,7 @@ input[type=range].cX-Workflow-Duration-Slider {
|
|
|
3131
4094
|
width: auto;
|
|
3132
4095
|
height: 6px;
|
|
3133
4096
|
cursor: pointer;
|
|
3134
|
-
background: var(--cx-workflow-slider-track-color);
|
|
4097
|
+
background: var(--cx-workflow-slider-track-color, var(--cx-ui-divider));
|
|
3135
4098
|
border-radius: 10px;
|
|
3136
4099
|
}
|
|
3137
4100
|
|
|
@@ -3142,8 +4105,8 @@ input[type=range].cX-Workflow-Duration-Slider::-webkit-slider-thumb {
|
|
|
3142
4105
|
width: 16px;
|
|
3143
4106
|
height: 16px;
|
|
3144
4107
|
border-radius: 50%;
|
|
3145
|
-
background: var(--cx-workflow-slider-thumb-color);
|
|
3146
|
-
border: 2px solid var(--cx-workflow-slider-thumb-border-color);
|
|
4108
|
+
background: var(--cx-workflow-slider-thumb-color, var(--cx-ui-accent));
|
|
4109
|
+
border: 2px solid var(--cx-workflow-slider-thumb-border-color, var(--cx-ui-surface));
|
|
3147
4110
|
}
|
|
3148
4111
|
|
|
3149
4112
|
input[type=range].cX-Workflow-Duration-Slider::-moz-range-thumb {
|
|
@@ -3151,19 +4114,19 @@ input[type=range].cX-Workflow-Duration-Slider::-moz-range-thumb {
|
|
|
3151
4114
|
width: 16px;
|
|
3152
4115
|
height: 16px;
|
|
3153
4116
|
border-radius: 50%;
|
|
3154
|
-
background: var(--cx-workflow-slider-thumb-color);
|
|
3155
|
-
border: 2px solid var(--cx-workflow-slider-thumb-border-color);
|
|
4117
|
+
background: var(--cx-workflow-slider-thumb-color, var(--cx-ui-accent));
|
|
4118
|
+
border: 2px solid var(--cx-workflow-slider-thumb-border-color, var(--cx-ui-surface));
|
|
3156
4119
|
}
|
|
3157
4120
|
|
|
3158
4121
|
.cX-Workflow-Duration-Value {
|
|
3159
4122
|
min-width: 48px;
|
|
3160
4123
|
text-align: right;
|
|
3161
4124
|
white-space: nowrap;
|
|
3162
|
-
color: var(--cx-workflow-list-text-color);
|
|
4125
|
+
color: var(--cx-workflow-list-text-color, var(--cx-ui-text));
|
|
3163
4126
|
}
|
|
3164
4127
|
|
|
3165
4128
|
.cX-Workflow-Timeline-Container {
|
|
3166
|
-
border: 1px var(--cx-border-style) var(--cx-workflow-timeline-border-color);
|
|
4129
|
+
border: 1px var(--cx-border-style) var(--cx-workflow-timeline-border-color, var(--cx-ui-divider));
|
|
3167
4130
|
border-radius: var(--cx-border-radius);
|
|
3168
4131
|
margin-top: 10px;
|
|
3169
4132
|
/* padding-top: 10px; */
|
|
@@ -3181,14 +4144,14 @@ input[type=range].cX-Workflow-Duration-Slider::-moz-range-thumb {
|
|
|
3181
4144
|
}
|
|
3182
4145
|
|
|
3183
4146
|
.cX-Workflow-Timeline-Item:hover {
|
|
3184
|
-
background: var(--cx-workflow-hover-color);
|
|
4147
|
+
background: var(--cx-workflow-hover-color, var(--cx-ui-accent-tint));
|
|
3185
4148
|
}
|
|
3186
4149
|
|
|
3187
4150
|
.cX-Workflow-List-Label {
|
|
3188
4151
|
position: absolute;
|
|
3189
4152
|
transform: translateX(-50%);
|
|
3190
4153
|
font-size: var(--cx-workflow-list-label-font-size);
|
|
3191
|
-
color: var(--cx-workflow-list-text-color);
|
|
4154
|
+
color: var(--cx-workflow-list-text-color, var(--cx-ui-text));
|
|
3192
4155
|
white-space: nowrap;
|
|
3193
4156
|
}
|
|
3194
4157
|
|
|
@@ -3196,12 +4159,12 @@ input[type=range].cX-Workflow-Duration-Slider::-moz-range-thumb {
|
|
|
3196
4159
|
position: absolute;
|
|
3197
4160
|
transform: translateX(-50%);
|
|
3198
4161
|
font-size: var(--cx-workflow-list-tick-font-size);
|
|
3199
|
-
color: var(--cx-workflow-list-tick-color);
|
|
4162
|
+
color: var(--cx-workflow-list-tick-color, var(--cx-ui-divider));
|
|
3200
4163
|
}
|
|
3201
4164
|
|
|
3202
4165
|
.cX-Workflow-Timeline-Item.cX-Workflow-Active {
|
|
3203
|
-
background-color: var(--cx-workflow-active-color);
|
|
3204
|
-
color: var(--cx-workflow-text-color);
|
|
4166
|
+
background-color: var(--cx-workflow-active-color, var(--cx-ui-accent-tint));
|
|
4167
|
+
color: var(--cx-workflow-text-color, var(--cx-ui-text));
|
|
3205
4168
|
border-radius: var(--cx-border-radius);
|
|
3206
4169
|
font-weight: bold;
|
|
3207
4170
|
}
|
|
@@ -3255,7 +4218,7 @@ input[type=range].cX-Workflow-Duration-Slider::-moz-range-thumb {
|
|
|
3255
4218
|
|
|
3256
4219
|
.cX-Toolbar-Trigger {
|
|
3257
4220
|
position: absolute;
|
|
3258
|
-
z-index:
|
|
4221
|
+
z-index: var(--cx-z-toolbar);
|
|
3259
4222
|
background: transparent;
|
|
3260
4223
|
pointer-events: auto;
|
|
3261
4224
|
}
|
|
@@ -3290,12 +4253,12 @@ input[type=range].cX-Workflow-Duration-Slider::-moz-range-thumb {
|
|
|
3290
4253
|
|
|
3291
4254
|
.cX-Toolbar-Edge {
|
|
3292
4255
|
position: absolute;
|
|
3293
|
-
border: var(--cx-border);
|
|
4256
|
+
border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
|
|
3294
4257
|
padding: 1px;
|
|
3295
|
-
background: var(--cx-background-widgets-color);
|
|
4258
|
+
background: var(--cx-background-widgets-color, var(--cx-ui-surface));
|
|
3296
4259
|
display: grid;
|
|
3297
4260
|
opacity: 0;
|
|
3298
|
-
z-index:
|
|
4261
|
+
z-index: var(--cx-z-toolbar-edge);
|
|
3299
4262
|
transition: all var(--cx-transition-speed) ease;
|
|
3300
4263
|
pointer-events: none;
|
|
3301
4264
|
overflow: hidden;
|
|
@@ -3445,16 +4408,16 @@ canvas.CanvasXpress::selection {
|
|
|
3445
4408
|
|
|
3446
4409
|
/* Hide Efect */
|
|
3447
4410
|
|
|
3448
|
-
.appear {
|
|
4411
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).appear {
|
|
3449
4412
|
transition: all var(--cx-transition-speed) linear;
|
|
3450
4413
|
opacity: 1;
|
|
3451
4414
|
}
|
|
3452
4415
|
|
|
3453
|
-
.dissapear {
|
|
4416
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).dissapear {
|
|
3454
4417
|
display: none;
|
|
3455
4418
|
}
|
|
3456
4419
|
|
|
3457
|
-
.dissapearHidden {
|
|
4420
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).dissapearHidden {
|
|
3458
4421
|
transition: all var(--cx-transition-speed) linear;
|
|
3459
4422
|
opacity: 0;
|
|
3460
4423
|
}
|
|
@@ -3466,9 +4429,9 @@ canvas.CanvasXpress::selection {
|
|
|
3466
4429
|
|
|
3467
4430
|
div.cX-Marker {
|
|
3468
4431
|
box-sizing: border-box;
|
|
3469
|
-
border: var(--cx-border);
|
|
4432
|
+
border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
|
|
3470
4433
|
border-radius: var(--cx-border-radius);
|
|
3471
|
-
background-color: var(--cx-background-widgets-color);
|
|
4434
|
+
background-color: var(--cx-background-widgets-color, var(--cx-ui-surface));
|
|
3472
4435
|
cursor: move;
|
|
3473
4436
|
font: var(--cx-font);
|
|
3474
4437
|
width: 308px;
|
|
@@ -3497,7 +4460,7 @@ textarea.cX-Marker{
|
|
|
3497
4460
|
resize: none;
|
|
3498
4461
|
padding-left: 5px;
|
|
3499
4462
|
border-radius: var(--cx-border-radius);
|
|
3500
|
-
border: var(--cx-border);
|
|
4463
|
+
border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
|
|
3501
4464
|
}
|
|
3502
4465
|
|
|
3503
4466
|
input.cX-Marker {
|
|
@@ -3507,7 +4470,7 @@ input.cX-Marker {
|
|
|
3507
4470
|
outline: none;
|
|
3508
4471
|
padding-left: 5px;
|
|
3509
4472
|
border-radius: var(--cx-border-radius);
|
|
3510
|
-
border: var(--cx-border);
|
|
4473
|
+
border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
|
|
3511
4474
|
}
|
|
3512
4475
|
|
|
3513
4476
|
select.cX-Marker {
|
|
@@ -3518,7 +4481,7 @@ select.cX-Marker {
|
|
|
3518
4481
|
outline: none;
|
|
3519
4482
|
padding-left: 5px;
|
|
3520
4483
|
border-radius: var(--cx-border-radius);
|
|
3521
|
-
border: var(--cx-border);
|
|
4484
|
+
border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
|
|
3522
4485
|
}
|
|
3523
4486
|
|
|
3524
4487
|
.cX-Marker-Button-Container {
|
|
@@ -3537,7 +4500,7 @@ select.cX-Marker {
|
|
|
3537
4500
|
.cX-Marker-Add-Update {
|
|
3538
4501
|
float: left;
|
|
3539
4502
|
border-radius: var(--cx-border-radius);
|
|
3540
|
-
border: var(--cx-border);
|
|
4503
|
+
border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
|
|
3541
4504
|
position: relative;
|
|
3542
4505
|
width: 125px;
|
|
3543
4506
|
height: 36px;
|
|
@@ -3614,7 +4577,7 @@ tr.cX-DataTable-DOE {
|
|
|
3614
4577
|
}
|
|
3615
4578
|
|
|
3616
4579
|
.cX-DataTable-Container > table > tbody > tr > th {
|
|
3617
|
-
background-color:
|
|
4580
|
+
background-color: var(--cx-ui-surface);
|
|
3618
4581
|
margin: 1px;
|
|
3619
4582
|
}
|
|
3620
4583
|
|
|
@@ -3641,27 +4604,27 @@ tr.cX-DataTable-DOE {
|
|
|
3641
4604
|
|
|
3642
4605
|
.cX-DataTable-Vertical-Scrollbar,
|
|
3643
4606
|
.cX-DataTable-Horizontal-Scrollbar {
|
|
3644
|
-
background-color: var(--cx-background-widgets-color);
|
|
4607
|
+
background-color: var(--cx-background-widgets-color, var(--cx-ui-surface));
|
|
3645
4608
|
}
|
|
3646
4609
|
|
|
3647
4610
|
.cX-DataTable {
|
|
3648
4611
|
background-color: transparent;
|
|
3649
|
-
border: 1px var(--cx-border-style) var(--cx-datatable-banner-border-color);
|
|
4612
|
+
border: 1px var(--cx-border-style) var(--cx-datatable-banner-border-color, var(--cx-ui-chrome-border));
|
|
3650
4613
|
border-radius: var(--cx-border-radius);
|
|
3651
4614
|
clear: both;
|
|
3652
|
-
color: var(--cx-font-color);
|
|
4615
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
3653
4616
|
font-family: var(--cx-font-family);
|
|
3654
4617
|
font-size: var(--cx-font-size);
|
|
3655
4618
|
overflow: hidden;
|
|
3656
|
-
z-index:
|
|
4619
|
+
z-index: var(--cx-z-panel-active);
|
|
3657
4620
|
}
|
|
3658
4621
|
|
|
3659
4622
|
/* Data Table Banner */
|
|
3660
4623
|
|
|
3661
4624
|
.cX-DataTable-Banner {
|
|
3662
|
-
background-color: var(--cx-datatable-banner-background-color);
|
|
3663
|
-
border-bottom: 1px var(--cx-border-style) var(--cx-datatable-banner-border-color);
|
|
3664
|
-
color: var(--cx-datatable-banner-text-color);
|
|
4625
|
+
background-color: var(--cx-datatable-banner-background-color, var(--cx-ui-chrome));
|
|
4626
|
+
border-bottom: 1px var(--cx-border-style) var(--cx-datatable-banner-border-color, var(--cx-ui-chrome-border));
|
|
4627
|
+
color: var(--cx-datatable-banner-text-color, var(--cx-ui-on-chrome));
|
|
3665
4628
|
display: flex;
|
|
3666
4629
|
align-items: center;
|
|
3667
4630
|
}
|
|
@@ -3671,10 +4634,10 @@ tr.cX-DataTable-DOE {
|
|
|
3671
4634
|
}
|
|
3672
4635
|
|
|
3673
4636
|
input.cX-DataTable-Search {
|
|
3674
|
-
background-color: var(--cx-datatable-background-color);
|
|
3675
|
-
border: 1px var(--cx-border-style) var(--cx-datatable-banner-border-color);
|
|
4637
|
+
background-color: var(--cx-datatable-background-color, var(--cx-ui-surface));
|
|
4638
|
+
border: 1px var(--cx-border-style) var(--cx-datatable-banner-border-color, var(--cx-ui-chrome-border));
|
|
3676
4639
|
border-radius: var(--cx-border-radius);
|
|
3677
|
-
color: var(--cx-datatable-banner-text-color);
|
|
4640
|
+
color: var(--cx-datatable-banner-text-color, var(--cx-ui-on-chrome));
|
|
3678
4641
|
margin-right: 10px;
|
|
3679
4642
|
padding: 10px;
|
|
3680
4643
|
outline: none;
|
|
@@ -3682,18 +4645,11 @@ input.cX-DataTable-Search {
|
|
|
3682
4645
|
display: flex;
|
|
3683
4646
|
}
|
|
3684
4647
|
|
|
3685
|
-
input[type="search"].cX-DataTable-Search::-webkit-search-cancel-button {
|
|
3686
|
-
-webkit-appearance: auto;
|
|
3687
|
-
height: 16px;
|
|
3688
|
-
width: 16px;
|
|
3689
|
-
cursor: pointer;
|
|
3690
|
-
}
|
|
3691
|
-
|
|
3692
4648
|
/* Data Table Toolbar */
|
|
3693
4649
|
|
|
3694
4650
|
.cX-DataTable-Toolbar {
|
|
3695
|
-
background-color: var(--cx-datatable-toolbar-background-color);
|
|
3696
|
-
border-bottom: 1px var(--cx-border-style) var(--cx-datatable-banner-border-color);
|
|
4651
|
+
background-color: var(--cx-datatable-toolbar-background-color, var(--cx-ui-surface));
|
|
4652
|
+
border-bottom: 1px var(--cx-border-style) var(--cx-datatable-banner-border-color, var(--cx-ui-chrome-border));
|
|
3697
4653
|
display: flex;
|
|
3698
4654
|
align-items: center;
|
|
3699
4655
|
justify-content: flex-end;
|
|
@@ -3725,13 +4681,13 @@ input[type="search"].cX-DataTable-Search::-webkit-search-cancel-button {
|
|
|
3725
4681
|
.cX-DataTable-Status,
|
|
3726
4682
|
.cX-DataTable-Container {
|
|
3727
4683
|
font-family: var(--cx-font-family);
|
|
3728
|
-
color: var(--cx-font-color);
|
|
4684
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
3729
4685
|
}
|
|
3730
4686
|
|
|
3731
4687
|
svg.cX-DataTable-Toolbar-Image {
|
|
3732
4688
|
background: var(--cx-color-transparent) !important;
|
|
3733
4689
|
border-radius: var(--cx-border-radius);
|
|
3734
|
-
border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
|
|
4690
|
+
border: 1px var(--cx-border-style) var(--cx-datatable-border-color, var(--cx-ui-border-accent)) !important;
|
|
3735
4691
|
padding: 2px;
|
|
3736
4692
|
box-shadow: 0 0 0px var(--cx-color-transparent) !important;
|
|
3737
4693
|
cursor: pointer;
|
|
@@ -3750,7 +4706,7 @@ svg.cX-DataTable-Toolbar-Image-Logo {
|
|
|
3750
4706
|
margin-top: 5px;
|
|
3751
4707
|
margin-left: 8px;
|
|
3752
4708
|
width: 16px;
|
|
3753
|
-
border-left: 1px var(--cx-border-style) var(--cx-datatable-toolbar-border-color);
|
|
4709
|
+
border-left: 1px var(--cx-border-style) var(--cx-datatable-toolbar-border-color, var(--cx-ui-chrome-border));
|
|
3754
4710
|
}
|
|
3755
4711
|
|
|
3756
4712
|
/* Data Table Body */
|
|
@@ -3760,12 +4716,12 @@ svg.cX-DataTable-Toolbar-Image-Logo {
|
|
|
3760
4716
|
}
|
|
3761
4717
|
|
|
3762
4718
|
.cX-DataTable-Header-Viewport {
|
|
3763
|
-
border-bottom: 1px var(--cx-border-style) var(--cx-datatable-border-color);
|
|
4719
|
+
border-bottom: 1px var(--cx-border-style) var(--cx-datatable-border-color, var(--cx-ui-border-accent));
|
|
3764
4720
|
border-left: none;
|
|
3765
|
-
border-right: 1px var(--cx-border-style) var(--cx-datatable-border-color);
|
|
4721
|
+
border-right: 1px var(--cx-border-style) var(--cx-datatable-border-color, var(--cx-ui-border-accent));
|
|
3766
4722
|
border-top: none;
|
|
3767
4723
|
overflow: hidden;
|
|
3768
|
-
z-index:
|
|
4724
|
+
z-index: var(--cx-z-base);
|
|
3769
4725
|
}
|
|
3770
4726
|
|
|
3771
4727
|
.cX-DataTable-Vertical-Scrollbar {
|
|
@@ -3797,15 +4753,15 @@ svg.cX-DataTable-Toolbar-Image-Logo {
|
|
|
3797
4753
|
/* Data Table Status */
|
|
3798
4754
|
|
|
3799
4755
|
.cX-DataTable-Status {
|
|
3800
|
-
background-color: var(--cx-datatable-status-background-color);
|
|
3801
|
-
border-top: 1px var(--cx-border-style) var(--cx-datatable-status-border-color);
|
|
4756
|
+
background-color: var(--cx-datatable-status-background-color, var(--cx-ui-chrome-strong));
|
|
4757
|
+
border-top: 1px var(--cx-border-style) var(--cx-datatable-status-border-color, var(--cx-ui-chrome-border));
|
|
3802
4758
|
position: relative;
|
|
3803
4759
|
align-items: center;
|
|
3804
4760
|
display: flex;
|
|
3805
4761
|
font-family: var(--cx-font-family);
|
|
3806
4762
|
font-weight: normal;
|
|
3807
4763
|
font-variant-numeric: tabular-nums;
|
|
3808
|
-
color: var(--cx-datatable-status-text-color);
|
|
4764
|
+
color: var(--cx-datatable-status-text-color, var(--cx-ui-on-chrome-strong));
|
|
3809
4765
|
}
|
|
3810
4766
|
|
|
3811
4767
|
.cX-DataTable-Status-Left {
|
|
@@ -3817,21 +4773,21 @@ svg.cX-DataTable-Toolbar-Image-Logo {
|
|
|
3817
4773
|
align-items: center;
|
|
3818
4774
|
margin-left: 20px;
|
|
3819
4775
|
font-size: var(--cx-font-size);
|
|
3820
|
-
color: var(--cx-datatable-status-text-color);
|
|
4776
|
+
color: var(--cx-datatable-status-text-color, var(--cx-ui-on-chrome-strong));
|
|
3821
4777
|
}
|
|
3822
4778
|
|
|
3823
4779
|
/* Data Table Pagination */
|
|
3824
4780
|
|
|
3825
4781
|
.cX-DataTable-Pagination {
|
|
3826
|
-
background-color: var(--cx-datatable-pagination-background-color);
|
|
3827
|
-
border-top: 1px var(--cx-border-style) var(--cx-datatable-pagination-border-color);
|
|
4782
|
+
background-color: var(--cx-datatable-pagination-background-color, var(--cx-ui-chrome-strong));
|
|
4783
|
+
border-top: 1px var(--cx-border-style) var(--cx-datatable-pagination-border-color, var(--cx-ui-chrome-border));
|
|
3828
4784
|
position: relative;
|
|
3829
4785
|
align-items: center;
|
|
3830
4786
|
display: flex;
|
|
3831
4787
|
font-family: var(--cx-font-family);
|
|
3832
4788
|
font-weight: normal;
|
|
3833
4789
|
font-variant-numeric: tabular-nums;
|
|
3834
|
-
color: var(--cx-datatable-pagination-text-color);
|
|
4790
|
+
color: var(--cx-datatable-pagination-text-color, var(--cx-ui-on-chrome-strong));
|
|
3835
4791
|
}
|
|
3836
4792
|
|
|
3837
4793
|
.cX-DataTable-Pagination-Size {
|
|
@@ -3842,10 +4798,10 @@ svg.cX-DataTable-Toolbar-Image-Logo {
|
|
|
3842
4798
|
}
|
|
3843
4799
|
|
|
3844
4800
|
.cX-DataTable-Pagination-Size-Select {
|
|
3845
|
-
background-color: var(--cx-datatable-background-color);
|
|
3846
|
-
border: 1px var(--cx-border-style) var(--cx-datatable-pagination-border-color);
|
|
4801
|
+
background-color: var(--cx-datatable-background-color, var(--cx-ui-surface));
|
|
4802
|
+
border: 1px var(--cx-border-style) var(--cx-datatable-pagination-border-color, var(--cx-ui-chrome-border));
|
|
3847
4803
|
border-radius: var(--cx-border-radius);
|
|
3848
|
-
color: var(--cx-datatable-pagination-select-text-color);
|
|
4804
|
+
color: var(--cx-datatable-pagination-select-text-color, var(--cx-ui-text));
|
|
3849
4805
|
height: 20px;
|
|
3850
4806
|
padding: 2px;
|
|
3851
4807
|
outline: none;
|
|
@@ -3883,7 +4839,7 @@ svg.cX-DataTable-Toolbar-Image-Logo {
|
|
|
3883
4839
|
table.cX-DataTable,
|
|
3884
4840
|
.cX-DataTable-Tooltip {
|
|
3885
4841
|
border: none !important;
|
|
3886
|
-
color: var(--cx-font-color);
|
|
4842
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
3887
4843
|
position: absolute;
|
|
3888
4844
|
table-layout: fixed;
|
|
3889
4845
|
}
|
|
@@ -3898,7 +4854,7 @@ table.cX-DataTable,
|
|
|
3898
4854
|
|
|
3899
4855
|
.cX-DataTable-Container .cX-DataTable-Row th,
|
|
3900
4856
|
.cX-DataTable-Container .cX-DataTable-Row td {
|
|
3901
|
-
border: 1px solid var(--cx-datatable-cell-border-color);
|
|
4857
|
+
border: 1px solid var(--cx-datatable-cell-border-color, var(--cx-ui-border-subtle));
|
|
3902
4858
|
}
|
|
3903
4859
|
|
|
3904
4860
|
.cX-DataTable-Container .cX-DataTable-Row {
|
|
@@ -3927,7 +4883,7 @@ table.cX-DataTable,
|
|
|
3927
4883
|
|
|
3928
4884
|
.cX-DataTable-Row-Active td,
|
|
3929
4885
|
.cX-DataTable-Row-Active th {
|
|
3930
|
-
background-color: var(--cx-datatable-row-hover-background-color)!important;
|
|
4886
|
+
background-color: var(--cx-datatable-row-hover-background-color, var(--cx-ui-accent-tint))!important;
|
|
3931
4887
|
}
|
|
3932
4888
|
|
|
3933
4889
|
/* "colorful" style: the selected row is highlighted in amber so it stands out
|
|
@@ -3941,7 +4897,7 @@ table.cX-DataTable,
|
|
|
3941
4897
|
}
|
|
3942
4898
|
|
|
3943
4899
|
.cX-DataTable-Row:not(:first-child):hover {
|
|
3944
|
-
background-color: var(--cx-datatable-row-hover-background-color) !important;
|
|
4900
|
+
background-color: var(--cx-datatable-row-hover-background-color, var(--cx-ui-accent-tint)) !important;
|
|
3945
4901
|
}
|
|
3946
4902
|
|
|
3947
4903
|
.cX-DataTable-Row:not(:first-child):hover td,
|
|
@@ -3953,12 +4909,12 @@ table.cX-DataTable,
|
|
|
3953
4909
|
|
|
3954
4910
|
.cX-DataTable-Cell-Head,
|
|
3955
4911
|
.cX-DataTable-Cell-Head-Active {
|
|
3956
|
-
background: var(--cx-datatable-accent-color);
|
|
4912
|
+
background: var(--cx-datatable-accent-color, var(--cx-ui-accent));
|
|
3957
4913
|
border-top: none;
|
|
3958
|
-
border-bottom: var(--cx-datatable-cell-border-color);
|
|
4914
|
+
border-bottom: var(--cx-datatable-cell-border-color, var(--cx-ui-border-subtle));
|
|
3959
4915
|
border-left: none;
|
|
3960
|
-
border-right: var(--cx-datatable-cell-border-color);
|
|
3961
|
-
color: var(--cx-datatable-header-text-color);
|
|
4916
|
+
border-right: var(--cx-datatable-cell-border-color, var(--cx-ui-border-subtle));
|
|
4917
|
+
color: var(--cx-datatable-header-text-color, var(--cx-ui-text));
|
|
3962
4918
|
cursor: pointer;
|
|
3963
4919
|
font-size: var(--cx-datatable-header-font-size);
|
|
3964
4920
|
font-family: var(--cx-datatable-cell-font-family);
|
|
@@ -4054,7 +5010,7 @@ table.cX-DataTable,
|
|
|
4054
5010
|
}
|
|
4055
5011
|
|
|
4056
5012
|
.cX-DataTable-Cell-Header-Resize {
|
|
4057
|
-
background: var(--cx-datatable-cell-border-color);
|
|
5013
|
+
background: var(--cx-datatable-cell-border-color, var(--cx-ui-border-subtle));
|
|
4058
5014
|
cursor: col-resize;
|
|
4059
5015
|
position: absolute;
|
|
4060
5016
|
right: 0;
|
|
@@ -4064,7 +5020,7 @@ table.cX-DataTable,
|
|
|
4064
5020
|
}
|
|
4065
5021
|
|
|
4066
5022
|
.cX-DataTable-Cell-Head-Text {
|
|
4067
|
-
color: var(--cx-datatable-header-text-color)
|
|
5023
|
+
color: var(--cx-datatable-header-text-color, var(--cx-ui-text))
|
|
4068
5024
|
}
|
|
4069
5025
|
|
|
4070
5026
|
/* Data Table Cells td */
|
|
@@ -4079,13 +5035,13 @@ table.cX-DataTable,
|
|
|
4079
5035
|
td.cX-DataTable-Cell,
|
|
4080
5036
|
td.cX-DataTable-Cell-Active {
|
|
4081
5037
|
border-top: none !important;
|
|
4082
|
-
border-bottom: var(--cx-datatable-cell-border-color);
|
|
5038
|
+
border-bottom: var(--cx-datatable-cell-border-color, var(--cx-ui-border-subtle));
|
|
4083
5039
|
border-left: none !important;
|
|
4084
|
-
border-right: var(--cx-datatable-cell-border-color);
|
|
5040
|
+
border-right: var(--cx-datatable-cell-border-color, var(--cx-ui-border-subtle));
|
|
4085
5041
|
font-size: var(--cx-datatable-body-font-size);
|
|
4086
5042
|
font-family: var(--cx-datatable-cell-font-family);
|
|
4087
5043
|
font-variant-numeric: tabular-nums;
|
|
4088
|
-
color: var(--cx-datatable-cell-text-color);
|
|
5044
|
+
color: var(--cx-datatable-cell-text-color, var(--cx-ui-text));
|
|
4089
5045
|
padding: 0 3px 0 0 !important;
|
|
4090
5046
|
vertical-align: middle;
|
|
4091
5047
|
width: unset !important;
|
|
@@ -4103,7 +5059,7 @@ td.cX-DataTable-Cell-Active {
|
|
|
4103
5059
|
box-sizing: border-box;
|
|
4104
5060
|
font-size: var(--cx-datatable-cell-font-size);
|
|
4105
5061
|
font-family: var(--cx-datatable-cell-font-family);
|
|
4106
|
-
color: var(--cx-datatable-cell-text-color);
|
|
5062
|
+
color: var(--cx-datatable-cell-text-color, var(--cx-ui-text));
|
|
4107
5063
|
margin: 0px !important;
|
|
4108
5064
|
overflow: hidden;
|
|
4109
5065
|
position: relative;
|
|
@@ -4127,7 +5083,7 @@ td.cX-DataTable-Cell-Active {
|
|
|
4127
5083
|
|
|
4128
5084
|
.cX-DataTable-Cell-Link,
|
|
4129
5085
|
.cX-DataTable-Cell-Link-Active {
|
|
4130
|
-
text-decoration: underline var(--cx-border);
|
|
5086
|
+
text-decoration: underline var(--cx-border, 1px solid var(--cx-ui-border-accent));
|
|
4131
5087
|
text-underline-offset: 2px;
|
|
4132
5088
|
cursor: pointer;
|
|
4133
5089
|
display: flex;
|
|
@@ -4137,17 +5093,17 @@ td.cX-DataTable-Cell-Active {
|
|
|
4137
5093
|
.cX-DataTable-Cell-Active,
|
|
4138
5094
|
.cX-DataTable-Cell-Number-Active,
|
|
4139
5095
|
.cX-DataTable-Cell-Link-Active {
|
|
4140
|
-
background-color: var(--cx-datatable-cell-hover-background-color) !important;
|
|
4141
|
-
border: 1px var(--cx-border-style) var(--cx-datatable-activecell-border-color) !important;
|
|
5096
|
+
background-color: var(--cx-datatable-cell-hover-background-color, var(--cx-ui-accent-tint)) !important;
|
|
5097
|
+
border: 1px var(--cx-border-style) var(--cx-datatable-activecell-border-color, var(--cx-ui-active-cell)) !important;
|
|
4142
5098
|
}
|
|
4143
5099
|
|
|
4144
5100
|
.cX-DataTable-Cell-Text {
|
|
4145
|
-
color: var(--cx-datatable-cell-text-color)
|
|
5101
|
+
color: var(--cx-datatable-cell-text-color, var(--cx-ui-text))
|
|
4146
5102
|
}
|
|
4147
5103
|
|
|
4148
5104
|
td.cX-DataTable-Cell > .cX-DataTable-Cell:hover,
|
|
4149
5105
|
td.cX-DataTable-Cell > .cX-DataTable-Cell-Number:hover {
|
|
4150
|
-
background-color: var(--cx-datatable-cell-hover-background-color);
|
|
5106
|
+
background-color: var(--cx-datatable-cell-hover-background-color, var(--cx-ui-accent-tint));
|
|
4151
5107
|
}
|
|
4152
5108
|
|
|
4153
5109
|
.cX-DataTable-Cell-Tooltip {
|
|
@@ -4169,7 +5125,7 @@ td.cX-DataTable-Cell > .cX-DataTable-Cell-Number:hover {
|
|
|
4169
5125
|
background-size: contain;
|
|
4170
5126
|
background-repeat: no-repeat;
|
|
4171
5127
|
background-position: center center;
|
|
4172
|
-
background-color:
|
|
5128
|
+
background-color: var(--cx-ui-surface);
|
|
4173
5129
|
position: relative;
|
|
4174
5130
|
}
|
|
4175
5131
|
|
|
@@ -4182,7 +5138,7 @@ td.cX-DataTable-Cell > .cX-DataTable-Cell-Number:hover {
|
|
|
4182
5138
|
/************************************/
|
|
4183
5139
|
|
|
4184
5140
|
.cX-DataTable-Container .cX-DataTable-Row:not(:first-child):hover {
|
|
4185
|
-
background-color: var(--cx-datatable-row-hover-background-color) !important;
|
|
5141
|
+
background-color: var(--cx-datatable-row-hover-background-color, var(--cx-ui-accent-tint)) !important;
|
|
4186
5142
|
}
|
|
4187
5143
|
|
|
4188
5144
|
.cX-DataTable-Container .cX-DataTable-Cell-Tooltip {
|
|
@@ -4207,7 +5163,7 @@ td.cX-DataTable-Cell > .cX-DataTable-Cell-Number:hover {
|
|
|
4207
5163
|
.cX-DataFilter-Text-Active {
|
|
4208
5164
|
font-family: var(--cx-font-family);
|
|
4209
5165
|
font-size: var(--cx-x-large-font-size);
|
|
4210
|
-
color: var(--cx-font-color);
|
|
5166
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
4211
5167
|
}
|
|
4212
5168
|
|
|
4213
5169
|
.cX-DataFilter,
|
|
@@ -4222,12 +5178,12 @@ td.cX-DataTable-Cell > .cX-DataTable-Cell-Number:hover {
|
|
|
4222
5178
|
top: 0px;
|
|
4223
5179
|
left: 0px;
|
|
4224
5180
|
display: none;
|
|
4225
|
-
z-index:
|
|
5181
|
+
z-index: var(--cx-z-panel);
|
|
4226
5182
|
height: 100%;
|
|
4227
5183
|
}
|
|
4228
5184
|
|
|
4229
5185
|
.cX-DataFilter-Toolbar {
|
|
4230
|
-
border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-
|
|
5186
|
+
border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-ui-border-accent)) !important;
|
|
4231
5187
|
border-radius: var(--cx-border-radius);
|
|
4232
5188
|
width: 100%;
|
|
4233
5189
|
left: 0px;
|
|
@@ -4238,9 +5194,9 @@ td.cX-DataTable-Cell > .cX-DataTable-Cell-Number:hover {
|
|
|
4238
5194
|
float: left;
|
|
4239
5195
|
position: relative;
|
|
4240
5196
|
width: 100%;
|
|
4241
|
-
z-index:
|
|
4242
|
-
background-color: var(--cx-datafilter-toolbar-background-color, var(--cx-
|
|
4243
|
-
border-bottom: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-
|
|
5197
|
+
z-index: var(--cx-z-panel-active);
|
|
5198
|
+
background-color: var(--cx-datafilter-toolbar-background-color, var(--cx-ui-chrome));
|
|
5199
|
+
border-bottom: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-ui-border-accent));
|
|
4244
5200
|
border-radius: var(--cx-border-radius) var(--cx-border-radius) 0px 0px;
|
|
4245
5201
|
display: flex;
|
|
4246
5202
|
align-items: center;
|
|
@@ -4273,7 +5229,7 @@ td.cX-DataTable-Cell > .cX-DataTable-Cell-Number:hover {
|
|
|
4273
5229
|
top: 6px;
|
|
4274
5230
|
background-repeat: no-repeat;
|
|
4275
5231
|
background-position: -0px;
|
|
4276
|
-
color: var(--cx-datafilter-text-color, var(--cx-
|
|
5232
|
+
color: var(--cx-datafilter-text-color, var(--cx-ui-text));
|
|
4277
5233
|
font-size: var(--cx-datafilter-font-size, var(--cx-font-size));
|
|
4278
5234
|
}
|
|
4279
5235
|
|
|
@@ -4299,20 +5255,20 @@ svg.cX-DataFilter-Toolbar-ImageNB {
|
|
|
4299
5255
|
overflow: hidden;
|
|
4300
5256
|
text-overflow: ellipsis;
|
|
4301
5257
|
opacity: 0.7;
|
|
4302
|
-
color: var(--cx-datafilter-text-color, var(--cx-
|
|
5258
|
+
color: var(--cx-datafilter-text-color, var(--cx-ui-text));
|
|
4303
5259
|
font-size: var(--cx-datafilter-font-size, var(--cx-font-size));
|
|
4304
5260
|
}
|
|
4305
5261
|
|
|
4306
5262
|
|
|
4307
5263
|
.cX-DataFilter-Content {
|
|
4308
5264
|
box-sizing: border-box;
|
|
4309
|
-
background-color: var(--cx-datafilter-background-color, var(--cx-
|
|
4310
|
-
border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-
|
|
5265
|
+
background-color: var(--cx-datafilter-background-color, var(--cx-ui-surface));
|
|
5266
|
+
border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-ui-border-accent));
|
|
4311
5267
|
border-radius: 0px 0px var(--cx-border-radius) var(--cx-border-radius);
|
|
4312
5268
|
border-top: 0px;
|
|
4313
5269
|
font-family: var(--cx-font-family);
|
|
4314
5270
|
font-size: var(--cx-datafilter-font-size, var(--cx-font-size));
|
|
4315
|
-
color: var(--cx-datafilter-text-color, var(--cx-
|
|
5271
|
+
color: var(--cx-datafilter-text-color, var(--cx-ui-text));
|
|
4316
5272
|
overflow-y: auto;
|
|
4317
5273
|
overflow-x: hidden;
|
|
4318
5274
|
padding: 2px;
|
|
@@ -4321,9 +5277,8 @@ svg.cX-DataFilter-Toolbar-ImageNB {
|
|
|
4321
5277
|
display: none;
|
|
4322
5278
|
}
|
|
4323
5279
|
|
|
5280
|
+
/* The control itself is the shared checkbox (05-ui-primitives.css); this keeps the list's size */
|
|
4324
5281
|
input[type=checkbox].cX-Checkbox {
|
|
4325
|
-
accent-color: var(--cx-background-accent-color);
|
|
4326
|
-
border-radius: var(--cx-border-radius);
|
|
4327
5282
|
height: 14px;
|
|
4328
5283
|
width: 14px;
|
|
4329
5284
|
margin: 2px;
|
|
@@ -4342,9 +5297,9 @@ label.cX-Checkbox-Label {
|
|
|
4342
5297
|
}
|
|
4343
5298
|
|
|
4344
5299
|
input.cX-DataFilter-Search {
|
|
4345
|
-
border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-
|
|
5300
|
+
border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-ui-border-accent));
|
|
4346
5301
|
border-radius: var(--cx-border-radius);
|
|
4347
|
-
color: var(--cx-datafilter-text-color, var(--cx-
|
|
5302
|
+
color: var(--cx-datafilter-text-color, var(--cx-ui-text));
|
|
4348
5303
|
cursor: default;
|
|
4349
5304
|
width: calc(100% - 10px);
|
|
4350
5305
|
margin-left: 5px;
|
|
@@ -4355,13 +5310,6 @@ input.cX-DataFilter-Search {
|
|
|
4355
5310
|
display: flex;
|
|
4356
5311
|
}
|
|
4357
5312
|
|
|
4358
|
-
input[type="search"].cX-DataFilter-Search::-webkit-search-cancel-button {
|
|
4359
|
-
-webkit-appearance: auto;
|
|
4360
|
-
height: 16px;
|
|
4361
|
-
width: 16px;
|
|
4362
|
-
cursor: pointer;
|
|
4363
|
-
}
|
|
4364
|
-
|
|
4365
5313
|
.cX-DataFilter-Container,
|
|
4366
5314
|
.cX-DataFilter-Container-Mask,
|
|
4367
5315
|
.cX-DataFilter-Container-Hoverable {
|
|
@@ -4378,18 +5326,18 @@ input[type="search"].cX-DataFilter-Search::-webkit-search-cancel-button {
|
|
|
4378
5326
|
}
|
|
4379
5327
|
|
|
4380
5328
|
.cX-DataFilter-Container-Mask {
|
|
4381
|
-
border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-
|
|
5329
|
+
border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-ui-border-accent));
|
|
4382
5330
|
margin: 5px;
|
|
4383
5331
|
overflow-x: hidden;
|
|
4384
5332
|
overflow-y: scroll;
|
|
4385
5333
|
}
|
|
4386
5334
|
|
|
4387
5335
|
.cX-DataFilter-Container-Hoverable:hover {
|
|
4388
|
-
background-color: var(--cx-datafilter-hover-color, var(--cx-
|
|
5336
|
+
background-color: var(--cx-datafilter-hover-color, var(--cx-ui-accent-tint));
|
|
4389
5337
|
}
|
|
4390
5338
|
|
|
4391
5339
|
.cX-DataFilter-Container-Hoverable {
|
|
4392
|
-
border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-
|
|
5340
|
+
border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-ui-border-accent));
|
|
4393
5341
|
border-radius: var(--cx-border-radius);
|
|
4394
5342
|
margin: 2px;
|
|
4395
5343
|
margin-bottom: 4px;
|
|
@@ -4428,16 +5376,16 @@ input[type="search"].cX-DataFilter-Search::-webkit-search-cancel-button {
|
|
|
4428
5376
|
outline-color: var(--cx-item-accent) !important;
|
|
4429
5377
|
}
|
|
4430
5378
|
.cX-DataFilter-ItemAccent input[type=checkbox].cX-Checkbox {
|
|
4431
|
-
|
|
5379
|
+
--cx-check-color: var(--cx-item-accent);
|
|
4432
5380
|
}
|
|
4433
5381
|
|
|
4434
5382
|
.cX-DataFilter-Head,
|
|
4435
5383
|
.cX-DataFilter-Head-Active {
|
|
4436
|
-
background: var(--cx-background-hover-color);
|
|
4437
|
-
border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
|
|
5384
|
+
background: var(--cx-background-hover-color, var(--cx-ui-accent-tint));
|
|
5385
|
+
border: 1px var(--cx-border-style) var(--cx-datatable-border-color, var(--cx-ui-border-accent));
|
|
4438
5386
|
border-radius: var(--cx-border-radius);
|
|
4439
5387
|
box-sizing: border-box;
|
|
4440
|
-
color: var(--cx-font-color);
|
|
5388
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
4441
5389
|
cursor: pointer;
|
|
4442
5390
|
display: flex;
|
|
4443
5391
|
align-items: center;
|
|
@@ -4463,18 +5411,18 @@ input[type="search"].cX-DataFilter-Search::-webkit-search-cancel-button {
|
|
|
4463
5411
|
}
|
|
4464
5412
|
|
|
4465
5413
|
svg.cX-DataFilter-Toolbar-Image {
|
|
4466
|
-
border: 1px var(--cx-border-style) var(--cx-datatable-border-color) !important;
|
|
5414
|
+
border: 1px var(--cx-border-style) var(--cx-datatable-border-color, var(--cx-ui-border-accent)) !important;
|
|
4467
5415
|
border-radius: var(--cx-border-radius) !important;
|
|
4468
5416
|
padding: 2px;
|
|
4469
5417
|
}
|
|
4470
5418
|
|
|
4471
5419
|
svg.cX-DataFilter-Toolbar-ImageNB {
|
|
4472
5420
|
border: none !important;
|
|
4473
|
-
z-index:
|
|
5421
|
+
z-index: var(--cx-z-popover);
|
|
4474
5422
|
}
|
|
4475
5423
|
|
|
4476
5424
|
.cX-DataFilter-Container-Mask-NoOverflow {
|
|
4477
|
-
border: 1px var(--cx-border-style) var(--cx-datatable-border-color);
|
|
5425
|
+
border: 1px var(--cx-border-style) var(--cx-datatable-border-color, var(--cx-ui-border-accent));
|
|
4478
5426
|
box-sizing: border-box;
|
|
4479
5427
|
margin: 5px;
|
|
4480
5428
|
overflow: hidden;
|
|
@@ -4483,21 +5431,21 @@ svg.cX-DataFilter-Toolbar-ImageNB {
|
|
|
4483
5431
|
input.cX-DataFilter-Container-Input-Left {
|
|
4484
5432
|
float: left;
|
|
4485
5433
|
margin: 10px;
|
|
4486
|
-
border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-
|
|
5434
|
+
border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-ui-border-accent));
|
|
4487
5435
|
border-radius: var(--cx-border-radius);
|
|
4488
5436
|
font-size: var(--cx-small-font-size);
|
|
4489
|
-
color: var(--cx-datafilter-text-color, var(--cx-
|
|
4490
|
-
background-color: var(--cx-datafilter-background-color, var(--cx-
|
|
5437
|
+
color: var(--cx-datafilter-text-color, var(--cx-ui-text));
|
|
5438
|
+
background-color: var(--cx-datafilter-background-color, var(--cx-ui-surface));
|
|
4491
5439
|
}
|
|
4492
5440
|
|
|
4493
5441
|
input.cX-DataFilter-Container-Input-Right {
|
|
4494
5442
|
float: right;
|
|
4495
5443
|
margin: 10px;
|
|
4496
|
-
border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-
|
|
5444
|
+
border: 1px var(--cx-border-style) var(--cx-datafilter-border-color, var(--cx-ui-border-accent));
|
|
4497
5445
|
border-radius: var(--cx-border-radius);
|
|
4498
5446
|
font-size: var(--cx-small-font-size);
|
|
4499
|
-
color: var(--cx-datafilter-text-color, var(--cx-
|
|
4500
|
-
background-color: var(--cx-datafilter-background-color, var(--cx-
|
|
5447
|
+
color: var(--cx-datafilter-text-color, var(--cx-ui-text));
|
|
5448
|
+
background-color: var(--cx-datafilter-background-color, var(--cx-ui-surface));
|
|
4501
5449
|
}
|
|
4502
5450
|
|
|
4503
5451
|
/* @category: widget */
|
|
@@ -4551,7 +5499,7 @@ label.cX-Toggle:hover div.cX-Toggle-Switch:before {
|
|
|
4551
5499
|
}
|
|
4552
5500
|
|
|
4553
5501
|
input.cX-Toggle:checked+div.cX-Toggle-Switch {
|
|
4554
|
-
background: var(--cx-toggle-switch-background-color);
|
|
5502
|
+
background: var(--cx-toggle-switch-background-color, var(--cx-ui-control-on));
|
|
4555
5503
|
}
|
|
4556
5504
|
|
|
4557
5505
|
input.cX-Toggle:checked+div.cX-Toggle-Switch:before {
|
|
@@ -4609,8 +5557,8 @@ input.cX-RangeSlider-Max {
|
|
|
4609
5557
|
border: none;
|
|
4610
5558
|
border-radius: var(--cx-border-radius);
|
|
4611
5559
|
font: var(--cx-font);
|
|
4612
|
-
color: var(--cx-font-color);
|
|
4613
|
-
background-color: var(--cx-background-widgets-color);
|
|
5560
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
5561
|
+
background-color: var(--cx-background-widgets-color, var(--cx-ui-surface));
|
|
4614
5562
|
height: 22px;
|
|
4615
5563
|
line-height: 100%;
|
|
4616
5564
|
width: calc(50% - 6px);
|
|
@@ -4627,14 +5575,14 @@ input.cX-RangeSlider-Max {
|
|
|
4627
5575
|
|
|
4628
5576
|
div.cX-RangeSlider {
|
|
4629
5577
|
position: relative;
|
|
4630
|
-
z-index:
|
|
5578
|
+
z-index: var(--cx-z-panel-active);
|
|
4631
5579
|
height: 8px;
|
|
4632
5580
|
margin: 0 15px;
|
|
4633
5581
|
}
|
|
4634
5582
|
|
|
4635
5583
|
div.cX-RangeSlider>div.cX-RangeSlider-Track {
|
|
4636
5584
|
position: absolute;
|
|
4637
|
-
z-index:
|
|
5585
|
+
z-index: var(--cx-z-panel-active);
|
|
4638
5586
|
left: 0;
|
|
4639
5587
|
right: 0;
|
|
4640
5588
|
top: 0;
|
|
@@ -4644,9 +5592,9 @@ div.cX-RangeSlider>div.cX-RangeSlider-Track {
|
|
|
4644
5592
|
}
|
|
4645
5593
|
|
|
4646
5594
|
div.cX-RangeSlider>div.cX-RangeSlider-Range {
|
|
4647
|
-
background-color: var(--cx-toggle-switch-background-color);
|
|
5595
|
+
background-color: var(--cx-toggle-switch-background-color, var(--cx-ui-control-on));
|
|
4648
5596
|
position: absolute;
|
|
4649
|
-
z-index:
|
|
5597
|
+
z-index: var(--cx-z-popover);
|
|
4650
5598
|
left: 0%;
|
|
4651
5599
|
right: 0%;
|
|
4652
5600
|
top: 0;
|
|
@@ -4666,8 +5614,8 @@ div.cX-RangeSlider>div.cX-RangeSlider-Thumb-Right {
|
|
|
4666
5614
|
|
|
4667
5615
|
div.cX-RangeSlider>div.cX-RangeSlider-Thumb-Left,
|
|
4668
5616
|
div.cX-RangeSlider>div.cX-RangeSlider-Thumb-Right {
|
|
4669
|
-
background-color: var(--cx-toggle-switch-background-color);
|
|
4670
|
-
box-shadow: 0 0 0 0 var(--cx-background-hover-color);
|
|
5617
|
+
background-color: var(--cx-toggle-switch-background-color, var(--cx-ui-control-on));
|
|
5618
|
+
box-shadow: 0 0 0 0 var(--cx-background-hover-color, var(--cx-ui-accent-tint));
|
|
4671
5619
|
}
|
|
4672
5620
|
|
|
4673
5621
|
div.cX-RangeSlider>div.cX-RangeSlider-Thumb-Left {
|
|
@@ -4682,7 +5630,7 @@ div.cX-RangeSlider>div.cX-RangeSlider-Thumb-Right {
|
|
|
4682
5630
|
|
|
4683
5631
|
div.cX-RangeSlider>div.cX-RangeSlider-Thumb-Left:hover,
|
|
4684
5632
|
div.cX-RangeSlider>div.cX-RangeSlider-Thumb-Right:hover {
|
|
4685
|
-
box-shadow: 0 0 0 10px var(--cx-background-hover-color);
|
|
5633
|
+
box-shadow: 0 0 0 10px var(--cx-background-hover-color, var(--cx-ui-accent-tint));
|
|
4686
5634
|
}
|
|
4687
5635
|
|
|
4688
5636
|
input[type=range].cX-Customizer-RightItemRangeSelect {
|
|
@@ -4702,7 +5650,7 @@ input[type=range].cX-Customizer-RightItemRangeSelect::-webkit-slider-thumb {
|
|
|
4702
5650
|
width: 15px;
|
|
4703
5651
|
height: 15px;
|
|
4704
5652
|
border-radius: 50%;
|
|
4705
|
-
background: var(--cx-toggle-switch-background-color);
|
|
5653
|
+
background: var(--cx-toggle-switch-background-color, var(--cx-ui-control-on));
|
|
4706
5654
|
cursor: pointer;
|
|
4707
5655
|
}
|
|
4708
5656
|
|
|
@@ -4710,22 +5658,22 @@ input[type=range].cX-Customizer-RightItemRangeSelect::-moz-range-thumb {
|
|
|
4710
5658
|
width: 15px;
|
|
4711
5659
|
height: 15px;
|
|
4712
5660
|
border-radius: 50%;
|
|
4713
|
-
background: var(--cx-toggle-switch-background-color);
|
|
5661
|
+
background: var(--cx-toggle-switch-background-color, var(--cx-ui-control-on));
|
|
4714
5662
|
cursor: pointer;
|
|
4715
5663
|
}
|
|
4716
5664
|
|
|
4717
|
-
input[type=range] {
|
|
5665
|
+
:where([data-cx-ui-scope]) input[type=range] {
|
|
4718
5666
|
position: absolute;
|
|
4719
5667
|
pointer-events: none;
|
|
4720
5668
|
appearance: none;
|
|
4721
5669
|
-webkit-appearance: none;
|
|
4722
|
-
z-index:
|
|
5670
|
+
z-index: var(--cx-z-popover);
|
|
4723
5671
|
height: 10px;
|
|
4724
5672
|
width: 100%;
|
|
4725
5673
|
opacity: 0;
|
|
4726
5674
|
}
|
|
4727
5675
|
|
|
4728
|
-
input[type=range]::-webkit-slider-thumb {
|
|
5676
|
+
:where([data-cx-ui-scope]) input[type=range]::-webkit-slider-thumb {
|
|
4729
5677
|
pointer-events: all;
|
|
4730
5678
|
width: 30px;
|
|
4731
5679
|
height: 30px;
|
|
@@ -4755,13 +5703,13 @@ span.cX-RangeSlider-Ticks {
|
|
|
4755
5703
|
display: flex;
|
|
4756
5704
|
justify-content: center;
|
|
4757
5705
|
width: 1px;
|
|
4758
|
-
background: var(--cx-toggle-switch-background-color);
|
|
5706
|
+
background: var(--cx-toggle-switch-background-color, var(--cx-ui-control-on));
|
|
4759
5707
|
margin-bottom: 10px;
|
|
4760
5708
|
}
|
|
4761
5709
|
|
|
4762
5710
|
span.cX-RangeSlider-Ticks-Long,
|
|
4763
5711
|
span.cX-RangeSlider-Ticks-Long-Small {
|
|
4764
|
-
color: var(--cx-font-color);
|
|
5712
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
4765
5713
|
height: 10px;
|
|
4766
5714
|
line-height: 35px;
|
|
4767
5715
|
font-size: var(--cx-small-font-size);
|
|
@@ -4776,7 +5724,7 @@ span.cX-RangeSlider-Ticks {
|
|
|
4776
5724
|
* Input type number
|
|
4777
5725
|
*/
|
|
4778
5726
|
|
|
4779
|
-
input[type=number]::-webkit-inner-spin-button {
|
|
5727
|
+
:where([data-cx-ui-scope]) input[type=number]::-webkit-inner-spin-button {
|
|
4780
5728
|
appearance: none;
|
|
4781
5729
|
-webkit-appearance: none;
|
|
4782
5730
|
}
|
|
@@ -4802,12 +5750,12 @@ div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar-button {
|
|
|
4802
5750
|
/*div.cX-DataFilter-Content::-webkit-scrollbar-track,*/
|
|
4803
5751
|
div.cX-DataFilter-Container-Mask::-webkit-scrollbar-track,
|
|
4804
5752
|
div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar-track {
|
|
4805
|
-
background-color: var(--cx-background-widgets-color);
|
|
5753
|
+
background-color: var(--cx-background-widgets-color, var(--cx-ui-surface));
|
|
4806
5754
|
}
|
|
4807
5755
|
|
|
4808
5756
|
div.cX-DataTable-Horizontal-Scrollbar::-webkit-scrollbar-track,
|
|
4809
5757
|
div.cX-DataTable-Vertical-Scrollbar::-webkit-scrollbar-track {
|
|
4810
|
-
background-color: var(--cx-background-hover-color);
|
|
5758
|
+
background-color: var(--cx-background-hover-color, var(--cx-ui-accent-tint));
|
|
4811
5759
|
border-radius: var(--cx-border-radius);
|
|
4812
5760
|
}
|
|
4813
5761
|
|
|
@@ -4818,7 +5766,7 @@ div.cX-DataTable-Vertical-Scrollbar::-webkit-scrollbar-track:hover,
|
|
|
4818
5766
|
/*div.cX-DataFilter-Content::-webkit-scrollbar-track:hover,*/
|
|
4819
5767
|
div.cX-DataFilter-Container-Mask::-webkit-scrollbar-track:hover,
|
|
4820
5768
|
div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar-track:hover {
|
|
4821
|
-
background-color: var(--cx-background-hover-color);
|
|
5769
|
+
background-color: var(--cx-background-hover-color, var(--cx-ui-accent-tint));
|
|
4822
5770
|
border-radius: var(--cx-border-radius);
|
|
4823
5771
|
}
|
|
4824
5772
|
|
|
@@ -4829,14 +5777,14 @@ div.cX-DataFilter-Container-Mask::-webkit-scrollbar,
|
|
|
4829
5777
|
div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar {
|
|
4830
5778
|
width: 8px;
|
|
4831
5779
|
height: 8px;
|
|
4832
|
-
background-color: var(--cx-scrollbar-background-color);
|
|
5780
|
+
background-color: var(--cx-scrollbar-background-color, var(--cx-ui-scrollbar-track));
|
|
4833
5781
|
}
|
|
4834
5782
|
|
|
4835
5783
|
div.cX-DataTable-Horizontal-Scrollbar::-webkit-scrollbar,
|
|
4836
5784
|
div.cX-DataTable-Vertical-Scrollbar::-webkit-scrollbar {
|
|
4837
5785
|
width: 8px;
|
|
4838
5786
|
height: 8px;
|
|
4839
|
-
background-color: var(--cx-scrollbar-alt-background-color);
|
|
5787
|
+
background-color: var(--cx-scrollbar-alt-background-color, var(--cx-ui-scrollbar-track-alt));
|
|
4840
5788
|
}
|
|
4841
5789
|
|
|
4842
5790
|
/* All tracks thumbs */
|
|
@@ -4846,7 +5794,7 @@ div.cX-DataTable-Vertical-Scrollbar::-webkit-scrollbar-thumb,
|
|
|
4846
5794
|
/*div.cX-DataFilter-Content::-webkit-scrollbar-thumb,*/
|
|
4847
5795
|
div.cX-DataFilter-Container-Mask::-webkit-scrollbar-thumb,
|
|
4848
5796
|
div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar-thumb {
|
|
4849
|
-
background-color: var(--cx-scrollbar-thumb-color);
|
|
5797
|
+
background-color: var(--cx-scrollbar-thumb-color, var(--cx-ui-scrollbar-thumb));
|
|
4850
5798
|
border-radius: var(--cx-border-radius);
|
|
4851
5799
|
border: none;
|
|
4852
5800
|
}
|
|
@@ -4856,13 +5804,13 @@ div.cX-DataTable-Vertical-Scrollbar::-webkit-scrollbar-thumb:hover,
|
|
|
4856
5804
|
/*div.cX-DataFilter-Content::-webkit-scrollbar-thumb:hover,*/
|
|
4857
5805
|
div.cX-DataFilter-Container-Mask::-webkit-scrollbar-thumb:hover,
|
|
4858
5806
|
div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar-thumb:hover {
|
|
4859
|
-
background-color: var(--cx-scrollbar-thumb-hover-color);
|
|
5807
|
+
background-color: var(--cx-scrollbar-thumb-hover-color, var(--cx-ui-scrollbar-thumb-hover));
|
|
4860
5808
|
}
|
|
4861
5809
|
|
|
4862
5810
|
.cX-DataFilter::selection,
|
|
4863
5811
|
.cX-DataFilter-Toolbar::selection {
|
|
4864
5812
|
background: var(--cx-color-transparent);
|
|
4865
|
-
color: var(--cx-font-color);
|
|
5813
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
4866
5814
|
}
|
|
4867
5815
|
/* @category: widget */
|
|
4868
5816
|
/*****************
|
|
@@ -4871,20 +5819,20 @@ div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar-thumb:hover {
|
|
|
4871
5819
|
|
|
4872
5820
|
.cX-Menu-Container {
|
|
4873
5821
|
position: sticky;
|
|
4874
|
-
z-index:
|
|
5822
|
+
z-index: var(--cx-z-modal);
|
|
4875
5823
|
background: transparent;
|
|
4876
5824
|
height: 0px;
|
|
4877
5825
|
}
|
|
4878
5826
|
|
|
4879
5827
|
.cX-Menu {
|
|
4880
5828
|
box-sizing: border-box;
|
|
4881
|
-
background-color: var(--cx-context-menu-background-color, var(--cx-
|
|
5829
|
+
background-color: var(--cx-context-menu-background-color, var(--cx-ui-surface));
|
|
4882
5830
|
background-image: url(data:image/gif;base64,R0lGODlh+gABAIcAAOLj4/Dw8P///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAP8ALAAAAAD6AAEAAAgfAAMIHEiwoMGBAAQcXMiwocOHECNKnEixosWLGCMGBAA7);
|
|
4883
5831
|
background-repeat: repeat-y;
|
|
4884
|
-
border: 1px var(--cx-border-style) var(--cx-context-menu-border-color, var(--cx-
|
|
5832
|
+
border: 1px var(--cx-border-style) var(--cx-context-menu-border-color, var(--cx-ui-border-accent));
|
|
4885
5833
|
border-radius: var(--cx-border-radius);
|
|
4886
5834
|
box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
|
|
4887
|
-
color: var(--cx-context-menu-text-color, var(--cx-
|
|
5835
|
+
color: var(--cx-context-menu-text-color, var(--cx-ui-text));
|
|
4888
5836
|
font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
|
|
4889
5837
|
line-height: 100%;
|
|
4890
5838
|
margin: 0px;
|
|
@@ -4895,11 +5843,11 @@ div.cX-DataFilter-Container-Mask-NoOverflow::-webkit-scrollbar-thumb:hover {
|
|
|
4895
5843
|
|
|
4896
5844
|
.cX-Menu-Sub {
|
|
4897
5845
|
box-sizing: border-box;
|
|
4898
|
-
background-color: var(--cx-context-menu-background-color, var(--cx-
|
|
4899
|
-
border: 1px var(--cx-border-style) var(--cx-context-menu-border-color, var(--cx-
|
|
5846
|
+
background-color: var(--cx-context-menu-background-color, var(--cx-ui-surface));
|
|
5847
|
+
border: 1px var(--cx-border-style) var(--cx-context-menu-border-color, var(--cx-ui-border-accent));
|
|
4900
5848
|
border-radius: var(--cx-border-radius);
|
|
4901
5849
|
box-shadow: rgba(154, 154, 154, 0.2) 3px 3px;
|
|
4902
|
-
color: var(--cx-context-menu-text-color, var(--cx-
|
|
5850
|
+
color: var(--cx-context-menu-text-color, var(--cx-ui-text));
|
|
4903
5851
|
font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
|
|
4904
5852
|
line-height: 100%;
|
|
4905
5853
|
margin: 0px;
|
|
@@ -4921,7 +5869,7 @@ ul.cX-Menu-List {
|
|
|
4921
5869
|
.cX-Menu-Item-Sep {
|
|
4922
5870
|
display: block;
|
|
4923
5871
|
font: var(--cx-font);
|
|
4924
|
-
color: var(--cx-font-color);
|
|
5872
|
+
color: var(--cx-font-color, var(--cx-ui-text));
|
|
4925
5873
|
font-size: 1px;
|
|
4926
5874
|
height: 100%;
|
|
4927
5875
|
line-height: 1px;
|
|
@@ -4932,7 +5880,7 @@ ul.cX-Menu-List {
|
|
|
4932
5880
|
white-space: nowrap;
|
|
4933
5881
|
}
|
|
4934
5882
|
|
|
4935
|
-
input[type=file] {
|
|
5883
|
+
:where([data-cx-ui-scope]) input[type=file] {
|
|
4936
5884
|
display: block;
|
|
4937
5885
|
}
|
|
4938
5886
|
|
|
@@ -4943,7 +5891,7 @@ input[type=file] {
|
|
|
4943
5891
|
cursor: default;
|
|
4944
5892
|
display: block;
|
|
4945
5893
|
font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
|
|
4946
|
-
color: var(--cx-context-menu-text-color, var(--cx-
|
|
5894
|
+
color: var(--cx-context-menu-text-color, var(--cx-ui-text));
|
|
4947
5895
|
height: 100%;
|
|
4948
5896
|
line-height: 100%;
|
|
4949
5897
|
list-style: none;
|
|
@@ -4960,8 +5908,8 @@ input[type=file] {
|
|
|
4960
5908
|
|
|
4961
5909
|
.cX-Menu-Item:hover,
|
|
4962
5910
|
.cX-Menu-Item-Active {
|
|
4963
|
-
background: var(--cx-context-menu-hover-color,
|
|
4964
|
-
border-color: var(--cx-context-menu-border-color,
|
|
5911
|
+
background: var(--cx-context-menu-hover-color, var(--cx-ui-accent-tint));
|
|
5912
|
+
border-color: var(--cx-context-menu-border-color, var(--cx-ui-border-accent));
|
|
4965
5913
|
}
|
|
4966
5914
|
|
|
4967
5915
|
.cX-Menu-Item-Active > :first-child,
|
|
@@ -5047,7 +5995,7 @@ input[type=file] {
|
|
|
5047
5995
|
}
|
|
5048
5996
|
|
|
5049
5997
|
.cX-Menu-Item-Scroll-Search {
|
|
5050
|
-
color: var(--cx-context-menu-text-color, var(--cx-
|
|
5998
|
+
color: var(--cx-context-menu-text-color, var(--cx-ui-text));
|
|
5051
5999
|
cursor: default;
|
|
5052
6000
|
font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
|
|
5053
6001
|
line-height: 24px;
|
|
@@ -5063,7 +6011,7 @@ input[type=file] {
|
|
|
5063
6011
|
border-color: rgba(0, 0, 0, 0);
|
|
5064
6012
|
border-style: solid;
|
|
5065
6013
|
border-width: 0px 1px;
|
|
5066
|
-
color: var(--cx-context-menu-text-color, var(--cx-
|
|
6014
|
+
color: var(--cx-context-menu-text-color, var(--cx-ui-text));
|
|
5067
6015
|
cursor: pointer;
|
|
5068
6016
|
display: flex;
|
|
5069
6017
|
font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
|
|
@@ -5079,10 +6027,10 @@ input[type=file] {
|
|
|
5079
6027
|
}
|
|
5080
6028
|
|
|
5081
6029
|
.cX-Menu-Item-A-Active {
|
|
5082
|
-
border-color: var(--cx-context-menu-border-color,
|
|
6030
|
+
border-color: var(--cx-context-menu-border-color, var(--cx-ui-border-accent));
|
|
5083
6031
|
border-style: solid;
|
|
5084
6032
|
border-width: 0px 1px;
|
|
5085
|
-
color: var(--cx-context-menu-text-color, var(--cx-
|
|
6033
|
+
color: var(--cx-context-menu-text-color, var(--cx-ui-text));
|
|
5086
6034
|
cursor: pointer;
|
|
5087
6035
|
display: flex;
|
|
5088
6036
|
font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
|
|
@@ -5102,7 +6050,7 @@ input[type=file] {
|
|
|
5102
6050
|
border-color: rgba(0, 0, 0, 0);
|
|
5103
6051
|
border-style: solid;
|
|
5104
6052
|
border-width: 0px 1px;
|
|
5105
|
-
color: var(--cx-context-menu-text-color, var(--cx-
|
|
6053
|
+
color: var(--cx-context-menu-text-color, var(--cx-ui-text));
|
|
5106
6054
|
cursor: pointer;
|
|
5107
6055
|
display: flex;
|
|
5108
6056
|
font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
|
|
@@ -5119,10 +6067,10 @@ input[type=file] {
|
|
|
5119
6067
|
|
|
5120
6068
|
.cX-Menu-Item-A-Arrow-Active {
|
|
5121
6069
|
background: url(data:image/gif;base64,R0lGODlhDAAJAIcAACluvipxvzJ1vyxwwCt1yjp6zkD/QDiC1jmE0zyE0z2I3UeLyUGJ2VWUzlKg7FSg6Weg1WKq8Y7D9orD/JXL/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAMAAAYALAAAAAAMAAkAAAgzAA8YGEiwoAEFCQwaJEABgUKCBCRMYPDQAIEHESAIeEjAQYMAFQksAFDR4oCSBgqgNBAQADs=) no-repeat scroll right 50% transparent;
|
|
5122
|
-
border-color: var(--cx-context-menu-border-color,
|
|
6070
|
+
border-color: var(--cx-context-menu-border-color, var(--cx-ui-border-accent));
|
|
5123
6071
|
border-style: solid;
|
|
5124
6072
|
border-width: 0px 1px;
|
|
5125
|
-
color: var(--cx-context-menu-text-color, var(--cx-
|
|
6073
|
+
color: var(--cx-context-menu-text-color, var(--cx-ui-text));
|
|
5126
6074
|
cursor: pointer;
|
|
5127
6075
|
display: flex;
|
|
5128
6076
|
font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
|
|
@@ -5140,7 +6088,7 @@ input[type=file] {
|
|
|
5140
6088
|
.cX-Menu-List-Icon {
|
|
5141
6089
|
background-position: center;
|
|
5142
6090
|
border: 0px none !important;
|
|
5143
|
-
color: var(--cx-context-menu-text-color, var(--cx-
|
|
6091
|
+
color: var(--cx-context-menu-text-color, var(--cx-ui-text));
|
|
5144
6092
|
cursor: pointer;
|
|
5145
6093
|
font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
|
|
5146
6094
|
height: 24px;
|
|
@@ -5159,7 +6107,7 @@ input[type=file] {
|
|
|
5159
6107
|
}
|
|
5160
6108
|
|
|
5161
6109
|
.cX-Menu-Item-Text {
|
|
5162
|
-
color: var(--cx-context-menu-text-color, var(--cx-
|
|
6110
|
+
color: var(--cx-context-menu-text-color, var(--cx-ui-text));
|
|
5163
6111
|
cursor: pointer;
|
|
5164
6112
|
font: var(--cx-context-menu-font-size, var(--cx-small-font-size)) var(--cx-font-family);
|
|
5165
6113
|
line-height: 24px;
|
|
@@ -5172,7 +6120,7 @@ span.cX-Menu-Item-Text {
|
|
|
5172
6120
|
}
|
|
5173
6121
|
|
|
5174
6122
|
.cX-Menu-Item-Text-Short {
|
|
5175
|
-
color: var(--cx-context-menu-text-color, var(--cx-
|
|
6123
|
+
color: var(--cx-context-menu-text-color, var(--cx-ui-text));
|
|
5176
6124
|
cursor: pointer;
|
|
5177
6125
|
float: right;
|
|
5178
6126
|
font: var(--cx-small-font-italic);
|
|
@@ -5184,12 +6132,12 @@ span.cX-Menu-Item-Text {
|
|
|
5184
6132
|
}
|
|
5185
6133
|
|
|
5186
6134
|
.cX-Menu-Item-Text-Sep {
|
|
5187
|
-
background-color: var(--cx-context-menu-hover-color,
|
|
6135
|
+
background-color: var(--cx-context-menu-hover-color, var(--cx-ui-accent-tint));
|
|
5188
6136
|
border-bottom: 1px solid;
|
|
5189
6137
|
border-bottom-color: rgb(255, 255, 255);
|
|
5190
6138
|
display: block;
|
|
5191
6139
|
font: var(--cx-small-font-size) var(--cx-font-family);
|
|
5192
|
-
color: var(--cx-context-menu-text-color, var(--cx-
|
|
6140
|
+
color: var(--cx-context-menu-text-color, var(--cx-ui-text));
|
|
5193
6141
|
font-size: 1px;
|
|
5194
6142
|
line-height: 1px;
|
|
5195
6143
|
list-style: none;
|
|
@@ -5214,7 +6162,7 @@ span.cX-Menu-Item-Text {
|
|
|
5214
6162
|
font-weight: bold;
|
|
5215
6163
|
pointer-events: none;
|
|
5216
6164
|
opacity: 0;
|
|
5217
|
-
z-index:
|
|
6165
|
+
z-index: var(--cx-z-panel-active);
|
|
5218
6166
|
transition: opacity var(--cx-transition-speed) linear;
|
|
5219
6167
|
}
|
|
5220
6168
|
|
|
@@ -5225,7 +6173,7 @@ span.cX-Menu-Item-Text {
|
|
|
5225
6173
|
/* 8-POINT RESIZER STYLES */
|
|
5226
6174
|
.cX-Resizer {
|
|
5227
6175
|
position: absolute;
|
|
5228
|
-
z-index:
|
|
6176
|
+
z-index: var(--cx-z-resizer);
|
|
5229
6177
|
background: transparent;
|
|
5230
6178
|
}
|
|
5231
6179
|
|
|
@@ -5310,7 +6258,7 @@ body.has-fullscreen {
|
|
|
5310
6258
|
visibility: visible;
|
|
5311
6259
|
width: 100%;
|
|
5312
6260
|
height: 100%;
|
|
5313
|
-
z-index: -
|
|
6261
|
+
z-index: var(--cx-z-behind);
|
|
5314
6262
|
}
|
|
5315
6263
|
|
|
5316
6264
|
.cX-Viewer-Drag,
|
|
@@ -5332,7 +6280,7 @@ body.has-fullscreen {
|
|
|
5332
6280
|
.cX-DOM:fullscreen {
|
|
5333
6281
|
width: 100vw;
|
|
5334
6282
|
height: 100vh;
|
|
5335
|
-
background-color:
|
|
6283
|
+
background-color: var(--cx-ui-surface);
|
|
5336
6284
|
overflow-y: auto;
|
|
5337
6285
|
}
|
|
5338
6286
|
|
|
@@ -5346,7 +6294,7 @@ body.has-fullscreen {
|
|
|
5346
6294
|
top: 0 !important;
|
|
5347
6295
|
left: 0 !important;
|
|
5348
6296
|
margin: 0 !important;
|
|
5349
|
-
z-index:
|
|
6297
|
+
z-index: var(--cx-z-base);
|
|
5350
6298
|
background: transparent !important;
|
|
5351
6299
|
}
|
|
5352
6300
|
|
|
@@ -5383,9 +6331,9 @@ body.has-fullscreen {
|
|
|
5383
6331
|
top: 0 !important;
|
|
5384
6332
|
left: 0 !important;
|
|
5385
6333
|
margin: 0 !important;
|
|
5386
|
-
z-index:
|
|
6334
|
+
z-index: var(--cx-z-fullscreen);
|
|
5387
6335
|
border-radius: 0;
|
|
5388
|
-
background:
|
|
6336
|
+
background: var(--cx-ui-surface) !important;
|
|
5389
6337
|
height: 100vh !important;
|
|
5390
6338
|
width: 100vw !important;
|
|
5391
6339
|
}
|
|
@@ -5446,7 +6394,7 @@ body.has-fullscreen {
|
|
|
5446
6394
|
width: 25px;
|
|
5447
6395
|
height: 25px;
|
|
5448
6396
|
background: transparent;
|
|
5449
|
-
z-index:
|
|
6397
|
+
z-index: var(--cx-z-panel);
|
|
5450
6398
|
pointer-events: auto;
|
|
5451
6399
|
}
|
|
5452
6400
|
|
|
@@ -5454,12 +6402,12 @@ body.has-fullscreen {
|
|
|
5454
6402
|
position: absolute;
|
|
5455
6403
|
left: 32px;
|
|
5456
6404
|
top: 32px;
|
|
5457
|
-
border: var(--cx-border);
|
|
6405
|
+
border: var(--cx-border, 1px solid var(--cx-ui-border-accent));
|
|
5458
6406
|
border-radius: 10px;
|
|
5459
6407
|
padding: 8px;
|
|
5460
|
-
background:
|
|
6408
|
+
background: var(--cx-ui-surface);
|
|
5461
6409
|
opacity: 0;
|
|
5462
|
-
z-index:
|
|
6410
|
+
z-index: var(--cx-z-toolbar-edge);
|
|
5463
6411
|
transition: all var(--cx-transition-speed) ease;
|
|
5464
6412
|
overflow: hidden;
|
|
5465
6413
|
white-space: nowrap;
|
|
@@ -5472,10 +6420,26 @@ body.has-fullscreen {
|
|
|
5472
6420
|
pointer-events: auto;
|
|
5473
6421
|
}
|
|
5474
6422
|
|
|
6423
|
+
/*
|
|
6424
|
+
* A chart whose widgets are dark (its theme is cxdark / cxblue / auto on a dark OS, or widgetsTheme)
|
|
6425
|
+
* paints its root with the dark surface: the HTML widgets, primitives and translucent tints around
|
|
6426
|
+
* the canvas would otherwise sit on the host page (usually white). Only the chart's OWN theme does
|
|
6427
|
+
* this; inside a dark container (a dark dashboard) the container provides the backdrop.
|
|
6428
|
+
*/
|
|
6429
|
+
.cX-DOM[data-cx-ui-theme="dark"] {
|
|
6430
|
+
background-color: var(--cx-ui-surface);
|
|
6431
|
+
}
|
|
6432
|
+
|
|
6433
|
+
@media (prefers-color-scheme: dark) {
|
|
6434
|
+
.cX-DOM[data-cx-ui-theme="auto"] {
|
|
6435
|
+
background-color: var(--cx-ui-surface);
|
|
6436
|
+
}
|
|
6437
|
+
}
|
|
6438
|
+
|
|
5475
6439
|
/* HTML Widget Container */
|
|
5476
6440
|
|
|
5477
6441
|
.cX-Container-HTMLWidget {
|
|
5478
|
-
z-index:
|
|
6442
|
+
z-index: var(--cx-z-modal);
|
|
5479
6443
|
background: transparent;
|
|
5480
6444
|
width: 100%;
|
|
5481
6445
|
height: 100%;
|
|
@@ -5483,6 +6447,62 @@ body.has-fullscreen {
|
|
|
5483
6447
|
overflow: auto;
|
|
5484
6448
|
}
|
|
5485
6449
|
|
|
6450
|
+
/*
|
|
6451
|
+
* HTML widgets (htmlWidget: radio / dropdown / range above the chart). The container is
|
|
6452
|
+
* .cX-Container-HTMLWidgets (plural, viewport.js); the singular rule above never matched and is
|
|
6453
|
+
* kept as-is (fixing it would change z-index/overflow) until the dead-selector cleanup.
|
|
6454
|
+
* These used to inherit the host page's font (Times, 24px h2). They now follow the UI primitives
|
|
6455
|
+
* (05-ui-primitives.css): field-label titles, a .cX-Select-style dropdown, accent radios.
|
|
6456
|
+
*/
|
|
6457
|
+
.cX-Container-HTMLWidgets {
|
|
6458
|
+
color: var(--cx-ui-text);
|
|
6459
|
+
font-family: var(--cx-font-sans);
|
|
6460
|
+
font-size: var(--cx-font-size-md);
|
|
6461
|
+
}
|
|
6462
|
+
|
|
6463
|
+
h2.CanvasXpressSelectDropdown,
|
|
6464
|
+
h2.CanvasXpressRadioGroup {
|
|
6465
|
+
margin: var(--cx-space-4) 0 var(--cx-space-2);
|
|
6466
|
+
color: var(--cx-ui-text);
|
|
6467
|
+
font-size: var(--cx-font-size-lg);
|
|
6468
|
+
font-weight: var(--cx-font-weight-bold);
|
|
6469
|
+
}
|
|
6470
|
+
|
|
6471
|
+
select.CanvasXpressSelectDropdown {
|
|
6472
|
+
min-width: 140px;
|
|
6473
|
+
border: 1px solid var(--cx-ui-border);
|
|
6474
|
+
border-radius: var(--cx-radius-md);
|
|
6475
|
+
background: var(--cx-ui-surface);
|
|
6476
|
+
color: var(--cx-ui-text);
|
|
6477
|
+
font-family: var(--cx-font-sans);
|
|
6478
|
+
font-size: var(--cx-font-size-md);
|
|
6479
|
+
}
|
|
6480
|
+
|
|
6481
|
+
select.CanvasXpressSelectDropdown:focus {
|
|
6482
|
+
border-color: var(--cx-ui-focus);
|
|
6483
|
+
outline: 2px solid var(--cx-ui-accent-tint);
|
|
6484
|
+
}
|
|
6485
|
+
|
|
6486
|
+
form.CanvasXpressRadioGroup {
|
|
6487
|
+
display: flex;
|
|
6488
|
+
flex-wrap: wrap;
|
|
6489
|
+
row-gap: var(--cx-space-2);
|
|
6490
|
+
}
|
|
6491
|
+
|
|
6492
|
+
label.CanvasXpressRadioGroup {
|
|
6493
|
+
display: inline-flex;
|
|
6494
|
+
align-items: center;
|
|
6495
|
+
gap: var(--cx-space-2);
|
|
6496
|
+
color: var(--cx-ui-text);
|
|
6497
|
+
font-size: var(--cx-font-size-md);
|
|
6498
|
+
cursor: pointer;
|
|
6499
|
+
}
|
|
6500
|
+
|
|
6501
|
+
label.CanvasXpressRadioGroup > input[type=radio] {
|
|
6502
|
+
margin: 0;
|
|
6503
|
+
cursor: pointer;
|
|
6504
|
+
}
|
|
6505
|
+
|
|
5486
6506
|
/******************
|
|
5487
6507
|
* End Viewport *
|
|
5488
6508
|
******************/
|
|
@@ -5496,14 +6516,14 @@ Licensed under the MIT license
|
|
|
5496
6516
|
Copyright (c) 2018 Christian Pucci
|
|
5497
6517
|
*/
|
|
5498
6518
|
|
|
5499
|
-
.magictime {
|
|
6519
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).magictime {
|
|
5500
6520
|
-webkit-animation-duration: var(--cx-animation-speed);
|
|
5501
6521
|
animation-duration: var(--cx-animation-speed);
|
|
5502
6522
|
-webkit-animation-fill-mode: both;
|
|
5503
6523
|
animation-fill-mode: both;
|
|
5504
6524
|
}
|
|
5505
6525
|
|
|
5506
|
-
.holeIn {
|
|
6526
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).holeIn {
|
|
5507
6527
|
-webkit-animation-name: holeIn;
|
|
5508
6528
|
animation-name: holeIn;
|
|
5509
6529
|
}
|
|
@@ -5544,7 +6564,7 @@ Copyright (c) 2018 Christian Pucci
|
|
|
5544
6564
|
}
|
|
5545
6565
|
}
|
|
5546
6566
|
|
|
5547
|
-
.holeOut {
|
|
6567
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).holeOut {
|
|
5548
6568
|
-webkit-animation-name: holeOut;
|
|
5549
6569
|
animation-name: holeOut;
|
|
5550
6570
|
}
|
|
@@ -5585,7 +6605,7 @@ Copyright (c) 2018 Christian Pucci
|
|
|
5585
6605
|
}
|
|
5586
6606
|
}
|
|
5587
6607
|
|
|
5588
|
-
.slideLeft {
|
|
6608
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).slideLeft {
|
|
5589
6609
|
-webkit-animation-name: slideLeft;
|
|
5590
6610
|
animation-name: slideLeft;
|
|
5591
6611
|
}
|
|
@@ -5622,7 +6642,7 @@ Copyright (c) 2018 Christian Pucci
|
|
|
5622
6642
|
}
|
|
5623
6643
|
}
|
|
5624
6644
|
|
|
5625
|
-
.slideUp {
|
|
6645
|
+
:where([data-cx-ui-scope], [data-cx-ui-scope] *).slideUp {
|
|
5626
6646
|
-webkit-animation-name: slideUp;
|
|
5627
6647
|
animation-name: slideUp;
|
|
5628
6648
|
}
|