@cloud-app-dev/vidc 3.0.45 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/.umirc.ts +2 -104
  2. package/es/ThemeAntd/demo.d.ts +2 -0
  3. package/es/ThemeAntd/demo.js +60 -0
  4. package/es/ThemeAntd/index.css +117 -133
  5. package/es/ThemeAntd/style/checkbox.css +17 -17
  6. package/es/ThemeAntd/style/input.css +23 -17
  7. package/es/ThemeAntd/style/pagination.css +22 -12
  8. package/es/ThemeAntd/style/picker.css +14 -14
  9. package/es/ThemeAntd/style/radio.css +24 -21
  10. package/es/ThemeAntd/style/select.css +17 -16
  11. package/package.json +1 -1
  12. package/theme-config.ts +107 -0
  13. package/es/ThemeAntd/style/table.css +0 -36
package/.umirc.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { defineConfig } from 'dumi';
2
2
  import path from 'path';
3
+ import { themeConfig } from './theme-config';
3
4
 
4
5
  const token =
5
6
  'eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDEwMTAwMDQ0NSIsImV4dCI6MTY2NTc0ODU1OTg5MSwidWlkIjoiMTAxMDAwMDAwNjk5IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA1MTgsMTAwMDAwMTEwNzI4XSwidmFsaWRUaW1lIjoxNzA0MzgzOTk5MDAwLCJvcHRDZW50ZXJJZCI6IjEwMDEwMDAwMDIzMyIsInVzZXJUeXBlIjoxMDA3MDQsImlhdCI6MTY2NTQ4OTM1OTg5MX0.zxxxxoaKjyO6CJhi2cs06gTOtjdLgPA9UI7zAQ0zzss';
@@ -51,110 +52,7 @@ export default defineConfig({
51
52
  }
52
53
  : undefined,
53
54
  scripts: ['//at.alicdn.com/t/font_1724012_972m5d05cou.js'],
54
- styles: [
55
- `:root{
56
- --primary: #248FFA;
57
- --primary-light: #248FFA;
58
- --primary-dark: #227BD5;
59
- --secondary1: #6D8EFB;
60
- --secondary1-light: #86A2FF;
61
- --secondary1-dark: #5D7FF0;
62
- --secondary2: #33AAFF;
63
- --secondary2-light: #61BDFF;
64
- --secondary2-dark: #2194E5;
65
- --secondary3: #F3A75F;
66
- --secondary3-light: #F8B578;
67
- --secondary3-dark: #DC914C;
68
- --danger: #F32D37;
69
- --danger-light: #FF4D4F;
70
- --danger-dark: #DC1B2A;
71
- --warn: #FD8535;
72
- --warn-light: #FF9F5E;
73
- --warn-dark: #DC1B2A;
74
- --success: #35BD77;
75
- --success-light: #55C98D;
76
- --success-dark: #21965A;
77
- --gray1: #FFFFFF;
78
- --gray2: #F3F3F3;
79
- --gray3: #EEEEEE;
80
- --gray4: #E7E7E7;
81
- --gray5: #DCDCDC;
82
- --gray6: #C5C5C5;
83
- --gray7: #A6A6A6;
84
- --gray8: #8B8B8B;
85
- --gray9: #777777;
86
- --gray10: #5E5E5E;
87
- --gray11: #4B4B4B;
88
- --gray12: #383838;
89
- --background: #348fe2;
90
- --icon:#62708B;
91
- --fs: 14px;
92
- --fs-small: 12px;
93
- --fs-large: 20px;
94
- --color: rgba(0,0,0,1);
95
- --color-dark: #000000;
96
- --color-light: rgba(255,255,255,1);
97
- --color-disabled: rgba(0,0,0,0.26);
98
- --shadow1: 2px 0 10px 0 rgba(0,0,0,0.06);
99
- --shadow2: 2px 0 10px 0 rgba(0,0,0,0.06);
100
- --shadow3: 2px 0 10px 0 rgba(0,0,0,0.06);
101
- --radius1: 4px;
102
- --radius2: 8px;
103
- --radius3: 16px;
104
- --header-color: #FFFFFF;
105
- --header-bg: #348fe2;
106
- --header-height: 66px;
107
- --nav-height: 66px;
108
- --nav-bg: #348fe2;
109
- --nav-sub-bg: rgba(255,255,255,1);
110
- --nav-sub-bg2: rgba(241,244,247,0.8);
111
- --nav-item-bg-selected: #FFFFFF;
112
- --nav-item-color: #FFFFFF;
113
- --nav-icon-color: rgba(255, 255, 255, 0.4);
114
- --nav-icon-color-selected: #3495EF;
115
- --nav-item-bg: #348fe2;
116
- --nav-item-color-selected: rgba(0, 0, 0, 0.9);
117
- --nav-sub-item-bg-selected: #F3F5F6;
118
- --nav-sub-item-color-selected: #348fe2;
119
- --nav-sub-item-color: rgba(0, 0, 0, 0.9);
120
- --nav-bd-color: rgba(0,0,0,0);
121
- --tab-height: 34px;
122
- --tab-bg: #348fe2;
123
- --tab-item-bg: #348fe2;
124
- --tab-item-height: 34px;
125
- --tab-item-color: #FFFFFF;
126
- --tab-item-selected-bg: #F3F5F6;
127
- --tab-item-selected-color: rgba(0, 0, 0, 0.9);
128
- --drawer-title-height: 48px;
129
- --drawer-title-bg: rgba(255,255,255,1);
130
- --drawer-divider-color: rgba(219,225,234,1);
131
- --drawer-footer-height: 44px;
132
- --drawer-footer-bg: rgba(255,255,255,1);
133
- --drawer-content-bg: rgba(243,246,249,1);
134
- --modal-title-height: 44px;
135
- --modal-title-bg: #ffffff;
136
- --modal-divider-color: rgba(219,225,234,1);
137
- --modal-footer-height: 44px;
138
- --modal-footer-bg: rgba(243,246,249,1);
139
- --modal-content-bg: rgba(243,246,249,1);
140
- --card-image-radius: 4px;
141
- --card-image-bg: rgba(219,225,234,1);
142
- --card-radius: 4px;
143
- --card-content-bg: rgba(255,255,255,1);
144
- --card-shadow: 0 0 4px 0 rgba(0,0,0,0.2);
145
- --card-bd-color: rgba(219,225,234,1);
146
- --card-hover-bd-color: rgba(18,122,255,1);
147
- --card-footer-bg: rgba(219,225,234,1);
148
- --content-bg: #ffffff;
149
- --scrollbar-width: 8px;
150
- --scrollbar-track-bg: rgba(239,241,244,1);
151
- --scrollbar-thumb-bg: rgba(185,193,203,1);
152
- --scrollbar-thumb-hover-bg: rgba(195,209,229,1);
153
- --scrollbar-track-shadow: 0 0 3px 0 rgba(255, 255, 255, 0.1) inset;
154
- --scrollbar-thumb-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3) inset;
155
- }
156
- `,
157
- ],
55
+ styles: [themeConfig],
158
56
 
159
57
  // more config: https://d.umijs.org/config
160
58
  });
