bfg-common 1.5.251 → 1.5.253

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 (30) hide show
  1. package/assets/localization/local_be.json +11 -1
  2. package/assets/localization/local_en.json +11 -1
  3. package/assets/localization/local_hy.json +11 -1
  4. package/assets/localization/local_kk.json +11 -1
  5. package/assets/localization/local_ru.json +11 -1
  6. package/assets/localization/local_zh.json +12 -2
  7. package/assets/scss/common/theme.scss +379 -355
  8. package/components/common/backup/storage/actions/add/New.vue +9 -4
  9. package/components/common/backup/storage/actions/add/steps/nameAndConfigure/NameAndConfigureNew.vue +18 -9
  10. package/components/common/backup/storage/actions/add/steps/typeMode/TypeModeNew.vue +12 -3
  11. package/components/common/layout/theHeader/feedback/new/additionalDetails/Headline.vue +8 -67
  12. package/components/common/layout/theHeader/feedback/new/subtitle/Subtitle.vue +8 -72
  13. package/components/common/layout/theHeader/userMenu/modals/preferences/PreferencesOld.vue +9 -1
  14. package/components/common/pages/tasks/table/Table.vue +15 -7
  15. package/components/common/pages/tasks/table/expandDetails/ExpandDetails.vue +15 -9
  16. package/components/common/tooltip/Help.vue +132 -0
  17. package/components/common/tooltip/lib/models/types.ts +1 -0
  18. package/components/common/vm/actions/common/customizeHardware/virtualHardware/bus/BusNew.vue +10 -99
  19. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/CpuNew.vue +52 -3
  20. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/model/ModelNew.vue +32 -151
  21. package/components/common/vm/actions/common/select/name/New.vue +10 -70
  22. package/components/common/wizards/datastore/add/New.vue +8 -3
  23. package/components/common/wizards/datastore/add/steps/nameAndConfigure/NameAndConfigureNew.vue +20 -6
  24. package/components/common/wizards/datastore/add/steps/nameAndDevice/NameAndDeviceNew.vue +9 -3
  25. package/components/common/wizards/datastore/add/steps/typeMode/TypeModeNew.vue +8 -3
  26. package/lib/models/interfaces.ts +1 -0
  27. package/package.json +2 -2
  28. package/components/common/backup/storage/actions/add/steps/common/tooltipInfo/TooltipInfo.vue +0 -94
  29. package/components/common/pages/tasks/table/errorInfo/ErrorInfo.vue +0 -128
  30. package/components/common/wizards/datastore/add/steps/common/tooltipInfo/TooltipInfo.vue +0 -93
