bfg-common 1.5.992 → 1.5.994

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.
@@ -1,814 +1,814 @@
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 */
39
- --modal-bg-color: #fff;
40
- --modal-other-bg-color: #fff;
41
- --modal-secondary-title: #565656;
42
-
43
- --close-icon: #8c8c8c;
44
- --arrows-icon: #000;
45
- --info-icon: #{$--blue-150};
46
- --title-color: #e9ecef;
47
- --triger-icon-color: #{$--grey-200}; //#666
48
- --ellipsis-vertical-icon-color: #{$--grey-100};
49
-
50
- --progress-color: #{$--blue-100};
51
- --progress-bg-color: #{$--grey-900};
52
- --progress-value-bg-color: #61b715; // equal in dark and white modes
53
-
54
- --dropdown-bg-color: #fff;
55
- --dropdown-item-color: #0072a3;
56
-
57
- --radio-btn-active-label-bg-color: #f0f8fd;
58
- --radio-btn-active-label-border-color: #008fd6;
59
-
60
- --separator-color: #e9ebed;
61
- --input-border: #d3d6da;
62
- --input-caret-color: #000000;
63
- --input-bg-common: #ffffff;
64
- --hide-row-icon: #4d5d69;
65
- --hide-row-icon-hover: #213444;
66
- --create-row-icon: #008fd6;
67
- --create-row-icon-hover: #0081c1;
68
- --ready-to-complete-border-color: #e9ebeda3;
69
-
70
- /* Alert */
71
- --alert-warning-icon-color: #d28f00;
72
- --alert-warning-bg-color: #fef3b5;
73
- --alert-warning-border-color: #d28f00;
74
-
75
- /* Collapse Nav Item */
76
- --collapse-nav-item-link-color: #4d5d69;
77
- --collapse-nav-item-link-hover-color: #182531;
78
- --collapse-nav-item-active-link-color: #008fd6;
79
- --collapse-nav-item-active-link-hover-color: #0081c1;
80
-
81
- /* Portlet */
82
- --portlet-bg-color: #fff;
83
- --portlet-border-color: #d3d3d3;
84
- --portlet-input-color: #4d5d69;
85
- --sub-title-color: #4d5d69;
86
- --tag-input-color: #4d5d69;
87
-
88
- /* Modal By Steps Second */
89
- --close-icon-color: #8c8c8c;
90
-
91
- /* Simple Popup */
92
- --popup-bgcolor: #fafafa;
93
- --table-border-color: #ccc;
94
-
95
- /* Switch */
96
- --label-before-bg-color: #737373;
97
- --label-after-bg-color: #fff;
98
- --label-before-box-shadow: 0 0 0.1rem 0.1rem #69c0e2;
99
-
100
- /* Home */
101
- --home-title-color: #4d5d69;
102
-
103
- /* Packages */
104
- --action-link-container-bg-color: #e9f6fd;
105
- --vui-action-label-color: #333;
106
-
107
- /* Shortcut */
108
- --shortcut-item-hover-bg: linear-gradient(135deg, #ffffff 0%, #f0f8fd 100%);
109
- --shortcut-item-hover-box-shadow: inset 0 0 0 1.5px #008fd6,
110
- 0px 2px 24px 0px #0000001f;
111
- --shortcut-item-disabled-text-icon-color: #bdc3c7;
112
-
113
- /* Tasks */
114
- --tasks-actions-icon-color: #4d5d69;
115
- --tasks-actions-icon-hover-color: #213444;
116
- --tasks-actions-icon-icative-color: #008fd6;
117
-
118
- /* Header */
119
- --description-color: #414b57;
120
- --link-visited-color: #5659b8;
121
- --header-container-bg-color: #213444;
122
- --header-shortcuts-link-color: #ffffff;
123
- --badge-info-bg-color: #008fd6;
124
-
125
- /* Main Navigation Panel New View */
126
- --new-view-vertical-nav-bg-color: rgba(233, 235, 237, 0.92);
127
- --new-view-vertical-nav-item-color: #4d5d69;
128
- --new-view-vertical-nav-hover-item-color: #182531;
129
- --new-view-vertical-nav-hover-bg-color: rgba(211, 214, 218, 0.48);
130
- --new-view-vertical-active-nav-bg-color: #213444;
131
- --new-view-vertical-active-nav-color: #ffffff;
132
- --new-view-pin-unpin-label-hover-color: #008fd6;
133
- --new-view-nav-content-scrollbar-thumb: #9da6ad;
134
- --new-view-nav-content-scrollbar-track-corner-thumb: #ebedee;
135
- --new-view-nav-content-divider-bg: #d3d6da;
136
-
137
- /* Main Navigation Panel Old View */
138
- --old-view-vertical-nav-bg-color-old: rgba(232, 232, 232, 0.85);
139
- --old-view-vertical-nav-item-color-old: #565656;
140
- --old-view-vertical-nav-active-item-color-old: #fff;
141
- --old-view-vertical-nav-divider-border-color-old: #ccc;
142
- --old-view-vertical-border-color-old: tranparent;
143
-
144
- /* Table */
145
- --table-color: #565656;
146
- --table-active-color: #fff;
147
- --table-checkbox-color: #454545;
148
- --table-caret-color: #454545;
149
- --table-switch-color: #575757;
150
- --table-hover-row-border-color: #666;
151
- --table-hover-row-background-color: #e8e8e8;
152
- --table-hover-row-color: #454545;
153
- --table-spinner-bg-color: #ffffff99;
154
- --thead-bg-color: #{$light-grey};
155
- --row-selected-input-color: #{$white};
156
-
157
- /* Vertical Tabs */
158
- --vertical-tabs-nav-link: --grey-100;
159
- --vertical-tabs-bg-color: #fafafa;
160
-
161
- /* Signpost */
162
- --signpost-bgcolor: #fff;
163
- --signpost-border-color: #b3b3b3;
164
- --signpost-color: #acbac3;
165
-
166
- /* Backup Storage Add */
167
- --backup-storage-add-ready-to-complate-border-color: #e9ebeda3;
168
-
169
- /* Chart Options Modal */
170
- --chart-options-timespan-blocks-bg: #ffffff;
171
- --chart-options-timespan-blocks-title-color: #4d5d69;
172
-
173
- /* Context Recursion */
174
- --context-menu-hover-bg-color: #e8e8e8;
175
- --context-menu-border-color: #949494;
176
- --context-menu-inset-border-color: #d4d5d6;
177
- --context-menu-item-header-color: #eceff2;
178
- --context-menu-hover-border-color: #666;
179
-
180
- /* Feedback Button */
181
- --modal-first-title: #565656;
182
- --icon-fill-color: #1d1c1c;
183
- --icon-fill-hover-color: rgb(0, 121, 184);
184
- --btn-border-hover-color: #0079b8;
185
- --btn-border-color: #dedede;
186
- --a-link-color: #0072a3;
187
-
188
- /* Graph */
189
- --chart-block-title-color: #4d5d69;
190
- --chart-block-header-bg-color: #ffffff;
191
- --chart-block-export-button-color: #4d5d69;
192
- --chart-block-export-button-hover-color: #213444;
193
- --chart-block-export-button-active-color: #008fd6;
194
-
195
- /* Advanced Chart Options Modal */
196
- --chart-options-name-actions-seperate-border-color: #e9ebeda3;
197
- --chart-options-name-actions-delete-disabled-text-color: #bdc3c7;
198
- --counters-border-block-border-color: #e9ebeda3;
199
- --metrics-container-bg-color: #ffffff;
200
- --metrics-container-title-color: #4d5d69;
201
- --metrics-container-selected-item-color: #e9eaec;
202
- --metrics-container-selected-item-bg-color: #213444;
203
- --metrics-container-item-color: #4d5d69;
204
- --metrics-container-item-hover-bg-color: rgba(233, 235, 237, 0.4);
205
- --metrics-container-item-hover-color: #182531;
206
- --metrics-container-item-border-line-color: #e9ebeda3;
207
- --chart-options-details-title-color: #4d5d69;
208
- --advanced-chart-options-border-color: rgba(233, 235, 237, 0.64);
209
- --advanced-chart-options-text-color: #008fd6;
210
- --advanced-chart-options-text-hover-color: #0081c1;
211
- --advanced-text-color: #4d5d69;
212
-
213
- /* Overview */
214
- --overview-time-range-label-color: #4d5d69;
215
- --overview-time-range-border-color: rgba(233, 235, 237, 0.64);
216
- --overview-filter-text-color: #4d5d69;
217
- --overview-filter-edit-color: #008fd6;
218
- --overview-filter-edit-hover-color: #0081c1;
219
- --graphic-loader-bg-color: #ffffff;
220
-
221
- /* Feedback Additional Details */
222
- --upload-image-hover-bg-color: #f6f7f8;
223
-
224
- /* Feedback New */
225
- --feedback-tooltip-trigger-color: #9da6ad;
226
- --feedback-tooltip-acctive-trigger-color: #008fd6;
227
- --feedback-tooltip-hover-trigger-color: #4d5d69;
228
- --feedback-text-color: #4d5d69;
229
- --feedback-tooltip-close-color: #213444;
230
-
231
- /* Feedback Tabs */
232
- --feedback-tab-bg-color: #ffffff;
233
- --feedback-tab-hover-bg-color: #f6f7f8;
234
- --feedback-tab-active-bg-color: #008fd60f;
235
- --feedback-tab-border-color: #e9ebed;
236
- --feedback-tab-active-text-color: #008fd6;
237
-
238
- /* Help Menu About */
239
- --about-text-color: #4d5d69;
240
- --about-text-link-color: #008fd6;
241
- --about-text-link-hover-color: #0081c1;
242
-
243
- /* Unsaved Changes Modal */
244
- --unsaved-changes-modal-bg-color: var(--modal-bg);
245
-
246
- /* Inventory Tabs */
247
- --inventory-tabs-left-opacity-block-bg-color: linear-gradient(
248
- 270deg,
249
- rgba(255, 255, 255, 0) 0%,
250
- #ffffff 100%
251
- );
252
- --inventory-tabs-right-opacity-block-bg-color: linear-gradient(
253
- 270deg,
254
- #ffffff 0%,
255
- rgba(255, 255, 255, 0) 100%
256
- );
257
-
258
- /* UI_I_Button Variables light mode */
259
- /* outline */
260
- --btn-outline-border-color: #0079b8;
261
- --btn-outline-hover-bg-color: #e1f1f6;
262
- --btn-outline-hover-color: #004d8a;
263
- --btn-outline-box-shadow-color: #0095d3;
264
- /* primary */
265
- --btn-primary-color: #{$white};
266
- --btn-primary-border-color: #{$--blue-100};
267
- --btn-primary-hover-bg-color: #004d8a;
268
- --btn-primary-hover-color: #e1f1f6;
269
- --btn-primary-box-shadow-color: #0095d3;
270
- --btn-primary-disabled-color: #666;
271
- --btn-primary-disabled-bg-color: #ccc;
272
- /* warning */
273
- --btn-warning-color: #{$white};
274
- --btn-warning-bg-color: #{$--red-200};
275
- --btn-warning-hover-bg-color: #{$--red-150};
276
- --btn-warning-box-shadow-color: #{$--red-50};
277
- /* link */
278
- --btn-link-color: #0079b8;
279
- --btn-link-hover-color: #004d8a;
280
- --btn-link-disabled: #{$--grey-150};
281
-
282
- /* Form Input Label Variables light mode */
283
- --form-label-color: #000;
284
- --form-input-color: #000;
285
- --form-input-border-color: #9a9a9a;
286
-
287
- /* Checkbox Variables light mode */
288
- --checkbox-label-color: #454545;
289
- --checkbox-background-color: #0079b8;
290
- --checkbox-border-color: #575757;
291
- --checkbox-mark-color: #fff;
292
- --checkbox-mark-background-color: #737373;
293
- --checkbox-value-active-color: #61b715;
294
-
295
- /* Select Variables light mode */
296
- --select-color: #000;
297
-
298
- /* NavBar Variables light mode */
299
- --nav-link-color: #454545;
300
- --nav-link-active-color: #000;
301
- --nav-active-box-shadow-color: #0079b8;
302
- --nav-link-hover-color: #666666;
303
- --nav-panel-border-color: #ccc;
304
-
305
- //--gutter-bg-color: #eee; // for old
306
- --gutter-bg-color: #e9ebed; // for new
307
- --new-gutter-bg-color: #e9ebed;
308
- //--gutter-hover-bg-color: #0079b8; // for old
309
- --gutter-hover-bg-color: #008fb6; // for new
310
- //--gutter-active-bg-color: #a6d8e7; // for old
311
- --gutter-active-bg-color: #66bce6; // for new
312
- --gutter-before-bg: #9da6ad;
313
-
314
- /* Items Row Variables light mode */
315
- --row-hover-bg-color: #{$light-grey-100};
316
- --row-hover-border-color: #{$--grey-200};
317
- --row-selected-text-color: #{$white};
318
- --row-selected-bg-color: #{$--blue-800};
319
-
320
- /* Vertical Steps Variables light mode */
321
- --vertical-steps-active-color: #fff;
322
- --vertical-steps-complete-color: #454545;
323
- --vertical-steps-active-bg-color: #{$--blue-800};
324
- --vertical-steps-complete-bg-color: #{$light-grey-100};
325
- --vertical-steps-hover-border-color: #{$--grey-200};
326
- --vertical-nav-active-item-color: #fff;
327
- --vertical-nav-active-bg-color: #29414e;
328
- --vertical-nav-hover-item-color: #29414e;
329
- --vertical-nav-hover-bg-color: #e8e8e8;
330
- --vertical-nav-hover-border-color: #666;
331
- --tree-node-caret-icon: #666;
332
-
333
- /* Tooltip Variables light mode */
334
- --tooltip-content-text-color: #{$white};
335
- --tooltip-content-bg-color: #{$black};
336
- --tooltip-content-error-bg-color: #{#c92100};
337
-
338
- /* Select File Variables light mode */
339
- --select-file-text-color: #182531;
340
- --select-file-selected-text-color: #ffffff;
341
- --select-file-selected-bg: #213444;
342
- --select-file-hover-bg: #e9ebed66;
343
- --select-file-sprt-color: #e9ebed;
344
- --select-file-sprt-handler-color: #9da6ad;
345
- --select-file-sprt-handler-hover-color: #4d5d69;
346
- --select-file-sprt-handler-selected-color: #008fd6;
347
- --select-file-header-bg: #e9ebed66;
348
- --select-file-header-arrow-color: #008fd6;
349
- --select-file-info-color: #4d5d69;
350
-
351
- /* Table Action */
352
- --table-actions-icon: #4d5d69;
353
- --table-actions-icon-hover: #182531;
354
- --table-actions-icon-active: #008fd6;
355
- --table-actions-view: #4d5d69;
356
- --table-actions-view-hover: #182531;
357
- --table-actions-remove: #ea3223;
358
- --table-actions-bg-hover: #e9ebed66;
359
-
360
- // Diagram new view
361
- --diagram-container-bg: #ffffff;
362
- --diagram-central-panel-bg: #e9ebed66;
363
- --diagram-block-stroke: #d3d6da;
364
- --diagram-block-bg: #ffffff;
365
- --diagram-connect-line: #d3d6da;
366
- --diagram-selection-line: #008fd6;
367
- --diagram-selection-bg: #ebf6fc;
368
- --diagram-highlight-line: #fbce28;
369
- --diagram-highlight-bg: #fff9e5;
370
- --diagram-content-text: #4d5d69;
371
- --diagram-content-text-hover: #182531;
372
- --diagram-content-text-selected: #008fd6;
373
- --diagram-content-text-selected-hover: #0081c1;
374
- --diagram-content-second-text: #182531;
375
- --diagram-content-second-disabled-text: #bdc3c7;
376
- --diagram-content-third-text: #9da6ad;
377
- --diagram-info-text: #4d5d69;
378
- --diagram-info-second-text: #9da6ad;
379
-
380
- // VM Add Edit new view
381
- --select-file-type-label: #4d5d69;
382
- --remote-console-options-password-content-copy-icon: #9da6ad;
383
- --cpu-model-info-tooltip-icon-disabled: #bdc3c7;
384
-
385
- // Add Hosts new view
386
- --add-hosts-hosts-row-between-line: #e9ebeda3;
387
- --add-hosts-hosts-row-child-value: #4d5d69;
388
- --add-hosts-hosts-row-child-vm-bg-color: #e9ebeda3;
389
- --add-hosts-hosts-row-child-vm-color: #4d5d69;
390
- --add-hosts-ready-complete-description: #4d5d69;
391
- --add-hosts-ready-complete-host-item-color: #4d5d69;
392
-
393
- // Enter Maintenance Mode
394
- --enter-maintenance-mode-modal-desc: #4d5d69;
395
-
396
- // Enter Standby Mode
397
- --enter-standby-mode-modal-desc: #4d5d69;
398
- --enter-standby-mode-modal-vm-block-key: #4d5d69;
399
- --enter-standby-mode-modal-block-border: #e9ebeda3;
400
- --enter-standby-mode-modal-last-attempt-value: #4d5d69;
401
-
402
- // Shut Down
403
- --shut-down-modal-question-desc: #4d5d69;
404
-
405
- // Reboot Host
406
- --reboot-host-modal-question-desc: #4d5d69;
407
-
408
- // Move To Modal
409
- --move-to-tree-scrollbar-thumb-bg: #4d5d69;
410
- }
411
-
412
- :root.dark-theme {
413
- --scrollbar-thumb: #29414e;
414
- --scrollbar-track: #17242b;
415
-
416
- --global-font-color: #{$--grey-800};
417
- --global-font-color2: #{#eaedf0};
418
- --global-font-color3: #{$light-white-100};
419
- --global-font-color4: #{$light-white-100};
420
- --global-font-color5: #{$light-black};
421
- --global-font-color8: #{$white};
422
- --global-font-color9: #{$light-blue-100};
423
- --global-border-color: #495865;
424
- --global-border-colo2: #{$light-white-100};
425
- --global-bg-color: #17242b;
426
- --global-bg-color2: #{$--blue-950};
427
- --global-text-color: #{$--blue-200};
428
- --global-text-color2: #{$--blue-200};
429
- --global-text-color3: #{$--grey-700};
430
- --block-view-bg-color: #{$--blue-800};
431
- --block-view-bg-color2: #{$--blue-750};
432
- --block-view-bg-color3: #{$--blue-800};
433
- --block-view-bg-color4: #{$--blue-700};
434
- --block-view-bg-color5: #{$--blue-700};
435
- --block-view-bg-color6: #{$--blue-700};
436
- --block-border-color: #{$black};
437
- --block-border-color2: #{$--blue-960};
438
-
439
- --main-color-mode: #{$light-white};
440
-
441
- /* Modal */
442
- --modal-bg-color: #{$--blue-800};
443
- --modal-other-bg-color: #22343c;
444
- --modal-secondary-title: #e9ecef;
445
-
446
- --close-icon: #{$light-grey};
447
- --arrows-icon: #e9ecef;
448
- --info-icon: #{$--grey-800};
449
- --title-color: #565656;
450
- --triger-icon-color: #fff;
451
- --ellipsis-vertical-icon-color: #{$light-white-100};
452
-
453
- --progress-color: #{$--blue-250};
454
- --progress-bg-color: #{$--blue-900};
455
-
456
- --dropdown-bg-color: #1b2a32;
457
- --dropdown-item-color: #79c6e6;
458
-
459
- --radio-btn-active-label-bg-color: #2ba2de14;
460
- --radio-btn-active-label-border-color: #2ba2de;
461
-
462
- --separator-color: #e9ebed1f;
463
- --input-border: #e9ebed3d;
464
- --input-caret-color: #ffffff;
465
- --input-bg-common: transparent;
466
- --hide-row-icon: #e9eaec;
467
- --hide-row-icon-hover: #ffffff;
468
- --create-row-icon: #2ba2de;
469
- --create-row-icon-hover: #008fd6;
470
- --ready-to-complete-border-color: #e9ebed1f;
471
-
472
- /* Alert */
473
- --alert-warning-icon-color: currentColor;
474
- --alert-warning-bg-color: #816709;
475
- --alert-warning-border-color: transparent;
476
-
477
- /* Collapse Nav Item */
478
- --collapse-nav-item-link-color: #e9eaec;
479
- --collapse-nav-item-link-hover-color: #ffffff;
480
- --collapse-nav-item-active-link-color: #2ba2de;
481
- --collapse-nav-item-active-link-hover-color: #0081c1;
482
-
483
- /* Portlet */
484
- --portlet-bg-color: transparent;
485
- --portlet-border-color: #000000;
486
- --portlet-input-color: #d3d6da;
487
- --sub-title-color: #e9eaec;
488
- --tag-input-color: #d3d6da;
489
-
490
- /* Modal By Steps Second */
491
- --close-icon-color: #fff;
492
-
493
- /* Simple Popup */
494
- --popup-bgcolor: #29414e;
495
- --table-border-color: #495865;
496
-
497
- /* Switch */
498
- --label-before-bg-color: #fff;
499
- --label-after-bg-color: #1b2a32;
500
- --label-before-box-shadow: 0 0 0;
501
-
502
- /* Home */
503
- --home-title-color: #e9eaec;
504
-
505
- /* Packages */
506
- --action-link-container-bg-color: #29414e;
507
- --vui-action-label-color: #adbbc4;
508
-
509
- /* Shortcut */
510
- --shortcut-item-hover-bg: linear-gradient(135deg, #334453 0%, #324c5e 100%);
511
- --shortcut-item-hover-box-shadow: inset 0 0 0 1.5px #2ba2de,
512
- 0px -1px 12px 0px rgba(0, 0, 0, 0.1), 0px 4px 20px 0px rgba(0, 0, 0, 0.12);
513
- --shortcut-item-disabled-text-icon-color: #bdc3c770;
514
-
515
- /* Tasks */
516
- --tasks-actions-icon-color: #e9eaec;
517
- --tasks-actions-icon-hover-color: #ffffff;
518
- --tasks-actions-icon-icative-color: #2ba2de;
519
-
520
- /* Header */
521
- --description-color: #adbbc4;
522
- --link-visited-color: #49afd9;
523
- --header-container-bg-color: #1b2a37;
524
- --header-shortcuts-link-color: #e9eaec;
525
- --badge-info-bg-color: #2ba2de;
526
-
527
- /* Main Navigation Panel New View */
528
- --new-view-vertical-nav-bg-color: rgba(51, 68, 83, 0.92);
529
- --new-view-vertical-nav-item-color: #e9eaec;
530
- --new-view-vertical-nav-hover-item-color: #ffffff;
531
- --new-view-vertical-nav-hover-bg-color: rgba(233, 234, 236, 0.12);
532
- --new-view-vertical-active-nav-bg-color: rgba(233, 235, 237, 0.96);
533
- --new-view-vertical-active-nav-color: #213444;
534
- --new-view-pin-unpin-label-hover-color: #2ba2de;
535
- --new-view-nav-content-scrollbar-thumb: rgba(157, 166, 173, 0.32);
536
- --new-view-nav-content-scrollbar-track-corner-thumb: #435360;
537
- --new-view-nav-content-divider-bg: rgba(211, 214, 218, 0.12);
538
-
539
- /* Main Navigation Panel Old View */
540
- --old-view-vertical-nav-bg-color-old: #17242b;
541
- --old-view-vertical-nav-item-color-old: #e9ecef;
542
- --old-view-vertical-nav-active-item-color-old: #000;
543
- --old-view-vertical-nav-divider-border-color-old: #495865;
544
- --old-view-vertical-border-color-old: #495865;
545
-
546
- /* Table */
547
- --table-color: #fff;
548
- --table-active-color: #565656;
549
- --table-checkbox-color: #49aeda;
550
- --table-caret-color: #ffffff;
551
- --table-switch-color: #b3b3b3;
552
- --table-hover-row-border-color: #fff;
553
- --table-hover-row-background-color: #324f61;
554
- --table-hover-row-color: #e9ecef;
555
- --table-spinner-bg-color: rgba(0, 0, 0, 0.5);
556
- --thead-bg-color: #{$--blue-700};
557
- --row-selected-input-color: #000;
558
-
559
- /* Vertical Tabs */
560
- --vertical-tabs-nav-link: #ffffff;
561
- --vertical-tabs-bg-color: transparent;
562
-
563
- /* Signpost */
564
- --signpost-bgcolor: #21333b;
565
- --signpost-border-color: #000;
566
- --signpost-color: #acbac3;
567
-
568
- /* Backup Storage Add */
569
- --backup-storage-add-ready-to-complate-border-color: #e9ebed1f;
570
-
571
- /* Chart Options Modal */
572
- --chart-options-timespan-blocks-bg: #334453;
573
- --chart-options-timespan-blocks-title-color: #e9eaec;
574
-
575
- /* Context Recursion */
576
- --context-menu-hover-bg-color: #324f61;
577
- --context-menu-border-color: #495865;
578
- --context-menu-inset-border-color: #485764;
579
- --context-menu-item-header-color: #29414e;
580
- --context-menu-hover-border-color: #fff;
581
-
582
- /* Feedback Button */
583
- --modal-first-title: #adbbc4;
584
- --icon-fill-color: rgb(233, 236, 239);
585
- --icon-fill-hover-color: rgb(73, 175, 217);
586
- --btn-border-hover-color: #0079b8;
587
- --btn-border-color: rgb(14, 22, 27);
588
- --a-link-color: #4aaed9;
589
-
590
- /* Graph */
591
- --chart-block-title-color: #e9eaec;
592
- --chart-block-header-bg-color: #334453;
593
- --chart-block-export-button-color: #e9eaec;
594
- --chart-block-export-button-hover-color: #ffffff;
595
- --chart-block-export-button-active-color: #2ba2de;
596
-
597
- /* Advanced Chart Options Modal */
598
- --chart-options-name-actions-seperate-border-color: #e9ebed1f;
599
- --chart-options-name-actions-delete-disabled-text-color: rgba(
600
- 189,
601
- 195,
602
- 199,
603
- 0.72
604
- );
605
- --counters-border-block-border-color: rgba(233, 235, 237, 0.12);
606
- --metrics-container-bg-color: #334453;
607
- --metrics-container-title-color: #e9eaec;
608
- --metrics-container-selected-item-color: #182531;
609
- --metrics-container-selected-item-bg-color: #e9eaec;
610
- --metrics-container-item-color: #e9eaec;
611
- --metrics-container-item-hover-bg-color: rgba(233, 235, 237, 0.08);
612
- --metrics-container-item-hover-color: #ffffff;
613
- --metrics-container-item-border-line-color: #e9ebed1f;
614
- --chart-options-details-title-color: #e9eaec;
615
- --advanced-chart-options-border-color: rgba(233, 235, 237, 0.12);
616
- --advanced-chart-options-text-color: #2ba2de;
617
- --advanced-chart-options-text-hover-color: #008fd6;
618
- --advanced-text-color: #e9eaec;
619
-
620
- /* Overview */
621
- --overview-time-range-label-color: #e9eaec;
622
- --overview-time-range-border-color: #e9ebed1f;
623
- --overview-filter-text-color: #e9eaec;
624
- --overview-filter-edit-color: #2ba2de;
625
- --overview-filter-edit-hover-color: #008fd6;
626
- --graphic-loader-bg-color: #22343c;
627
-
628
- /* Feedback Additional Details */
629
- --upload-image-hover-bg-color: #283948;
630
-
631
- /* Feedback New */
632
- --feedback-tooltip-trigger-color: #9da6ad;
633
- --feedback-tooltip-acctive-trigger-color: #2ba2de;
634
- --feedback-tooltip-hover-trigger-color: #e9eaec;
635
- --feedback-text-color: #e9eaec;
636
- --feedback-tooltip-close-color: #e9eaec;
637
-
638
- /* Feedback Tabs */
639
- --feedback-tab-bg-color: #1b2a373d;
640
- --feedback-tab-hover-bg-color: #283948;
641
- --feedback-tab-active-bg-color: #2ba2de14;
642
- --feedback-tab-border-color: #e9ebed1f;
643
- --feedback-tab-active-text-color: #2ba2de;
644
-
645
- /* Help Menu About */
646
- --about-text-color: #9da6ad;
647
- --about-text-link-color: #2ba2de;
648
- --about-text-link-hover-color: #008fd6;
649
-
650
- /* Unsaved Changes Modal */
651
- --unsaved-changes-modal-bg-color: #334453;
652
-
653
- /* Inventory Tabs */
654
- --inventory-tabs-left-opacity-block-bg-color: linear-gradient(
655
- 270deg,
656
- rgba(33, 52, 68, 0) 0%,
657
- #213444 100%
658
- );
659
- --inventory-tabs-right-opacity-block-bg-color: linear-gradient(
660
- 270deg,
661
- #213444 0%,
662
- rgba(33, 52, 68, 0) 100%
663
- );
664
-
665
- /* Button Variables dark mode */
666
- /* outline */
667
- --btn-outline-border-color: #89cbdf;
668
- --btn-outline-hover-bg-color: hsla(0, 0%, 100%, 0.1);
669
- --btn-outline-hover-color: #57c8ea;
670
- --btn-outline-box-shadow-color: #000;
671
- /* primary */
672
- --btn-primary-color: #{$black};
673
- --btn-primary-border-color: #{$--blue-250};
674
- --btn-primary-hover-bg-color: #57c8ea;
675
- --btn-primary-hover-color: #000;
676
- --btn-primary-box-shadow-color: #0065ad;
677
- --btn-primary-disabled-bg-color: #fff;
678
- --btn-primary-disabled-color: #000;
679
- /* warning */
680
- --btn-warning-color: #{$black};
681
- --btn-warning-bg-color: #{$--red-300};
682
- --btn-warning-hover-bg-color: #{$--red-400};
683
- --btn-warning-box-shadow-color: #{$--red-100};
684
- /* link */
685
- --btn-link-color: #89cbdf;
686
- --btn-link-hover-color: #57c8ea;
687
- --btn-link-disabled: #{$white};
688
-
689
- /* Form Input Label Variables dark mode */
690
- --form-label-color: #adbbc4;
691
- --form-input-color: #e9ecef;
692
- --form-input-border-color: #adbbc4;
693
-
694
- /* Checkbox Variables dark mode */
695
- --checkbox-label-color: #acbac3;
696
- --checkbox-background-color: #4aaed9;
697
- --checkbox-border-color: #e9ecef;
698
- --checkbox-mark-color: #000;
699
- --checkbox-mark-background-color: #fff;
700
- --checkbox-value-active-color: #61b715;
701
-
702
- /* Select Variables light mode */
703
- --select-color: #000;
704
-
705
- /* NavBar Variables dark mode */
706
- --nav-link-color: #acbac3;
707
- --nav-link-active-color: #fff;
708
- --nav-active-box-shadow-color: #4aaed9;
709
- --nav-link-hover-color: #acbac3;
710
- --nav-panel-border-color: #495865;
711
-
712
- //--gutter-bg-color: #25333d; // for old
713
- --gutter-bg-color: #e9ebed1f; // for new
714
- --new-gutter-bg-color: #394a58;
715
- --gutter-hover-bg-color: #2776a0;
716
- --gutter-active-bg-color: #2ba2de;
717
- --gutter-before-bg: rgba(157, 166, 173, 0.32);
718
-
719
- /* Items Row Variables light mode */
720
- --row-hover-bg-color: #{$--blue-950};
721
- --row-hover-border-color: #{$white};
722
- --row-selected-text-color: #{$black};
723
- --row-selected-bg-color: #{$light-blue};
724
-
725
- /* Vertical Steps Variables dark mode */
726
- --vertical-steps-active-color: #000;
727
- --vertical-steps-complete-color: #acbac3;
728
- --vertical-steps-active-bg-color: #{$light-blue};
729
- --vertical-steps-complete-bg-color: #{$--blue-950};
730
- --vertical-steps-hover-border-color: #{$white};
731
- --vertical-nav-active-item-color: #{$black};
732
- --vertical-nav-active-bg-color: #d8e3e9;
733
- --vertical-nav-hover-item-color: #d8e3e9;
734
- --vertical-nav-hover-bg-color: #324f61;
735
- --vertical-nav-hover-border-color: #fff;
736
- --tree-node-caret-icon: #acbac3;
737
-
738
- /* Tooltip Variables light mode */
739
- --tooltip-content-text-color: #{$black};
740
- --tooltip-content-bg-color: #{$white};
741
-
742
- /* Select File Variables dark mode */
743
- --select-file-text-color: #e9eaec;
744
- --select-file-selected-text-color: #182531;
745
- --select-file-selected-bg: #e9eaec;
746
- --select-file-hover-bg: #e9eaec1f;
747
- --select-file-sprt-color: #e9ebed1f;
748
- --select-file-sprt-handler-color: #9da6ad;
749
- --select-file-sprt-handler-hover-color: #e9eaec;
750
- --select-file-sprt-handler-selected-color: #2ba2de;
751
- --select-file-header-bg: #e9ebed0f;
752
- --select-file-header-arrow-color: #2ba2de;
753
- --select-file-info-color: #e9eaec;
754
-
755
- /* Table Action */
756
- --table-actions-icon: #e9eaec;
757
- --table-actions-icon-hover: #ffffff;
758
- --table-actions-icon-active: #2ba2de;
759
- --table-actions-view: #e9eaec;
760
- --table-actions-view-hover: #ffffff;
761
- --table-actions-remove: #ea3223;
762
- --table-actions-bg-hover: #e9ebed0f;
763
-
764
- // Diagram new view
765
- --diagram-container-bg: #334453;
766
- --diagram-central-panel-bg: #e9ebed0f;
767
- --diagram-block-stroke: #5c6a76;
768
- --diagram-block-bg: #304150;
769
- --diagram-connect-line: #5c6a76;
770
- --diagram-selection-line: #2ba2de;
771
- --diagram-selection-bg: #2f5167;
772
- --diagram-highlight-line: #fbce28;
773
- --diagram-highlight-bg: #48524b;
774
- --diagram-content-text: #e9eaec;
775
- --diagram-content-text-hover: #ffffff;
776
- --diagram-content-text-selected: #2ba2de;
777
- --diagram-content-text-selected-hover: #008fd6;
778
- --diagram-content-second-text: #e9eaec;
779
- --diagram-content-second-disabled-text: #4d5d69;
780
- --diagram-content-third-text: #9da6ad;
781
- --diagram-info-text: #e9eaec;
782
- --diagram-info-second-text: #9da6ad;
783
-
784
- // VM Add Edit new view
785
- --select-file-type-label: #e9eaec;
786
- --remote-console-options-password-content-copy-icon: #e9eaec;
787
- --cpu-model-info-tooltip-icon-disabled: #bdc3c770;
788
-
789
- // Add Hosts new view
790
- --add-hosts-hosts-row-between-line: #e9ebed1f;
791
- --add-hosts-hosts-row-child-value: #e9eaec;
792
- --add-hosts-hosts-row-child-vm-bg-color: #e9ebed1f;
793
- --add-hosts-hosts-row-child-vm-color: #e9eaec;
794
- --add-hosts-ready-complete-description: #e9eaec;
795
- --add-hosts-ready-complete-host-item-color: #e9eaec;
796
-
797
- // Enter Maintenance Mode
798
- --enter-maintenance-mode-modal-desc: #e9eaec;
799
-
800
- // Enter Standby Mode
801
- --enter-standby-mode-modal-desc: #e9eaec;
802
- --enter-standby-mode-modal-vm-block-key: #e9eaec;
803
- --enter-standby-mode-modal-block-border: #e9ebed1f;
804
- --enter-standby-mode-modal-last-attempt-value: #e9eaec;
805
-
806
- // Shut Down
807
- --shut-down-modal-question-desc: #e9eaec;
808
-
809
- // Reboot Host
810
- --reboot-host-modal-question-desc: #e9eaec;
811
-
812
- // Move To Modal
813
- --move-to-tree-scrollbar-thumb-bg: #d3d6da3d;
814
- }
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 */
39
+ --modal-bg-color: #fff;
40
+ --modal-other-bg-color: #fff;
41
+ --modal-secondary-title: #565656;
42
+
43
+ --close-icon: #8c8c8c;
44
+ --arrows-icon: #000;
45
+ --info-icon: #{$--blue-150};
46
+ --title-color: #e9ecef;
47
+ --triger-icon-color: #{$--grey-200}; //#666
48
+ --ellipsis-vertical-icon-color: #{$--grey-100};
49
+
50
+ --progress-color: #{$--blue-100};
51
+ --progress-bg-color: #{$--grey-900};
52
+ --progress-value-bg-color: #61b715; // equal in dark and white modes
53
+
54
+ --dropdown-bg-color: #fff;
55
+ --dropdown-item-color: #0072a3;
56
+
57
+ --radio-btn-active-label-bg-color: #f0f8fd;
58
+ --radio-btn-active-label-border-color: #008fd6;
59
+
60
+ --separator-color: #e9ebed;
61
+ --input-border: #d3d6da;
62
+ --input-caret-color: #000000;
63
+ --input-bg-common: #ffffff;
64
+ --hide-row-icon: #4d5d69;
65
+ --hide-row-icon-hover: #213444;
66
+ --create-row-icon: #008fd6;
67
+ --create-row-icon-hover: #0081c1;
68
+ --ready-to-complete-border-color: #e9ebeda3;
69
+
70
+ /* Alert */
71
+ --alert-warning-icon-color: #d28f00;
72
+ --alert-warning-bg-color: #fef3b5;
73
+ --alert-warning-border-color: #d28f00;
74
+
75
+ /* Collapse Nav Item */
76
+ --collapse-nav-item-link-color: #4d5d69;
77
+ --collapse-nav-item-link-hover-color: #182531;
78
+ --collapse-nav-item-active-link-color: #008fd6;
79
+ --collapse-nav-item-active-link-hover-color: #0081c1;
80
+
81
+ /* Portlet */
82
+ --portlet-bg-color: #fff;
83
+ --portlet-border-color: #d3d3d3;
84
+ --portlet-input-color: #4d5d69;
85
+ --sub-title-color: #4d5d69;
86
+ --tag-input-color: #4d5d69;
87
+
88
+ /* Modal By Steps Second */
89
+ --close-icon-color: #8c8c8c;
90
+
91
+ /* Simple Popup */
92
+ --popup-bgcolor: #fafafa;
93
+ --table-border-color: #ccc;
94
+
95
+ /* Switch */
96
+ --label-before-bg-color: #737373;
97
+ --label-after-bg-color: #fff;
98
+ --label-before-box-shadow: 0 0 0.1rem 0.1rem #69c0e2;
99
+
100
+ /* Home */
101
+ --home-title-color: #4d5d69;
102
+
103
+ /* Packages */
104
+ --action-link-container-bg-color: #e9f6fd;
105
+ --vui-action-label-color: #333;
106
+
107
+ /* Shortcut */
108
+ --shortcut-item-hover-bg: linear-gradient(135deg, #ffffff 0%, #f0f8fd 100%);
109
+ --shortcut-item-hover-box-shadow: inset 0 0 0 1.5px #008fd6,
110
+ 0px 2px 24px 0px #0000001f;
111
+ --shortcut-item-disabled-text-icon-color: #bdc3c7;
112
+
113
+ /* Tasks */
114
+ --tasks-actions-icon-color: #4d5d69;
115
+ --tasks-actions-icon-hover-color: #213444;
116
+ --tasks-actions-icon-icative-color: #008fd6;
117
+
118
+ /* Header */
119
+ --description-color: #414b57;
120
+ --link-visited-color: #5659b8;
121
+ --header-container-bg-color: #213444;
122
+ --header-shortcuts-link-color: #ffffff;
123
+ --badge-info-bg-color: #008fd6;
124
+
125
+ /* Main Navigation Panel New View */
126
+ --new-view-vertical-nav-bg-color: rgba(233, 235, 237, 0.92);
127
+ --new-view-vertical-nav-item-color: #4d5d69;
128
+ --new-view-vertical-nav-hover-item-color: #182531;
129
+ --new-view-vertical-nav-hover-bg-color: rgba(211, 214, 218, 0.48);
130
+ --new-view-vertical-active-nav-bg-color: #213444;
131
+ --new-view-vertical-active-nav-color: #ffffff;
132
+ --new-view-pin-unpin-label-hover-color: #008fd6;
133
+ --new-view-nav-content-scrollbar-thumb: #9da6ad;
134
+ --new-view-nav-content-scrollbar-track-corner-thumb: #ebedee;
135
+ --new-view-nav-content-divider-bg: #d3d6da;
136
+
137
+ /* Main Navigation Panel Old View */
138
+ --old-view-vertical-nav-bg-color-old: rgba(232, 232, 232, 0.85);
139
+ --old-view-vertical-nav-item-color-old: #565656;
140
+ --old-view-vertical-nav-active-item-color-old: #fff;
141
+ --old-view-vertical-nav-divider-border-color-old: #ccc;
142
+ --old-view-vertical-border-color-old: tranparent;
143
+
144
+ /* Table */
145
+ --table-color: #565656;
146
+ --table-active-color: #fff;
147
+ --table-checkbox-color: #454545;
148
+ --table-caret-color: #454545;
149
+ --table-switch-color: #575757;
150
+ --table-hover-row-border-color: #666;
151
+ --table-hover-row-background-color: #e8e8e8;
152
+ --table-hover-row-color: #454545;
153
+ --table-spinner-bg-color: #ffffff99;
154
+ --thead-bg-color: #{$light-grey};
155
+ --row-selected-input-color: #{$white};
156
+
157
+ /* Vertical Tabs */
158
+ --vertical-tabs-nav-link: --grey-100;
159
+ --vertical-tabs-bg-color: #fafafa;
160
+
161
+ /* Signpost */
162
+ --signpost-bgcolor: #fff;
163
+ --signpost-border-color: #b3b3b3;
164
+ --signpost-color: #acbac3;
165
+
166
+ /* Backup Storage Add */
167
+ --backup-storage-add-ready-to-complate-border-color: #e9ebeda3;
168
+
169
+ /* Chart Options Modal */
170
+ --chart-options-timespan-blocks-bg: #ffffff;
171
+ --chart-options-timespan-blocks-title-color: #4d5d69;
172
+
173
+ /* Context Recursion */
174
+ --context-menu-hover-bg-color: #e8e8e8;
175
+ --context-menu-border-color: #949494;
176
+ --context-menu-inset-border-color: #d4d5d6;
177
+ --context-menu-item-header-color: #eceff2;
178
+ --context-menu-hover-border-color: #666;
179
+
180
+ /* Feedback Button */
181
+ --modal-first-title: #565656;
182
+ --icon-fill-color: #1d1c1c;
183
+ --icon-fill-hover-color: rgb(0, 121, 184);
184
+ --btn-border-hover-color: #0079b8;
185
+ --btn-border-color: #dedede;
186
+ --a-link-color: #0072a3;
187
+
188
+ /* Graph */
189
+ --chart-block-title-color: #4d5d69;
190
+ --chart-block-header-bg-color: #ffffff;
191
+ --chart-block-export-button-color: #4d5d69;
192
+ --chart-block-export-button-hover-color: #213444;
193
+ --chart-block-export-button-active-color: #008fd6;
194
+
195
+ /* Advanced Chart Options Modal */
196
+ --chart-options-name-actions-seperate-border-color: #e9ebeda3;
197
+ --chart-options-name-actions-delete-disabled-text-color: #bdc3c7;
198
+ --counters-border-block-border-color: #e9ebeda3;
199
+ --metrics-container-bg-color: #ffffff;
200
+ --metrics-container-title-color: #4d5d69;
201
+ --metrics-container-selected-item-color: #e9eaec;
202
+ --metrics-container-selected-item-bg-color: #213444;
203
+ --metrics-container-item-color: #4d5d69;
204
+ --metrics-container-item-hover-bg-color: rgba(233, 235, 237, 0.4);
205
+ --metrics-container-item-hover-color: #182531;
206
+ --metrics-container-item-border-line-color: #e9ebeda3;
207
+ --chart-options-details-title-color: #4d5d69;
208
+ --advanced-chart-options-border-color: rgba(233, 235, 237, 0.64);
209
+ --advanced-chart-options-text-color: #008fd6;
210
+ --advanced-chart-options-text-hover-color: #0081c1;
211
+ --advanced-text-color: #4d5d69;
212
+
213
+ /* Overview */
214
+ --overview-time-range-label-color: #4d5d69;
215
+ --overview-time-range-border-color: rgba(233, 235, 237, 0.64);
216
+ --overview-filter-text-color: #4d5d69;
217
+ --overview-filter-edit-color: #008fd6;
218
+ --overview-filter-edit-hover-color: #0081c1;
219
+ --graphic-loader-bg-color: #ffffff;
220
+
221
+ /* Feedback Additional Details */
222
+ --upload-image-hover-bg-color: #f6f7f8;
223
+
224
+ /* Feedback New */
225
+ --feedback-tooltip-trigger-color: #9da6ad;
226
+ --feedback-tooltip-acctive-trigger-color: #008fd6;
227
+ --feedback-tooltip-hover-trigger-color: #4d5d69;
228
+ --feedback-text-color: #4d5d69;
229
+ --feedback-tooltip-close-color: #213444;
230
+
231
+ /* Feedback Tabs */
232
+ --feedback-tab-bg-color: #ffffff;
233
+ --feedback-tab-hover-bg-color: #f6f7f8;
234
+ --feedback-tab-active-bg-color: #008fd60f;
235
+ --feedback-tab-border-color: #e9ebed;
236
+ --feedback-tab-active-text-color: #008fd6;
237
+
238
+ /* Help Menu About */
239
+ --about-text-color: #4d5d69;
240
+ --about-text-link-color: #008fd6;
241
+ --about-text-link-hover-color: #0081c1;
242
+
243
+ /* Unsaved Changes Modal */
244
+ --unsaved-changes-modal-bg-color: var(--modal-bg);
245
+
246
+ /* Inventory Tabs */
247
+ --inventory-tabs-left-opacity-block-bg-color: linear-gradient(
248
+ 270deg,
249
+ rgba(255, 255, 255, 0) 0%,
250
+ #ffffff 100%
251
+ );
252
+ --inventory-tabs-right-opacity-block-bg-color: linear-gradient(
253
+ 270deg,
254
+ #ffffff 0%,
255
+ rgba(255, 255, 255, 0) 100%
256
+ );
257
+
258
+ /* UI_I_Button Variables light mode */
259
+ /* outline */
260
+ --btn-outline-border-color: #0079b8;
261
+ --btn-outline-hover-bg-color: #e1f1f6;
262
+ --btn-outline-hover-color: #004d8a;
263
+ --btn-outline-box-shadow-color: #0095d3;
264
+ /* primary */
265
+ --btn-primary-color: #{$white};
266
+ --btn-primary-border-color: #{$--blue-100};
267
+ --btn-primary-hover-bg-color: #004d8a;
268
+ --btn-primary-hover-color: #e1f1f6;
269
+ --btn-primary-box-shadow-color: #0095d3;
270
+ --btn-primary-disabled-color: #666;
271
+ --btn-primary-disabled-bg-color: #ccc;
272
+ /* warning */
273
+ --btn-warning-color: #{$white};
274
+ --btn-warning-bg-color: #{$--red-200};
275
+ --btn-warning-hover-bg-color: #{$--red-150};
276
+ --btn-warning-box-shadow-color: #{$--red-50};
277
+ /* link */
278
+ --btn-link-color: #0079b8;
279
+ --btn-link-hover-color: #004d8a;
280
+ --btn-link-disabled: #{$--grey-150};
281
+
282
+ /* Form Input Label Variables light mode */
283
+ --form-label-color: #000;
284
+ --form-input-color: #000;
285
+ --form-input-border-color: #9a9a9a;
286
+
287
+ /* Checkbox Variables light mode */
288
+ --checkbox-label-color: #454545;
289
+ --checkbox-background-color: #0079b8;
290
+ --checkbox-border-color: #575757;
291
+ --checkbox-mark-color: #fff;
292
+ --checkbox-mark-background-color: #737373;
293
+ --checkbox-value-active-color: #61b715;
294
+
295
+ /* Select Variables light mode */
296
+ --select-color: #000;
297
+
298
+ /* NavBar Variables light mode */
299
+ --nav-link-color: #454545;
300
+ --nav-link-active-color: #000;
301
+ --nav-active-box-shadow-color: #0079b8;
302
+ --nav-link-hover-color: #666666;
303
+ --nav-panel-border-color: #ccc;
304
+
305
+ //--gutter-bg-color: #eee; // for old
306
+ --gutter-bg-color: #e9ebed; // for new
307
+ --new-gutter-bg-color: #e9ebed;
308
+ //--gutter-hover-bg-color: #0079b8; // for old
309
+ --gutter-hover-bg-color: #008fb6; // for new
310
+ //--gutter-active-bg-color: #a6d8e7; // for old
311
+ --gutter-active-bg-color: #66bce6; // for new
312
+ --gutter-before-bg: #9da6ad;
313
+
314
+ /* Items Row Variables light mode */
315
+ --row-hover-bg-color: #{$light-grey-100};
316
+ --row-hover-border-color: #{$--grey-200};
317
+ --row-selected-text-color: #{$white};
318
+ --row-selected-bg-color: #{$--blue-800};
319
+
320
+ /* Vertical Steps Variables light mode */
321
+ --vertical-steps-active-color: #fff;
322
+ --vertical-steps-complete-color: #454545;
323
+ --vertical-steps-active-bg-color: #{$--blue-800};
324
+ --vertical-steps-complete-bg-color: #{$light-grey-100};
325
+ --vertical-steps-hover-border-color: #{$--grey-200};
326
+ --vertical-nav-active-item-color: #fff;
327
+ --vertical-nav-active-bg-color: #29414e;
328
+ --vertical-nav-hover-item-color: #29414e;
329
+ --vertical-nav-hover-bg-color: #e8e8e8;
330
+ --vertical-nav-hover-border-color: #666;
331
+ --tree-node-caret-icon: #666;
332
+
333
+ /* Tooltip Variables light mode */
334
+ --tooltip-content-text-color: #{$white};
335
+ --tooltip-content-bg-color: #{$black};
336
+ --tooltip-content-error-bg-color: #{#c92100};
337
+
338
+ /* Select File Variables light mode */
339
+ --select-file-text-color: #182531;
340
+ --select-file-selected-text-color: #ffffff;
341
+ --select-file-selected-bg: #213444;
342
+ --select-file-hover-bg: #e9ebed66;
343
+ --select-file-sprt-color: #e9ebed;
344
+ --select-file-sprt-handler-color: #9da6ad;
345
+ --select-file-sprt-handler-hover-color: #4d5d69;
346
+ --select-file-sprt-handler-selected-color: #008fd6;
347
+ --select-file-header-bg: #e9ebed66;
348
+ --select-file-header-arrow-color: #008fd6;
349
+ --select-file-info-color: #4d5d69;
350
+
351
+ /* Table Action */
352
+ --table-actions-icon: #4d5d69;
353
+ --table-actions-icon-hover: #182531;
354
+ --table-actions-icon-active: #008fd6;
355
+ --table-actions-view: #4d5d69;
356
+ --table-actions-view-hover: #182531;
357
+ --table-actions-remove: #ea3223;
358
+ --table-actions-bg-hover: #e9ebed66;
359
+
360
+ // Diagram new view
361
+ --diagram-container-bg: #ffffff;
362
+ --diagram-central-panel-bg: #e9ebed66;
363
+ --diagram-block-stroke: #d3d6da;
364
+ --diagram-block-bg: #ffffff;
365
+ --diagram-connect-line: #d3d6da;
366
+ --diagram-selection-line: #008fd6;
367
+ --diagram-selection-bg: #ebf6fc;
368
+ --diagram-highlight-line: #fbce28;
369
+ --diagram-highlight-bg: #fff9e5;
370
+ --diagram-content-text: #4d5d69;
371
+ --diagram-content-text-hover: #182531;
372
+ --diagram-content-text-selected: #008fd6;
373
+ --diagram-content-text-selected-hover: #0081c1;
374
+ --diagram-content-second-text: #182531;
375
+ --diagram-content-second-disabled-text: #bdc3c7;
376
+ --diagram-content-third-text: #9da6ad;
377
+ --diagram-info-text: #4d5d69;
378
+ --diagram-info-second-text: #9da6ad;
379
+
380
+ // VM Add Edit new view
381
+ --select-file-type-label: #4d5d69;
382
+ --remote-console-options-password-content-copy-icon: #9da6ad;
383
+ --cpu-model-info-tooltip-icon-disabled: #bdc3c7;
384
+
385
+ // Add Hosts new view
386
+ --add-hosts-hosts-row-between-line: #e9ebeda3;
387
+ --add-hosts-hosts-row-child-value: #4d5d69;
388
+ --add-hosts-hosts-row-child-vm-bg-color: #e9ebeda3;
389
+ --add-hosts-hosts-row-child-vm-color: #4d5d69;
390
+ --add-hosts-ready-complete-description: #4d5d69;
391
+ --add-hosts-ready-complete-host-item-color: #4d5d69;
392
+
393
+ // Enter Maintenance Mode
394
+ --enter-maintenance-mode-modal-desc: #4d5d69;
395
+
396
+ // Enter Standby Mode
397
+ --enter-standby-mode-modal-desc: #4d5d69;
398
+ --enter-standby-mode-modal-vm-block-key: #4d5d69;
399
+ --enter-standby-mode-modal-block-border: #e9ebeda3;
400
+ --enter-standby-mode-modal-last-attempt-value: #4d5d69;
401
+
402
+ // Shut Down
403
+ --shut-down-modal-question-desc: #4d5d69;
404
+
405
+ // Reboot Host
406
+ --reboot-host-modal-question-desc: #4d5d69;
407
+
408
+ // Move To Modal
409
+ --move-to-tree-scrollbar-thumb-bg: #4d5d69;
410
+ }
411
+
412
+ :root.dark-theme {
413
+ --scrollbar-thumb: #29414e;
414
+ --scrollbar-track: #17242b;
415
+
416
+ --global-font-color: #{$--grey-800};
417
+ --global-font-color2: #{#eaedf0};
418
+ --global-font-color3: #{$light-white-100};
419
+ --global-font-color4: #{$light-white-100};
420
+ --global-font-color5: #{$light-black};
421
+ --global-font-color8: #{$white};
422
+ --global-font-color9: #{$light-blue-100};
423
+ --global-border-color: #495865;
424
+ --global-border-colo2: #{$light-white-100};
425
+ --global-bg-color: #17242b;
426
+ --global-bg-color2: #{$--blue-950};
427
+ --global-text-color: #{$--blue-200};
428
+ --global-text-color2: #{$--blue-200};
429
+ --global-text-color3: #{$--grey-700};
430
+ --block-view-bg-color: #{$--blue-800};
431
+ --block-view-bg-color2: #{$--blue-750};
432
+ --block-view-bg-color3: #{$--blue-800};
433
+ --block-view-bg-color4: #{$--blue-700};
434
+ --block-view-bg-color5: #{$--blue-700};
435
+ --block-view-bg-color6: #{$--blue-700};
436
+ --block-border-color: #{$black};
437
+ --block-border-color2: #{$--blue-960};
438
+
439
+ --main-color-mode: #{$light-white};
440
+
441
+ /* Modal */
442
+ --modal-bg-color: #{$--blue-800};
443
+ --modal-other-bg-color: #22343c;
444
+ --modal-secondary-title: #e9ecef;
445
+
446
+ --close-icon: #{$light-grey};
447
+ --arrows-icon: #e9ecef;
448
+ --info-icon: #{$--grey-800};
449
+ --title-color: #565656;
450
+ --triger-icon-color: #fff;
451
+ --ellipsis-vertical-icon-color: #{$light-white-100};
452
+
453
+ --progress-color: #{$--blue-250};
454
+ --progress-bg-color: #{$--blue-900};
455
+
456
+ --dropdown-bg-color: #1b2a32;
457
+ --dropdown-item-color: #79c6e6;
458
+
459
+ --radio-btn-active-label-bg-color: #2ba2de14;
460
+ --radio-btn-active-label-border-color: #2ba2de;
461
+
462
+ --separator-color: #e9ebed1f;
463
+ --input-border: #e9ebed3d;
464
+ --input-caret-color: #ffffff;
465
+ --input-bg-common: transparent;
466
+ --hide-row-icon: #e9eaec;
467
+ --hide-row-icon-hover: #ffffff;
468
+ --create-row-icon: #2ba2de;
469
+ --create-row-icon-hover: #008fd6;
470
+ --ready-to-complete-border-color: #e9ebed1f;
471
+
472
+ /* Alert */
473
+ --alert-warning-icon-color: currentColor;
474
+ --alert-warning-bg-color: #816709;
475
+ --alert-warning-border-color: transparent;
476
+
477
+ /* Collapse Nav Item */
478
+ --collapse-nav-item-link-color: #e9eaec;
479
+ --collapse-nav-item-link-hover-color: #ffffff;
480
+ --collapse-nav-item-active-link-color: #2ba2de;
481
+ --collapse-nav-item-active-link-hover-color: #0081c1;
482
+
483
+ /* Portlet */
484
+ --portlet-bg-color: transparent;
485
+ --portlet-border-color: #000000;
486
+ --portlet-input-color: #d3d6da;
487
+ --sub-title-color: #e9eaec;
488
+ --tag-input-color: #d3d6da;
489
+
490
+ /* Modal By Steps Second */
491
+ --close-icon-color: #fff;
492
+
493
+ /* Simple Popup */
494
+ --popup-bgcolor: #29414e;
495
+ --table-border-color: #495865;
496
+
497
+ /* Switch */
498
+ --label-before-bg-color: #fff;
499
+ --label-after-bg-color: #1b2a32;
500
+ --label-before-box-shadow: 0 0 0;
501
+
502
+ /* Home */
503
+ --home-title-color: #e9eaec;
504
+
505
+ /* Packages */
506
+ --action-link-container-bg-color: #29414e;
507
+ --vui-action-label-color: #adbbc4;
508
+
509
+ /* Shortcut */
510
+ --shortcut-item-hover-bg: linear-gradient(135deg, #334453 0%, #324c5e 100%);
511
+ --shortcut-item-hover-box-shadow: inset 0 0 0 1.5px #2ba2de,
512
+ 0px -1px 12px 0px rgba(0, 0, 0, 0.1), 0px 4px 20px 0px rgba(0, 0, 0, 0.12);
513
+ --shortcut-item-disabled-text-icon-color: #bdc3c770;
514
+
515
+ /* Tasks */
516
+ --tasks-actions-icon-color: #e9eaec;
517
+ --tasks-actions-icon-hover-color: #ffffff;
518
+ --tasks-actions-icon-icative-color: #2ba2de;
519
+
520
+ /* Header */
521
+ --description-color: #adbbc4;
522
+ --link-visited-color: #49afd9;
523
+ --header-container-bg-color: #1b2a37;
524
+ --header-shortcuts-link-color: #e9eaec;
525
+ --badge-info-bg-color: #2ba2de;
526
+
527
+ /* Main Navigation Panel New View */
528
+ --new-view-vertical-nav-bg-color: rgba(51, 68, 83, 0.92);
529
+ --new-view-vertical-nav-item-color: #e9eaec;
530
+ --new-view-vertical-nav-hover-item-color: #ffffff;
531
+ --new-view-vertical-nav-hover-bg-color: rgba(233, 234, 236, 0.12);
532
+ --new-view-vertical-active-nav-bg-color: rgba(233, 235, 237, 0.96);
533
+ --new-view-vertical-active-nav-color: #213444;
534
+ --new-view-pin-unpin-label-hover-color: #2ba2de;
535
+ --new-view-nav-content-scrollbar-thumb: rgba(157, 166, 173, 0.32);
536
+ --new-view-nav-content-scrollbar-track-corner-thumb: #435360;
537
+ --new-view-nav-content-divider-bg: rgba(211, 214, 218, 0.12);
538
+
539
+ /* Main Navigation Panel Old View */
540
+ --old-view-vertical-nav-bg-color-old: #17242b;
541
+ --old-view-vertical-nav-item-color-old: #e9ecef;
542
+ --old-view-vertical-nav-active-item-color-old: #000;
543
+ --old-view-vertical-nav-divider-border-color-old: #495865;
544
+ --old-view-vertical-border-color-old: #495865;
545
+
546
+ /* Table */
547
+ --table-color: #fff;
548
+ --table-active-color: #565656;
549
+ --table-checkbox-color: #49aeda;
550
+ --table-caret-color: #ffffff;
551
+ --table-switch-color: #b3b3b3;
552
+ --table-hover-row-border-color: #fff;
553
+ --table-hover-row-background-color: #324f61;
554
+ --table-hover-row-color: #e9ecef;
555
+ --table-spinner-bg-color: rgba(0, 0, 0, 0.5);
556
+ --thead-bg-color: #{$--blue-700};
557
+ --row-selected-input-color: #000;
558
+
559
+ /* Vertical Tabs */
560
+ --vertical-tabs-nav-link: #ffffff;
561
+ --vertical-tabs-bg-color: transparent;
562
+
563
+ /* Signpost */
564
+ --signpost-bgcolor: #21333b;
565
+ --signpost-border-color: #000;
566
+ --signpost-color: #acbac3;
567
+
568
+ /* Backup Storage Add */
569
+ --backup-storage-add-ready-to-complate-border-color: #e9ebed1f;
570
+
571
+ /* Chart Options Modal */
572
+ --chart-options-timespan-blocks-bg: #334453;
573
+ --chart-options-timespan-blocks-title-color: #e9eaec;
574
+
575
+ /* Context Recursion */
576
+ --context-menu-hover-bg-color: #324f61;
577
+ --context-menu-border-color: #495865;
578
+ --context-menu-inset-border-color: #485764;
579
+ --context-menu-item-header-color: #29414e;
580
+ --context-menu-hover-border-color: #fff;
581
+
582
+ /* Feedback Button */
583
+ --modal-first-title: #adbbc4;
584
+ --icon-fill-color: rgb(233, 236, 239);
585
+ --icon-fill-hover-color: rgb(73, 175, 217);
586
+ --btn-border-hover-color: #0079b8;
587
+ --btn-border-color: rgb(14, 22, 27);
588
+ --a-link-color: #4aaed9;
589
+
590
+ /* Graph */
591
+ --chart-block-title-color: #e9eaec;
592
+ --chart-block-header-bg-color: #334453;
593
+ --chart-block-export-button-color: #e9eaec;
594
+ --chart-block-export-button-hover-color: #ffffff;
595
+ --chart-block-export-button-active-color: #2ba2de;
596
+
597
+ /* Advanced Chart Options Modal */
598
+ --chart-options-name-actions-seperate-border-color: #e9ebed1f;
599
+ --chart-options-name-actions-delete-disabled-text-color: rgba(
600
+ 189,
601
+ 195,
602
+ 199,
603
+ 0.72
604
+ );
605
+ --counters-border-block-border-color: rgba(233, 235, 237, 0.12);
606
+ --metrics-container-bg-color: #334453;
607
+ --metrics-container-title-color: #e9eaec;
608
+ --metrics-container-selected-item-color: #182531;
609
+ --metrics-container-selected-item-bg-color: #e9eaec;
610
+ --metrics-container-item-color: #e9eaec;
611
+ --metrics-container-item-hover-bg-color: rgba(233, 235, 237, 0.08);
612
+ --metrics-container-item-hover-color: #ffffff;
613
+ --metrics-container-item-border-line-color: #e9ebed1f;
614
+ --chart-options-details-title-color: #e9eaec;
615
+ --advanced-chart-options-border-color: rgba(233, 235, 237, 0.12);
616
+ --advanced-chart-options-text-color: #2ba2de;
617
+ --advanced-chart-options-text-hover-color: #008fd6;
618
+ --advanced-text-color: #e9eaec;
619
+
620
+ /* Overview */
621
+ --overview-time-range-label-color: #e9eaec;
622
+ --overview-time-range-border-color: #e9ebed1f;
623
+ --overview-filter-text-color: #e9eaec;
624
+ --overview-filter-edit-color: #2ba2de;
625
+ --overview-filter-edit-hover-color: #008fd6;
626
+ --graphic-loader-bg-color: #22343c;
627
+
628
+ /* Feedback Additional Details */
629
+ --upload-image-hover-bg-color: #283948;
630
+
631
+ /* Feedback New */
632
+ --feedback-tooltip-trigger-color: #9da6ad;
633
+ --feedback-tooltip-acctive-trigger-color: #2ba2de;
634
+ --feedback-tooltip-hover-trigger-color: #e9eaec;
635
+ --feedback-text-color: #e9eaec;
636
+ --feedback-tooltip-close-color: #e9eaec;
637
+
638
+ /* Feedback Tabs */
639
+ --feedback-tab-bg-color: #1b2a373d;
640
+ --feedback-tab-hover-bg-color: #283948;
641
+ --feedback-tab-active-bg-color: #2ba2de14;
642
+ --feedback-tab-border-color: #e9ebed1f;
643
+ --feedback-tab-active-text-color: #2ba2de;
644
+
645
+ /* Help Menu About */
646
+ --about-text-color: #9da6ad;
647
+ --about-text-link-color: #2ba2de;
648
+ --about-text-link-hover-color: #008fd6;
649
+
650
+ /* Unsaved Changes Modal */
651
+ --unsaved-changes-modal-bg-color: #334453;
652
+
653
+ /* Inventory Tabs */
654
+ --inventory-tabs-left-opacity-block-bg-color: linear-gradient(
655
+ 270deg,
656
+ rgba(33, 52, 68, 0) 0%,
657
+ #213444 100%
658
+ );
659
+ --inventory-tabs-right-opacity-block-bg-color: linear-gradient(
660
+ 270deg,
661
+ #213444 0%,
662
+ rgba(33, 52, 68, 0) 100%
663
+ );
664
+
665
+ /* Button Variables dark mode */
666
+ /* outline */
667
+ --btn-outline-border-color: #89cbdf;
668
+ --btn-outline-hover-bg-color: hsla(0, 0%, 100%, 0.1);
669
+ --btn-outline-hover-color: #57c8ea;
670
+ --btn-outline-box-shadow-color: #000;
671
+ /* primary */
672
+ --btn-primary-color: #{$black};
673
+ --btn-primary-border-color: #{$--blue-250};
674
+ --btn-primary-hover-bg-color: #57c8ea;
675
+ --btn-primary-hover-color: #000;
676
+ --btn-primary-box-shadow-color: #0065ad;
677
+ --btn-primary-disabled-bg-color: #fff;
678
+ --btn-primary-disabled-color: #000;
679
+ /* warning */
680
+ --btn-warning-color: #{$black};
681
+ --btn-warning-bg-color: #{$--red-300};
682
+ --btn-warning-hover-bg-color: #{$--red-400};
683
+ --btn-warning-box-shadow-color: #{$--red-100};
684
+ /* link */
685
+ --btn-link-color: #89cbdf;
686
+ --btn-link-hover-color: #57c8ea;
687
+ --btn-link-disabled: #{$white};
688
+
689
+ /* Form Input Label Variables dark mode */
690
+ --form-label-color: #adbbc4;
691
+ --form-input-color: #e9ecef;
692
+ --form-input-border-color: #adbbc4;
693
+
694
+ /* Checkbox Variables dark mode */
695
+ --checkbox-label-color: #acbac3;
696
+ --checkbox-background-color: #4aaed9;
697
+ --checkbox-border-color: #e9ecef;
698
+ --checkbox-mark-color: #000;
699
+ --checkbox-mark-background-color: #fff;
700
+ --checkbox-value-active-color: #61b715;
701
+
702
+ /* Select Variables light mode */
703
+ --select-color: #000;
704
+
705
+ /* NavBar Variables dark mode */
706
+ --nav-link-color: #acbac3;
707
+ --nav-link-active-color: #fff;
708
+ --nav-active-box-shadow-color: #4aaed9;
709
+ --nav-link-hover-color: #acbac3;
710
+ --nav-panel-border-color: #495865;
711
+
712
+ //--gutter-bg-color: #25333d; // for old
713
+ --gutter-bg-color: #e9ebed1f; // for new
714
+ --new-gutter-bg-color: #394a58;
715
+ --gutter-hover-bg-color: #2776a0;
716
+ --gutter-active-bg-color: #2ba2de;
717
+ --gutter-before-bg: rgba(157, 166, 173, 0.32);
718
+
719
+ /* Items Row Variables light mode */
720
+ --row-hover-bg-color: #{$--blue-950};
721
+ --row-hover-border-color: #{$white};
722
+ --row-selected-text-color: #{$black};
723
+ --row-selected-bg-color: #{$light-blue};
724
+
725
+ /* Vertical Steps Variables dark mode */
726
+ --vertical-steps-active-color: #000;
727
+ --vertical-steps-complete-color: #acbac3;
728
+ --vertical-steps-active-bg-color: #{$light-blue};
729
+ --vertical-steps-complete-bg-color: #{$--blue-950};
730
+ --vertical-steps-hover-border-color: #{$white};
731
+ --vertical-nav-active-item-color: #{$black};
732
+ --vertical-nav-active-bg-color: #d8e3e9;
733
+ --vertical-nav-hover-item-color: #d8e3e9;
734
+ --vertical-nav-hover-bg-color: #324f61;
735
+ --vertical-nav-hover-border-color: #fff;
736
+ --tree-node-caret-icon: #acbac3;
737
+
738
+ /* Tooltip Variables light mode */
739
+ --tooltip-content-text-color: #{$black};
740
+ --tooltip-content-bg-color: #{$white};
741
+
742
+ /* Select File Variables dark mode */
743
+ --select-file-text-color: #e9eaec;
744
+ --select-file-selected-text-color: #182531;
745
+ --select-file-selected-bg: #e9eaec;
746
+ --select-file-hover-bg: #e9eaec1f;
747
+ --select-file-sprt-color: #e9ebed1f;
748
+ --select-file-sprt-handler-color: #9da6ad;
749
+ --select-file-sprt-handler-hover-color: #e9eaec;
750
+ --select-file-sprt-handler-selected-color: #2ba2de;
751
+ --select-file-header-bg: #e9ebed0f;
752
+ --select-file-header-arrow-color: #2ba2de;
753
+ --select-file-info-color: #e9eaec;
754
+
755
+ /* Table Action */
756
+ --table-actions-icon: #e9eaec;
757
+ --table-actions-icon-hover: #ffffff;
758
+ --table-actions-icon-active: #2ba2de;
759
+ --table-actions-view: #e9eaec;
760
+ --table-actions-view-hover: #ffffff;
761
+ --table-actions-remove: #ea3223;
762
+ --table-actions-bg-hover: #e9ebed0f;
763
+
764
+ // Diagram new view
765
+ --diagram-container-bg: #334453;
766
+ --diagram-central-panel-bg: #e9ebed0f;
767
+ --diagram-block-stroke: #5c6a76;
768
+ --diagram-block-bg: #304150;
769
+ --diagram-connect-line: #5c6a76;
770
+ --diagram-selection-line: #2ba2de;
771
+ --diagram-selection-bg: #2f5167;
772
+ --diagram-highlight-line: #fbce28;
773
+ --diagram-highlight-bg: #48524b;
774
+ --diagram-content-text: #e9eaec;
775
+ --diagram-content-text-hover: #ffffff;
776
+ --diagram-content-text-selected: #2ba2de;
777
+ --diagram-content-text-selected-hover: #008fd6;
778
+ --diagram-content-second-text: #e9eaec;
779
+ --diagram-content-second-disabled-text: #4d5d69;
780
+ --diagram-content-third-text: #9da6ad;
781
+ --diagram-info-text: #e9eaec;
782
+ --diagram-info-second-text: #9da6ad;
783
+
784
+ // VM Add Edit new view
785
+ --select-file-type-label: #e9eaec;
786
+ --remote-console-options-password-content-copy-icon: #e9eaec;
787
+ --cpu-model-info-tooltip-icon-disabled: #bdc3c770;
788
+
789
+ // Add Hosts new view
790
+ --add-hosts-hosts-row-between-line: #e9ebed1f;
791
+ --add-hosts-hosts-row-child-value: #e9eaec;
792
+ --add-hosts-hosts-row-child-vm-bg-color: #e9ebed1f;
793
+ --add-hosts-hosts-row-child-vm-color: #e9eaec;
794
+ --add-hosts-ready-complete-description: #e9eaec;
795
+ --add-hosts-ready-complete-host-item-color: #e9eaec;
796
+
797
+ // Enter Maintenance Mode
798
+ --enter-maintenance-mode-modal-desc: #e9eaec;
799
+
800
+ // Enter Standby Mode
801
+ --enter-standby-mode-modal-desc: #e9eaec;
802
+ --enter-standby-mode-modal-vm-block-key: #e9eaec;
803
+ --enter-standby-mode-modal-block-border: #e9ebed1f;
804
+ --enter-standby-mode-modal-last-attempt-value: #e9eaec;
805
+
806
+ // Shut Down
807
+ --shut-down-modal-question-desc: #e9eaec;
808
+
809
+ // Reboot Host
810
+ --reboot-host-modal-question-desc: #e9eaec;
811
+
812
+ // Move To Modal
813
+ --move-to-tree-scrollbar-thumb-bg: #d3d6da3d;
814
+ }