package/es/ThemeAntd/demo.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const App: () => JSX.Element;
2
+ export default App;
package/es/ThemeAntd/demo.js ADDED
@@ -0,0 +1,60 @@
1
+ import "antd/lib/button/style";
2
+ import _Button from "antd/lib/button";
3
+ import "antd/lib/pagination/style";
4
+ import _Pagination from "antd/lib/pagination";
5
+ import "antd/lib/date-picker/style";
6
+ import _DatePicker from "antd/lib/date-picker";
7
+ import "antd/lib/checkbox/style";
8
+ import _Checkbox from "antd/lib/checkbox";
9
+ import "antd/lib/radio/style";
10
+ import _Radio from "antd/lib/radio";
11
+ import "antd/lib/select/style";
12
+ import _Select from "antd/lib/select";
13
+ import "antd/lib/input-number/style";
14
+ import _InputNumber from "antd/lib/input-number";
15
+ import "antd/lib/input/style";
16
+ import _Input from "antd/lib/input";
17
+ import "antd/lib/config-provider/style";
18
+ import _ConfigProvider from "antd/lib/config-provider";
19
+ import React from 'react';
20
+ import ThemeAntd from '.';
21
+
22
+ var App = function App() {
23
+ return /*#__PURE__*/React.createElement(_ConfigProvider, {
24
+ prefixCls: "cloudapp"
25
+ }, /*#__PURE__*/React.createElement(ThemeAntd, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(_Input, {
26
+ placeholder: "\u6587\u672C\u8F93\u5165",
27
+ prefix: /*#__PURE__*/React.createElement("div", null, "111"),
28
+ suffix: /*#__PURE__*/React.createElement("div", null, "2222")
29
+ })), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(_Input, {
30
+ placeholder: "\u6587\u672C\u8F93\u5165"
31
+ })), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(_InputNumber, {
32
+ placeholder: "\u6570\u5B57\u8F93\u5165"
33
+ })), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(_Input.TextArea, {
34
+ placeholder: "\u591A\u884C\u6587\u672C\u8F93\u5165"
35
+ })), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(_Select, {
36
+ placeholder: "\u9009\u62E9\u8F93\u5165"
37
+ }, /*#__PURE__*/React.createElement(_Select.Option, {
38
+ value: 1
39
+ }, "\u9009\u98791"), /*#__PURE__*/React.createElement(_Select.Option, {
40
+ value: 2
41
+ }, "\u9009\u98792"))), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(_Radio.Group, null, /*#__PURE__*/React.createElement(_Radio, {
42
+ value: 1
43
+ }, "\u9009\u98791"), /*#__PURE__*/React.createElement(_Radio, {
44
+ value: 2
45
+ }, "\u9009\u98792"))), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(_Checkbox.Group, null, /*#__PURE__*/React.createElement(_Checkbox, {
46
+ value: 1
47
+ }, "\u9009\u98791"), /*#__PURE__*/React.createElement(_Checkbox, {
48
+ value: 2
49
+ }, "\u9009\u98792"))), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(_DatePicker, null)), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(_DatePicker.RangePicker, null)), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(_Pagination, {
50
+ total: 100
51
+ })), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(_Button, null, "\u6309\u94AE1"), /*#__PURE__*/React.createElement("span", {
52
+ style: {
53
+ paddingRight: 10
54
+ }
55
+ }), /*#__PURE__*/React.createElement(_Button, {
56
+ type: "primary"
57
+ }, "\u6309\u94AE2")))));
58
+ };
59
+
60
+ export default App;
package/es/ThemeAntd/index.css CHANGED
@@ -48,13 +48,13 @@ div .cloudapp-checkbox {
48
48
  color: inherit;
49
49
  }
50
50
  div .cloudapp-checkbox-checked .cloudapp-checkbox-inner {
51
- border-color: var(--primary);
52
- background-color: var(--primary);
51
+ border-color: var(--form-active-bg);
52
+ background-color: var(--form-active-bg);
53
53
  }
54
54
  div .cloudapp-checkbox-inner {
55
55
  border-radius: var(--redius1);
56
- background-color: var(--gray1);
57
- border-color: var(--gray3);
56
+ background-color: var(--form-bg);
57
+ border-color: var(--form-bd);
58
58
  }