package/assets/scss/common/theme.scss CHANGED
@@ -1,355 +1,379 @@
1
- @import 'variables.scss';
2
-
3
- .dark-theme {
4
- background-color: #213444;
5
- }
6
-
7
- :root {
8
- --scrollbar-thumb: #bbb;
9
- --scrollbar-track: #eee;
10
-
11
- --global-font-color: #{$--grey-200};
12
- --global-font-color2: #{$light-black};
13
- --global-font-color3: #{$--grey-200};
14
- --global-font-color4: #{$--grey-100};
15
- --global-font-color5: #{$light-black};
16
- --global-font-color6: #{$--grey-800};
17
- --global-font-color7: #{$--grey-900};
18
- --global-font-color8: #{$--grey-100};
19
- --global-font-color9: #{$--grey-200};
20
- --global-border-color: #ccc;
21
- --global-border-colo2: #{$--grey-100};
22
- --global-bg-color: #{$white};
23
- --global-bg-color2: #{$light-grey-100};
24
- --global-text-color: #5659b8;
25
- --global-text-color2: #{$--blue-150};
26
- --global-text-color3: #{$--grey-100};
27
- --block-view-bg-color: #{$light-grey};
28
- --block-view-bg-color2: #{$white};
29
- --block-view-bg-color3: #{$white};
30
- --block-view-bg-color4: #{$light-grey};
31
- --block-view-bg-color5: #{$white};
32
- --block-view-bg-color6: #{$light-grey-150};
33
- --block-border-color: #{$--grey-850};
34
- --block-border-color2: #{$--grey-850};
35
-
36
- --main-color-mode: #{$black};
37
-
38
- --modal-bg-color: #fff;
39
- --modal-other-bg-color: #fff;
40
-
41
- --close-icon: #8c8c8c;
42
- --arrows-icon: #000;
43
- --info-icon: #{$--blue-150};
44
- --title-color: #e9ecef;
45
- --triger-icon-color: #{$--grey-200}; //#666
46
- --ellipsis-vertical-icon-color: #{$--grey-100};
47
-
48
- --progress-color: #{$--blue-100};
49
- --progress-bg-color: #{$--grey-900};
50
- --progress-value-bg-color: #61b715; // equal in dark and white modes
51
-
52
- --dropdown-bg-color: #fff;
53
- --dropdown-item-color: #0072a3;
54
-
55
- /* UI_I_Button Variables light mode */
56
- /* outline */
57
- --btn-outline-border-color: #0079b8;
58
- --btn-outline-hover-bg-color: #e1f1f6;
59
- --btn-outline-hover-color: #004d8a;
60
- --btn-outline-box-shadow-color: #0095d3;
61
- /* primary */
62
- --btn-primary-color: #{$white};
63
- --btn-primary-border-color: #{$--blue-100};
64
- --btn-primary-hover-bg-color: #004d8a;
65
- --btn-primary-hover-color: #e1f1f6;
66
- --btn-primary-box-shadow-color: #0095d3;
67
- --btn-primary-disabled-color: #666;
68
- --btn-primary-disabled-bg-color: #ccc;
69
- /* warning */
70
- --btn-warning-color: #{$white};
71
- --btn-warning-bg-color: #{$--red-200};
72
- --btn-warning-hover-bg-color: #{$--red-150};
73
- --btn-warning-box-shadow-color: #{$--red-50};
74
- /* link */
75
- --btn-link-color: #0079b8;
76
- --btn-link-hover-color: #004d8a;
77
- --btn-link-disabled: #{$--grey-150};
78
-
79
- /* Form Input Label Variables light mode */
80
- --form-label-color: #000;
81
- --form-input-color: #000;
82
- --form-input-border-color: #9a9a9a;
83
-
84
- /* Checkbox Variables light mode */
85
- --checkbox-label-color: #454545;
86
- --checkbox-background-color: #0079b8;
87
- --checkbox-border-color: #575757;
88
- --checkbox-mark-color: #fff;
89
- --checkbox-mark-background-color: #737373;
90
- --checkbox-value-active-color: #61b715;
91
-
92
- /* Select Variables light mode */
93
- --select-color: #000;
94
-
95
- /* NavBar Variables light mode */
96
- --nav-link-color: #454545;
97
- --nav-link-active-color: #000;
98
- --nav-active-box-shadow-color: #0079b8;
99
- --nav-link-hover-color: #666666;
100
- --nav-panel-border-color: #ccc;
101
-
102
- //--gutter-bg-color: #eee; // for old
103
- --gutter-bg-color: #e9ebed; // for new
104
- //--gutter-hover-bg-color: #0079b8; // for old
105
- --gutter-hover-bg-color: #008fb6; // for new
106
- //--gutter-active-bg-color: #a6d8e7; // for old
107
- --gutter-active-bg-color: #66bce6; // for new
108
- --gutter-before-bg: #9da6ad;
109
-
110
- /* Items Row Variables light mode */
111
- --row-hover-bg-color: #{$light-grey-100};
112
- --row-hover-border-color: #{$--grey-200};
113
- --row-selected-text-color: #{$white};
114
- --row-selected-bg-color: #{$--blue-800};
115
-
116
- /* Vertical Steps Variables light mode */
117
- --vertical-steps-active-color: #fff;
118
- --vertical-steps-complete-color: #454545;
119
- --vertical-steps-active-bg-color: #{$--blue-800};
120
- --vertical-steps-complete-bg-color: #{$light-grey-100};
121
- --vertical-steps-hover-border-color: #{$--grey-200};
122
- --vertical-nav-active-item-color: #fff;
123
- --vertical-nav-active-bg-color: #29414e;
124
- --vertical-nav-hover-item-color: #29414e;
125
-
126
- /* Tooltip Variables light mode */
127
- --tooltip-content-text-color: #{$white};
128
- --tooltip-content-bg-color: #{$black};
129
- --tooltip-content-error-bg-color: #{#c92100};
130
-
131
- /* Select File Variables light mode */
132
- --select-file-text-color: #182531;
133
- --select-file-selected-text-color: #ffffff;
134
- --select-file-selected-bg: #213444;
135
- --select-file-hover-bg: #e9ebed66;
136
- --select-file-sprt-color: #e9ebed;
137
- --select-file-sprt-handler-color: #9da6ad;
138
- --select-file-sprt-handler-hover-color: #4d5d69;
139
- --select-file-sprt-handler-selected-color: #008fd6;
140
- --select-file-header-bg: #e9ebed66;
141
- --select-file-header-arrow-color: #008fd6;
142
- --select-file-info-color: #4d5d69;
143
-
144
- /* Table Action */
145
- --table-actions-icon: #4d5d69;
146
- --table-actions-icon-hover: #182531;
147
- --table-actions-icon-active: #008fd6;
148
- --table-actions-view: #4d5d69;
149
- --table-actions-view-hover: #182531;
150
- --table-actions-remove: #ea3223;
151
- --table-actions-bg-hover: #e9ebed66;
152
-
153
- // Diagram new view
154
- --diagram-container-bg: #ffffff;
155
- --diagram-central-panel-bg: #e9ebed66;
156
- --diagram-block-stroke: #d3d6da;
157
- --diagram-block-bg: #ffffff;
158
- --diagram-connect-line: #d3d6da;
159
- --diagram-selection-line: #008fd6;
160
- --diagram-selection-bg: #ebf6fc;
161
- --diagram-highlight-line: #fbce28;
162
- --diagram-highlight-bg: #fff9e5;
163
- --diagram-content-text: #4d5d69;
164
- --diagram-content-text-hover: #182531;
165
- --diagram-content-text-selected: #008fd6;
166
- --diagram-content-text-selected-hover: #0081c1;
167
- --diagram-content-second-text: #182531;
168
- --diagram-content-second-disabled-text: #bdc3c7;
169
- --diagram-content-third-text: #9da6ad;
170
- --diagram-info-text: #4d5d69;
171
- --diagram-info-second-text: #9da6ad;
172
-
173
- // VM Add Edit new view
174
- --select-file-type-label: #4d5d69;
175
-
176
- // Add Hosts new view
177
- --add-hosts-hosts-row-between-line: #e9ebeda3;
178
- --add-hosts-hosts-row-child-value: #4d5d69;
179
- --add-hosts-hosts-row-child-vm-bg-color: #e9ebeda3;
180
- --add-hosts-hosts-row-child-vm-color: #4d5d69;
181
- --add-hosts-ready-complete-description: #4d5d69;
182
- --add-hosts-ready-complete-host-item-color: #4d5d69;
183
- }
184
-
185
- :root.dark-theme {
186
- --scrollbar-thumb: #29414e;
187
- --scrollbar-track: #17242b;
188
-
189
- --global-font-color: #{$--grey-800};
190
- --global-font-color2: #{#eaedf0};
191
- --global-font-color3: #{$light-white-100};
192
- --global-font-color4: #{$light-white-100};
193
- --global-font-color5: #{$light-black};
194
- --global-font-color8: #{$white};
195
- --global-font-color9: #{$light-blue-100};
196
- --global-border-color: #495865;
197
- --global-border-colo2: #{$light-white-100};
198
- --global-bg-color: #17242b;
199
- --global-bg-color2: #{$--blue-950};
200
- --global-text-color: #{$--blue-200};
201
- --global-text-color2: #{$--blue-200};
202
- --global-text-color3: #{$--grey-700};
203
- --block-view-bg-color: #{$--blue-800};
204
- --block-view-bg-color2: #{$--blue-750};
205
- --block-view-bg-color3: #{$--blue-800};
206
- --block-view-bg-color4: #{$--blue-700};
207
- --block-view-bg-color5: #{$--blue-700};
208
- --block-view-bg-color6: #{$--blue-700};
209
- --block-border-color: #{$black};
210
- --block-border-color2: #{$--blue-960};
211
-
212
- --main-color-mode: #{$light-white};
213
-
214
- --modal-bg-color: #{$--blue-800};
215
- --modal-other-bg-color: #22343c;
216
-
217
- --close-icon: #{$light-grey};
218
- --arrows-icon: #e9ecef;
219
- --info-icon: #{$--grey-800};
220
- --title-color: #565656;
221
- --triger-icon-color: #fff;
222
- --ellipsis-vertical-icon-color: #{$light-white-100};
223
-
224
- --progress-color: #{$--blue-250};
225
- --progress-bg-color: #{$--blue-900};
226
-
227
- --dropdown-bg-color: #1b2a32;
228
- --dropdown-item-color: #79c6e6;
229
-
230
- /* Button Variables dark mode */
231
- /* outline */
232
- --btn-outline-border-color: #89cbdf;
233
- --btn-outline-hover-bg-color: hsla(0, 0%, 100%, 0.1);
234
- --btn-outline-hover-color: #57c8ea;
235
- --btn-outline-box-shadow-color: #000;
236
- /* primary */
237
- --btn-primary-color: #{$black};
238
- --btn-primary-border-color: #{$--blue-250};
239
- --btn-primary-hover-bg-color: #57c8ea;
240
- --btn-primary-hover-color: #000;
241
- --btn-primary-box-shadow-color: #0065ad;
242
- --btn-primary-disabled-bg-color: #fff;
243
- --btn-primary-disabled-color: #000;
244
- /* warning */
245
- --btn-warning-color: #{$black};
246
- --btn-warning-bg-color: #{$--red-300};
247
- --btn-warning-hover-bg-color: #{$--red-400};
248
- --btn-warning-box-shadow-color: #{$--red-100};
249
- /* link */
250
- --btn-link-color: #89cbdf;
251
- --btn-link-hover-color: #57c8ea;
252
- --btn-link-disabled: #{$white};
253
-
254
- /* Form Input Label Variables dark mode */
255
- --form-label-color: #adbbc4;
256
- --form-input-color: #e9ecef;
257
- --form-input-border-color: #adbbc4;
258
-
259
- /* Checkbox Variables dark mode */
260
- --checkbox-label-color: #acbac3;
261
- --checkbox-background-color: #4aaed9;
262
- --checkbox-border-color: #e9ecef;
263
- --checkbox-mark-color: #000;
264
- --checkbox-mark-background-color: #fff;
265
- --checkbox-value-active-color: #61b715;
266
-
267
- /* Select Variables light mode */
268
- --select-color: #000;
269
-
270
- /* NavBar Variables dark mode */
271
- --nav-link-color: #acbac3;
272
- --nav-link-active-color: #fff;
273
- --nav-active-box-shadow-color: #4aaed9;
274
- --nav-link-hover-color: #acbac3;
275
- --nav-panel-border-color: #495865;
276
-
277
- //--gutter-bg-color: #25333d; // for old
278
- --gutter-bg-color: #e9ebed1f; // for new
279
- --gutter-hover-bg-color: #495a67;
280
- --gutter-active-bg-color: #495a67;
281
- --gutter-before-bg: rgba(157, 166, 173, 0.32);
282
-
283
- /* Items Row Variables light mode */
284
- --row-hover-bg-color: #{$--blue-950};
285
- --row-hover-border-color: #{$white};
286
- --row-selected-text-color: #{$black};
287
- --row-selected-bg-color: #{$light-blue};
288
-
289
- /* Vertical Steps Variables dark mode */
290
- --vertical-steps-active-color: #000;
291
- --vertical-steps-complete-color: #acbac3;
292
- --vertical-steps-active-bg-color: #{$light-blue};
293
- --vertical-steps-complete-bg-color: #{$--blue-950};
294
- --vertical-steps-hover-border-color: #{$white};
295
- --vertical-nav-active-item-color: #{$black};
296
- --vertical-nav-active-bg-color: #d8e3e9;
297
- --vertical-nav-hover-item-color: #d8e3e9;
298
-
299
- /* Tooltip Variables light mode */
300
- --tooltip-content-text-color: #{$black};
301
- --tooltip-content-bg-color: #{$white};
302
-
303
- /* Select File Variables dark mode */
304
- --select-file-text-color: #e9eaec;
305
- --select-file-selected-text-color: #182531;
306
- --select-file-selected-bg: #e9eaec;
307
- --select-file-hover-bg: #e9eaec1f;
308
- --select-file-sprt-color: #e9ebed1f;
309
- --select-file-sprt-handler-color: #9da6ad;
310
- --select-file-sprt-handler-hover-color: #e9eaec;
311
- --select-file-sprt-handler-selected-color: #2ba2de;
312
- --select-file-header-bg: #e9ebed0f;
313
- --select-file-header-arrow-color: #2ba2de;
314
- --select-file-info-color: #e9eaec;
315
-
316
- /* Table Action */
317
- --table-actions-icon: #e9eaec;
318
- --table-actions-icon-hover: #ffffff;
319
- --table-actions-icon-active: #2ba2de;
320
- --table-actions-view: #e9eaec;
321
- --table-actions-view-hover: #ffffff;
322
- --table-actions-remove: #ea3223;
323
- --table-actions-bg-hover: #e9ebed0f;
324
-
325
- // Diagram new view
326
- --diagram-container-bg: #334453;
327
- --diagram-central-panel-bg: #e9ebed0f;
328
- --diagram-block-stroke: #5c6a76;
329
- --diagram-block-bg: #304150;
330
- --diagram-connect-line: #5c6a76;
331
- --diagram-selection-line: #2ba2de;
332
- --diagram-selection-bg: #2f5167;
333
- --diagram-highlight-line: #fbce28;
334
- --diagram-highlight-bg: #48524b;
335
- --diagram-content-text: #e9eaec;
336
- --diagram-content-text-hover: #ffffff;
337
- --diagram-content-text-selected: #2ba2de;
338
- --diagram-content-text-selected-hover: #008fd6;
339
- --diagram-content-second-text: #e9eaec;
340
- --diagram-content-second-disabled-text: #4d5d69;
341
- --diagram-content-third-text: #9da6ad;
342
- --diagram-info-text: #e9eaec;
343
- --diagram-info-second-text: #9da6ad;
344
-
345
- // VM Add Edit new view
346
- --select-file-type-label: #e9eaec;
347
-
348
- // Add Hosts new view
349
- --add-hosts-hosts-row-between-line: #e9ebed1f;
350
- --add-hosts-hosts-row-child-value: #e9eaec;
351
- --add-hosts-hosts-row-child-vm-bg-color: #e9ebed1f;
352
- --add-hosts-hosts-row-child-vm-color: #e9eaec;
353
- --add-hosts-ready-complete-description: #e9eaec;
354
- --add-hosts-ready-complete-host-item-color: #e9eaec;
355
- }
1
+ @import 'variables.scss';
2
+
3
+ .dark-theme {
4
+ background-color: #213444;
5
+ }
6
+
7
+ :root {
8
+ --scrollbar-thumb: #bbb;
9
+ --scrollbar-track: #eee;
10
+
11
+ --global-font-color: #{$--grey-200};
12
+ --global-font-color2: #{$light-black};
13
+ --global-font-color3: #{$--grey-200};
14
+ --global-font-color4: #{$--grey-100};
15
+ --global-font-color5: #{$light-black};
16
+ --global-font-color6: #{$--grey-800};
17
+ --global-font-color7: #{$--grey-900};
18
+ --global-font-color8: #{$--grey-100};
19
+ --global-font-color9: #{$--grey-200};
20
+ --global-border-color: #ccc;
21
+ --global-border-colo2: #{$--grey-100};
22
+ --global-bg-color: #{$white};
23
+ --global-bg-color2: #{$light-grey-100};
24
+ --global-text-color: #5659b8;
25
+ --global-text-color2: #{$--blue-150};
26
+ --global-text-color3: #{$--grey-100};
27
+ --block-view-bg-color: #{$light-grey};
28
+ --block-view-bg-color2: #{$white};
29
+ --block-view-bg-color3: #{$white};
30
+ --block-view-bg-color4: #{$light-grey};
31
+ --block-view-bg-color5: #{$white};
32
+ --block-view-bg-color6: #{$light-grey-150};
33
+ --block-border-color: #{$--grey-850};
34
+ --block-border-color2: #{$--grey-850};
35
+
36
+ --main-color-mode: #{$black};
37
+
38
+ --modal-bg-color: #fff;
39
+ --modal-other-bg-color: #fff;
40
+
41
+ --close-icon: #8c8c8c;
42
+ --arrows-icon: #000;
43
+ --info-icon: #{$--blue-150};
44
+ --title-color: #e9ecef;
45
+ --triger-icon-color: #{$--grey-200}; //#666
46
+ --ellipsis-vertical-icon-color: #{$--grey-100};
47
+
48
+ --progress-color: #{$--blue-100};
49
+ --progress-bg-color: #{$--grey-900};
50
+ --progress-value-bg-color: #61b715; // equal in dark and white modes
51
+
52
+ --dropdown-bg-color: #fff;
53
+ --dropdown-item-color: #0072a3;
54
+
55
+ /* Inventory Tabs */
56
+ --inventory-tabs-left-opacity-block-bg-color: linear-gradient(
57
+ 270deg,
58
+ rgba(255, 255, 255, 0) 0%,
59
+ #ffffff 100%
60
+ );
61
+ --inventory-tabs-right-opacity-block-bg-color: linear-gradient(
62
+ 270deg,
63
+ #ffffff 0%,
64
+ rgba(255, 255, 255, 0) 100%
65
+ );
66
+
67
+ /* UI_I_Button Variables light mode */
68
+ /* outline */
69
+ --btn-outline-border-color: #0079b8;
70
+ --btn-outline-hover-bg-color: #e1f1f6;
71
+ --btn-outline-hover-color: #004d8a;
72
+ --btn-outline-box-shadow-color: #0095d3;
73
+ /* primary */
74
+ --btn-primary-color: #{$white};
75
+ --btn-primary-border-color: #{$--blue-100};
76
+ --btn-primary-hover-bg-color: #004d8a;
77
+ --btn-primary-hover-color: #e1f1f6;
78
+ --btn-primary-box-shadow-color: #0095d3;
79
+ --btn-primary-disabled-color: #666;
80
+ --btn-primary-disabled-bg-color: #ccc;
81
+ /* warning */
82
+ --btn-warning-color: #{$white};
83
+ --btn-warning-bg-color: #{$--red-200};
84
+ --btn-warning-hover-bg-color: #{$--red-150};
85
+ --btn-warning-box-shadow-color: #{$--red-50};
86
+ /* link */
87
+ --btn-link-color: #0079b8;
88
+ --btn-link-hover-color: #004d8a;
89
+ --btn-link-disabled: #{$--grey-150};
90
+
91
+ /* Form Input Label Variables light mode */
92
+ --form-label-color: #000;
93
+ --form-input-color: #000;
94
+ --form-input-border-color: #9a9a9a;
95
+
96
+ /* Checkbox Variables light mode */
97
+ --checkbox-label-color: #454545;
98
+ --checkbox-background-color: #0079b8;
99
+ --checkbox-border-color: #575757;
100
+ --checkbox-mark-color: #fff;
101
+ --checkbox-mark-background-color: #737373;
102
+ --checkbox-value-active-color: #61b715;
103
+
104
+ /* Select Variables light mode */
105
+ --select-color: #000;
106
+
107
+ /* NavBar Variables light mode */
108
+ --nav-link-color: #454545;
109
+ --nav-link-active-color: #000;
110
+ --nav-active-box-shadow-color: #0079b8;
111
+ --nav-link-hover-color: #666666;
112
+ --nav-panel-border-color: #ccc;
113
+
114
+ //--gutter-bg-color: #eee; // for old
115
+ --gutter-bg-color: #e9ebed; // for new
116
+ //--gutter-hover-bg-color: #0079b8; // for old
117
+ --gutter-hover-bg-color: #008fb6; // for new
118
+ //--gutter-active-bg-color: #a6d8e7; // for old
119
+ --gutter-active-bg-color: #66bce6; // for new
120
+ --gutter-before-bg: #9da6ad;
121
+
122
+ /* Items Row Variables light mode */
123
+ --row-hover-bg-color: #{$light-grey-100};
124
+ --row-hover-border-color: #{$--grey-200};
125
+ --row-selected-text-color: #{$white};
126
+ --row-selected-bg-color: #{$--blue-800};
127
+
128
+ /* Vertical Steps Variables light mode */
129
+ --vertical-steps-active-color: #fff;
130
+ --vertical-steps-complete-color: #454545;
131
+ --vertical-steps-active-bg-color: #{$--blue-800};
132
+ --vertical-steps-complete-bg-color: #{$light-grey-100};
133
+ --vertical-steps-hover-border-color: #{$--grey-200};
134
+ --vertical-nav-active-item-color: #fff;
135
+ --vertical-nav-active-bg-color: #29414e;
136
+ --vertical-nav-hover-item-color: #29414e;
137
+
138
+ /* Tooltip Variables light mode */
139
+ --tooltip-content-text-color: #{$white};
140
+ --tooltip-content-bg-color: #{$black};
141
+ --tooltip-content-error-bg-color: #{#c92100};
142
+
143
+ /* Select File Variables light mode */
144
+ --select-file-text-color: #182531;
145
+ --select-file-selected-text-color: #ffffff;
146
+ --select-file-selected-bg: #213444;
147
+ --select-file-hover-bg: #e9ebed66;
148
+ --select-file-sprt-color: #e9ebed;
149
+ --select-file-sprt-handler-color: #9da6ad;
150
+ --select-file-sprt-handler-hover-color: #4d5d69;
151
+ --select-file-sprt-handler-selected-color: #008fd6;
152
+ --select-file-header-bg: #e9ebed66;
153
+ --select-file-header-arrow-color: #008fd6;
154
+ --select-file-info-color: #4d5d69;
155
+
156
+ /* Table Action */
157
+ --table-actions-icon: #4d5d69;
158
+ --table-actions-icon-hover: #182531;
159
+ --table-actions-icon-active: #008fd6;
160
+ --table-actions-view: #4d5d69;
161
+ --table-actions-view-hover: #182531;
162
+ --table-actions-remove: #ea3223;
163
+ --table-actions-bg-hover: #e9ebed66;
164
+
165
+ // Diagram new view
166
+ --diagram-container-bg: #ffffff;
167
+ --diagram-central-panel-bg: #e9ebed66;
168
+ --diagram-block-stroke: #d3d6da;
169
+ --diagram-block-bg: #ffffff;
170
+ --diagram-connect-line: #d3d6da;
171
+ --diagram-selection-line: #008fd6;
172
+ --diagram-selection-bg: #ebf6fc;
173
+ --diagram-highlight-line: #fbce28;
174
+ --diagram-highlight-bg: #fff9e5;
175
+ --diagram-content-text: #4d5d69;
176
+ --diagram-content-text-hover: #182531;
177
+ --diagram-content-text-selected: #008fd6;
178
+ --diagram-content-text-selected-hover: #0081c1;
179
+ --diagram-content-second-text: #182531;
180
+ --diagram-content-second-disabled-text: #bdc3c7;
181
+ --diagram-content-third-text: #9da6ad;
182
+ --diagram-info-text: #4d5d69;
183
+ --diagram-info-second-text: #9da6ad;
184
+
185
+ // VM Add Edit new view
186
+ --select-file-type-label: #4d5d69;
187
+
188
+ // Add Hosts new view
189
+ --add-hosts-hosts-row-between-line: #e9ebeda3;
190
+ --add-hosts-hosts-row-child-value: #4d5d69;
191
+ --add-hosts-hosts-row-child-vm-bg-color: #e9ebeda3;
192
+ --add-hosts-hosts-row-child-vm-color: #4d5d69;
193
+ --add-hosts-ready-complete-description: #4d5d69;
194
+ --add-hosts-ready-complete-host-item-color: #4d5d69;
195
+ }
196
+
197
+ :root.dark-theme {
198
+ --scrollbar-thumb: #29414e;
199
+ --scrollbar-track: #17242b;
200
+
201
+ --global-font-color: #{$--grey-800};
202
+ --global-font-color2: #{#eaedf0};
203
+ --global-font-color3: #{$light-white-100};
204
+ --global-font-color4: #{$light-white-100};
205
+ --global-font-color5: #{$light-black};
206
+ --global-font-color8: #{$white};
207
+ --global-font-color9: #{$light-blue-100};
208
+ --global-border-color: #495865;
209
+ --global-border-colo2: #{$light-white-100};
210
+ --global-bg-color: #17242b;
211
+ --global-bg-color2: #{$--blue-950};
212
+ --global-text-color: #{$--blue-200};
213
+ --global-text-color2: #{$--blue-200};
214
+ --global-text-color3: #{$--grey-700};
215
+ --block-view-bg-color: #{$--blue-800};
216
+ --block-view-bg-color2: #{$--blue-750};
217
+ --block-view-bg-color3: #{$--blue-800};
218
+ --block-view-bg-color4: #{$--blue-700};
219
+ --block-view-bg-color5: #{$--blue-700};
220
+ --block-view-bg-color6: #{$--blue-700};
221
+ --block-border-color: #{$black};
222
+ --block-border-color2: #{$--blue-960};
223
+
224
+ --main-color-mode: #{$light-white};
225
+
226
+ --modal-bg-color: #{$--blue-800};
227
+ --modal-other-bg-color: #22343c;
228
+
229
+ --close-icon: #{$light-grey};
230
+ --arrows-icon: #e9ecef;
231
+ --info-icon: #{$--grey-800};
232
+ --title-color: #565656;
233
+ --triger-icon-color: #fff;
234
+ --ellipsis-vertical-icon-color: #{$light-white-100};
235
+
236
+ --progress-color: #{$--blue-250};
237
+ --progress-bg-color: #{$--blue-900};
238
+
239
+ --dropdown-bg-color: #1b2a32;
240
+ --dropdown-item-color: #79c6e6;
241
+
242
+ /* Inventory Tabs */
243
+ --inventory-tabs-left-opacity-block-bg-color: linear-gradient(
244
+ 270deg,
245
+ rgba(33, 52, 68, 0) 0%,
246
+ #213444 100%
247
+ );
248
+ --inventory-tabs-right-opacity-block-bg-color: linear-gradient(
249
+ 270deg,
250
+ #213444 0%,
251
+ rgba(33, 52, 68, 0) 100%
252
+ );
253
+
254
+ /* Button Variables dark mode */
255
+ /* outline */
256
+ --btn-outline-border-color: #89cbdf;
257
+ --btn-outline-hover-bg-color: hsla(0, 0%, 100%, 0.1);
258
+ --btn-outline-hover-color: #57c8ea;
259
+ --btn-outline-box-shadow-color: #000;
260
+ /* primary */
261
+ --btn-primary-color: #{$black};
262
+ --btn-primary-border-color: #{$--blue-250};
263
+ --btn-primary-hover-bg-color: #57c8ea;
264
+ --btn-primary-hover-color: #000;
265
+ --btn-primary-box-shadow-color: #0065ad;
266
+ --btn-primary-disabled-bg-color: #fff;
267
+ --btn-primary-disabled-color: #000;
268
+ /* warning */
269
+ --btn-warning-color: #{$black};
270
+ --btn-warning-bg-color: #{$--red-300};
271
+ --btn-warning-hover-bg-color: #{$--red-400};
272
+ --btn-warning-box-shadow-color: #{$--red-100};
273
+ /* link */
274
+ --btn-link-color: #89cbdf;
275
+ --btn-link-hover-color: #57c8ea;
276
+ --btn-link-disabled: #{$white};
277
+
278
+ /* Form Input Label Variables dark mode */
279
+ --form-label-color: #adbbc4;
280
+ --form-input-color: #e9ecef;
281
+ --form-input-border-color: #adbbc4;
282
+
283
+ /* Checkbox Variables dark mode */
284
+ --checkbox-label-color: #acbac3;
285
+ --checkbox-background-color: #4aaed9;
286
+ --checkbox-border-color: #e9ecef;
287
+ --checkbox-mark-color: #000;
288
+ --checkbox-mark-background-color: #fff;
289
+ --checkbox-value-active-color: #61b715;
290
+
291
+ /* Select Variables light mode */
292
+ --select-color: #000;
293
+
294
+ /* NavBar Variables dark mode */
295
+ --nav-link-color: #acbac3;
296
+ --nav-link-active-color: #fff;
297
+ --nav-active-box-shadow-color: #4aaed9;
298
+ --nav-link-hover-color: #acbac3;
299
+ --nav-panel-border-color: #495865;
300
+
301
+ //--gutter-bg-color: #25333d; // for old
302
+ --gutter-bg-color: #e9ebed1f; // for new
303
+ --gutter-hover-bg-color: #495a67;
304
+ --gutter-active-bg-color: #495a67;
305
+ --gutter-before-bg: rgba(157, 166, 173, 0.32);
306
+
307
+ /* Items Row Variables light mode */
308
+ --row-hover-bg-color: #{$--blue-950};
309
+ --row-hover-border-color: #{$white};
310
+ --row-selected-text-color: #{$black};
311
+ --row-selected-bg-color: #{$light-blue};
312
+
313
+ /* Vertical Steps Variables dark mode */
314
+ --vertical-steps-active-color: #000;
315
+ --vertical-steps-complete-color: #acbac3;
316
+ --vertical-steps-active-bg-color: #{$light-blue};
317
+ --vertical-steps-complete-bg-color: #{$--blue-950};
318
+ --vertical-steps-hover-border-color: #{$white};
319
+ --vertical-nav-active-item-color: #{$black};
320
+ --vertical-nav-active-bg-color: #d8e3e9;
321
+ --vertical-nav-hover-item-color: #d8e3e9;
322
+
323
+ /* Tooltip Variables light mode */
324
+ --tooltip-content-text-color: #{$black};
325
+ --tooltip-content-bg-color: #{$white};
326
+
327
+ /* Select File Variables dark mode */
328
+ --select-file-text-color: #e9eaec;
329
+ --select-file-selected-text-color: #182531;
330
+ --select-file-selected-bg: #e9eaec;
331
+ --select-file-hover-bg: #e9eaec1f;
332
+ --select-file-sprt-color: #e9ebed1f;
333
+ --select-file-sprt-handler-color: #9da6ad;
334
+ --select-file-sprt-handler-hover-color: #e9eaec;
335
+ --select-file-sprt-handler-selected-color: #2ba2de;
336
+ --select-file-header-bg: #e9ebed0f;
337
+ --select-file-header-arrow-color: #2ba2de;
338
+ --select-file-info-color: #e9eaec;
339
+
340
+ /* Table Action */
341
+ --table-actions-icon: #e9eaec;
342
+ --table-actions-icon-hover: #ffffff;
343
+ --table-actions-icon-active: #2ba2de;
344
+ --table-actions-view: #e9eaec;
345
+ --table-actions-view-hover: #ffffff;
346
+ --table-actions-remove: #ea3223;
347
+ --table-actions-bg-hover: #e9ebed0f;
348
+
349
+ // Diagram new view
350
+ --diagram-container-bg: #334453;
351
+ --diagram-central-panel-bg: #e9ebed0f;
352
+ --diagram-block-stroke: #5c6a76;
353
+ --diagram-block-bg: #304150;
354
+ --diagram-connect-line: #5c6a76;
355
+ --diagram-selection-line: #2ba2de;
356
+ --diagram-selection-bg: #2f5167;
357
+ --diagram-highlight-line: #fbce28;
358
+ --diagram-highlight-bg: #48524b;
359
+ --diagram-content-text: #e9eaec;
360
+ --diagram-content-text-hover: #ffffff;
361
+ --diagram-content-text-selected: #2ba2de;
362
+ --diagram-content-text-selected-hover: #008fd6;
363
+ --diagram-content-second-text: #e9eaec;
364
+ --diagram-content-second-disabled-text: #4d5d69;
365
+ --diagram-content-third-text: #9da6ad;
366
+ --diagram-info-text: #e9eaec;
367
+ --diagram-info-second-text: #9da6ad;
368
+
369
+ // VM Add Edit new view
370
+ --select-file-type-label: #e9eaec;
371
+
372
+ // Add Hosts new view
373
+ --add-hosts-hosts-row-between-line: #e9ebed1f;
374
+ --add-hosts-hosts-row-child-value: #e9eaec;
375
+ --add-hosts-hosts-row-child-vm-bg-color: #e9ebed1f;
376
+ --add-hosts-hosts-row-child-vm-color: #e9eaec;
377
+ --add-hosts-ready-complete-description: #e9eaec;
378
+ --add-hosts-ready-complete-host-item-color: #e9eaec;
379
+ }