59
59
  div .cloudapp-checkbox-wrapper {
60
60
  color: inherit;
@@ -64,46 +64,46 @@ div .cloudapp-checkbox-disabled + span {
64
64
  opacity: 0.8;
65
65
  }
66
66
  div .cloudapp-checkbox-disabled.cloudapp-checkbox-checked .cloudapp-checkbox-inner::after {
67
- border-color: var(--gray3);
67
+ border-color: var(--form-bd);
68
68
  }
69
69
  div .cloudapp-checkbox-wrapper:hover .cloudapp-checkbox-inner,
70
70
  div .cloudapp-checkbox:hover .cloudapp-checkbox-inner,
71
71
  div .cloudapp-checkbox-input:focus + .cloudapp-checkbox-inner {
72
- border-color: var(--primary);
72
+ border-color: var(--form-active-bg);
73
73
  }
74
74
  div .cloudapp-checkbox-indeterminate .cloudapp-checkbox-inner::after {
75
- background-color: var(--primary);
75
+ background-color: var(--form-active-bg);
76
76
  }
77
77
  div .cloudapp-checkbox-disabled .cloudapp-checkbox-inner {
78
- background-color: var(--gray1);
78
+ background-color: var(--form-bg);
79
79
  opacity: 0.8;
80
80
  }
81
81
  div .cloudapp-checkbox-indeterminate .cloudapp-checkbox-inner {
82
82
  background-color: #fff;
83
- border-color: var(--bd-color) !important;
83
+ border-color: var(--form-bd) !important;
84
84
  }
85
85
  div .cloudapp-tree-checkbox-inner {
86
- border-color: var(--gray3);
86
+ border-color: var(--form-bd);
87
87
  border-radius: var(--redius1);
88
88
  }
89
89
  div .cloudapp-tree-checkbox-wrapper:hover .cloudapp-tree-checkbox-inner,
90
90
  div .cloudapp-tree-checkbox:hover .cloudapp-tree-checkbox-inner,
91
91
  div .cloudapp-tree-checkbox-input:focus + .cloudapp-tree-checkbox-inner {
92
- border-color: var(--primary);
92
+ border-color: var(--form-active-bg);
93
93
  }
94
94
  div .cloudapp-tree-checkbox-checked .cloudapp-tree-checkbox-inner {
95
- border-color: var(--primary);
96
- background-color: var(--primary);
95
+ border-color: var(--form-active-bg);
96
+ background-color: var(--form-active-bg);
97
97
  }
98
98
  div .cloudapp-tree-checkbox-disabled .cloudapp-tree-checkbox-inner {
99
- background-color: var(--bg-lv1);
100
- border-color: var(--gray3);
99
+ background-color: var(--form-bg);
100
+ border-color: var(--form-bd);
101
101
  }
102
102
  div .cloudapp-tree-checkbox-indeterminate .cloudapp-tree-checkbox-inner::after {
103
- background-color: var(--primary);
103
+ background-color: var(--form-active-bg);
104
104
  }
105
105
  div .cloudapp-checkbox-checked::after {
106
- border-color: var(--primary);
106
+ border-color: var(--form-active-bg);
107
107
  }
108
108
  div .cloudapp-checkbox-group {
109
109
  color: inherit;
@@ -121,56 +121,62 @@ div .cloudapp-form-item {
121
121
  div .cloudapp-input {
122
122
  color: inherit;
123
123
  border-radius: var(--redius1);
124
- border-color: var(--gray3);
125
- background-color: var(--gray1);
124
+ border-color: var(--form-bd);
125
+ background-color: var(--form-bg);
126
+ }
127
+ div .cloudapp-input-affix-wrapper:not(.cloudapp-input-affix-wrapper-disabled):hover {
128
+ border-color: var(--form-active-bg);
126
129
  }
127
130
  div .cloudapp-input:hover {
128
- border-color: var(--primary);
131
+ border-color: var(--form-active-bg);
129
132
  }
130
133
  div .cloudapp-input:focus,
131
134
  div .cloudapp-input-focused {
132
- border-color: var(--primary);
135
+ border-color: var(--form-active-bg);
136
+ box-shadow: unset;
133
137
  }
134
138
  div .cloudapp-input-affix-wrapper {
135
- background-color: var(--gray1);
139
+ background-color: var(--form-bg);
136
140
  color: inherit;
137
141
  border-radius: var(--redius1);
138
- border-color: var(--gray3);
142
+ border-color: var(--form-bd);
139
143
  }
140
144
  div .cloudapp-input-affix-wrapper:hover {
141
- border-color: var(--primary);
145
+ border-color: var(--form-active-bg);
142
146
  }
143
147
  div .cloudapp-input-affix-wrapper:focus,
144
148
  div .cloudapp-input-affix-wrapper-focused {
145
- border-color: var(--primary);
149
+ border-color: var(--form-active-bg);
150
+ box-shadow: unset;
146
151
  }
147
152
  div .cloudapp-input[disabled] {
148
- background-color: var(--gray1);
153
+ background-color: var(--form-bd);
149
154
  color: inherit;
150
- border-color: var(--gray3);
155
+ border-color: var(--form-bd);
151
156
  opacity: 0.7;
152
157
  }
153
158
  div .cloudapp-input-number {
154
159
  color: inherit;
155
160
  border-radius: var(--redius1);
156
- border-color: var(--gray3);
157
- background-color: var(--gray1);
161
+ border-color: var(--form-bd);
162
+ background-color: var(--form-bg);
158
163
  }
159
164
  div .cloudapp-input-number:hover {
160
- border-color: var(--primary);
165
+ border-color: var(--form-active-bg);
161
166
  }
162
167
  div .cloudapp-input-number:focus,
163
168
  div .cloudapp-input-number-focused {
164
- border-color: var(--primary);
169
+ border-color: var(--form-active-bg);
170
+ box-shadow: unset;
165
171
  }
166
172
  div .cloudapp-input-number-handler-wrap {
167
- border-radius: 0 var(--form-redius) var(--form-redius) 0;
168
- background-color: var(--gray1);
173
+ border-radius: 0 var(--redius1) var(---redius1) 0;
174
+ background-color: var(--form-bg);
169
175
  color: inherit;
170
176
  }
171
177
  div .cloudapp-input-number-handler {
172
178
  color: inherit;
173
- border-top-color: var(--gray3);
179
+ border-top-color: var(--form-bd);
174
180
  }
175
181
  div .cloudapp-input-number-handler-up-inner,
176
182
  div .cloudapp-input-number-handler-down-inner {
@@ -189,65 +195,75 @@ div .cloudapp-pagination-jump-next {
189
195
  div .cloudapp-pagination-prev .cloudapp-pagination-item-link,
190
196
  div .cloudapp-pagination-next .cloudapp-pagination-item-link {
191
197
  border-radius: var(--redius1);
198
+ background-color: var(--form-bg);
199
+ border-color: var(--form-bd);
200
+ }
201
+ div .cloudapp-pagination-jump-prev .cloudapp-pagination-item-container .cloudapp-pagination-item-link-icon,
202
+ div .cloudapp-pagination-jump-next .cloudapp-pagination-item-container .cloudapp-pagination-item-link-icon {
203
+ color: var(--form-active-bg);
192
204
  }
193
205
  div .cloudapp-pagination-item {
194
206
  border-radius: var(--redius1);
207
+ background-color: var(--form-bg);
208
+ border-color: var(--form-bd);
195
209
  }
196
210
  div .cloudapp-pagination-item-active {
197
- border-color: var(--primary);
211
+ border-color: var(--form-active-bg);
212
+ background-color: var(--form-active-bg);
198
213
  }
199
214
  div .cloudapp-pagination-item-active a {
200
- color: var(--primary);
215
+ color: #fff;
201
216
  }
202
217
  div .cloudapp-pagination-item:focus,
203
218
  div .cloudapp-pagination-item:hover {
204
- border-color: var(--primary);
219
+ border-color: var(--form-active-bg);
220
+ background-color: var(--form-active-bg);
205
221
  }
206
222
  div .cloudapp-pagination-item:focus a,
207
223
  div .cloudapp-pagination-item:hover a {
208
- color: var(--primary);
224
+ color: #fff;
209
225
  }
210
- div .cloudapp-pagination-prev:focus .cloudapp-pagination-item-link,
211
- div .cloudapp-pagination-next:focus .cloudapp-pagination-item-link,
212
- div .cloudapp-pagination-prev:hover .cloudapp-pagination-item-link,
213
- div .cloudapp-pagination-next:hover .cloudapp-pagination-item-link {
214
- color: var(--primary);
215
- border-color: var(--primary);
226
+ div .cloudapp-pagination-prev:focus:not(.cloudapp-pagination-disabled) .cloudapp-pagination-item-link,
227
+ div .cloudapp-pagination-next:focus:not(.cloudapp-pagination-disabled) .cloudapp-pagination-item-link,
228
+ div .cloudapp-pagination-prev:hover:not(.cloudapp-pagination-disabled) .cloudapp-pagination-item-link,
229
+ div .cloudapp-pagination-next:hover:not(.cloudapp-pagination-disabled) .cloudapp-pagination-item-link {
230
+ background-color: var(--form-active-bg);
231
+ border-color: var(--form-active-bg);
232
+ color: #fff;
216
233
  }
217
234
  div .cloudapp-pagination-disabled .cloudapp-pagination-item-link,
218
235
  div .cloudapp-pagination-disabled:hover .cloudapp-pagination-item-link,
219
236
  div .cloudapp-pagination-disabled:focus .cloudapp-pagination-item-link {
220
- border-color: var(--gray8);
221
- color: var(--gray8);
237
+ border-color: var(--form-bd);
222
238
  }
223
239
  div .cloudapp-picker {
224
- background-color: var(--gray1);
240
+ background-color: var(--form-bg);
225
241
  border-radius: var(--radius1);
226
242
  color: inherit;
227
243
  }
228
244
  div .cloudapp-picker:hover,
229
245
  div .cloudapp-picker-focused {
230
- border-color: var(--primary);
246
+ border-color: var(--form-active-bg);
231
247
  }
232
248
  div .cloudapp-picker-suffix {
233
249
  color: inherit;
234
250
  }
235
251
  div .cloudapp-picker-panel {
236
- background-color: var(--gray1);
237
- border-color: var(--gray3);
252
+ background-color: var(--form-bg);
253
+ border-color: var(--form-bd);
238
254
  }
239
255
  div .cloudapp-picker-panel .cloudapp-picker-footer {
240
- border-color: var(--gray3);
256
+ border-color: var(--form-bd);
241
257
  }
242
258
  div .cloudapp-picker-header {
243
- border-bottom-color: var(--gray3);
259
+ border-bottom-color: var(--form-bd);
244
260
  color: inherit;
245
261
  }
246
262
  div .cloudapp-picker-header button {
247
263
  color: inherit;
248
264
  }
249
265
  div .cloudapp-picker-panel-container {
250
- background-color: var(--gray1);
266
+ background-color: var(--form-bg);
251
267
  }
252
268
  div .cloudapp-picker-dropdown {
253
269
  color: inherit;
@@ -265,7 +281,7 @@ div .cloudapp-picker-content th {
265
281
  color: inherit;
266
282
  }
267
283
  div .cloudapp-picker-today-btn {
268
- color: var(--primary);
284
+ color: var(--form-active-bg);
269
285
  }
270
286
  div .cloudapp-picker-cell .cloudapp-picker-cell-inner {
271
287
  border-radius: var(--radius1);
@@ -275,26 +291,26 @@ div .cloudapp-picker-cell-in-view.cloudapp-picker-cell-today .cloudapp-picker-ce
275
291
  }
276
292
  div .cloudapp-picker-cell:hover:not(.cloudapp-picker-cell-in-view) .cloudapp-picker-cell-inner,
277
293
  div .cloudapp-picker-cell:hover:not(.cloudapp-picker-cell-selected):not(.cloudapp-picker-cell-range-start):not(.cloudapp-picker-cell-range-end):not(.cloudapp-picker-cell-range-hover-start):not(.cloudapp-picker-cell-range-hover-end) .cloudapp-picker-cell-inner {
278
- background-color: var(--form-bg-dark);
294
+ background-color: var(--form-bg);
279
295
  }
280
296
  div .cloudapp-picker-input > input {
281
297
  color: inherit;
282
298
  }
283
299
  div .cloudapp-picker-range-arrow::after {
284
- border-color: var(--gray1);
300
+ border-color: var(--form-bd);
285
301
  }
286
302
  div .cloudapp-picker-cell-in-view.cloudapp-picker-cell-selected .cloudapp-picker-cell-inner,
287
303
  div .cloudapp-picker-cell-in-view.cloudapp-picker-cell-range-start .cloudapp-picker-cell-inner,
288
304
  div .cloudapp-picker-cell-in-view.cloudapp-picker-cell-range-end .cloudapp-picker-cell-inner {
289
- background-color: var(--primary);
305
+ background-color: var(--form-active-bg);
290
306
  }
291
307
  div .cloudapp-picker-cell-in-view.cloudapp-picker-cell-range-start:not(.cloudapp-picker-cell-range-start-single)::before,
292
308
  div .cloudapp-picker-cell-in-view.cloudapp-picker-cell-range-end:not(.cloudapp-picker-cell-range-end-single)::before {
293
- background-color: var(--primary);
309
+ background-color: var(--form-active-bg);
294
310
  opacity: 0.8;
295
311
  }
296
312
  div .cloudapp-picker-cell-in-view.cloudapp-picker-cell-in-range::before {
297
- background-color: var(--primary);
313
+ background-color: var(--form-active-bg);
298
314
  opacity: 0.8;
299
315
  }
300
316
  div .cloudapp-picker-focused .cloudapp-picker-separator {
@@ -304,7 +320,7 @@ div .cloudapp-picker-separator {
304
320
  color: inherit;
305
321
  }
306
322
  div .cloudapp-picker-range .cloudapp-picker-active-bar {
307
- background-color: var(--primary);
323
+ background-color: var(--form-active-bg);
308
324
  }
309
325
  div .cloudapp-popover-inner {
310
326
  border-radius: var(--redius1);
@@ -313,38 +329,38 @@ div .cloudapp-radio-button-wrapper {
313
329
  outline: unset;
314
330
  }
315
331
  div .cloudapp-radio-button-wrapper-checked:not(.cloudapp-radio-button-wrapper-disabled):hover {
316
- border-color: var(--primary);
317
- color: var(--primary);
332
+ border-color: var(--form-active-bg);
333
+ color: var(--form-active-bg);
318
334
  }
319
335
  div .cloudapp-radio-button-wrapper-checked:not(.cloudapp-radio-button-wrapper-disabled) {
320
- border-color: var(--primary);
321
- color: var(--primary);
322
- box-shadow: -1px 0 0 0 var(--primary);
336
+ border-color: var(--form-active-bg);
337
+ color: var(--form-active-bg);
338
+ box-shadow: -1px 0 0 0 var(--form-active-bg);
323
339
  }
324
340
  div .cloudapp-radio-button-wrapper-checked:not(.cloudapp-radio-button-wrapper-disabled):first-child {
325
- border-color: var(--primary);
341
+ border-color: var(--form-active-bg);
326
342
  }
327
343
  div .cloudapp-radio-disabled .cloudapp-radio-inner::after {
328
- background-color: var(--gray3);
344
+ background-color: var(--form-bg);
329
345
  }
330
346
  div .cloudapp-radio-disabled .cloudapp-radio-inner {
331
- background-color: var(--gray1);
347
+ background-color: var(--form-bg);
332
348
  opacity: 0.8;
333
349
  }
334
350
  div .cloudapp-radio-button-wrapper:hover {
335
- color: var(--primary);
351
+ color: var(--form-active-bg);
336
352
  }
337
353
  div .cloudapp-radio-checked .cloudapp-radio-inner {
338
- border-color: var(--primary);
354
+ border-color: var(--form-active-bg);
339
355
  }
340
356
  div .cloudapp-radio-inner {
341
- background-color: var(--gray1);
357
+ background-color: var(--form-bg);
342
358
  }
343
359
  div .cloudapp-radio-inner::after {
344
- background-color: var(--primary);
360
+ background-color: var(--form-active-bg);
345
361
  }
346
362
  div .cloudapp-radio-checked::after {
347
- border-color: var(--primary);
363
+ border-color: var(--form-active-bg);
348
364
  }
349
365
  div .cloudapp-radio-wrapper {
350
366
  color: inherit;
@@ -356,23 +372,23 @@ div .cloudapp-radio-disabled + span {
356
372
  div .cloudapp-radio-wrapper:hover .cloudapp-radio,
357
373
  div .cloudapp-radio:hover .cloudapp-radio-inner,
358
374
  div .cloudapp-radio-input:focus + .cloudapp-radio-inner {
359
- border-color: var(--primary);
375
+ border-color: var(--form-active-bg);
360
376
  }
361
377
  div .cloudapp-radio-button-wrapper-checked:not(.cloudapp-radio-button-wrapper-disabled)::before {
362
- background-color: var(--primary) !important;
378
+ background-color: var(--form-active-bg) !important;
363
379
  opacity: unset;
364
380
  }
365
381
  div .cloudapp-radio-group-solid .cloudapp-radio-button-wrapper-checked:not(.cloudapp-radio-button-wrapper-disabled) {
366
- background-color: var(--primary);
367
- border-color: var(--primary);
382
+ background-color: var(--form-active-bg);
383
+ border-color: var(--form-active-bg);
368
384
  }
369
385
  div .cloudapp-radio-group-solid .cloudapp-radio-button-wrapper-checked:not(.cloudapp-radio-button-wrapper-disabled):hover {
370
- background-color: var(--primary-dark);
371
- border-color: var(--primary-dark);
372
- box-shadow: -1px 0 0 0 var(--primary);
386
+ background-color: var(--form-active-bg-dark);
387
+ border-color: var(--form-active-bg-dark);
388
+ box-shadow: -1px 0 0 0 var(--form-active-bg);
373
389
  }
374
390
  div .cloudapp-radio-button-wrapper-checked:not([class*=' cloudapp-radio-button-wrapper-disabled']).cloudapp-radio-button-wrapper:first-child {
375
- border-right-color: var(--primary);
391
+ border-right-color: var(--form-active-bg);
376
392
  }
377
393
  div .cloudapp-radio-button-wrapper:last-child {
378
394
  border-radius: 0 var(--form-redius) var(--form-redius) 0;
@@ -380,6 +396,9 @@ div .cloudapp-radio-button-wrapper:last-child {
380
396
  div .cloudapp-radio-button-wrapper:first-child {
381
397
  border-radius: var(--form-redius) 0 0 var(--redius1);
382
398
  }
399
+ div .cloudapp-radio-input:focus + .cloudapp-radio-inner {
400
+ box-shadow: unset;
401
+ }
383
402
  ::-webkit-scrollbar {
384
403
  width: 8px;
385
404
  height: 8px;
@@ -401,33 +420,33 @@ div .cloudapp-radio-button-wrapper:first-child {
401
420
  }
402
421
  div .cloudapp-select-single:not(.cloudapp-select-customize-input) .cloudapp-select-selector {
403
422
  border-radius: var(--redius1);
404
- border-color: var(--gray3);
405
- background-color: var(--gray1);
423
+ border-color: var(--form-bd);
424
+ background-color: var(--form-bg);
406
425
  }
407
426
  div .cloudapp-select-multiple .cloudapp-select-selector {
408
427
  border-radius: var(--redius1);
409
- border-color: var(--gray3);
410
- background-color: var(--gray1);
428
+ border-color: var(--form-bd);
429
+ background-color: var(--form-bg);
411
430
  }
412
431
  div .cloudapp-select-multiple .cloudapp-select-selection-item {
413
432
  border-radius: var(--redius1);
414
- border-color: var(--gray3);
415
- background-color: var(--gray1);
433
+ border-color: var(--form-bd);
434
+ background-color: var(--form-bg);
416
435
  }
417
436
  div .cloudapp-select:not(.cloudapp-select-disabled):hover .cloudapp-select-selector {
418
- border-color: var(--primary);
437
+ border-color: var(--form-active-bg);
419
438
  }
420
439
  div .cloudapp-select-focused.cloudapp-select-single:not(.cloudapp-select-customize-input) .cloudapp-select-selector {
421
- border-color: var(--primary);
440
+ border-color: var(--form-active-bg);
422
441
  }
423
442
  div .cloudapp-select-focused.cloudapp-select-multiple .cloudapp-select-selector {
424
- border-color: var(--primary);
443
+ border-color: var(--form-active-bg);
425
444
  }
426
445
  div .cloudapp-select-multiple .cloudapp-select-selection-item-remove {
427
446
  color: inherit;
428
447
  }
429
448
  div .cloudapp-select-multiple .cloudapp-select-selection-item-remove:hover {
430
- color: var(--primary);
449
+ color: var(--form-active-bg);
431
450
  }
432
451
  div .cloudapp-select {
433
452
  color: inherit;
@@ -437,60 +456,25 @@ div .cloudapp-select-arrow {
437
456
  color: inherit;
438
457
  }
439
458
  div .cloudapp-select-dropdown {
440
- background-color: var(--gray1);
459
+ background-color: var(--form-bg);
441
460
  color: inherit;
442
461
  }
443
462
  div .cloudapp-select-item {
444
463
  color: inherit;
445
464
  }
446
465
  div .cloudapp-select-item-option-active:not(.cloudapp-select-item-option-disabled) {
447
- background-color: var(--form-bg-dark);
466
+ background-color: var(--form-bg);
448
467
  }
449
468
  div .cloudapp-select-item-option-selected:not(.cloudapp-select-item-option-disabled) .cloudapp-select-item-option-state {
450
- color: var(--primary);
469
+ color: var(--form-active-bg);
451
470
  }
452
471
  div .cloudapp-select-item-option-selected:not(.cloudapp-select-item-option-disabled) {
453
- color: var(--primary);
454
- background-color: var(--gray8);
472
+ color: var(--form-active-bg);
473
+ background-color: transparent;
455
474
  }
456
475
  div .cloudapp-select-focused:not(.cloudapp-select-disabled).cloudapp-select-single:not(.cloudapp-select-customize-input) .cloudapp-select-selector {
457
- border-color: var(--primary);
458
- }
459
- div .cloudapp-table {
460
- background-color: var(--table-bg);
461
- color: inherit;
462
- font-size: var(--fs);
463
- }
464
- div .cloudapp-table-tbody > tr.cloudapp-table-row:hover > td {
465
- background: var(--table-row-hover-color);
466
- }
467
- div .cloudapp-table-thead > tr > th:not(.cloudapp-table-cell-scrollbar) {
468
- background-color: var(--table-head-bg);
469
- border-bottom-color: var(--table-bd);
470
- color: inherit;
471
- }
472
- div .cloudapp-table-thead > tr > th.cloudapp-table-cell-scrollbar {
473
- box-shadow: none;
474
- background-color: var(--table-head-bg);
475
- }
476
- div .cloudapp-table-cell-fix-left,
477
- div .cloudapp-table-cell-fix-right {
478
- background-color: var(--table-bg);
479
- }
480
- div .cloudapp-table-tbody > tr > td {
481
- border-bottom-color: var(--table-bd);
482
- }
483
- div tr.cloudapp-table-expanded-row > td,
484
- div tr.cloudapp-table-expanded-row:hover > td {
485
- background-color: var(--table-row-hover-color);
486
- }
487
- div .cloudapp-table-row-expand-icon {
488
- border-radius: var(--redius1);
489
- color: var(--primary);
490
- }
491
- div .cloudapp-table-row-expand-icon:focus,
492
- div .cloudapp-table-row-expand-icon:hover {
493
- color: var(--primary-dark);
476
+ border-color: var(--form-active-bg);
477
+ box-shadow: unset;
494
478
  }
495
479
  div .cloudapp-tree {
496
480
  color: inherit;
package/es/ThemeAntd/style/checkbox.css CHANGED
@@ -2,13 +2,13 @@ div .cloudapp-checkbox {
2
2
  color: inherit;
3
3
  }
4
4
  div .cloudapp-checkbox-checked .cloudapp-checkbox-inner {
5
- border-color: var(--primary);
6
- background-color: var(--primary);
5
+ border-color: var(--form-active-bg);
6
+ background-color: var(--form-active-bg);
7
7
  }
8
8
  div .cloudapp-checkbox-inner {
9
9
  border-radius: var(--redius1);
10
- background-color: var(--gray1);
11
- border-color: var(--gray3);
10
+ background-color: var(--form-bg);
11
+ border-color: var(--form-bd);
12
12
  }
13
13
  div .cloudapp-checkbox-wrapper {
14
14
  color: inherit;
@@ -18,46 +18,46 @@ div .cloudapp-checkbox-disabled + span {
18
18
  opacity: 0.8;
19
19
  }
20
20
  div .cloudapp-checkbox-disabled.cloudapp-checkbox-checked .cloudapp-checkbox-inner::after {
21
- border-color: var(--gray3);
21
+ border-color: var(--form-bd);
22
22
  }
23
23
  div .cloudapp-checkbox-wrapper:hover .cloudapp-checkbox-inner,
24
24
  div .cloudapp-checkbox:hover .cloudapp-checkbox-inner,
25
25
  div .cloudapp-checkbox-input:focus + .cloudapp-checkbox-inner {
26
- border-color: var(--primary);
26
+ border-color: var(--form-active-bg);
27
27
  }
28
28
  div .cloudapp-checkbox-indeterminate .cloudapp-checkbox-inner::after {
29
- background-color: var(--primary);
29
+ background-color: var(--form-active-bg);
30
30
  }
31
31
  div .cloudapp-checkbox-disabled .cloudapp-checkbox-inner {
32
- background-color: var(--gray1);
32
+ background-color: var(--form-bg);
33
33
  opacity: 0.8;
34
34
  }
35
35
  div .cloudapp-checkbox-indeterminate .cloudapp-checkbox-inner {
36
36
  background-color: #fff;
37
- border-color: var(--bd-color) !important;
37
+ border-color: var(--form-bd) !important;
38
38
  }
39
39
  div .cloudapp-tree-checkbox-inner {
40
- border-color: var(--gray3);
40
+ border-color: var(--form-bd);
41
41
  border-radius: var(--redius1);
42
42
  }
43
43
  div .cloudapp-tree-checkbox-wrapper:hover .cloudapp-tree-checkbox-inner,
44
44
  div .cloudapp-tree-checkbox:hover .cloudapp-tree-checkbox-inner,
45
45
  div .cloudapp-tree-checkbox-input:focus + .cloudapp-tree-checkbox-inner {
46
- border-color: var(--primary);
46
+ border-color: var(--form-active-bg);
47
47
  }
48
48
  div .cloudapp-tree-checkbox-checked .cloudapp-tree-checkbox-inner {
49
- border-color: var(--primary);
50
- background-color: var(--primary);
49
+ border-color: var(--form-active-bg);
50
+ background-color: var(--form-active-bg);
51
51
  }
52
52
  div .cloudapp-tree-checkbox-disabled .cloudapp-tree-checkbox-inner {
53
- background-color: var(--bg-lv1);
54
- border-color: var(--gray3);
53
+ background-color: var(--form-bg);
54
+ border-color: var(--form-bd);
55
55
  }
56
56
  div .cloudapp-tree-checkbox-indeterminate .cloudapp-tree-checkbox-inner::after {
57
- background-color: var(--primary);
57
+ background-color: var(--form-active-bg);
58
58
  }
59
59
  div .cloudapp-checkbox-checked::after {
60
- border-color: var(--primary);
60
+ border-color: var(--form-active-bg);
61
61
  }
62
62
  div .cloudapp-checkbox-group {
63
63
  color: inherit;
package/es/ThemeAntd/style/input.css CHANGED
@@ -1,56 +1,62 @@
1
1
  div .cloudapp-input {
2
2
  color: inherit;
3
3
  border-radius: var(--redius1);
4
- border-color: var(--gray3);
5
- background-color: var(--gray1);
4
+ border-color: var(--form-bd);
5
+ background-color: var(--form-bg);
6
+ }
7
+ div .cloudapp-input-affix-wrapper:not(.cloudapp-input-affix-wrapper-disabled):hover {
8
+ border-color: var(--form-active-bg);
6
9
  }
7
10
  div .cloudapp-input:hover {
8
- border-color: var(--primary);
11
+ border-color: var(--form-active-bg);
9
12
  }
10
13
  div .cloudapp-input:focus,
11
14
  div .cloudapp-input-focused {
12
- border-color: var(--primary);
15
+ border-color: var(--form-active-bg);
16
+ box-shadow: unset;
13
17
  }
14
18
  div .cloudapp-input-affix-wrapper {
15
- background-color: var(--gray1);
19
+ background-color: var(--form-bg);
16
20
  color: inherit;
17
21
  border-radius: var(--redius1);
18
- border-color: var(--gray3);
22
+ border-color: var(--form-bd);
19
23
  }
20
24
  div .cloudapp-input-affix-wrapper:hover {
21
- border-color: var(--primary);
25
+ border-color: var(--form-active-bg);
22
26
  }
23
27
  div .cloudapp-input-affix-wrapper:focus,
24
28
  div .cloudapp-input-affix-wrapper-focused {
25
- border-color: var(--primary);
29
+ border-color: var(--form-active-bg);
30
+ box-shadow: unset;
26
31
  }
27
32
  div .cloudapp-input[disabled] {
28
- background-color: var(--gray1);
33
+ background-color: var(--form-bd);
29
34
  color: inherit;
30
- border-color: var(--gray3);
35
+ border-color: var(--form-bd);
31
36
  opacity: 0.7;
32
37
  }
33
38
  div .cloudapp-input-number {
34
39
  color: inherit;
35
40
  border-radius: var(--redius1);
36
- border-color: var(--gray3);
37
- background-color: var(--gray1);
41
+ border-color: var(--form-bd);
42
+ background-color: var(--form-bg);
38
43
  }
39
44
  div .cloudapp-input-number:hover {
40
- border-color: var(--primary);
45
+ border-color: var(--form-active-bg);
41
46
  }
42
47
  div .cloudapp-input-number:focus,
43
48
  div .cloudapp-input-number-focused {
44
- border-color: var(--primary);
49
+ border-color: var(--form-active-bg);
50
+ box-shadow: unset;
45
51
  }
46
52
  div .cloudapp-input-number-handler-wrap {
47
- border-radius: 0 var(--form-redius) var(--form-redius) 0;
48
- background-color: var(--gray1);
53
+ border-radius: 0 var(--redius1) var(---redius1) 0;
54
+ background-color: var(--form-bg);
49
55
  color: inherit;
50
56
  }
51
57
  div .cloudapp-input-number-handler {
52
58
  color: inherit;
53
- border-top-color: var(--gray3);
59
+ border-top-color: var(--form-bd);
54
60
  }
55
61
  div .cloudapp-input-number-handler-up-inner,
56
62
  div .cloudapp-input-number-handler-down-inner {
package/es/ThemeAntd/style/pagination.css CHANGED
@@ -11,34 +11,44 @@ div .cloudapp-pagination-jump-next {
11
11
  div .cloudapp-pagination-prev .cloudapp-pagination-item-link,
12
12
  div .cloudapp-pagination-next .cloudapp-pagination-item-link {
13
13
  border-radius: var(--redius1);
14
+ background-color: var(--form-bg);
15
+ border-color: var(--form-bd);
16
+ }
17
+ div .cloudapp-pagination-jump-prev .cloudapp-pagination-item-container .cloudapp-pagination-item-link-icon,
18
+ div .cloudapp-pagination-jump-next .cloudapp-pagination-item-container .cloudapp-pagination-item-link-icon {
19
+ color: var(--form-active-bg);
14
20
  }
15
21
  div .cloudapp-pagination-item {
16
22
  border-radius: var(--redius1);
23
+ background-color: var(--form-bg);
24
+ border-color: var(--form-bd);
17
25
  }
18
26
  div .cloudapp-pagination-item-active {
19
- border-color: var(--primary);
27
+ border-color: var(--form-active-bg);
28
+ background-color: var(--form-active-bg);
20
29
  }
21
30
  div .cloudapp-pagination-item-active a {
22
- color: var(--primary);
31
+ color: #fff;
23
32
  }
24
33
  div .cloudapp-pagination-item:focus,
25
34
  div .cloudapp-pagination-item:hover {
26
- border-color: var(--primary);
35
+ border-color: var(--form-active-bg);
36
+ background-color: var(--form-active-bg);
27
37
  }
28
38
  div .cloudapp-pagination-item:focus a,
29
39
  div .cloudapp-pagination-item:hover a {
30
- color: var(--primary);
40
+ color: #fff;
31
41
  }
32
- div .cloudapp-pagination-prev:focus .cloudapp-pagination-item-link,
33
- div .cloudapp-pagination-next:focus .cloudapp-pagination-item-link,
34
- div .cloudapp-pagination-prev:hover .cloudapp-pagination-item-link,
35
- div .cloudapp-pagination-next:hover .cloudapp-pagination-item-link {
36
- color: var(--primary);
37
- border-color: var(--primary);
42
+ div .cloudapp-pagination-prev:focus:not(.cloudapp-pagination-disabled) .cloudapp-pagination-item-link,
43
+ div .cloudapp-pagination-next:focus:not(.cloudapp-pagination-disabled) .cloudapp-pagination-item-link,
44
+ div .cloudapp-pagination-prev:hover:not(.cloudapp-pagination-disabled) .cloudapp-pagination-item-link,
45
+ div .cloudapp-pagination-next:hover:not(.cloudapp-pagination-disabled) .cloudapp-pagination-item-link {
46
+ background-color: var(--form-active-bg);
47
+ border-color: var(--form-active-bg);
48
+ color: #fff;
38
49
  }
39
50
  div .cloudapp-pagination-disabled .cloudapp-pagination-item-link,
40
51
  div .cloudapp-pagination-disabled:hover .cloudapp-pagination-item-link,
41
52
  div .cloudapp-pagination-disabled:focus .cloudapp-pagination-item-link {
42
- border-color: var(--gray8);
43
- color: var(--gray8);
53
+ border-color: var(--form-bd);
44
54
  }
package/es/ThemeAntd/style/picker.css CHANGED
@@ -1,31 +1,31 @@
1
1
  div .cloudapp-picker {
2
- background-color: var(--gray1);
2
+ background-color: var(--form-bg);
3
3
  border-radius: var(--radius1);
4
4
  color: inherit;
5
5
  }
6
6
  div .cloudapp-picker:hover,
7
7
  div .cloudapp-picker-focused {
8
- border-color: var(--primary);
8
+ border-color: var(--form-active-bg);
9
9
  }
10
10
  div .cloudapp-picker-suffix {
11
11
  color: inherit;
12
12
  }
13
13
  div .cloudapp-picker-panel {
14
- background-color: var(--gray1);
15
- border-color: var(--gray3);
14
+ background-color: var(--form-bg);
15
+ border-color: var(--form-bd);
16
16
  }
17
17
  div .cloudapp-picker-panel .cloudapp-picker-footer {
18
- border-color: var(--gray3);
18
+ border-color: var(--form-bd);
19
19
  }
20
20
  div .cloudapp-picker-header {
21
- border-bottom-color: var(--gray3);
21
+ border-bottom-color: var(--form-bd);
22
22
  color: inherit;
23
23
  }
24
24
  div .cloudapp-picker-header button {
25
25
  color: inherit;
26
26
  }
27
27
  div .cloudapp-picker-panel-container {
28
- background-color: var(--gray1);
28
+ background-color: var(--form-bg);
29
29
  }
30
30
  div .cloudapp-picker-dropdown {
31
31
  color: inherit;
@@ -43,7 +43,7 @@ div .cloudapp-picker-content th {
43
43
  color: inherit;
44
44
  }
45
45
  div .cloudapp-picker-today-btn {
46
- color: var(--primary);
46
+ color: var(--form-active-bg);
47
47
  }
48
48
  div .cloudapp-picker-cell .cloudapp-picker-cell-inner {
49
49
  border-radius: var(--radius1);
@@ -53,26 +53,26 @@ div .cloudapp-picker-cell-in-view.cloudapp-picker-cell-today .cloudapp-picker-ce
53
53
  }
54
54
  div .cloudapp-picker-cell:hover:not(.cloudapp-picker-cell-in-view) .cloudapp-picker-cell-inner,
55
55
  div .cloudapp-picker-cell:hover:not(.cloudapp-picker-cell-selected):not(.cloudapp-picker-cell-range-start):not(.cloudapp-picker-cell-range-end):not(.cloudapp-picker-cell-range-hover-start):not(.cloudapp-picker-cell-range-hover-end) .cloudapp-picker-cell-inner {
56
- background-color: var(--form-bg-dark);
56
+ background-color: var(--form-bg);
57
57
  }
58
58
  div .cloudapp-picker-input > input {
59
59
  color: inherit;
60
60
  }
61
61
  div .cloudapp-picker-range-arrow::after {
62
- border-color: var(--gray1);
62
+ border-color: var(--form-bd);
63
63
  }
64
64
  div .cloudapp-picker-cell-in-view.cloudapp-picker-cell-selected .cloudapp-picker-cell-inner,
65
65
  div .cloudapp-picker-cell-in-view.cloudapp-picker-cell-range-start .cloudapp-picker-cell-inner,
66
66
  div .cloudapp-picker-cell-in-view.cloudapp-picker-cell-range-end .cloudapp-picker-cell-inner {
67
- background-color: var(--primary);
67
+ background-color: var(--form-active-bg);
68
68
  }
69
69
  div .cloudapp-picker-cell-in-view.cloudapp-picker-cell-range-start:not(.cloudapp-picker-cell-range-start-single)::before,
70
70
  div .cloudapp-picker-cell-in-view.cloudapp-picker-cell-range-end:not(.cloudapp-picker-cell-range-end-single)::before {
71
- background-color: var(--primary);
71
+ background-color: var(--form-active-bg);
72
72
  opacity: 0.8;
73
73
  }
74
74
  div .cloudapp-picker-cell-in-view.cloudapp-picker-cell-in-range::before {
75
- background-color: var(--primary);
75
+ background-color: var(--form-active-bg);
76
76
  opacity: 0.8;
77
77
  }
78
78
  div .cloudapp-picker-focused .cloudapp-picker-separator {
@@ -82,5 +82,5 @@ div .cloudapp-picker-separator {
82
82
  color: inherit;
83
83
  }
84
84
  div .cloudapp-picker-range .cloudapp-picker-active-bar {
85
- background-color: var(--primary);
85
+ background-color: var(--form-active-bg);
86
86
  }
package/es/ThemeAntd/style/radio.css CHANGED
@@ -2,38 +2,38 @@ div .cloudapp-radio-button-wrapper {
2
2
  outline: unset;
3
3
  }
4
4
  div .cloudapp-radio-button-wrapper-checked:not(.cloudapp-radio-button-wrapper-disabled):hover {
5
- border-color: var(--primary);
6
- color: var(--primary);
5
+ border-color: var(--form-active-bg);
6
+ color: var(--form-active-bg);
7
7
  }
8
8
  div .cloudapp-radio-button-wrapper-checked:not(.cloudapp-radio-button-wrapper-disabled) {
9
- border-color: var(--primary);
10
- color: var(--primary);
11
- box-shadow: -1px 0 0 0 var(--primary);
9
+ border-color: var(--form-active-bg);
10
+ color: var(--form-active-bg);
11
+ box-shadow: -1px 0 0 0 var(--form-active-bg);
12
12
  }
13
13
  div .cloudapp-radio-button-wrapper-checked:not(.cloudapp-radio-button-wrapper-disabled):first-child {
14
- border-color: var(--primary);
14
+ border-color: var(--form-active-bg);
15
15
  }
16
16
  div .cloudapp-radio-disabled .cloudapp-radio-inner::after {
17
- background-color: var(--gray3);
17
+ background-color: var(--form-bg);
18
18
  }
19
19
  div .cloudapp-radio-disabled .cloudapp-radio-inner {
20
- background-color: var(--gray1);
20
+ background-color: var(--form-bg);
21
21
  opacity: 0.8;
22
22
  }
23
23
  div .cloudapp-radio-button-wrapper:hover {
24
- color: var(--primary);
24
+ color: var(--form-active-bg);
25
25
  }
26
26
  div .cloudapp-radio-checked .cloudapp-radio-inner {
27
- border-color: var(--primary);
27
+ border-color: var(--form-active-bg);
28
28
  }
29
29
  div .cloudapp-radio-inner {
30
- background-color: var(--gray1);
30
+ background-color: var(--form-bg);
31
31
  }
32
32
  div .cloudapp-radio-inner::after {
33
- background-color: var(--primary);
33
+ background-color: var(--form-active-bg);
34
34
  }
35
35
  div .cloudapp-radio-checked::after {
36
- border-color: var(--primary);
36
+ border-color: var(--form-active-bg);
37
37
  }
38
38
  div .cloudapp-radio-wrapper {
39
39
  color: inherit;
@@ -45,23 +45,23 @@ div .cloudapp-radio-disabled + span {
45
45
  div .cloudapp-radio-wrapper:hover .cloudapp-radio,
46
46
  div .cloudapp-radio:hover .cloudapp-radio-inner,
47
47
  div .cloudapp-radio-input:focus + .cloudapp-radio-inner {
48
- border-color: var(--primary);
48
+ border-color: var(--form-active-bg);
49
49
  }
50
50
  div .cloudapp-radio-button-wrapper-checked:not(.cloudapp-radio-button-wrapper-disabled)::before {
51
- background-color: var(--primary) !important;
51
+ background-color: var(--form-active-bg) !important;
52
52
  opacity: unset;
53
53
  }
54
54
  div .cloudapp-radio-group-solid .cloudapp-radio-button-wrapper-checked:not(.cloudapp-radio-button-wrapper-disabled) {
55
- background-color: var(--primary);
56
- border-color: var(--primary);
55
+ background-color: var(--form-active-bg);
56
+ border-color: var(--form-active-bg);
57
57
  }
58
58
  div .cloudapp-radio-group-solid .cloudapp-radio-button-wrapper-checked:not(.cloudapp-radio-button-wrapper-disabled):hover {
59
- background-color: var(--primary-dark);
60
- border-color: var(--primary-dark);
61
- box-shadow: -1px 0 0 0 var(--primary);
59
+ background-color: var(--form-active-bg-dark);
60
+ border-color: var(--form-active-bg-dark);
61
+ box-shadow: -1px 0 0 0 var(--form-active-bg);
62
62
  }
63
63
  div .cloudapp-radio-button-wrapper-checked:not([class*=' cloudapp-radio-button-wrapper-disabled']).cloudapp-radio-button-wrapper:first-child {
64
- border-right-color: var(--primary);
64
+ border-right-color: var(--form-active-bg);
65
65
  }
66
66
  div .cloudapp-radio-button-wrapper:last-child {
67
67
  border-radius: 0 var(--form-redius) var(--form-redius) 0;
@@ -69,3 +69,6 @@ div .cloudapp-radio-button-wrapper:last-child {
69
69
  div .cloudapp-radio-button-wrapper:first-child {
70
70
  border-radius: var(--form-redius) 0 0 var(--redius1);
71
71
  }
72
+ div .cloudapp-radio-input:focus + .cloudapp-radio-inner {
73
+ box-shadow: unset;
74
+ }
package/es/ThemeAntd/style/select.css CHANGED
@@ -1,32 +1,32 @@
1
1
  div .cloudapp-select-single:not(.cloudapp-select-customize-input) .cloudapp-select-selector {
2
2
  border-radius: var(--redius1);
3
- border-color: var(--gray3);
4
- background-color: var(--gray1);
3
+ border-color: var(--form-bd);
4
+ background-color: var(--form-bg);
5
5
  }
6
6
  div .cloudapp-select-multiple .cloudapp-select-selector {
7
7
  border-radius: var(--redius1);
8
- border-color: var(--gray3);
9
- background-color: var(--gray1);
8
+ border-color: var(--form-bd);
9
+ background-color: var(--form-bg);
10
10
  }
11
11
  div .cloudapp-select-multiple .cloudapp-select-selection-item {
12
12
  border-radius: var(--redius1);
13
- border-color: var(--gray3);
14
- background-color: var(--gray1);
13
+ border-color: var(--form-bd);
14
+ background-color: var(--form-bg);
15
15
  }
16
16
  div .cloudapp-select:not(.cloudapp-select-disabled):hover .cloudapp-select-selector {
17
- border-color: var(--primary);
17
+ border-color: var(--form-active-bg);
18
18
  }
19
19
  div .cloudapp-select-focused.cloudapp-select-single:not(.cloudapp-select-customize-input) .cloudapp-select-selector {
20
- border-color: var(--primary);
20
+ border-color: var(--form-active-bg);
21
21
  }
22
22
  div .cloudapp-select-focused.cloudapp-select-multiple .cloudapp-select-selector {
23
- border-color: var(--primary);
23
+ border-color: var(--form-active-bg);
24
24
  }
25
25
  div .cloudapp-select-multiple .cloudapp-select-selection-item-remove {
26
26
  color: inherit;
27
27
  }
28
28
  div .cloudapp-select-multiple .cloudapp-select-selection-item-remove:hover {
29
- color: var(--primary);
29
+ color: var(--form-active-bg);
30
30
  }
31
31
  div .cloudapp-select {
32
32
  color: inherit;
@@ -36,22 +36,23 @@ div .cloudapp-select-arrow {
36
36
  color: inherit;
37
37
  }
38
38
  div .cloudapp-select-dropdown {
39
- background-color: var(--gray1);
39
+ background-color: var(--form-bg);
40
40
  color: inherit;
41
41
  }
42
42
  div .cloudapp-select-item {
43
43
  color: inherit;
44
44
  }
45
45
  div .cloudapp-select-item-option-active:not(.cloudapp-select-item-option-disabled) {
46
- background-color: var(--form-bg-dark);
46
+ background-color: var(--form-bg);
47
47
  }
48
48
  div .cloudapp-select-item-option-selected:not(.cloudapp-select-item-option-disabled) .cloudapp-select-item-option-state {
49
- color: var(--primary);
49
+ color: var(--form-active-bg);
50
50
  }
51
51
  div .cloudapp-select-item-option-selected:not(.cloudapp-select-item-option-disabled) {
52
- color: var(--primary);
53
- background-color: var(--gray8);
52
+ color: var(--form-active-bg);
53
+ background-color: transparent;
54
54
  }
55
55
  div .cloudapp-select-focused:not(.cloudapp-select-disabled).cloudapp-select-single:not(.cloudapp-select-customize-input) .cloudapp-select-selector {
56
- border-color: var(--primary);
56
+ border-color: var(--form-active-bg);
57
+ box-shadow: unset;
57
58
  }
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "private": false,
3
3
  "name": "@cloud-app-dev/vidc",
4
4
  "description": "Video Image Data Componennts",
5
- "version": "3.0.45",
5
+ "version": "3.1.0",
6
6
  "scripts": {
7
7
  "start": "dumi dev",
8
8
  "docs:build": "dumi build",
package/theme-config.ts ADDED
@@ -0,0 +1,107 @@
1
+ export const themeConfig = `
2
+ :root{
3
+ --primary: #248FFA;
4
+ --primary-light: #248FFA;
5
+ --primary-dark: #227BD5;
6
+ --secondary1: #6D8EFB;
7
+ --secondary1-light: #86A2FF;
8
+ --secondary1-dark: #5D7FF0;
9
+ --secondary2: #33AAFF;
10
+ --secondary2-light: #61BDFF;
11
+ --secondary2-dark: #2194E5;
12
+ --secondary3: #F3A75F;
13
+ --secondary3-light: #F8B578;
14
+ --secondary3-dark: #DC914C;
15
+ --danger: #F32D37;
16
+ --danger-light: #FF4D4F;
17
+ --danger-dark: #DC1B2A;
18
+ --warn: #FD8535;
19
+ --warn-light: #FF9F5E;
20
+ --warn-dark: #DC1B2A;
21
+ --success: #35BD77;
22
+ --success-light: #55C98D;
23
+ --success-dark: #21965A;
24
+ --gray1: #FFFFFF;
25
+ --gray2: #F3F3F3;
26
+ --gray3: #EEEEEE;
27
+ --gray4: #E7E7E7;
28
+ --gray5: #DCDCDC;
29
+ --gray6: #C5C5C5;
30
+ --gray7: #A6A6A6;
31
+ --gray8: #8B8B8B;
32
+ --gray9: #777777;
33
+ --gray10: #5E5E5E;
34
+ --gray11: #4B4B4B;
35
+ --gray12: #383838;
36
+ --background: #348fe2;
37
+ --content-bg: #ffffff;
38
+ --form-bg:#fff;
39
+ --form-bd:#eee;
40
+ --form-active-bg:#248FFA;
41
+ --icon:#62708B;
42
+ --fs: 14px;
43
+ --fs-small: 12px;
44
+ --fs-large: 20px;
45
+ --color: rgba(0,0,0,1);
46
+ --color-dark: #000000;
47
+ --color-light: rgba(255,255,255,1);
48
+ --color-disabled: rgba(0,0,0,0.26);
49
+ --shadow1: 2px 0 10px 0 rgba(0,0,0,0.06);
50
+ --shadow2: 2px 0 10px 0 rgba(0,0,0,0.06);
51
+ --shadow3: 2px 0 10px 0 rgba(0,0,0,0.06);
52
+ --radius1: 4px;
53
+ --radius2: 8px;
54
+ --radius3: 16px;
55
+ --header-color: #FFFFFF;
56
+ --header-bg: #348fe2;
57
+ --header-height: 66px;
58
+ --nav-height: 66px;
59
+ --nav-bg: #348fe2;
60
+ --nav-sub-bg: rgba(255,255,255,1);
61
+ --nav-sub-bg2: rgba(241,244,247,0.8);
62
+ --nav-item-bg-selected: #FFFFFF;
63
+ --nav-item-color: #FFFFFF;
64
+ --nav-icon-color: rgba(255, 255, 255, 0.4);
65
+ --nav-icon-color-selected: #3495EF;
66
+ --nav-item-bg: #348fe2;
67
+ --nav-item-color-selected: rgba(0, 0, 0, 0.9);
68
+ --nav-sub-item-bg-selected: #F3F5F6;
69
+ --nav-sub-item-color-selected: #348fe2;
70
+ --nav-sub-item-color: rgba(0, 0, 0, 0.9);
71
+ --nav-bd-color: rgba(0,0,0,0);
72
+ --tab-height: 34px;
73
+ --tab-bg: #348fe2;
74
+ --tab-item-bg: #348fe2;
75
+ --tab-item-height: 34px;
76
+ --tab-item-color: #FFFFFF;
77
+ --tab-item-selected-bg: #F3F5F6;
78
+ --tab-item-selected-color: rgba(0, 0, 0, 0.9);
79
+ --drawer-title-height: 48px;
80
+ --drawer-title-bg: rgba(255,255,255,1);
81
+ --drawer-divider-color: rgba(219,225,234,1);
82
+ --drawer-footer-height: 44px;
83
+ --drawer-footer-bg: rgba(255,255,255,1);
84
+ --drawer-content-bg: rgba(243,246,249,1);
85
+ --modal-title-height: 44px;
86
+ --modal-title-bg: #ffffff;
87
+ --modal-divider-color: rgba(219,225,234,1);
88
+ --modal-footer-height: 44px;
89
+ --modal-footer-bg: rgba(243,246,249,1);
90
+ --modal-content-bg: rgba(243,246,249,1);
91
+ --card-image-radius: 4px;
92
+ --card-image-bg: rgba(219,225,234,1);
93
+ --card-radius: 4px;
94
+ --card-content-bg: rgba(255,255,255,1);
95
+ --card-shadow: 0 0 4px 0 rgba(0,0,0,0.2);
96
+ --card-bd-color: rgba(219,225,234,1);
97
+ --card-hover-bd-color: rgba(18,122,255,1);
98
+ --card-footer-bg: rgba(219,225,234,1);
99
+
100
+ --scrollbar-width: 8px;
101
+ --scrollbar-track-bg: rgba(239,241,244,1);
102
+ --scrollbar-thumb-bg: rgba(185,193,203,1);
103
+ --scrollbar-thumb-hover-bg: rgba(195,209,229,1);
104
+ --scrollbar-track-shadow: 0 0 3px 0 rgba(255, 255, 255, 0.1) inset;
105
+ --scrollbar-thumb-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3) inset;
106
+ }
107
+ `;
package/es/ThemeAntd/style/table.css DELETED
@@ -1,36 +0,0 @@
1
- div .cloudapp-table {
2
- background-color: var(--table-bg);
3
- color: inherit;
4
- font-size: var(--fs);
5
- }
6
- div .cloudapp-table-tbody > tr.cloudapp-table-row:hover > td {
7
- background: var(--table-row-hover-color);
8
- }
9
- div .cloudapp-table-thead > tr > th:not(.cloudapp-table-cell-scrollbar) {
10
- background-color: var(--table-head-bg);
11
- border-bottom-color: var(--table-bd);
12
- color: inherit;
13
- }
14
- div .cloudapp-table-thead > tr > th.cloudapp-table-cell-scrollbar {
15
- box-shadow: none;
16
- background-color: var(--table-head-bg);
17
- }
18
- div .cloudapp-table-cell-fix-left,
19
- div .cloudapp-table-cell-fix-right {
20
- background-color: var(--table-bg);
21
- }
22
- div .cloudapp-table-tbody > tr > td {
23
- border-bottom-color: var(--table-bd);
24
- }
25
- div tr.cloudapp-table-expanded-row > td,
26
- div tr.cloudapp-table-expanded-row:hover > td {
27
- background-color: var(--table-row-hover-color);
28
- }
29
- div .cloudapp-table-row-expand-icon {
30
- border-radius: var(--redius1);
31
- color: var(--primary);
32
- }
33
- div .cloudapp-table-row-expand-icon:focus,
34
- div .cloudapp-table-row-expand-icon:hover {
35
- color: var(--primary-dark);
36
- }