@syncfusion/ej2-image-editor 25.2.4 → 26.1.35

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 (128) hide show
  1. package/.eslintrc.json +3 -2
  2. package/dist/ej2-image-editor.umd.min.js +2 -2
  3. package/dist/ej2-image-editor.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-image-editor.es2015.js +2679 -830
  5. package/dist/es6/ej2-image-editor.es2015.js.map +1 -1
  6. package/dist/es6/ej2-image-editor.es5.js +2762 -873
  7. package/dist/es6/ej2-image-editor.es5.js.map +1 -1
  8. package/dist/global/ej2-image-editor.min.js +2 -2
  9. package/dist/global/ej2-image-editor.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/package.json +13 -12
  12. package/src/image-editor/action/crop.d.ts +0 -1
  13. package/src/image-editor/action/crop.js +35 -77
  14. package/src/image-editor/action/draw.d.ts +3 -0
  15. package/src/image-editor/action/draw.js +190 -81
  16. package/src/image-editor/action/export.d.ts +3 -0
  17. package/src/image-editor/action/export.js +99 -41
  18. package/src/image-editor/action/filter.d.ts +0 -1
  19. package/src/image-editor/action/filter.js +4 -24
  20. package/src/image-editor/action/freehand-draw.js +30 -8
  21. package/src/image-editor/action/selection.d.ts +10 -0
  22. package/src/image-editor/action/selection.js +444 -99
  23. package/src/image-editor/action/shape.d.ts +11 -1
  24. package/src/image-editor/action/shape.js +520 -127
  25. package/src/image-editor/action/transform.d.ts +0 -1
  26. package/src/image-editor/action/transform.js +53 -69
  27. package/src/image-editor/action/undo-redo.d.ts +2 -0
  28. package/src/image-editor/action/undo-redo.js +114 -29
  29. package/src/image-editor/base/enum.d.ts +5 -1
  30. package/src/image-editor/base/enum.js +4 -0
  31. package/src/image-editor/base/image-editor-model.d.ts +8 -6
  32. package/src/image-editor/base/image-editor.d.ts +116 -7
  33. package/src/image-editor/base/image-editor.js +378 -52
  34. package/src/image-editor/base/interface.d.ts +17 -0
  35. package/src/image-editor/base/interface.js +0 -1
  36. package/src/image-editor/renderer/toolbar.d.ts +14 -1
  37. package/src/image-editor/renderer/toolbar.js +831 -191
  38. package/styles/bootstrap-dark.css +279 -97
  39. package/styles/bootstrap-dark.scss +13 -1
  40. package/styles/bootstrap.css +282 -98
  41. package/styles/bootstrap.scss +13 -1
  42. package/styles/bootstrap4.css +280 -97
  43. package/styles/bootstrap4.scss +13 -1
  44. package/styles/bootstrap5-dark.css +280 -101
  45. package/styles/bootstrap5-dark.scss +13 -1
  46. package/styles/bootstrap5.css +280 -101
  47. package/styles/bootstrap5.scss +13 -1
  48. package/styles/fabric-dark.css +281 -97
  49. package/styles/fabric-dark.scss +13 -1
  50. package/styles/fabric.css +284 -97
  51. package/styles/fabric.scss +13 -1
  52. package/styles/fluent-dark.css +287 -101
  53. package/styles/fluent-dark.scss +13 -1
  54. package/styles/fluent.css +287 -101
  55. package/styles/fluent.scss +13 -1
  56. package/styles/fluent2.css +1851 -0
  57. package/styles/fluent2.scss +13 -0
  58. package/styles/highcontrast-light.css +279 -97
  59. package/styles/highcontrast-light.scss +13 -1
  60. package/styles/highcontrast.css +284 -97
  61. package/styles/highcontrast.scss +13 -1
  62. package/styles/image-editor/_bds-definition.scss +5 -0
  63. package/styles/image-editor/_bootstrap-dark-definition.scss +5 -0
  64. package/styles/image-editor/_bootstrap-definition.scss +5 -0
  65. package/styles/image-editor/_bootstrap4-definition.scss +5 -0
  66. package/styles/image-editor/_bootstrap5-definition.scss +5 -0
  67. package/styles/image-editor/_bootstrap5.3-definition.scss +26 -0
  68. package/styles/image-editor/_fabric-dark-definition.scss +5 -0
  69. package/styles/image-editor/_fabric-definition.scss +5 -0
  70. package/styles/image-editor/_fluent-definition.scss +5 -0
  71. package/styles/image-editor/_fluent2-definition.scss +26 -0
  72. package/styles/image-editor/_fusionnew-definition.scss +5 -0
  73. package/styles/image-editor/_highcontrast-definition.scss +5 -0
  74. package/styles/image-editor/_highcontrast-light-definition.scss +5 -0
  75. package/styles/image-editor/_layout.scss +352 -13
  76. package/styles/image-editor/_material-dark-definition.scss +5 -0
  77. package/styles/image-editor/_material-definition.scss +5 -0
  78. package/styles/image-editor/_material3-definition.scss +5 -0
  79. package/styles/image-editor/_tailwind-definition.scss +5 -0
  80. package/styles/image-editor/bootstrap-dark.css +279 -97
  81. package/styles/image-editor/bootstrap.css +282 -98
  82. package/styles/image-editor/bootstrap4.css +280 -97
  83. package/styles/image-editor/bootstrap5-dark.css +280 -101
  84. package/styles/image-editor/bootstrap5.css +280 -101
  85. package/styles/image-editor/fabric-dark.css +281 -97
  86. package/styles/image-editor/fabric.css +284 -97
  87. package/styles/image-editor/fluent-dark.css +287 -101
  88. package/styles/image-editor/fluent.css +287 -101
  89. package/styles/image-editor/fluent2.css +1851 -0
  90. package/styles/image-editor/fluent2.scss +13 -0
  91. package/styles/image-editor/highcontrast-light.css +279 -97
  92. package/styles/image-editor/highcontrast.css +284 -97
  93. package/styles/image-editor/icons/_bds.scss +1 -162
  94. package/styles/image-editor/icons/_bootstrap-dark.scss +1 -162
  95. package/styles/image-editor/icons/_bootstrap.scss +1 -162
  96. package/styles/image-editor/icons/_bootstrap4.scss +1 -162
  97. package/styles/image-editor/icons/_bootstrap5.3.scss +250 -0
  98. package/styles/image-editor/icons/_bootstrap5.scss +1 -168
  99. package/styles/image-editor/icons/_fabric-dark.scss +1 -162
  100. package/styles/image-editor/icons/_fabric.scss +1 -162
  101. package/styles/image-editor/icons/_fluent.scss +1 -168
  102. package/styles/image-editor/icons/_fluent2.scss +256 -0
  103. package/styles/image-editor/icons/_fusionnew.scss +1 -138
  104. package/styles/image-editor/icons/_highcontrast-light.scss +1 -162
  105. package/styles/image-editor/icons/_highcontrast.scss +1 -162
  106. package/styles/image-editor/icons/_material-dark.scss +2 -163
  107. package/styles/image-editor/icons/_material.scss +1 -162
  108. package/styles/image-editor/icons/_material3.scss +2 -169
  109. package/styles/image-editor/icons/_tailwind.scss +1 -162
  110. package/styles/image-editor/material-dark.css +299 -100
  111. package/styles/image-editor/material.css +302 -100
  112. package/styles/image-editor/material3-dark.css +314 -103
  113. package/styles/image-editor/material3.css +314 -103
  114. package/styles/image-editor/tailwind-dark.css +284 -97
  115. package/styles/image-editor/tailwind.css +284 -97
  116. package/styles/material-dark.css +299 -100
  117. package/styles/material-dark.scss +13 -1
  118. package/styles/material.css +302 -100
  119. package/styles/material.scss +13 -1
  120. package/styles/material3-dark.css +314 -103
  121. package/styles/material3-dark.scss +13 -1
  122. package/styles/material3.css +314 -103
  123. package/styles/material3.scss +13 -1
  124. package/styles/tailwind-dark.css +284 -97
  125. package/styles/tailwind-dark.scss +13 -1
  126. package/styles/tailwind.css +284 -97
  127. package/styles/tailwind.scss +13 -1
  128. package/CHANGELOG.md +0 -289
package/styles/fluent2.css ADDED
@@ -0,0 +1,1851 @@
1
+ :root {
2
+ --color-sf-black: #000;
3
+ --color-sf-white: #fff;
4
+ --color-sf-primary: #0f6cbd;
5
+ --color-sf-primary-text-color: #fff;
6
+ --color-sf-primary-light: #b4d6fa;
7
+ --color-sf-primary-lighter: #ebf3fc;
8
+ --color-sf-primary-dark: #0f548c;
9
+ --color-sf-primary-darker: #0c3b5e;
10
+ --color-sf-success: #0e700e;
11
+ --color-sf-info: #008aa9;
12
+ --color-sf-warning: #bc4b09;
13
+ --color-sf-danger: #d13438;
14
+ --color-sf-success-light: #54b054;
15
+ --color-sf-info-light: #56bfd7;
16
+ --color-sf-warning-light: #fee5d7;
17
+ --color-sf-danger-light: #eeacb2;
18
+ --color-sf-success-dark: #54b054;
19
+ --color-sf-info-dark: #56bfd7;
20
+ --color-sf-warning-dark: #8a3707;
21
+ --color-sf-danger-dark: #6e0811;
22
+ --color-sf-success-light-alt: #f1faf1;
23
+ --color-sf-info-light-alt: #f2fafc;
24
+ --color-sf-warning-light-alt: #fff9f5;
25
+ --color-sf-danger-light-alt: #fdf3f4;
26
+ --color-sf-badge-warning: #fde300;
27
+ --color-sf-badge-warning-text: #847619;
28
+ --color-sf-primary-label-color: var(--color-sf-primary);
29
+ --color-sf-primary-cell-selection: var(--color-sf-primary-lighter);
30
+ --color-sf-brand-primary: #7e56d8;
31
+ --color-sf-brand-primary-d10: #6e41d3;
32
+ --color-sf-content-bg-color: #fafafa;
33
+ --color-sf-content-bg-color-alt1: #fff;
34
+ --color-sf-content-bg-color-alt2: #f5f5f5;
35
+ --color-sf-content-bg-color-alt3: #e6e6e6;
36
+ --color-sf-content-bg-color-alt4: #f0f0f0;
37
+ --color-sf-content-bg-color-alt5: #ebebeb;
38
+ --color-sf-content-bg-color-alt6: #e6e6e6;
39
+ --color-sf-content-bg-color-hover: #f0f0f0;
40
+ --color-sf-content-bg-color-pressed: #dbdbdb;
41
+ --color-sf-content-bg-color-focus: #f0f0f0;
42
+ --color-sf-content-bg-color-selected: #e6e6e6;
43
+ --color-sf-content-bg-color-dragged: #ebf3fc;
44
+ --color-sf-content-bg-color-disabled: #f0f0f0;
45
+ --color-sf-flyout-bg-color: #fff;
46
+ --color-sf-flyout-bg-color-hover: #f5f5f5;
47
+ --color-sf-flyout-bg-color-pressed: #e0e0e0;
48
+ --color-sf-flyout-bg-color-selected: #ebebeb;
49
+ --color-sf-flyout-bg-color-focus: #f5f5f5;
50
+ --color-sf-overlay-bg-color: #000;
51
+ --color-sf-table-bg-color-hover: #f5f5f5;
52
+ --color-sf-table-bg-color-pressed: #e0e0e0;
53
+ --color-sf-table-bg-color-selected: #ebf3fc;
54
+ --color-sf-content-text-color: #242424;
55
+ --color-sf-content-text-color-alt1: #424242;
56
+ --color-sf-content-text-color-alt2: #616161;
57
+ --color-sf-content-text-color-alt3: #707070;
58
+ --color-sf-content-text-color-hover: var(--color-sf-content-text-color);
59
+ --color-sf-content-text-color-pressed: var(--color-sf-content-text-color);
60
+ --color-sf-content-text-color-focus: var(--color-sf-content-text-color);
61
+ --color-sf-content-text-color-selected: var(--color-sf-content-text-color);
62
+ --color-sf-content-text-color-dragged: var(--color-sf-content-text-color);
63
+ --color-sf-content-text-color-disabled: #bdbdbd;
64
+ --color-sf-placeholder-text-color: #707070;
65
+ --color-sf-flyout-text-color: var(--color-sf-content-text-color);
66
+ --color-sf-flyout-text-color-hover: var(--color-sf-content-text-color);
67
+ --color-sf-flyout-text-color-pressed: var(--color-sf-content-text-color);
68
+ --color-sf-flyout-text-color-selected: var(--color-sf-content-text-color);
69
+ --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color);
70
+ --color-sf-flyout-text-color-disabled: var(--color-sf-content-text-color-disabled);
71
+ --color-sf-table-text-color-hover: var(--color-sf-content-text-color);
72
+ --color-sf-table-text-color-pressed: var(--color-sf-content-text-color);
73
+ --color-sf-table-text-color-selected: var(--color-sf-content-text-color);
74
+ --color-sf-icon-color: var(--color-sf-content-text-color-alt1);
75
+ --color-sf-icon-color-hover: var(--color-sf-content-text-color);
76
+ --color-sf-icon-color-pressed: var(--color-sf-content-text-color);
77
+ --color-sf-icon-color-disabled: var(--color-sf-content-text-color-disabled);
78
+ --color-sf-border-light: #e0e0e0;
79
+ --color-sf-border: #d1d1d1;
80
+ --color-sf-border-alt: #616161;
81
+ --color-sf-border-dark: #c7c7c7;
82
+ --color-sf-border-hover: #575757;
83
+ --color-sf-border-pressed: #4d4d4d;
84
+ --color-sf-border-focus: var(--color-sf-border);
85
+ --color-sf-border-selected: #b3b3b3;
86
+ --color-sf-border-dragged: #ebf3fc;
87
+ --color-sf-border-disabled: var(--color-sf-border-light);
88
+ --color-sf-border-warning: #da3b01;
89
+ --color-sf-border-error: #c50f1f;
90
+ --color-sf-border-success: #107c10;
91
+ --color-sf-border-info: #0099bc;
92
+ --color-sf-spreadsheet-gridline: var(--color-sf-content-bg-color-alt3);
93
+ --color-sf-flyout-border: var(--color-sf-border-light);
94
+ --color-sf-primary-bg-color: var(--color-sf-primary);
95
+ --color-sf-primary-border-color: var(--color-sf-primary);
96
+ --color-sf-primary-text: var(--color-sf-primary-text-color);
97
+ --color-sf-primary-bg-color-hover: #115ea3;
98
+ --color-sf-primary-border-color-hover: var(--color-sf-primary-bg-color-hover);
99
+ --color-sf-primary-text-hover: var(--color-sf-primary-text-color);
100
+ --color-sf-primary-bg-color-pressed: #0c3b5e;
101
+ --color-sf-primary-border-color-pressed: var(--color-sf-primary-bg-color-pressed);
102
+ --color-sf-primary-text-pressed: var(--color-sf-primary-text-color);
103
+ --color-sf-primary-bg-color-focus: var(--color-sf-primary-bg-color-hover);
104
+ --color-sf-primary-border-color-focus: var(--color-sf-primary-bg-color-focus);
105
+ --color-sf-primary-text-focus: var(--color-sf-primary-text-color);
106
+ --color-sf-primary-bg-color-disabled: #f0f0f0;
107
+ --color-sf-primary-border-color-disabled: var(--color-sf-primary-bg-color-disabled);
108
+ --color-sf-primary-text-disabled: #b8b8b8;
109
+ --color-sf-primary-bg-color-selected: #0f548c;
110
+ --color-sf-primary-border-color-selected: var(--color-sf-primary-bg-color-selected);
111
+ --color-sf-primary-text-selected: var(--color-sf-primary-text-color);
112
+ --color-sf-secondary-bg-color: #fff;
113
+ --color-sf-secondary-border-color: #d1d1d1;
114
+ --color-sf-secondary-text-color: var(--color-sf-content-text-color);
115
+ --color-sf-secondary-bg-color-hover: #f5f5f5;
116
+ --color-sf-secondary-border-color-hover: #c7c7c7;
117
+ --color-sf-secondary-text-color-hover: var(--color-sf-content-text-color);
118
+ --color-sf-secondary-bg-color-pressed: #e0e0e0;
119
+ --color-sf-secondary-border-color-pressed: #b3b3b3;
120
+ --color-sf-secondary-text-color-pressed: var(--color-sf-content-text-color);
121
+ --color-sf-secondary-bg-color-focus: var(--color-sf-secondary-bg-color);
122
+ --color-sf-secondary-border-color-focus: #000;
123
+ --color-sf-secondary-text-color-focus: var(--color-sf-content-text-color);
124
+ --color-sf-secondary-bg-color-disabled: #f0f0f0;
125
+ --color-sf-secondary-border-color-disabled: #e0e0e0;
126
+ --color-sf-secondary-text-color-disabled: #bdbdbd;
127
+ --color-sf-secondary-bg-color-selected: #ebebeb;
128
+ --color-sf-secondary-border-color-selected: #bdbdbd;
129
+ --color-sf-secondary-text-color-selected: #242424;
130
+ --color-sf-success-bg-color: #107c10;
131
+ --color-sf-success-border-color: var(--color-sf-success-bg-color);
132
+ --color-sf-success-text: var(--color-sf-primary-text-color);
133
+ --color-sf-success-bg-color-hover: #0c5e0c;
134
+ --color-sf-success-border-color-hover: var(--color-sf-success-bg-color-hover);
135
+ --color-sf-success-text-hover: var(--color-sf-primary-text-color);
136
+ --color-sf-success-bg-color-pressed: #052505;
137
+ --color-sf-success-border-color-pressed: var(--color-sf-success-bg-color-pressed);
138
+ --color-sf-success-text-pressed: var(--color-sf-primary-text-color);
139
+ --color-sf-success-bg-color-focus: var(--color-sf-success-bg-color);
140
+ --color-sf-success-border-color-focus: var(--color-sf-success-bg-color-focus);
141
+ --color-sf-success-text-focus: var(--color-sf-primary-text-color);
142
+ --color-sf-success-bg-color-disabled: var(--color-sf-primary-bg-color-disabled);
143
+ --color-sf-success-border-color-disabled: var(--color-sf-success-bg-color-disabled);
144
+ --color-sf-success-text-disabled: var(--color-sf-primary-text-disabled);
145
+ --color-sf-success-bg-color-selected: #094509;
146
+ --color-sf-success-border-color-selected: var(--color-sf-success-bg-color-selected);
147
+ --color-sf-success-text-selected: var(--color-sf-primary-text-color);
148
+ --color-sf-warning-bg-color: #f7630c;
149
+ --color-sf-warning-border-color: var(--color-sf-warning-bg-color);
150
+ --color-sf-warning-text: var(--color-sf-content-text-color);
151
+ --color-sf-warning-bg-color-hover: #bc4b09;
152
+ --color-sf-warning-border-color-hover: var(--color-sf-warning-bg-color-hover);
153
+ --color-sf-warning-text-hover: var(--color-sf-primary-text-color);
154
+ --color-sf-warning-bg-color-pressed: #4a1e04;
155
+ --color-sf-warning-border-color-pressed: var(--color-sf-warning-bg-color-pressed);
156
+ --color-sf-warning-text-pressed: var(--color-sf-primary-text-color);
157
+ --color-sf-warning-bg-color-focus: var(--color-sf-warning-bg-color);
158
+ --color-sf-warning-border-color-focus: var(--color-sf-warning-bg-color-focus);
159
+ --color-sf-warning-text-focus: var(--color-sf-primary-text-color);
160
+ --color-sf-warning-bg-color-disabled: var(--color-sf-primary-bg-color-disabled);
161
+ --color-sf-warning-border-color-disabled: var(--color-sf-warning-bg-color-disabled);
162
+ --color-sf-warning-text-disabled: var(--color-sf-primary-text-disabled);
163
+ --color-sf-warning-bg-color-selected: #bc4b09;
164
+ --color-sf-warning-border-color-selected: var(--color-sf-warning-bg-color-selected);
165
+ --color-sf-warning-text-selected: var(--color-sf-primary-text-color);
166
+ --color-sf-info-bg-color: #31afcc;
167
+ --color-sf-info-border-color: var(--color-sf-info-bg-color);
168
+ --color-sf-info-text: var(--color-sf-content-text-color);
169
+ --color-sf-info-bg-color-hover: #008aa9;
170
+ --color-sf-info-border-color-hover: var(--color-sf-info-bg-color-hover);
171
+ --color-sf-info-text-hover: var(--color-sf-primary-text-color);
172
+ --color-sf-info-bg-color-pressed: #00748f;
173
+ --color-sf-info-border-color-pressed: var(--color-sf-info-bg-color-pressed);
174
+ --color-sf-info-text-pressed: var(--color-sf-primary-text-color);
175
+ --color-sf-info-bg-color-focus: var(--color-sf-info-bg-color);
176
+ --color-sf-info-border-color-focus: var(--color-sf-info-bg-color-focus);
177
+ --color-sf-info-text-focus: var(--color-sf-primary-text-color);
178
+ --color-sf-info-bg-color-disabled: var(--color-sf-primary-bg-color-disabled);
179
+ --color-sf-info-border-color-disabled: var(--color-sf-info-bg-color-disabled);
180
+ --color-sf-info-text-disabled: var(--color-sf-primary-text-disabled);
181
+ --color-sf-info-bg-color-selected: #005669;
182
+ --color-sf-info-border-color-selected: var(--color-sf-info-bg-color-selected);
183
+ --color-sf-info-text-selected: var(--color-sf-primary-text-color);
184
+ --color-sf-danger-bg-color: #c50f1f;
185
+ --color-sf-danger-border-color: var(--color-sf-danger-bg-color);
186
+ --color-sf-danger-text: var(--color-sf-primary-text-color);
187
+ --color-sf-danger-bg-color-hover: #960b18;
188
+ --color-sf-danger-border-color-hover: var(--color-sf-danger-bg-color-hover);
189
+ --color-sf-danger-text-hover: var(--color-sf-primary-text-color);
190
+ --color-sf-danger-bg-color-pressed: #3b0509;
191
+ --color-sf-danger-border-color-pressed: var(--color-sf-danger-bg-color-pressed);
192
+ --color-sf-danger-text-pressed: var(--color-sf-primary-text-color);
193
+ --color-sf-danger-bg-color-focus: var(--color-sf-danger-bg-color);
194
+ --color-sf-danger-border-color-focus: var(--color-sf-danger-bg-color-focus);
195
+ --color-sf-danger-text-focus: var(--color-sf-primary-text-color);
196
+ --color-sf-danger-bg-color-disabled: var(--color-sf-primary-bg-color-disabled);
197
+ --color-sf-danger-border-color-disabled: var(--color-sf-danger-bg-color-disabled);
198
+ --color-sf-danger-text-disabled: var(--color-sf-primary-text-disabled);
199
+ --color-sf-danger-bg-color-selected: #6e0811;
200
+ --color-sf-danger-border-color-selected: var(--color-sf-danger-bg-color-selected);
201
+ --color-sf-danger-text-selected: var(--color-sf-primary-text-color);
202
+ --color-sf-primary-outline: var(--color-sf-primary);
203
+ --color-sf-secondary-outline: var(--color-sf-secondary-border-color);
204
+ --color-sf-warning-outline: var(--color-sf-warning-border-color);
205
+ --color-sf-danger-outline: var(--color-sf-danger-border-color);
206
+ --color-sf-success-outline: var(--color-sf-success-border-color);
207
+ --color-sf-info-outline: var(--color-sf-info-border-color);
208
+ --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
209
+ --color-sf-tooltip-border: var(--color-sf-content-bg-color-alt1);
210
+ --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
211
+ --color-sf-toast-text-color: var(--color-sf-content-text-color);
212
+ --color-sf-toast-alt-text-color: var(--color-sf-content-text-color-alt1);
213
+ --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt2);
214
+ --color-sf-appbar-color-alt1: var(--color-sf-content-text-color);
215
+ --color-sf-appbar-border-color-alt1: var(--color-sf-content-bg-color-alt2);
216
+ --color-sf-appbar-hover-bg-color-alt1: transparent;
217
+ --color-sf-appbar-bg-color-alt2: #141414;
218
+ --color-sf-appbar-color-alt2: var(--color-sf-content-bg-color-alt1);
219
+ --color-sf-appbar-border-color-alt2: #141414;
220
+ --color-sf-appbar-hover-bg-color-alt2: transparent;
221
+ --color-sf-diagram-palette-background: var(--color-sf-content-bg-color-alt1);
222
+ --color-sf-diagram-palette-hover-background: var(--color-sf-content-bg-color-hover);
223
+ --color-sf-diagram-palette-selected-background: var(--color-sf-content-bg-color-selected);
224
+ --color-sf-rating-selected-color: #242424;
225
+ --color-sf-rating-unrated-color: var(--color-sf-content-text-color);
226
+ --color-sf-rating-selected-disabled-color: #b3b3b3;
227
+ --color-sf-rating-unrated-disabled-color: #b3b3b3;
228
+ --color-sf-rating-selected-hover-color: #115ea3;
229
+ --color-sf-rating-unrated-hover-color: #0f6cbd;
230
+ --color-sf-rating-pressed-color: #0f548c;
231
+ --color-sf-msg-color: var(--color-sf-content-text-color);
232
+ --color-sf-msg-bg-color: #f5f5f5;
233
+ --color-sf-msg-border-color: #d1d1d1;
234
+ --color-sf-msg-color-alt1: var(--color-sf-content-text-color);
235
+ --color-sf-msg-bg-color-alt1: transparent;
236
+ --color-sf-msg-border-color-alt1: #d1d1d1;
237
+ --color-sf-msg-color-alt2: #fff;
238
+ --color-sf-msg-bg-color-alt2: #616161;
239
+ --color-sf-msg-border-color-alt2: var(--color-sf-msg-bg-color-alt2);
240
+ --color-sf-msg-icon-color: var(--color-sf-msg-bg-color-alt2);
241
+ --color-sf-msg-icon-color-alt1: var(--color-sf-msg-icon-color);
242
+ --color-sf-msg-icon-color-alt2: #fff;
243
+ --color-sf-msg-close-icon-color: var(--color-sf-content-text-color-alt1);
244
+ --color-sf-msg-close-icon-color-alt1: var(--color-sf-msg-close-icon-color);
245
+ --color-sf-msg-close-icon-color-alt2: #fff;
246
+ --color-sf-msg-success-color: var(--color-sf-content-text-color);
247
+ --color-sf-msg-success-bg-color: #f1faf1;
248
+ --color-sf-msg-success-border-color: #9fd89f;
249
+ --color-sf-msg-success-color-alt1: #0e700e;
250
+ --color-sf-msg-success-bg-color-alt1: transparent;
251
+ --color-sf-msg-success-border-color-alt1: var(--color-sf-msg-success-border-color);
252
+ --color-sf-msg-success-color-alt2: #fff;
253
+ --color-sf-msg-success-bg-color-alt2: #107c10;
254
+ --color-sf-msg-success-border-color-alt2: var(--color-sf-msg-success-bg-color-alt2);
255
+ --color-sf-msg-success-icon-color: #0e700e;
256
+ --color-sf-msg-success-icon-color-alt1: var(--color-sf-msg-success-icon-color);
257
+ --color-sf-msg-success-icon-color-alt2: #fff;
258
+ --color-sf-msg-success-close-icon-color: var(--color-sf-content-text-color-alt1);
259
+ --color-sf-msg-success-close-icon-color-alt1: var(--color-sf-msg-success-close-icon-color-alt1);
260
+ --color-sf-msg-success-close-icon-color-alt2: #fff;
261
+ --color-sf-msg-danger-color: var(--color-sf-content-text-color);
262
+ --color-sf-msg-danger-bg-color: #fdf3f4;
263
+ --color-sf-msg-danger-border-color: #eeacb2;
264
+ --color-sf-msg-danger-color-alt1: #b10e1c;
265
+ --color-sf-msg-danger-bg-color-alt1: transparent;
266
+ --color-sf-msg-danger-border-color-alt1: var(--color-sf-msg-danger-border-color);
267
+ --color-sf-msg-danger-color-alt2: #fff;
268
+ --color-sf-msg-danger-bg-color-alt2: #c50f1f;
269
+ --color-sf-msg-danger-border-color-alt2: var(--color-sf-msg-danger-bg-color-alt2);
270
+ --color-sf-msg-danger-icon-color: #b10e1c;
271
+ --color-sf-msg-danger-icon-color-alt1: var(--color-sf-msg-danger-icon-color);
272
+ --color-sf-msg-danger-icon-color-alt2: #fff;
273
+ --color-sf-msg-danger-close-icon-color: var(--color-sf-content-text-color-alt1);
274
+ --color-sf-msg-danger-close-icon-color-alt1: var(--color-sf-msg-danger-close-icon-color-alt1);
275
+ --color-sf-msg-danger-close-icon-color-alt2: #fff;
276
+ --color-sf-msg-info-color: var(--color-sf-content-text-color);
277
+ --color-sf-msg-info-bg-color: #f2fafc;
278
+ --color-sf-msg-info-border-color: #a4deeb;
279
+ --color-sf-msg-info-color-alt1: #00748f;
280
+ --color-sf-msg-info-bg-color-alt1: transparent;
281
+ --color-sf-msg-info-border-color-alt1: var(--color-sf-msg-info-border-color);
282
+ --color-sf-msg-info-color-alt2: #fff;
283
+ --color-sf-msg-info-bg-color-alt2: #0099bc;
284
+ --color-sf-msg-info-border-color-alt2: var(--color-sf-msg-info-bg-color-alt2);
285
+ --color-sf-msg-info-icon-color: #008aa9;
286
+ --color-sf-msg-info-icon-color-alt1: var(--color-sf-msg-info-icon-color);
287
+ --color-sf-msg-info-icon-color-alt2: #fff;
288
+ --color-sf-msg-info-close-icon-color: var(--color-sf-content-text-color-alt1);
289
+ --color-sf-msg-info-close-icon-color-alt1: var(--color-sf-msg-info-close-icon-color-alt1);
290
+ --color-sf-msg-info-close-icon-color-alt2: #fff;
291
+ --color-sf-msg-warning-color: var(--color-sf-content-text-color);
292
+ --color-sf-msg-warning-bg-color: #fdf6f3;
293
+ --color-sf-msg-warning-border-color: #f4bfab;
294
+ --color-sf-msg-warning-color-alt1: #c43501;
295
+ --color-sf-msg-warning-bg-color-alt1: transparent;
296
+ --color-sf-msg-warning-border-color-alt1: var(--color-sf-msg-warning-border-color);
297
+ --color-sf-msg-warning-color-alt2: #fff;
298
+ --color-sf-msg-warning-bg-color-alt2: #da3b01;
299
+ --color-sf-msg-warning-border-color-alt2: var(--color-sf-msg-warning-bg-color-alt2);
300
+ --color-sf-msg-warning-icon-color: #c43501;
301
+ --color-sf-msg-warning-icon-color-alt1: --color-sf-msg-warning-icon-color;
302
+ --color-sf-msg-warning-icon-color-alt2: #fff;
303
+ --color-sf-msg-warning-close-icon-color: --color-sf-content-text-color-alt1;
304
+ --color-sf-msg-warning-close-icon-color-alt1: --color-sf-msg-warning-close-icon-color-alt1;
305
+ --color-sf-msg-warning-close-icon-color-alt2: #fff;
306
+ --color-sf-utility-primary-lighter: #f9f5ff;
307
+ --color-sf-utility-success-lighter: #aaefc6;
308
+ --color-sf-utility-info-lighter: #b9e6fe;
309
+ --color-sf-utility-warning-lighter: #fede88;
310
+ --color-sf-utility-danger-lighter: #fecdc9;
311
+ --color-sf-fg-white: #fff;
312
+ --color-sf-shadow-color: #000;
313
+ --color-sf-shadow-color1: #fff;
314
+ --color-sf-link-button: var(--color-sf-primary);
315
+ --color-sf-link-button-hover: #115ea3;
316
+ --color-sf-link-button-pressed: #0c3b5e;
317
+ --color-sf-link-button-focus: #0f6cbd;
318
+ --color-sf-link-button-border-focus: #242424;
319
+ --color-sf-chip-bg-color: #f5f5f5;
320
+ --color-sf-chip-border-color: #f5f5f5;
321
+ --color-sf-chip-bg-disabled: #f0f0f0;
322
+ --color-sf-chip-border-disabled: #fff;
323
+ --color-sf-secondary-outline-button-text-color-hover: #242424;
324
+ --color-sf-secondary-outline-button-text-color-pressed: #242424;
325
+ --color-sf-secondary-outline-button-text-color-selected: #242424;
326
+ --color-sf-secondary-outline-button-text-color-focus: #242424;
327
+ --color-sf-slider-shadow1: #fff;
328
+ --color-sf-slider-shadow2: #d1d1d1;
329
+ --color-sf-slider-disabled: #d1d1d1;
330
+ --color-sf-slider-border-color: rgba(255, 255, 255, 0);
331
+ --color-sf-slider-bg-disabled: #e0e0e0;
332
+ --color-sf-toggle-switch-border-disabled: #f0f0f0;
333
+ --color-sf-calendar-icon-color: #0f6ebd;
334
+ --color-sf-calendar-header-text-color-pressed: #0f548c;
335
+ --color-sf-calendar-today-bg-color: #0f63bd;
336
+ --color-sf-dialog-border: #fafafa;
337
+ --color-sf-badge-light-bg-color: #e6e6e6;
338
+ --color-sf-secondary-badge-border-color: #fff;
339
+ --color-sf-secondary-badge-bg-color: #fff;
340
+ --color-sf-secondary-badge-bg-color-focus: #fff;
341
+ --color-sf-skeleton-bg-color: #e6e6e6;
342
+ --color-sf-tab-selected-bg-color-disabled: #0f6ebd;
343
+ --color-sf-tab-selected-text-color-disabled: #bdbdbd;
344
+ --color-sf-ribbon-border-color: #00000000;
345
+ --color-sf-toolbar-icon-color: #0f6cbd;
346
+ --color-sf-contextual-text: #616161;
347
+ --color-sf-cell-selection-bg-color: #ebf3fc;
348
+ --color-sf-document-editor-border-color: #00000000;
349
+ }
350
+
351
+ .e-dark-mode {
352
+ --color-sf-black: #000;
353
+ --color-sf-white: #fff;
354
+ --color-sf-content-bg-color: #1f1f1f;
355
+ --color-sf-content-bg-color-alt1: #292929;
356
+ --color-sf-content-bg-color-alt2: #141414;
357
+ --color-sf-content-bg-color-alt3: #333;
358
+ --color-sf-content-bg-color-alt4: #0a0a0a;
359
+ --color-sf-content-bg-color-alt5: #000;
360
+ --color-sf-content-bg-color-alt6: #050505;
361
+ --color-sf-content-bg-color-hover: var(--color-sf-content-bg-color-alt3);
362
+ --color-sf-content-bg-color-pressed: var(--color-sf-content-bg-color-alt2);
363
+ --color-sf-content-bg-color-focus: var(--color-sf-content-bg-color-hover);
364
+ --color-sf-content-bg-color-selected: #2e2e2e;
365
+ --color-sf-content-bg-color-dragged: #08233b;
366
+ --color-sf-content-bg-color-disabled: #141414;
367
+ --color-sf-flyout-bg-color: var(--color-sf-content-bg-color-alt1);
368
+ --color-sf-flyout-bg-color-hover: #3d3d3d;
369
+ --color-sf-flyout-bg-color-pressed: var(--color-sf-black);
370
+ --color-sf-flyout-bg-color-selected: #383838;
371
+ --color-sf-flyout-bg-color-focus: var(--color-sf-flyout-bg-color-hover);
372
+ --color-sf-overlay-bg-color: rgba($black, .4);
373
+ --color-sf-table-bg-color-hover: #383838;
374
+ --color-sf-table-bg-color-pressed: #2e2e2e;
375
+ --color-sf-table-bg-color-selected: #082338;
376
+ --color-sf-content-text-color: #fff;
377
+ --color-sf-content-text-color-alt1: #d6d6d6;
378
+ --color-sf-content-text-color-alt2: #adadad;
379
+ --color-sf-content-text-color-alt3: #999;
380
+ --color-sf-content-text-color-hover: var(--color-sf-content-text-color);
381
+ --color-sf-content-text-color-pressed: var(--color-sf-content-text-color);
382
+ --color-sf-content-text-color-focus: var(--color-sf-content-text-colo);
383
+ --color-sf-content-text-color-selected: var(--color-sf-content-text-color);
384
+ --color-sf-content-text-color-dragged: var(--color-sf-content-text-color);
385
+ --color-sf-content-text-color-disabled: #5c5c5c;
386
+ --color-sf-placeholder-text-color: var(--color-sf-content-text-color-alt3);
387
+ --color-sf-flyout-text-color: var(--color-sf-content-text-color);
388
+ --color-sf-flyout-text-color-hover: var(--color-sf-content-text-color);
389
+ --color-sf-flyout-text-color-pressed: var(--color-sf-content-text-color);
390
+ --color-sf-flyout-text-color-selected: var(--color-sf-content-text-color);
391
+ --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color);
392
+ --color-sf-flyout-text-color-disabled: var(--color-sf-content-text-color-disabled);
393
+ --color-sf-table-text-color-hover: var(--color-sf-content-text-color);
394
+ --color-sf-table-text-color-pressed: var(--color-sf-content-text-color);
395
+ --color-sf-table-text-color-selected: var(--color-sf-content-text-color);
396
+ --color-sf-icon-color: #d6d6d6;
397
+ --color-sf-icon-color-hover: var(--color-sf-content-text-color);
398
+ --color-sf-icon-color-pressed: var(--color-sf-content-text-color);
399
+ --color-sf-icon-color-disabled: var(--color-sf-content-text-color-disabled);
400
+ --color-sf-border-light: #525252;
401
+ --color-sf-border: #666;
402
+ --color-sf-border-alt: #adadad;
403
+ --color-sf-border-dark: #757575;
404
+ --color-sf-border-hover: #757575;
405
+ --color-sf-border-pressed: #4d4d4d;
406
+ --color-sf-border-focus: var(--color-sf-border);
407
+ --color-sf-border-selected: #6b6b6b;
408
+ --color-sf-border-dragged: var(--color-sf-primary);
409
+ --color-sf-border-disabled: #424242;
410
+ --color-sf-border-warning: #bc4b09;
411
+ --color-sf-border-error: #dc626d;
412
+ --color-sf-border-success: #9fd89f;
413
+ --color-sf-border-info: #18a4c4;
414
+ --color-sf-spreadsheet-gridline: #e6e6e6;
415
+ --color-sf-flyout-border: #525252;
416
+ --color-sf-primary: #115ea3;
417
+ --color-sf-primary-text-color: #fff;
418
+ --color-sf-primary-light: #0e4775;
419
+ --color-sf-primary-lighter: #082338;
420
+ --color-sf-primary-dark: #62abf5;
421
+ --color-sf-primary-darker: #96c6fa;
422
+ --color-sf-success: #107c10;
423
+ --color-sf-info: #0099bc;
424
+ --color-sf-warning: #faa06b;
425
+ --color-sf-danger: #dc626d;
426
+ --color-sf-success-light: #094509;
427
+ --color-sf-info-light: #005669;
428
+ --color-sf-warning-light: #4a1e04;
429
+ --color-sf-danger-light: #6e0811;
430
+ --color-sf-success-dark: #c9eac9;
431
+ --color-sf-info-dark: #cdedf4;
432
+ --color-sf-warning-dark: #fee5d7;
433
+ --color-sf-danger-dark: #fee5d7;
434
+ --color-sf-success-light-alt: #052505;
435
+ --color-sf-info-light-alt: #002e38;
436
+ --color-sf-warning-light-alt: #4a1e04;
437
+ --color-sf-danger-light-alt: #3b0509;
438
+ --color-sf-badge-warning: #fde300;
439
+ --color-sf-badge-warning-text: #fde300;
440
+ --color-sf-primary-label-color: #479ef5;
441
+ --color-sf-primary-cell-selection: #ebf3fc;
442
+ --color-sf-primary-bg-color: var(--color-sf-primary);
443
+ --color-sf-primary-border-color: var(--color-sf-primary);
444
+ --color-sf-primary-text: var(--color-sf-primary-text-color);
445
+ --color-sf-primary-bg-color-hover: #0f6cbd;
446
+ --color-sf-primary-border-color-hover: var(--color-sf-primary-bg-color-hover);
447
+ --color-sf-primary-text-hover: var(--color-sf-primary-text-color);
448
+ --color-sf-primary-bg-color-pressed: #0c3b5e;
449
+ --color-sf-primary-border-color-pressed: var(--color-sf-primary-bg-color-pressed);
450
+ --color-sf-primary-text-pressed: var(--color-sf-primary-text-color);
451
+ --color-sf-primary-bg-color-focus: var(--color-sf-primary-bg-color-hover);
452
+ --color-sf-primary-border-color-focus: var(--color-sf-primary-bg-color-focus);
453
+ --color-sf-primary-text-focus: var(--color-sf-primary-text-color);
454
+ --color-sf-primary-bg-color-disabled: #141414;
455
+ --color-sf-primary-border-color-disabled: var(--color-sf-primary-bg-color-disabled);
456
+ --color-sf-primary-text-disabled: var(--color-sf-content-text-color-disabled);
457
+ --color-sf-primary-bg-color-selected: #0f548c;
458
+ --color-sf-primary-border-color-selected: var(--color-sf-primary-bg-color-selected);
459
+ --color-sf-primary-text-selected: var(--color-sf-primary-text-color);
460
+ --color-sf-secondary-bg-color: #292929;
461
+ --color-sf-secondary-border-color: var(--color-sf-border);
462
+ --color-sf-secondary-text-color: var(--color-sf-content-text-color);
463
+ --color-sf-secondary-bg-color-hover: #3d3d3d;
464
+ --color-sf-secondary-border-color-hover: #757575;
465
+ --color-sf-secondary-text-color-hover: var(--color-sf-content-text-color);
466
+ --color-sf-secondary-bg-color-pressed: var(--color-sf-black);
467
+ --color-sf-secondary-border-color-pressed: #6b6b6b;
468
+ --color-sf-secondary-text-color-pressed: var(--color-sf-content-text-color);
469
+ --color-sf-secondary-bg-color-focus: #383838;
470
+ --color-sf-secondary-border-color-focus: #fff;
471
+ --color-sf-secondary-text-color-focus: var(--color-sf-content-text-color);
472
+ --color-sf-secondary-bg-color-disabled: -var(-color-sf-primary-bg-color-disabled);
473
+ --color-sf-secondary-border-color-disabled: var(--color-sf-secondary-bg-color-disabled);
474
+ --color-sf-secondary-text-color-disabled: var(--color-sf-content-text-color-disabled);
475
+ --color-sf-secondary-bg-color-selected: #383838;
476
+ --color-sf-secondary-border-color-selected: #707070;
477
+ --color-sf-secondary-text-color-selected: var(--color-sf-content-text-color);
478
+ --color-sf-success-bg-color: #218c21;
479
+ --color-sf-success-border-color: var(--color-sf-success-bg-color);
480
+ --color-sf-success-text: var(--color-sf-primary-text-color);
481
+ --color-sf-success-bg-color-hover: var(--color-sf-success-bg-color);
482
+ --color-sf-success-border-color-hover: var(--color-sf-success-bg-color-hover);
483
+ --color-sf-success-text-hover: var(--color-sf-primary-text-color);
484
+ --color-sf-success-bg-color-pressed: #052505;
485
+ --color-sf-success-border-color-pressed: var(--color-sf-success-bg-color-pressed);
486
+ --color-sf-success-text-pressed: var(--color-sf-primary-text-color);
487
+ --color-sf-success-bg-color-focus: var(--color-sf-success-bg-color);
488
+ --color-sf-success-border-color-focus: var(--color-sf-success-bg-color-focus);
489
+ --color-sf-success-text-focus: var(--color-sf-primary-text-color);
490
+ --color-sf-success-bg-color-disabled: var(--color-sf-primary-bg-color-disabled);
491
+ --color-sf-success-border-color-disabled: var(--color-sf-success-bg-color-disabled);
492
+ --color-sf-success-text-disabled: var(--color-sf-primary-text-disabled);
493
+ --color-sf-success-bg-color-selected: #094509;
494
+ --color-sf-success-border-color-selected: var(--color-sf-success-bg-color-selected);
495
+ --color-sf-success-text-selected: var(--color-sf-primary-text-color);
496
+ --color-sf-warning-bg-color: #f87528;
497
+ --color-sf-warning-border-color: var(--color-sf-warning-bg-color);
498
+ --color-sf-warning-text: #242424;
499
+ --color-sf-warning-bg-color-hover: var(--color-sf-warning-bg-color);
500
+ --color-sf-warning-border-color-hover: var(--color-sf-warning-bg-color-hover);
501
+ --color-sf-warning-text-hover: var(--color-sf-primary-text-color);
502
+ --color-sf-warning-bg-color-pressed: #4a1e04;
503
+ --color-sf-warning-border-color-pressed: var(--color-sf-warning-bg-color-pressed);
504
+ --color-sf-warning-text-pressed: var(--color-sf-primary-text-color);
505
+ --color-sf-warning-bg-color-focus: var(--color-sf-warning-bg-color);
506
+ --color-sf-warning-border-color-focus: var(--color-sf-warning-bg-color-focus);
507
+ --color-sf-warning-text-focus: var(--color-sf-primary-text-color);
508
+ --color-sf-warning-bg-color-disabled: var(--color-sf-primary-bg-color-disabled);
509
+ --color-sf-warning-border-color-disabled: var(--color-sf-warning-bg-color-disabled);
510
+ --color-sf-warning-text-disabled: var(--color-sf-primary-text-disabled);
511
+ --color-sf-warning-bg-color-selected: #8a3707;
512
+ --color-sf-warning-border-color-selected: var(--color-sf-warning-bg-color-selected);
513
+ --color-sf-warning-text-selected: var(--color-sf-primary-text-color);
514
+ --color-sf-info-bg-color: #18a4c4;
515
+ --color-sf-info-border-color: var(--color-sf-info-bg-color);
516
+ --color-sf-info-text: #242424;
517
+ --color-sf-info-bg-color-hover: var(--color-sf-info-bg-color);
518
+ --color-sf-info-border-color-hover: var(--color-sf-info-bg-color-hover);
519
+ --color-sf-info-text-hover: var(--color-sf-primary-text-color);
520
+ --color-sf-info-bg-color-pressed: #002e38;
521
+ --color-sf-info-border-color-pressed: var(--color-sf-info-bg-color-pressed);
522
+ --color-sf-info-text-pressed: var(--color-sf-primary-text-color);
523
+ --color-sf-info-bg-color-focus: var(--color-sf-info-bg-color);
524
+ --color-sf-info-border-color-focus: var(--color-sf-info-bg-color-focus);
525
+ --color-sf-info-text-focus: var(--color-sf-primary-text-color);
526
+ --color-sf-info-bg-color-disabled: var(--color-sf-primary-bg-color-disabled);
527
+ --color-sf-info-border-color-disabled: var(--color-sf-info-bg-color-disabled);
528
+ --color-sf-info-text-disabled: var(--color-sf-primary-text-disabled);
529
+ --color-sf-info-bg-color-selected: #005669;
530
+ --color-sf-info-border-color-selected: var(--color-sf-info-bg-color-selected);
531
+ --color-sf-info-text-selected: var(--color-sf-primary-text-color);
532
+ --color-sf-danger-bg-color: #cc2635;
533
+ --color-sf-danger-border-color: var(--color-sf-danger-bg-color);
534
+ --color-sf-danger-text: var(--color-sf-primary-text-color);
535
+ --color-sf-danger-bg-color-hover: var(--color-sf-danger-bg-color);
536
+ --color-sf-danger-border-color-hover: var(--color-sf-danger-bg-color-hover);
537
+ --color-sf-danger-text-hover: var(--color-sf-primary-text-color);
538
+ --color-sf-danger-bg-color-pressed: #3b0509;
539
+ --color-sf-danger-border-color-pressed: var(--color-sf-danger-bg-color-pressed);
540
+ --color-sf-danger-text-pressed: var(--color-sf-primary-text-color);
541
+ --color-sf-danger-bg-color-focus: var(--color-sf-danger-bg-color);
542
+ --color-sf-danger-border-color-focus: var(--color-sf-danger-bg-color-focus);
543
+ --color-sf-danger-text-focus: var(--color-sf-primary-text-color);
544
+ --color-sf-danger-bg-color-disabled: var(--color-sf-primary-bg-color-disabled);
545
+ --color-sf-danger-border-color-disabled: var(--color-sf-danger-bg-color-disabled);
546
+ --color-sf-danger-text-disabled: var(--color-sf-primary-text-disabled);
547
+ --color-sf-danger-bg-color-selected: #6e0811;
548
+ --color-sf-danger-border-color-selected: var(--color-sf-danger-bg-color-selected);
549
+ --color-sf-danger-text-selected: var(--color-sf-primary-text-color);
550
+ --color-sf-primary-outline: var(--color-sf-primary);
551
+ --color-sf-secondary-outline: var(--color-sf-secondary-border-color);
552
+ --color-sf-warning-outline: #f7630c;
553
+ --color-sf-danger-outline: #c50f1f;
554
+ --color-sf-success-outline: #107c10;
555
+ --color-sf-info-outline: #0099bc;
556
+ --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
557
+ --color-sf-tooltip-border: var(--color-sf-tooltip-bg-color);
558
+ --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
559
+ --color-sf-toast-text-color: var(--color-sf-content-text-color);
560
+ --color-sf-toast-alt-text-color: var(--color-sf-content-text-color-alt1);
561
+ --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt2);
562
+ --color-sf-appbar-color-alt1: var(--color-sf-content-text-color);
563
+ --color-sf-appbar-border-color-alt1: var(--color-sf-content-bg-color-alt2);
564
+ --color-sf-appbar-hover-bg-color-alt1: transparent;
565
+ --color-sf-appbar-bg-color-alt2: #f5f5f5;
566
+ --color-sf-appbar-color-alt2: #242424;
567
+ --color-sf-appbar-border-color-alt2: var(--color-sf-appbar-bg-color-alt2);
568
+ --color-sf-appbar-hover-bg-color-alt2: transparent;
569
+ --color-sf-diagram-palette-background: #e0e0e0;
570
+ --color-sf-diagram-palette-hover-background: #bdbdbd;
571
+ --color-sf-diagram-palette-selected-background: var(--color-sf-diagram-palette-hover-background);
572
+ --color-sf-rating-selected-color: #fff;
573
+ --color-sf-rating-unrated-color: var(--color-sf-content-text-color);
574
+ --color-sf-rating-selected-disabled-color: #575757;
575
+ --color-sf-rating-unrated-disabled-color: #4d4d4d;
576
+ --color-sf-rating-selected-hover-color: #2886de;
577
+ --color-sf-rating-unrated-hover-color: #115ea3;
578
+ --color-sf-rating-pressed-color: #479ef5;
579
+ --color-sf-msg-color: var(--color-sf-content-text-color);
580
+ --color-sf-msg-bg-color: var(--color-sf-content-bg-color-alt2);
581
+ --color-sf-msg-border-color: var(--color-sf-border);
582
+ --color-sf-msg-color-alt1: var(--color-sf-content-text-color);
583
+ --color-sf-msg-bg-color-alt1: transparent;
584
+ --color-sf-msg-border-color-alt1: #666666;
585
+ --color-sf-msg-color-alt2: #242424;
586
+ --color-sf-msg-bg-color-alt2: #c2c2c2;
587
+ --color-sf-msg-border-color-alt2: var(--color-sf-msg-bg-color-alt2);
588
+ --color-sf-msg-icon-color: var(--color-sf-msg-bg-color-alt2);
589
+ --color-sf-msg-icon-color-alt1: var(--color-sf-msg-icon-color);
590
+ --color-sf-msg-icon-color-alt2: #fff;
591
+ --color-sf-msg-close-icon-color: var(--color-sf-content-text-color-alt1);
592
+ --color-sf-msg-close-icon-color-alt1: var(--color-sf-msg-close-icon-color);
593
+ --color-sf-msg-close-icon-color-alt2: #fff;
594
+ --color-sf-msg-success-color: var(--color-sf-content-text-color);
595
+ --color-sf-msg-success-bg-color: #052505;
596
+ --color-sf-msg-success-border-color: #107c10;
597
+ --color-sf-msg-success-color-alt1: #54b054;
598
+ --color-sf-msg-success-bg-color-alt1: transparent;
599
+ --color-sf-msg-success-border-color-alt1: #218c21;
600
+ --color-sf-msg-success-color-alt2: #fff;
601
+ --color-sf-msg-success-bg-color-alt2: #107c10;
602
+ --color-sf-msg-success-border-color-alt2: var(--color-sf-msg-success-bg-color-alt2);
603
+ --color-sf-msg-success-icon-color: #54b054;
604
+ --color-sf-msg-success-icon-color-alt1: var(--color-sf-msg-success-icon-color);
605
+ --color-sf-msg-success-icon-color-alt2: #fff;
606
+ --color-sf-msg-success-close-icon-color: var(--color-sf-content-text-color-alt1);
607
+ --color-sf-msg-success-close-icon-color-alt1: var(--color-sf-msg-success-close-icon-color-alt1);
608
+ --color-sf-msg-success-close-icon-color-alt2: #fff;
609
+ --color-sf-msg-danger-color: var(--color-sf-content-text-color);
610
+ --color-sf-msg-danger-bg-color: #3b0509;
611
+ --color-sf-msg-danger-border-color: #c50f1f;
612
+ --color-sf-msg-danger-color-alt1: #dc626d;
613
+ --color-sf-msg-danger-bg-color-alt1: transparent;
614
+ --color-sf-msg-danger-border-color-alt1: #d33f4c;
615
+ --color-sf-msg-danger-color-alt2: #fff;
616
+ --color-sf-msg-danger-bg-color-alt2: #c50f1f;
617
+ --color-sf-msg-danger-border-color-alt2: var(--color-sf-msg-danger-bg-color-alt2);
618
+ --color-sf-msg-danger-icon-color: #dc626d;
619
+ --color-sf-msg-danger-icon-color-alt1: var(--color-sf-msg-danger-icon-color);
620
+ --color-sf-msg-danger-icon-color-alt2: #fff;
621
+ --color-sf-msg-danger-close-icon-color: var(--color-sf-content-text-color-alt1);
622
+ --color-sf-msg-danger-close-icon-color-alt1: var(--color-sf-msg-danger-close-icon-color-alt1);
623
+ --color-sf-msg-danger-close-icon-color-alt2: #fff;
624
+ --color-sf-msg-info-color: var(--color-sf-content-text-color);
625
+ --color-sf-msg-info-bg-color: #002e38;
626
+ --color-sf-msg-info-border-color: #0099bc;
627
+ --color-sf-msg-info-color-alt1: #56bfd7;
628
+ --color-sf-msg-info-bg-color-alt1: transparent;
629
+ --color-sf-msg-info-border-color-alt1: #31afdd;
630
+ --color-sf-msg-info-color-alt2: #fff;
631
+ --color-sf-msg-info-bg-color-alt2: #0099bc;
632
+ --color-sf-msg-info-border-color-alt2: var(--color-sf-msg-info-bg-color-alt2);
633
+ --color-sf-msg-info-icon-color: #56bfd7;
634
+ --color-sf-msg-info-icon-color-alt1: var(--color-sf-msg-info-icon-color);
635
+ --color-sf-msg-info-icon-color-alt2: #fff;
636
+ --color-sf-msg-info-close-icon-color: var(--color-sf-content-text-color-alt1);
637
+ --color-sf-msg-info-close-icon-color-alt1: var(--color-sf-msg-info-close-icon-color-alt1);
638
+ --color-sf-msg-info-close-icon-color-alt2: #fff;
639
+ --color-sf-msg-warning-color: var(--color-sf-content-text-color);
640
+ --color-sf-msg-warning-bg-color: #411200;
641
+ --color-sf-msg-warning-border-color: #da3b01;
642
+ --color-sf-msg-warning-color-alt1: #e9835e;
643
+ --color-sf-msg-warning-bg-color-alt1: transparent;
644
+ --color-sf-msg-warning-border-color-alt1: #e36537;
645
+ --color-sf-msg-warning-color-alt2: #fff;
646
+ --color-sf-msg-warning-bg-color-alt2: #da3b01;
647
+ --color-sf-msg-warning-border-color-alt2: var(--color-sf-msg-warning-bg-color-alt2);
648
+ --color-sf-msg-warning-icon-color: #e9835e;
649
+ --color-sf-msg-warning-icon-color-alt1: var(--color-sf-msg-warning-icon-color);
650
+ --color-sf-msg-warning-icon-color-alt2: #fff;
651
+ --color-sf-msg-warning-close-icon-color: var(--color-sf-content-text-color-alt1);
652
+ --color-sf-msg-warning-close-icon-color-alt1: var(--color-sf-msg-warning-close-icon-color-alt1);
653
+ --color-sf-msg-warning-close-icon-color-alt2: #fff;
654
+ --color-sf-shadow-color: #fff;
655
+ --color-sf-shadow-color1: #000;
656
+ --color-sf-link-button: var(--color-sf-primary);
657
+ --color-sf-link-button-hover: #0f6cbd;
658
+ --color-sf-link-button-pressed: #115ea3;
659
+ --color-sf-link-button-focus: #115ea3;
660
+ --color-sf-link-button-border-focus: #fff;
661
+ --color-sf-chip-bg-color: #141414;
662
+ --color-sf-chip-border-color: #141414;
663
+ --color-sf-chip-bg-disabled: #141414;
664
+ --color-sf-chip-border-disabled: rgba(0, 0, 0, 0);
665
+ --color-sf-secondary-outline-button-text-color-hover: #fff;
666
+ --color-sf-secondary-outline-button-text-color-pressed: #fff;
667
+ --color-sf-secondary-outline-button-text-color-selected: #fff;
668
+ --color-sf-secondary-outline-button-text-color-focus: #fff;
669
+ --color-sf-slider-shadow1: #000;
670
+ --color-sf-slider-shadow2: #666666;
671
+ --color-sf-slider-disabled: #666666;
672
+ --color-sf-slider-border-color: rgba(255, 255, 255, 0);
673
+ --color-sf-slider-bg-disabled: #525252;
674
+ --color-sf-toggle-switch-border-disabled: #141414;
675
+ --color-sf-calendar-icon-color: #1153a3;
676
+ --color-sf-calendar-header-text-color-pressed: #62abf5;
677
+ --color-sf-calendar-today-bg-color: #1153a3;
678
+ --color-sf-dialog-border: #1f1f1f;
679
+ --color-sf-badge-light-bg-color: #333333;
680
+ --color-sf-secondary-badge-border-color: #292929;
681
+ --color-sf-secondary-badge-bg-color: #292929;
682
+ --color-sf-secondary-badge-bg-color-focus: #292929;
683
+ --color-sf-skeleton-bg-color: #575757;
684
+ --color-sf-tab-selected-bg-color-disabled: #115ea3;
685
+ --color-sf-tab-selected-text-color-disabled: #a3a3a3;
686
+ --color-sf-ribbon-border-color: #00000000;
687
+ --color-sf-toolbar-icon-color: #479ef5;
688
+ --color-sf-contextual-text: #fff;
689
+ --color-sf-cell-selection-bg-color: #08233b;
690
+ --color-sf-document-editor-border-color: #00000000;
691
+ }
692
+
693
+ .e-high-contrast {
694
+ --color-sf-black: #000;
695
+ --color-sf-white: #fff;
696
+ --color-sf-content-bg-color: #000;
697
+ --color-sf-content-bg-color-alt1: var(--color-sf-black);
698
+ --color-sf-content-bg-color-alt2: var(--color-sf-black);
699
+ --color-sf-content-bg-color-alt3: var(--color-sf-black);
700
+ --color-sf-content-bg-color-alt4: var(--color-sf-black);
701
+ --color-sf-content-bg-color-alt5: var(--color-sf-black);
702
+ --color-sf-content-bg-color-alt6: var(--color-sf-black);
703
+ --color-sf-content-bg-color-hover: #1aebff;
704
+ --color-sf-content-bg-color-pressed: var(--color-sf-content-bg-color-hover);
705
+ --color-sf-content-bg-color-focus: var(--color-sf-content-bg-color-hover);
706
+ --color-sf-content-bg-color-selected: var(--color-sf-content-bg-color-hover);
707
+ --color-sf-content-bg-color-dragged: #fff;
708
+ --color-sf-content-bg-color-disabled: #000000;
709
+ --color-sf-flyout-bg-color: var(--color-sf-black);
710
+ --color-sf-flyout-bg-color-hover: var(--color-sf-content-bg-color-hover);
711
+ --color-sf-flyout-bg-color-pressed: var(--color-sf-content-bg-color-hover);
712
+ --color-sf-flyout-bg-color-selected: var(--color-sf-content-bg-color-hover);
713
+ --color-sf-flyout-bg-color-focus: var(--color-sf-content-bg-color-hover);
714
+ --color-sf-overlay-bg-color: rgba($black, .4);
715
+ --color-sf-table-bg-color-hover: var(--color-sf-black);
716
+ --color-sf-table-bg-color-pressed: var(--color-sf-black);
717
+ --color-sf-table-bg-color-selected: #1a3bff;
718
+ --color-sf-content-text-color: #fff;
719
+ --color-sf-content-text-color-alt1: var(--color-sf-content-text-color);
720
+ --color-sf-content-text-color-alt2: var(--color-sf-content-text-color);
721
+ --color-sf-content-text-color-alt3: var(--color-sf-content-text-color);
722
+ --color-sf-content-text-color-hover: #000;
723
+ --color-sf-content-text-color-pressed: var(--color-sf-content-text-color-hover);
724
+ --color-sf-content-text-color-focus: var(--color-sf-content-text-color-hover);
725
+ --color-sf-content-text-color-selected: var(--color-sf-content-text-color-hover);
726
+ --color-sf-content-text-color-dragged: #000;
727
+ --color-sf-content-text-color-disabled: #3ff23f;
728
+ --color-sf-placeholder-text-color: var(--color-sf-content-text-color);
729
+ --color-sf-flyout-text-color: var(--color-sf-content-text-color);
730
+ --color-sf-flyout-text-color-hover: var(--color-sf-content-text-color-hover);
731
+ --color-sf-flyout-text-color-pressed: var(--color-sf-content-text-color-hover);
732
+ --color-sf-flyout-text-color-selected: var(--color-sf-content-text-color-hover);
733
+ --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color-hover);
734
+ --color-sf-flyout-text-color-disabled: var(--color-sf-content-text-color-disabled);
735
+ --color-sf-table-text-color-hover: var(--color-sf-content-text-color-hover);
736
+ --color-sf-table-text-color-pressed: var(--color-sf-content-text-color-hover);
737
+ --color-sf-table-text-color-selected: var(--color-sf-content-text-color-hover);
738
+ --color-sf-icon-color: #fff;
739
+ --color-sf-icon-color-hover: var(--color-sf-content-text-color-hover);
740
+ --color-sf-icon-color-pressed: var(--color-sf-content-text-color-hover);
741
+ --color-sf-icon-color-disabled: var(--color-sf-content-text-color-disabled);
742
+ --color-sf-border-light: #fff;
743
+ --color-sf-border: var(--color-sf-border-light);
744
+ --color-sf-border-alt: var(--color-sf-border-light);
745
+ --color-sf-border-dark: var(--color-sf-border-light);
746
+ --color-sf-border-hover: #1aebff;
747
+ --color-sf-border-pressed: var(--color-sf-border-hover);
748
+ --color-sf-border-focus: var(--color-sf-border-hover);
749
+ --color-sf-border-selected: var(--color-sf-border-hover);
750
+ --color-sf-border-dragged: var(--color-sf-border-light);
751
+ --color-sf-border-disabled: #3ff23f;
752
+ --color-sf-border-warning: #f7630c;
753
+ --color-sf-border-error: #c50f1f;
754
+ --color-sf-border-success: #107c10;
755
+ --color-sf-border-info: #0099bc;
756
+ --color-sf-spreadsheet-gridline: #e6e6e6;
757
+ --color-sf-flyout-border: var(--color-sf-border-light);
758
+ --color-sf-primary: #1aebff;
759
+ --color-sf-primary-text-color: #000;
760
+ --color-sf-primary-light: rgba(26, 235, 255, .8);
761
+ --color-sf-primary-lighter: var(--color-sf-primary-light);
762
+ --color-sf-primary-dark: var(--color-sf-primary);
763
+ --color-sf-primary-darker: var(--color-sf-primary);
764
+ --color-sf-success: #107c10;
765
+ --color-sf-info: #0099bc;
766
+ --color-sf-warning: #f7630c;
767
+ --color-sf-danger: #c50f1f;
768
+ --color-sf-success-light: #094509;
769
+ --color-sf-info-light: #005669;
770
+ --color-sf-warning-light: #4a1e04;
771
+ --color-sf-danger-light: #6e0811;
772
+ --color-sf-success-dark: #c9eac9;
773
+ --color-sf-info-dark: #cdedf4;
774
+ --color-sf-warning-dark: #fee5d7;
775
+ --color-sf-danger-dark: #f6d1d5;
776
+ --color-sf-success-light-alt: #052505;
777
+ --color-sf-info-light-alt: #002e38;
778
+ --color-sf-warning-light-alt: #4a1e04;
779
+ --color-sf-danger-light-alt: #3b0509;
780
+ --color-sf-badge-warning: #fde300;
781
+ --color-sf-badge-warning-text: #fde300;
782
+ --color-sf-primary-label-color: #1aebff;
783
+ --color-sf-primary-cell-selection: rgba(26, 235, 255, .28);
784
+ --color-sf-primary-bg-color: #1aebff;
785
+ --color-sf-primary-border-color: var(--color-sf-primary-bg-color);
786
+ --color-sf-primary-text: #000;
787
+ --color-sf-primary-bg-color-hover: var(--color-sf-primary-bg-color);
788
+ --color-sf-primary-border-color-hover: var(--color-sf-primary-bg-color);
789
+ --color-sf-primary-text-hover: var(--color-sf-primary-text);
790
+ --color-sf-primary-bg-color-pressed: var(--color-sf-primary-bg-color);
791
+ --color-sf-primary-border-color-pressed: var(--color-sf-primary-bg-color);
792
+ --color-sf-primary-text-pressed: var(--color-sf-primary-text);
793
+ --color-sf-primary-bg-color-focus: var(--color-sf-primary-bg-color);
794
+ --color-sf-primary-border-color-focus: var(--color-sf-primary-bg-color);
795
+ --color-sf-primary-text-focus: var(--color-sf-primary-text);
796
+ --color-sf-primary-bg-color-disabled: #000;
797
+ --color-sf-primary-border-color-disabled: #3ff23f;
798
+ --color-sf-primary-text-disabled: var(--color-sf-primary-border-color-disabled);
799
+ --color-sf-primary-bg-color-selected: var(--color-sf-primary-bg-color);
800
+ --color-sf-primary-border-color-selected: var(--color-sf-primary-bg-color);
801
+ --color-sf-primary-text-selected: var(--color-sf-primary-text);
802
+ --color-sf-secondary-bg-color: #000;
803
+ --color-sf-secondary-border-color: var(--color-sf-border);
804
+ --color-sf-secondary-text-color: var(--color-sf-content-text-color);
805
+ --color-sf-secondary-bg-color-hover: #1aebff;
806
+ --color-sf-secondary-border-color-hover: var(--color-sf-secondary-bg-color-hover);
807
+ --color-sf-secondary-text-color-hover: #000;
808
+ --color-sf-secondary-bg-color-pressed: var(--color-sf-secondary-bg-color-hover);
809
+ --color-sf-secondary-border-color-pressed: var(--color-sf-secondary-border-color-hover);
810
+ --color-sf-secondary-text-color-pressed: var(--color-sf-secondary-text-color-hover);
811
+ --color-sf-secondary-bg-color-focus: var(--color-sf-secondary-bg-color-hover);
812
+ --color-sf-secondary-border-color-focus: var(--color-sf-secondary-border-color-hover);
813
+ --color-sf-secondary-text-color-focus: var(--color-sf-secondary-text-color-hover);
814
+ --color-sf-secondary-bg-color-disabled: #000;
815
+ --color-sf-secondary-border-color-disabled: #3ff23f;
816
+ --color-sf-secondary-text-color-disabled: var(--color-sf-secondary-border-color-disabled);
817
+ --color-sf-secondary-bg-color-selected: var(--color-sf-secondary-bg-color-hover);
818
+ --color-sf-secondary-border-color-selected: var(--color-sf-secondary-border-color-hover);
819
+ --color-sf-secondary-text-color-selected: var(--color-sf-secondary-text-color-hover);
820
+ --color-sf-success-bg-color: #107c10;
821
+ --color-sf-success-border-color: var(--color-sf-success-bg-color);
822
+ --color-sf-success-text: #fff;
823
+ --color-sf-success-bg-color-hover: var(--color-sf-success-bg-color);
824
+ --color-sf-success-border-color-hover: var(--color-sf-success-border-color);
825
+ --color-sf-success-text-hover: var(--color-sf-success-text);
826
+ --color-sf-success-bg-color-pressed: var(--color-sf-success-bg-color);
827
+ --color-sf-success-border-color-pressed: var(--color-sf-success-border-color);
828
+ --color-sf-success-text-pressed: var(--color-sf-success-text);
829
+ --color-sf-success-bg-color-focus: var(--color-sf-success-bg-color);
830
+ --color-sf-success-border-color-focus: var(--color-sf-success-border-color);
831
+ --color-sf-success-text-focus: var(--color-sf-success-text);
832
+ --color-sf-success-bg-color-disabled: #000;
833
+ --color-sf-success-border-color-disabled: #3ff23f;
834
+ --color-sf-success-text-disabled: var(--color-sf-success-border-color-disabled);
835
+ --color-sf-success-bg-color-selected: var(--color-sf-success-bg-color);
836
+ --color-sf-success-border-color-selected: var(--color-sf-success-border-color);
837
+ --color-sf-success-text-selected: var(--color-sf-success-text);
838
+ --color-sf-warning-bg-color: #f7630c;
839
+ --color-sf-warning-border-color: var(--color-sf-warning-bg-color);
840
+ --color-sf-warning-text: #000;
841
+ --color-sf-warning-bg-color-hover: var(--color-sf-warning-bg-color);
842
+ --color-sf-warning-border-color-hover: var(--color-sf-warning-border-color);
843
+ --color-sf-warning-text-hover: var(--color-sf-warning-text);
844
+ --color-sf-warning-bg-color-pressed: var(--color-sf-warning-bg-color);
845
+ --color-sf-warning-border-color-pressed: var(--color-sf-warning-border-color);
846
+ --color-sf-warning-text-pressed: var(--color-sf-warning-text);
847
+ --color-sf-warning-bg-color-focus: var(--color-sf-warning-bg-color);
848
+ --color-sf-warning-border-color-focus: var(--color-sf-warning-bg-color-focus);
849
+ --color-sf-warning-text-focus: var(--color-sf-warning-text);
850
+ --color-sf-warning-bg-color-disabled: #000;
851
+ --color-sf-warning-border-color-disabled: #3ff23f;
852
+ --color-sf-warning-text-disabled: var(--color-sf-primary-text-disabled);
853
+ --color-sf-warning-bg-color-selected: var(--color-sf-warning-bg-color);
854
+ --color-sf-warning-border-color-selected: var(--color-sf-warning-bg-color-selected);
855
+ --color-sf-warning-text-selected: var(--color-sf-warning-text);
856
+ --color-sf-info-bg-color: #0099bc;
857
+ --color-sf-info-border-color: var(--color-sf-info-bg-color);
858
+ --color-sf-info-text: #000;
859
+ --color-sf-info-bg-color-hover: var(--color-sf-info-bg-color);
860
+ --color-sf-info-border-color-hover: var(--color-sf-info-bg-color-hover);
861
+ --color-sf-info-text-hover: var(--color-sf-info-text);
862
+ --color-sf-info-bg-color-pressed: var(--color-sf-info-bg-color);
863
+ --color-sf-info-border-color-pressed: var(--color-sf-info-border-color);
864
+ --color-sf-info-text-pressed: var(--color-sf-info-text);
865
+ --color-sf-info-bg-color-focus: var(--color-sf-info-bg-color);
866
+ --color-sf-info-border-color-focus: var(--color-sf-info-bg-color-focus);
867
+ --color-sf-info-text-focus: var(--color-sf-info-text);
868
+ --color-sf-info-bg-color-disabled: #000;
869
+ --color-sf-info-border-color-disabled: #3ff23f;
870
+ --color-sf-info-text-disabled: var(--color-sf-info-border-color-disabled);
871
+ --color-sf-info-bg-color-selected: var(--color-sf-info-bg-color);
872
+ --color-sf-info-border-color-selected: var(--color-sf-info-bg-color-selected);
873
+ --color-sf-info-text-selected: var(--color-sf-info-text);
874
+ --color-sf-danger-bg-color: #c50f1f;
875
+ --color-sf-danger-border-color: var(--color-sf-danger-bg-color);
876
+ --color-sf-danger-text: #fff;
877
+ --color-sf-danger-bg-color-hover: var(--color-sf-danger-bg-color);
878
+ --color-sf-danger-border-color-hover: var(--color-sf-danger-bg-color-hover);
879
+ --color-sf-danger-text-hover: var(--color-sf-danger-text);
880
+ --color-sf-danger-bg-color-pressed: var(--color-sf-danger-bg-color);
881
+ --color-sf-danger-border-color-pressed: var(--color-sf-danger-bg-color-pressed);
882
+ --color-sf-danger-text-pressed: var(--color-sf-danger-text);
883
+ --color-sf-danger-bg-color-focus: var(--color-sf-danger-bg-color);
884
+ --color-sf-danger-border-color-focus: var(--color-sf-danger-bg-color-focus);
885
+ --color-sf-danger-text-focus: var(--color-sf-danger-text);
886
+ --color-sf-danger-bg-color-disabled: #000;
887
+ --color-sf-danger-border-color-disabled: #3ff23f;
888
+ --color-sf-danger-text-disabled: var(--color-sf-danger-border-color-disabled);
889
+ --color-sf-danger-bg-color-selected: var(--color-sf-danger-bg-color);
890
+ --color-sf-danger-border-color-selected: var(--color-sf-danger-bg-color-selected);
891
+ --color-sf-danger-text-selected: var(--color-sf-danger-text);
892
+ --color-sf-primary-outline: var(--color-sf-primary);
893
+ --color-sf-secondary-outline: var(--color-sf-secondary-border-color);
894
+ --color-sf-warning-outline: #f7630c;
895
+ --color-sf-danger-outline: #c50f1f;
896
+ --color-sf-success-outline: #107c10;
897
+ --color-sf-info-outline: #0099bc;
898
+ --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
899
+ --color-sf-tooltip-border: var(--color-sf-border-light);
900
+ --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
901
+ --color-sf-toast-text-color: var(--color-sf-content-text-color);
902
+ --color-sf-toast-alt-text-color: var(--color-sf-content-text-color);
903
+ --color-sf-appbar-bg-color-alt1: #fff;
904
+ --color-sf-appbar-color-alt1: #000;
905
+ --color-sf-appbar-border-color-alt1: var(--color-sf-appbar-bg-color-alt1);
906
+ --color-sf-appbar-hover-bg-color-alt1: var(--color-sf-appbar-bg-color-alt1);
907
+ --color-sf-appbar-bg-color-alt2: var(--color-sf-appbar-color-alt1);
908
+ --color-sf-appbar-color-alt2: var(--color-sf-appbar-bg-color-alt1);
909
+ --color-sf-appbar-border-color-alt2: var(--color-sf-appbar-bg-color-alt1);
910
+ --color-sf-appbar-hover-bg-color-alt2: var(--color-sf-appbar-color-alt1);
911
+ --color-sf-diagram-palette-background: #000;
912
+ --color-sf-diagram-palette-hover-background: var(--color-sf-content-bg-color-hover);
913
+ --color-sf-diagram-palette-selected-background: var(--color-sf-diagram-palette-hover-background);
914
+ --color-sf-rating-selected-color: #fff;
915
+ --color-sf-rating-unrated-color: var(--color-sf-content-text-color);
916
+ --color-sf-rating-selected-disabled-color: var(--color-sf-content-text-color-disabled);
917
+ --color-sf-rating-unrated-disabled-color: var(--color-sf-content-text-color-disabled);
918
+ --color-sf-rating-selected-hover-color: var(--color-sf-content-bg-color-hover);
919
+ --color-sf-rating-unrated-hover-color: var(--color-sf-content-bg-color-hover);
920
+ --color-sf-rating-pressed-color: var(--color-sf-content-bg-color-hover);
921
+ --color-sf-msg-color: #fff;
922
+ --color-sf-msg-bg-color: #000;
923
+ --color-sf-msg-border-color: var(--color-sf-msg-color);
924
+ --color-sf-msg-color-alt1: #1aebff;
925
+ --color-sf-msg-bg-color-alt1: var(--color-sf-msg-bg-color);
926
+ --color-sf-msg-border-color-alt1: var(--color-sf-msg-color);
927
+ --color-sf-msg-color-alt2: var(--color-sf-msg-bg-color);
928
+ --color-sf-msg-bg-color-alt2: var(--color-sf-msg-color-alt1);
929
+ --color-sf-msg-border-color-alt2: var(--color-sf-msg-color-alt1);
930
+ --color-sf-msg-icon-color: var(--color-sf-msg-color);
931
+ --color-sf-msg-icon-color-alt1: var(--color-sf-msg-color-alt);
932
+ --color-sf-msg-icon-color-alt2: var(--color-sf-msg-bg-color);
933
+ --color-sf-msg-close-icon-color: var(--color-sf-msg-color);
934
+ --color-sf-msg-close-icon-color-alt1: var(--color-sf-msg-color);
935
+ --color-sf-msg-close-icon-color-alt2: var(--color-sf-msg-bg-color);
936
+ --color-sf-msg-success-color: #107c10;
937
+ --color-sf-msg-success-bg-color: #000;
938
+ --color-sf-msg-success-border-color: var(--color-sf-msg-success-color);
939
+ --color-sf-msg-success-color-alt1: #107c10;
940
+ --color-sf-msg-success-bg-color-alt1: var(--color-sf-msg-success-bg-color);
941
+ --color-sf-msg-success-border-color-alt1: #fff;
942
+ --color-sf-msg-success-color-alt2: var(--color-sf-msg-success-bg-color);
943
+ --color-sf-msg-success-bg-color-alt2: var(--color-sf-msg-success-color);
944
+ --color-sf-msg-success-border-color-alt2: var(--color-sf-msg-success-color);
945
+ --color-sf-msg-success-icon-color: var(--color-sf-msg-success-color);
946
+ --color-sf-msg-success-icon-color-alt1: var(--color-sf-msg-success-color);
947
+ --color-sf-msg-success-icon-color-alt2: var(--color-sf-msg-success-bg-color);
948
+ --color-sf-msg-success-close-icon-color: var(--color-sf-msg-success-border-color-alt1);
949
+ --color-sf-msg-success-close-icon-color-alt1: var(--color-sf-msg-success-border-color-alt1);
950
+ --color-sf-msg-success-close-icon-color-alt2: var(--color-sf-msg-success-bg-color);
951
+ --color-sf-msg-danger-color: #c50f1f;
952
+ --color-sf-msg-danger-bg-color: #000;
953
+ --color-sf-msg-danger-border-color: var(--color-sf-msg-danger-color);
954
+ --color-sf-msg-danger-color-alt1: #c50f1f;
955
+ --color-sf-msg-danger-bg-color-alt1: var(--color-sf-msg-danger-bg-color);
956
+ --color-sf-msg-danger-border-color-alt1: #fff;
957
+ --color-sf-msg-danger-color-alt2: var(--color-sf-msg-danger-bg-color);
958
+ --color-sf-msg-danger-bg-color-alt2: var(--color-sf-msg-danger-color);
959
+ --color-sf-msg-danger-border-color-alt2: var(--color-sf-msg-danger-color);
960
+ --color-sf-msg-danger-icon-color: var(--color-sf-msg-danger-color);
961
+ --color-sf-msg-danger-icon-color-alt1: var(--color-sf-msg-danger-color);
962
+ --color-sf-msg-danger-icon-color-alt2: var(--color-sf-msg-danger-bg-color);
963
+ --color-sf-msg-danger-close-icon-color: var(--color-sf-msg-danger-border-color-alt1);
964
+ --color-sf-msg-danger-close-icon-color-alt1: var(--color-sf-msg-danger-border-color-alt1);
965
+ --color-sf-msg-danger-close-icon-color-alt2: var(--color-sf-msg-danger-bg-color);
966
+ --color-sf-msg-info-color: #0099bc;
967
+ --color-sf-msg-info-bg-color: #000;
968
+ --color-sf-msg-info-border-color: var(--color-sf-msg-info-color);
969
+ --color-sf-msg-info-color-alt1: #0099bc;
970
+ --color-sf-msg-info-bg-color-alt1: var(--color-sf-msg-info-bg-color);
971
+ --color-sf-msg-info-border-color-alt1: #fff;
972
+ --color-sf-msg-info-color-alt2: var(--color-sf-msg-info-bg-color);
973
+ --color-sf-msg-info-bg-color-alt2: var(--color-sf-msg-info-color);
974
+ --color-sf-msg-info-border-color-alt2: var(--color-sf-msg-info-color);
975
+ --color-sf-msg-info-icon-color: var(--color-sf-msg-info-color);
976
+ --color-sf-msg-info-icon-color-alt1: var(--color-sf-msg-info-color);
977
+ --color-sf-msg-info-icon-color-alt2: var(--color-sf-msg-info-bg-color);
978
+ --color-sf-msg-info-close-icon-color: var(--color-sf-msg-info-border-color-alt1);
979
+ --color-sf-msg-info-close-icon-color-alt1: var(--color-sf-msg-info-border-color-alt1);
980
+ --color-sf-msg-info-close-icon-color-alt2: var(--color-sf-msg-info-bg-color);
981
+ --color-sf-msg-warning-color: #f7630c;
982
+ --color-sf-msg-warning-bg-color: #000;
983
+ --color-sf-msg-warning-border-color: #da3b01;
984
+ --color-sf-msg-warning-color-alt1: #f7630c;
985
+ --color-sf-msg-warning-bg-color-alt1: var(--color-sf-msg-warning-bg-color);
986
+ --color-sf-msg-warning-border-color-alt1: #fff;
987
+ --color-sf-msg-warning-color-alt2: var(--color-sf-msg-warning-bg-color);
988
+ --color-sf-msg-warning-bg-color-alt2: var(--color-sf-msg-warning-color);
989
+ --color-sf-msg-warning-border-color-alt2: var(--color-sf-msg-warning-color);
990
+ --color-sf-msg-warning-icon-color: var(--color-sf-msg-warning-color);
991
+ --color-sf-msg-warning-icon-color-alt1: var(--color-sf-msg-warning-color);
992
+ --color-sf-msg-warning-icon-color-alt2: var(--color-sf-msg-warning-bg-color);
993
+ --color-sf-msg-warning-close-icon-color: var(--color-sf-msg-warning-border-color-alt11);
994
+ --color-sf-msg-warning-close-icon-color-alt1: var(--color-sf-msg-warning-border-color-alt11);
995
+ --color-sf-msg-warning-close-icon-color-alt2: var(--color-sf-msg-warning-bg-color);
996
+ --color-sf-shadow-color: #fff;
997
+ --color-sf-shadow-color1: #1aebff;
998
+ --color-sf-link-button: #fff000;
999
+ --color-sf-link-button-hover: #fff000;
1000
+ --color-sf-link-button-pressed: #fff000;
1001
+ --color-sf-link-button-focus: #fff000;
1002
+ --color-sf-link-button-border-focus: #1aebff;
1003
+ --color-sf-chip-bg-color: #000;
1004
+ --color-sf-chip-border-color: #fff;
1005
+ --color-sf-chip-bg-disabled: #000;
1006
+ --color-sf-chip-border-disabled: #3ff23f;
1007
+ --color-sf-secondary-outline-button-text-color-hover: #fff;
1008
+ --color-sf-secondary-outline-button-text-color-pressed: #fff;
1009
+ --color-sf-secondary-outline-button-text-color-selected: #fff;
1010
+ --color-sf-secondary-outline-button-text-color-focus: #fff;
1011
+ --color-sf-slider-shadow1: #000;
1012
+ --color-sf-slider-shadow2: #fff;
1013
+ --color-sf-slider-disabled: #3ff23f;
1014
+ --color-sf-slider-border-color: #fff;
1015
+ --color-sf-slider-bg-disabled: #000;
1016
+ --color-sf-toggle-switch-border-disabled: #3ff23f;
1017
+ --color-sf-calendar-icon-color: #000;
1018
+ --color-sf-calendar-header-text-color-pressed: #000;
1019
+ --color-sf-calendar-today-bg-color: #fff;
1020
+ --color-sf-dialog-border: #fff;
1021
+ --color-sf-badge-light-bg-color: #000;
1022
+ --color-sf-secondary-badge-border-color: #fff;
1023
+ --color-sf-secondary-badge-bg-color: #000;
1024
+ --color-sf-secondary-badge-bg-color-focus: #fff;
1025
+ --color-sf-skeleton-bg-color: #fff;
1026
+ --color-sf-tab-selected-bg-color-disabled: #000;
1027
+ --color-sf-tab-selected-text-color-disabled: #3ff23f;
1028
+ --color-sf-ribbon-border-color: #fff;
1029
+ --color-sf-toolbar-icon-color: #000;
1030
+ --color-sf-contextual-text: #000;
1031
+ --color-sf-cell-selection-bg-color: #1aecff1f;
1032
+ --color-sf-document-editor-border-color: #fff;
1033
+ }
1034
+
1035
+ /* stylelint-disable-line no-empty-source */
1036
+ .e-upload .e-upload-actions,
1037
+ .e-bigger.e-small .e-upload .e-upload-actions {
1038
+ background-color: var(--color-sf-content-bg-color-alt1);
1039
+ border-radius: 0 0 6px 6px;
1040
+ }
1041
+
1042
+ /* stylelint-disable */
1043
+ /* stylelint-disable property-no-vendor-prefix */
1044
+ @-webkit-keyframes material-spinner-rotate {
1045
+ 0% {
1046
+ -webkit-transform: rotate(0);
1047
+ transform: rotate(0);
1048
+ }
1049
+ 100% {
1050
+ -webkit-transform: rotate(360deg);
1051
+ transform: rotate(360deg);
1052
+ }
1053
+ }
1054
+ @keyframes material-spinner-rotate {
1055
+ 0% {
1056
+ -webkit-transform: rotate(0);
1057
+ transform: rotate(0);
1058
+ }
1059
+ 100% {
1060
+ -webkit-transform: rotate(360deg);
1061
+ transform: rotate(360deg);
1062
+ }
1063
+ }
1064
+ @-webkit-keyframes fabric-spinner-rotate {
1065
+ 0% {
1066
+ -webkit-transform: rotate(0);
1067
+ transform: rotate(0);
1068
+ }
1069
+ 100% {
1070
+ -webkit-transform: rotate(360deg);
1071
+ transform: rotate(360deg);
1072
+ }
1073
+ }
1074
+ @keyframes fabric-spinner-rotate {
1075
+ 0% {
1076
+ -webkit-transform: rotate(0);
1077
+ transform: rotate(0);
1078
+ }
1079
+ 100% {
1080
+ -webkit-transform: rotate(360deg);
1081
+ transform: rotate(360deg);
1082
+ }
1083
+ }
1084
+ .e-image-editor .e-upload-icon::before {
1085
+ content: "\e760";
1086
+ }
1087
+ .e-image-editor .e-zoom-in::before {
1088
+ content: "\e768";
1089
+ }
1090
+ .e-image-editor .e-zoom-out::before {
1091
+ content: "\e81b";
1092
+ }
1093
+ .e-image-editor .e-pan::before {
1094
+ content: "\e7b1";
1095
+ }
1096
+ .e-image-editor .e-select::before {
1097
+ content: "\e896";
1098
+ }
1099
+ .e-image-editor .e-transform::before {
1100
+ content: "\e8b0";
1101
+ }
1102
+ .e-image-editor .e-annotation::before {
1103
+ content: "\e730";
1104
+ }
1105
+ .e-image-editor .e-shapes::before {
1106
+ content: "\e728";
1107
+ }
1108
+ .e-image-editor .e-mouse::before {
1109
+ content: "\e74e";
1110
+ }
1111
+ .e-image-editor .e-btn-reset::before {
1112
+ content: "\e89b";
1113
+ }
1114
+ .e-image-editor .e-btn-save::before {
1115
+ content: "\e7c8";
1116
+ }
1117
+ .e-image-editor .e-close::before {
1118
+ content: "\e7e7";
1119
+ }
1120
+ .e-image-editor .e-check::before {
1121
+ content: "\e8b1";
1122
+ }
1123
+ .e-image-editor .e-text-font-color.e-template .e-caret::before {
1124
+ content: "\e76f";
1125
+ }
1126
+ .e-image-editor .e-stroke.e-template .e-caret::before, .e-image-editor .e-frame-stroke.e-template .e-caret::before, .e-image-editor .e-pen-stroke-color.e-template .e-caret::before {
1127
+ content: "\e739";
1128
+ }
1129
+ .e-image-editor .e-fill.e-template .e-caret::before {
1130
+ content: "\e783";
1131
+ }
1132
+
1133
+ .e-image-editor .e-custom::before,
1134
+ .e-dropdown-popup.e-image-popup .e-custom::before {
1135
+ content: "\e8a9";
1136
+ }
1137
+ .e-image-editor .e-circle::before,
1138
+ .e-dropdown-popup.e-image-popup .e-circle::before {
1139
+ content: "\e7ca";
1140
+ }
1141
+ .e-image-editor .e-square::before,
1142
+ .e-dropdown-popup.e-image-popup .e-square::before {
1143
+ content: "\e8aa";
1144
+ }
1145
+ .e-image-editor .e-custom-a::before,
1146
+ .e-dropdown-popup.e-image-popup .e-custom-a::before {
1147
+ content: "\e8ab";
1148
+ }
1149
+ .e-image-editor .e-custom-b::before,
1150
+ .e-dropdown-popup.e-image-popup .e-custom-b::before {
1151
+ content: "\e8ac";
1152
+ }
1153
+ .e-image-editor .e-custom-c::before,
1154
+ .e-dropdown-popup.e-image-popup .e-custom-c::before {
1155
+ content: "\e8ad";
1156
+ }
1157
+ .e-image-editor .e-custom-d::before,
1158
+ .e-dropdown-popup.e-image-popup .e-custom-d::before {
1159
+ content: "\e8ae";
1160
+ }
1161
+ .e-image-editor .e-custom-e::before,
1162
+ .e-dropdown-popup.e-image-popup .e-custom-e::before {
1163
+ content: "\e8af";
1164
+ }
1165
+ .e-image-editor .e-custom-e::before,
1166
+ .e-dropdown-popup.e-image-popup .e-custom-e::before {
1167
+ content: "\e8af";
1168
+ }
1169
+ .e-image-editor .e-custom-f::before,
1170
+ .e-dropdown-popup.e-image-popup .e-custom-f::before {
1171
+ content: "\e8dd";
1172
+ }
1173
+ .e-image-editor .e-custom-g::before,
1174
+ .e-dropdown-popup.e-image-popup .e-custom-g::before {
1175
+ content: "\e8de";
1176
+ }
1177
+ .e-image-editor .e-custom-h::before,
1178
+ .e-dropdown-popup.e-image-popup .e-custom-h::before {
1179
+ content: "\e8df";
1180
+ }
1181
+ .e-image-editor .e-custom-i::before,
1182
+ .e-dropdown-popup.e-image-popup .e-custom-i::before {
1183
+ content: "\e8e0";
1184
+ }
1185
+ .e-image-editor .e-custom-j::before,
1186
+ .e-dropdown-popup.e-image-popup .e-custom-j::before {
1187
+ content: "\e8e1";
1188
+ }
1189
+ .e-image-editor .e-rectangle::before,
1190
+ .e-dropdown-popup.e-image-popup .e-rectangle::before {
1191
+ content: "\e723";
1192
+ }
1193
+ .e-image-editor .e-triangle::before,
1194
+ .e-dropdown-popup.e-image-popup .e-triangle::before {
1195
+ content: "\e89c";
1196
+ }
1197
+ .e-image-editor .e-line::before,
1198
+ .e-dropdown-popup.e-image-popup .e-line::before {
1199
+ content: "\e819";
1200
+ }
1201
+ .e-image-editor .e-free-pen::before,
1202
+ .e-dropdown-popup.e-image-popup .e-free-pen::before {
1203
+ content: "\e7db";
1204
+ }
1205
+ .e-image-editor .e-horizontal-flip::before,
1206
+ .e-dropdown-popup.e-image-popup .e-horizontal-flip::before {
1207
+ content: "\e8a3";
1208
+ }
1209
+ .e-image-editor .e-vertical-flip::before,
1210
+ .e-dropdown-popup.e-image-popup .e-vertical-flip::before {
1211
+ content: "\e8a4";
1212
+ }
1213
+ .e-image-editor .e-clock-wise::before,
1214
+ .e-dropdown-popup.e-image-popup .e-clock-wise::before {
1215
+ content: "\e8a6";
1216
+ }
1217
+ .e-image-editor .e-anti-clock-wise::before,
1218
+ .e-dropdown-popup.e-image-popup .e-anti-clock-wise::before {
1219
+ content: "\e8a5";
1220
+ }
1221
+ .e-image-editor .e-add-text::before,
1222
+ .e-dropdown-popup.e-image-popup .e-add-text::before {
1223
+ content: "\e82e";
1224
+ }
1225
+ .e-image-editor .e-arrow::before,
1226
+ .e-dropdown-popup.e-image-popup .e-arrow::before {
1227
+ content: "\e669";
1228
+ }
1229
+ .e-image-editor .e-path::before,
1230
+ .e-dropdown-popup.e-image-popup .e-path::before {
1231
+ content: "\e931";
1232
+ }
1233
+
1234
+ .e-ie-toolbar-upload-div.e-hide,
1235
+ .e-ie-toolbar-upload-btn.e-hide,
1236
+ .e-ie-img-quality-slider,
1237
+ .e-ie-img-quality-name .e-hide {
1238
+ display: none;
1239
+ }
1240
+
1241
+ .e-device.e-image-editor .e-img-font-style.e-template {
1242
+ margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
1243
+ }
1244
+ .e-device.e-image-editor .e-slider-container {
1245
+ margin-left: calc(50% - 70px) !important; /* stylelint-disable-line declaration-no-important */
1246
+ height: 54px !important; /* stylelint-disable-line declaration-no-important */
1247
+ }
1248
+ .e-device.e-image-editor .e-straighten-slider {
1249
+ margin-left: calc(50% - 70px) !important; /* stylelint-disable-line declaration-no-important */
1250
+ }
1251
+ .e-device.e-image-editor .e-ie-straighten-value-span {
1252
+ margin-left: 15px !important; /* stylelint-disable-line declaration-no-important */
1253
+ }
1254
+ .e-device.e-image-editor .e-hscroll .e-scroll-nav.e-scroll-right-nav, .e-device.e-image-editor .e-scroll-right-overlay {
1255
+ display: none !important; /* stylelint-disable-line declaration-no-important */
1256
+ }
1257
+ .e-device.e-image-editor .e-hscroll.e-scroll-device {
1258
+ padding-right: 0 !important; /* stylelint-disable-line declaration-no-important */
1259
+ }
1260
+ .e-device.e-image-editor .e-contextual-toolbar-wrapper {
1261
+ border-top: 1px solid var(--color-sf-border-light);
1262
+ border-bottom: none !important; /* stylelint-disable-line declaration-no-important */
1263
+ }
1264
+ .e-device.e-image-editor .e-toolbar {
1265
+ border-bottom: 1px solid var(--color-sf-border-light);
1266
+ }
1267
+ .e-device.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
1268
+ border-bottom: none !important; /* stylelint-disable-line declaration-no-important */
1269
+ }
1270
+ .e-device.e-image-editor .e-bottom-toolbar .e-toolbar, .e-device.e-image-editor .e-bottom-toolbar-area .e-toolbar {
1271
+ border-bottom: none;
1272
+ }
1273
+ .e-device.e-image-editor .e-ie-img-save-name {
1274
+ width: calc(65% - 13px) !important; /* stylelint-disable-line declaration-no-important */
1275
+ }
1276
+ .e-device.e-image-editor .e-ie-img-size-value-span {
1277
+ margin-left: calc(100% - 145px) !important; /* stylelint-disable-line declaration-no-important */
1278
+ }
1279
+ .e-device.e-image-editor .e-ie-quality-option-container .e-slider-container {
1280
+ margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
1281
+ height: auto !important; /* stylelint-disable-line declaration-no-important */
1282
+ }
1283
+
1284
+ .e-bigger .e-image-editor .e-contextual-toolbar-wrapper .e-slider-container .e-slider .e-handle,
1285
+ .e-image-editor.e-bigger .e-contextual-toolbar-wrapper .e-slider-container .e-slider .e-handle {
1286
+ top: calc(50% - 9px) !important; /* stylelint-disable-line declaration-no-important */
1287
+ }
1288
+ .e-bigger .e-image-editor .e-toolbar,
1289
+ .e-image-editor.e-bigger .e-toolbar {
1290
+ height: 56px !important; /* stylelint-disable-line declaration-no-important */
1291
+ min-height: 56px !important; /* stylelint-disable-line declaration-no-important */
1292
+ }
1293
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span,
1294
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span,
1295
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span {
1296
+ font-size: 16px;
1297
+ }
1298
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
1299
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
1300
+ font-size: 20px;
1301
+ }
1302
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon,
1303
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
1304
+ font-size: 20px;
1305
+ }
1306
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
1307
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret,
1308
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
1309
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
1310
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret,
1311
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret,
1312
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
1313
+ font-size: 20px;
1314
+ }
1315
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret,
1316
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
1317
+ margin-top: -4px;
1318
+ }
1319
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview,
1320
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
1321
+ margin-top: -2px !important; /* stylelint-disable-line declaration-no-important */
1322
+ margin-left: -6px;
1323
+ }
1324
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform,
1325
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select,
1326
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation,
1327
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform {
1328
+ font-size: 20px;
1329
+ }
1330
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform .e-icons.e-caret,
1331
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select .e-icons.e-caret,
1332
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation .e-icons.e-caret,
1333
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform .e-icons.e-caret {
1334
+ font-size: 10px;
1335
+ }
1336
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-save,
1337
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn .e-save {
1338
+ font-size: 20px;
1339
+ }
1340
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-save .e-icons.e-caret,
1341
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn .e-save .e-icons.e-caret {
1342
+ font-size: 10px;
1343
+ }
1344
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-left,
1345
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-left {
1346
+ line-height: 1;
1347
+ }
1348
+ .e-image-editor {
1349
+ border: 1px solid var(--color-sf-border-light);
1350
+ position: relative;
1351
+ display: block;
1352
+ /* stylelint-disable property-no-vendor-prefix */
1353
+ }
1354
+ .e-image-editor .no-spin ::-webkit-inner-spin-button, .e-image-editor .no-spin ::-webkit-outer-spin-button {
1355
+ -webkit-appearance: none;
1356
+ margin: 0;
1357
+ }
1358
+ .e-image-editor .e-ie-drop-area {
1359
+ height: calc(100% - 18px);
1360
+ width: calc(100% - 20px);
1361
+ border: 2px dashed var(--color-sf-icon-color);
1362
+ border-radius: 10px;
1363
+ margin: 10px;
1364
+ }
1365
+ .e-image-editor .e-ie-drop-area .e-upload {
1366
+ display: none;
1367
+ }
1368
+ .e-image-editor .e-ie-drop-area .e-image::before {
1369
+ font-size: 50px;
1370
+ }
1371
+ .e-image-editor .e-ie-drop-area .e-ie-drop-icon {
1372
+ top: calc(50% - 60px);
1373
+ left: calc(50% - 25px);
1374
+ }
1375
+ .e-image-editor .e-ie-drop-area .e-ie-drop-content {
1376
+ top: 50%;
1377
+ left: calc(50% - 160px);
1378
+ font-size: 14px;
1379
+ }
1380
+ .e-image-editor .e-ie-drop-area .e-ie-drop-info {
1381
+ top: calc(50% + 40px);
1382
+ left: calc(50% - 100px);
1383
+ position: absolute;
1384
+ font-size: 14px;
1385
+ }
1386
+ .e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
1387
+ left: calc(50% - 120px);
1388
+ top: 50%;
1389
+ font-size: 14px;
1390
+ }
1391
+ .e-image-editor .e-toolbar {
1392
+ border: none;
1393
+ border-bottom: 1px solid var(--color-sf-border-light);
1394
+ height: 40px !important; /* stylelint-disable-line declaration-no-important */
1395
+ min-height: 40px !important; /* stylelint-disable-line declaration-no-important */
1396
+ -webkit-box-shadow: none !important;
1397
+ box-shadow: none !important; /* stylelint-disable-line declaration-no-important */
1398
+ }
1399
+ .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height {
1400
+ margin-left: 20px;
1401
+ min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
1402
+ }
1403
+ .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width {
1404
+ min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
1405
+ }
1406
+ .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
1407
+ font-size: 16px;
1408
+ }
1409
+ .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
1410
+ font-size: 16px;
1411
+ }
1412
+ .e-image-editor .e-toolbar .e-toolbar-items .e-upload {
1413
+ border: none;
1414
+ }
1415
+ .e-image-editor .e-toolbar .e-toolbar-items .e-file-select-wrap {
1416
+ padding: 0;
1417
+ }
1418
+ .e-image-editor .e-toolbar .e-toolbar-items .e-image-upload .e-file-select, .e-image-editor .e-toolbar .e-toolbar-items .e-image-upload .e-file-drop, .e-image-editor .e-toolbar .e-toolbar-items .e-image-upload .e-upload-files {
1419
+ display: none;
1420
+ }
1421
+ .e-image-editor .e-toolbar .e-toolbar-items .e-image-upload .e-image-upload .e-upload {
1422
+ border: none;
1423
+ }
1424
+ .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
1425
+ font-size: 16px;
1426
+ }
1427
+ .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
1428
+ margin-top: -4px;
1429
+ }
1430
+ .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
1431
+ height: 18px;
1432
+ width: 18px;
1433
+ margin-top: -2px !important; /* stylelint-disable-line declaration-no-important */
1434
+ margin-left: -6px;
1435
+ }
1436
+ .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform {
1437
+ font-size: 16px;
1438
+ }
1439
+ .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform .e-icons.e-caret {
1440
+ font-size: 10px !important; /* stylelint-disable-line declaration-no-important */
1441
+ }
1442
+ .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-save {
1443
+ font-size: 16px;
1444
+ }
1445
+ .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-save .e-icons.e-caret {
1446
+ font-size: 10px !important; /* stylelint-disable-line declaration-no-important */
1447
+ }
1448
+ .e-image-editor .e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-left {
1449
+ line-height: 1;
1450
+ }
1451
+ .e-image-editor .e-toolbar-area + .e-canvas-wrapper .e-textarea {
1452
+ line-height: initial !important; /* stylelint-disable-line declaration-no-important */
1453
+ }
1454
+ .e-image-editor .e-bottom-toolbar, .e-image-editor .e-bottom-toolbar-area {
1455
+ border-top: 1px solid var(--color-sf-border-light);
1456
+ }
1457
+ .e-image-editor .e-contextual-toolbar-wrapper {
1458
+ border-bottom: 1px solid var(--color-sf-border-light);
1459
+ width: 100%;
1460
+ z-index: 1;
1461
+ }
1462
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
1463
+ border-bottom: none !important; /* stylelint-disable-line declaration-no-important */
1464
+ height: 130px !important; /* stylelint-disable-line declaration-no-important */
1465
+ }
1466
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar {
1467
+ height: inherit !important; /* stylelint-disable-line declaration-no-important */
1468
+ }
1469
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar-item {
1470
+ display: inline-grid;
1471
+ }
1472
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar-item > span {
1473
+ font-weight: 500;
1474
+ margin: 4px;
1475
+ text-align: center;
1476
+ }
1477
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-dropdown-btn {
1478
+ margin: 0 auto;
1479
+ width: -webkit-max-content;
1480
+ width: -moz-max-content;
1481
+ width: max-content;
1482
+ }
1483
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar {
1484
+ height: inherit !important; /* stylelint-disable-line declaration-no-important */
1485
+ }
1486
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar-item:not(.e-hidden) {
1487
+ display: inline-grid;
1488
+ }
1489
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar-item > span {
1490
+ font-weight: 500;
1491
+ margin: 4px;
1492
+ text-align: center;
1493
+ }
1494
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-dropdown-btn {
1495
+ margin: 0 auto;
1496
+ width: -webkit-max-content;
1497
+ width: -moz-max-content;
1498
+ width: max-content;
1499
+ }
1500
+ .e-image-editor .e-contextual-toolbar-wrapper.e-hide {
1501
+ display: none;
1502
+ }
1503
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
1504
+ height: auto !important; /* stylelint-disable-line declaration-no-important */
1505
+ }
1506
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
1507
+ border: 2px solid transparent;
1508
+ height: 100px;
1509
+ }
1510
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper {
1511
+ border-top: 2px solid;
1512
+ }
1513
+ .e-image-editor .e-contextual-toolbar-wrapper .e-slider-container {
1514
+ margin-left: calc(50% - 137px);
1515
+ height: 54px !important; /* stylelint-disable-line declaration-no-important */
1516
+ }
1517
+ .e-ie-straighten-value-span,
1518
+ .e-ie-straighten-span,
1519
+ .e-ie-toolbar-straighten {
1520
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
1521
+ padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
1522
+ padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
1523
+ }
1524
+
1525
+ .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
1526
+ height: auto;
1527
+ margin-left: 8px;
1528
+ padding-right: 2px;
1529
+ }
1530
+
1531
+ .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
1532
+ top: calc(50% - 20px) !important; /* stylelint-disable-line declaration-no-important */
1533
+ }
1534
+
1535
+ .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider-track,
1536
+ .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-range {
1537
+ top: calc(50% - 2px) !important; /* stylelint-disable-line declaration-no-important */
1538
+ }
1539
+
1540
+ .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
1541
+ top: calc(50% - 10px) !important; /* stylelint-disable-line declaration-no-important */
1542
+ }
1543
+
1544
+ .e-ie-finetune-value-span {
1545
+ top: 28% !important; /* stylelint-disable-line declaration-no-important */
1546
+ }
1547
+
1548
+ .e-ie-finetune-slider-label {
1549
+ top: 28% !important; /* stylelint-disable-line declaration-no-important */
1550
+ }
1551
+
1552
+ .e-ie-finetune-slider-wrap {
1553
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
1554
+ }
1555
+
1556
+ .e-transparency-slider-wrap {
1557
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
1558
+ }
1559
+
1560
+ .e-ie-slider-wrap {
1561
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
1562
+ }
1563
+
1564
+ .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
1565
+ top: calc(50% - 7px) !important; /* stylelint-disable-line declaration-no-important */
1566
+ }
1567
+
1568
+ .e-dropdown-popup.e-ie-crop-ddb-popup ul {
1569
+ max-height: 250px;
1570
+ overflow-y: auto;
1571
+ }
1572
+
1573
+ .e-dropdown-popup.e-ie-ddb-popup {
1574
+ background: none !important; /* stylelint-disable-line declaration-no-important */
1575
+ }
1576
+
1577
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
1578
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
1579
+ }
1580
+
1581
+ .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal,
1582
+ .e-ie-quality-option-container .e-slider-container.e-horizontal {
1583
+ height: 28px;
1584
+ }
1585
+
1586
+ .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal .e-slider {
1587
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
1588
+ }
1589
+
1590
+ .e-ie-quality-slider.e-slider-container + .e-ie-img-icon-button,
1591
+ .e-ie-quality-option-container .e-slider-container.e-horizontal + .e-ie-img-icon-button {
1592
+ margin-left: 20px !important; /* stylelint-disable-line declaration-no-important */
1593
+ }
1594
+
1595
+ .e-ie-img-size {
1596
+ margin: 10px 10px 0;
1597
+ }
1598
+
1599
+ .e-ie-dlg-img-content {
1600
+ width: 40%;
1601
+ height: 100%;
1602
+ margin-right: 5%;
1603
+ display: -webkit-box;
1604
+ display: -ms-flexbox;
1605
+ display: flex;
1606
+ -webkit-box-orient: vertical;
1607
+ -webkit-box-direction: normal;
1608
+ -ms-flex-direction: column;
1609
+ flex-direction: column;
1610
+ -webkit-box-pack: center;
1611
+ -ms-flex-pack: center;
1612
+ justify-content: center;
1613
+ -webkit-box-align: center;
1614
+ -ms-flex-align: center;
1615
+ align-items: center;
1616
+ }
1617
+
1618
+ .e-ie-img-input {
1619
+ width: 90% !important; /* stylelint-disable-line declaration-no-important */
1620
+ }
1621
+
1622
+ .e-ie-img-dlg-canvas {
1623
+ width: 100%;
1624
+ height: 100%;
1625
+ }
1626
+
1627
+ .e-ie-img-size {
1628
+ font-size: 14px;
1629
+ display: -webkit-box;
1630
+ display: -ms-flexbox;
1631
+ display: flex;
1632
+ -webkit-box-orient: vertical;
1633
+ -webkit-box-direction: normal;
1634
+ -ms-flex-direction: column;
1635
+ flex-direction: column;
1636
+ -webkit-box-pack: start;
1637
+ -ms-flex-pack: start;
1638
+ justify-content: flex-start;
1639
+ }
1640
+
1641
+ .e-ie-dlg-right-content {
1642
+ width: 60%;
1643
+ }
1644
+
1645
+ .e-ie-img-save-name {
1646
+ display: inline-block;
1647
+ margin-right: 10px;
1648
+ width: calc(71% - 13px);
1649
+ }
1650
+
1651
+ .e-ie-img-save-dlg {
1652
+ display: inline-block;
1653
+ width: 90px;
1654
+ }
1655
+
1656
+ .e-ie-img-save-dlg .e-btn {
1657
+ width: 100%;
1658
+ }
1659
+
1660
+ .e-ie-img-label-name {
1661
+ margin-bottom: 5px;
1662
+ display: block;
1663
+ }
1664
+
1665
+ .e-ie-img-quality-name {
1666
+ position: relative;
1667
+ width: 100% !important; /* stylelint-disable-line declaration-no-important */
1668
+ }
1669
+
1670
+ .e-ie-quality-info {
1671
+ margin-bottom: 0;
1672
+ margin-top: 0;
1673
+ }
1674
+
1675
+ .e-ie-quality-span {
1676
+ margin-left: 5px;
1677
+ display: -webkit-inline-box;
1678
+ display: -ms-inline-flexbox;
1679
+ display: inline-flex;
1680
+ }
1681
+
1682
+ .e-ie-img-quality-label {
1683
+ margin-bottom: 3%;
1684
+ margin-top: 5%;
1685
+ display: -webkit-inline-box;
1686
+ display: -ms-inline-flexbox;
1687
+ display: inline-flex;
1688
+ }
1689
+
1690
+ .e-ie-img-quality-size {
1691
+ margin-top: 5%;
1692
+ display: block;
1693
+ }
1694
+
1695
+ .e-ie-img-size-value-span {
1696
+ width: 8%;
1697
+ text-transform: capitalize;
1698
+ margin-left: calc(100% - 194px);
1699
+ margin-top: 4px;
1700
+ }
1701
+
1702
+ .e-device.e-ie-save-dialog .e-ie-img-size-value-span {
1703
+ margin-left: calc(100% - 145px) !important; /* stylelint-disable-line declaration-no-important */
1704
+ }
1705
+
1706
+ .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
1707
+ width: calc(71% - 30px) !important; /* stylelint-disable-line declaration-no-important */
1708
+ }
1709
+
1710
+ .e-device.e-ie-save-dialog .e-ie-img-save-name {
1711
+ width: calc(71% - 30px) !important; /* stylelint-disable-line declaration-no-important */
1712
+ }
1713
+
1714
+ .e-ie-img-icon-button {
1715
+ margin-left: 10px;
1716
+ width: -webkit-max-content;
1717
+ width: -moz-max-content;
1718
+ width: max-content;
1719
+ margin-bottom: 5px;
1720
+ }
1721
+
1722
+ .e-bigger .e-image-editor .e-dlg-container .e-dialog,
1723
+ .e-bigger.e-image-editor .e-dlg-container .e-dialog {
1724
+ width: 656px;
1725
+ }
1726
+
1727
+ .e-bigger .e-ie-img-save-dlg {
1728
+ width: 106px;
1729
+ }
1730
+
1731
+ .e-bigger .e-image-editor .e-control-wrapper.e-slider-container.e-horizontal,
1732
+ .e-bigger.e-image-editor .e-control-wrapper.e-slider-container.e-horizontal {
1733
+ width: 217px;
1734
+ }
1735
+
1736
+ .e-ie-quality-option-container .e-btn-group .e-btn {
1737
+ padding-left: 13px;
1738
+ padding-right: 13px;
1739
+ }
1740
+
1741
+ .e-bigger .e-dialog.e-blr-ie-save-dialog:not(.e-device) {
1742
+ width: 620px !important; /* stylelint-disable-line declaration-no-important */
1743
+ }
1744
+ .e-bigger .e-dialog.e-blr-ie-save-dialog:not(.e-device) .e-ie-img-icon-button {
1745
+ padding: 8px;
1746
+ }
1747
+ .e-blr-ie-save-dialog .e-ie-img-save-name {
1748
+ width: calc(67% - 13px);
1749
+ }
1750
+ .e-blr-ie-save-dialog .e-ie-quality-custom {
1751
+ width: calc(65% - 13px);
1752
+ }
1753
+ .e-blr-ie-save-dialog .e-ie-quality-option-container .e-ie-img-icon-button {
1754
+ margin-left: 20px;
1755
+ }
1756
+ .e-blr-ie-save-dialog .e-ie-img-size-value-span {
1757
+ vertical-align: middle;
1758
+ margin-left: calc(50% - 55px);
1759
+ }
1760
+ .e-blr-ie-save-dialog .e-btn-group .e-btn {
1761
+ padding: 5.2px 10.5px;
1762
+ }
1763
+ .e-blr-ie-save-dialog.e-device .e-ie-img-save-name {
1764
+ width: calc(64% - 15px) !important; /* stylelint-disable-line declaration-no-important */
1765
+ }
1766
+ .e-blr-ie-save-dialog.e-device .e-ie-quality-custom {
1767
+ width: 75% !important; /* stylelint-disable-line declaration-no-important */
1768
+ }
1769
+ .e-blr-ie-save-dialog.e-device .e-ie-quality-option-container .e-ie-img-icon-button {
1770
+ margin-left: 0;
1771
+ }
1772
+ .e-blr-ie-save-dialog.e-device .e-slider-container {
1773
+ margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
1774
+ height: 28px !important; /* stylelint-disable-line declaration-no-important */
1775
+ }
1776
+ .e-blr-ie-save-dialog.e-device .e-ie-img-size-value-span {
1777
+ margin-left: calc(70% - 100px) !important; /* stylelint-disable-line declaration-no-important */
1778
+ }
1779
+ .e-blr-ie-save-dialog.e-device .e-btn-group .e-btn {
1780
+ padding: 5.2px 10.5px;
1781
+ }
1782
+ .e-blr-ie-save-dialog.e-device .e-ie-quality-option-container .e-ie-img-icon-button {
1783
+ padding: 8.5px;
1784
+ }
1785
+
1786
+ .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
1787
+ width: calc(71% - 30px) !important; /* stylelint-disable-line declaration-no-important */
1788
+ }
1789
+
1790
+ .e-image-editor {
1791
+ background: var(--color-sf-content-bg-color-alt1);
1792
+ }
1793
+ .e-image-editor .e-contextual-toolbar-wrapper {
1794
+ background: var(--color-sf-content-bg-color-alt2);
1795
+ }
1796
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper {
1797
+ border-color: var(--color-sf-secondary-bg-color-pressed);
1798
+ }
1799
+ .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-icons {
1800
+ color: var(--color-sf-icon-color);
1801
+ }
1802
+ .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn.e-selected-btn {
1803
+ background: var(--color-sf-content-bg-color-selected) !important; /* stylelint-disable-line declaration-no-important */
1804
+ }
1805
+ .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn {
1806
+ background: inherit;
1807
+ border: none;
1808
+ margin-top: 0;
1809
+ background: var(--color-sf-content-bg-color-alt1);
1810
+ color: var(--color-sf-icon-color);
1811
+ }
1812
+ .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
1813
+ display: none !important; /* stylelint-disable-line declaration-no-important */
1814
+ }
1815
+ .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:hover {
1816
+ background: var(--color-sf-content-bg-color-hover);
1817
+ -webkit-box-shadow: none;
1818
+ box-shadow: none;
1819
+ color: var(--color-sf-toolbar-icon-color);
1820
+ }
1821
+ .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:focus {
1822
+ background: var(--color-sf-secondary-bg-color-hover);
1823
+ -webkit-box-shadow: none;
1824
+ box-shadow: none;
1825
+ color: var(--color-sf-secondary-text-color-hover);
1826
+ }
1827
+ .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
1828
+ background: var(--color-sf-secondary-bg-color-pressed);
1829
+ -webkit-box-shadow: none;
1830
+ box-shadow: none;
1831
+ color: var(--color-sf-secondary-text-color-pressed);
1832
+ }
1833
+ .e-image-editor .e-toolbar .e-toolbar-items .e-colorpicker-wrapper.e-shape-fill-color .e-split-btn-wrapper .e-split-btn .e-selected-color, .e-image-editor .e-toolbar .e-toolbar-items .e-colorpicker-wrapper.e-shape-stroke-color .e-split-btn-wrapper .e-split-btn .e-selected-color, .e-image-editor .e-toolbar .e-toolbar-items .e-colorpicker-wrapper.e-text-stroke-color .e-split-btn-wrapper .e-split-btn .e-selected-color, .e-image-editor .e-toolbar .e-toolbar-items .e-colorpicker-wrapper.e-pen-stroke-color .e-split-btn-wrapper .e-split-btn .e-selected-color {
1834
+ background: none;
1835
+ border-bottom-style: solid;
1836
+ border-bottom-width: 3px;
1837
+ width: 14px;
1838
+ margin: 0 2px;
1839
+ border-bottom-color: #000;
1840
+ }
1841
+ .e-image-editor .e-toolbar .e-toolbar-items .e-colorpicker-wrapper.e-shape-fill-color .e-split-btn-wrapper .e-split-btn .e-selected-color .e-split-preview, .e-image-editor .e-toolbar .e-toolbar-items .e-colorpicker-wrapper.e-shape-stroke-color .e-split-btn-wrapper .e-split-btn .e-selected-color .e-split-preview, .e-image-editor .e-toolbar .e-toolbar-items .e-colorpicker-wrapper.e-text-stroke-color .e-split-btn-wrapper .e-split-btn .e-selected-color .e-split-preview, .e-image-editor .e-toolbar .e-toolbar-items .e-colorpicker-wrapper.e-pen-stroke-color .e-split-btn-wrapper .e-split-btn .e-selected-color .e-split-preview {
1842
+ display: none;
1843
+ }
1844
+ .e-image-editor .e-toolbar .e-toolbar-items .e-nocolor-item {
1845
+ background: transparent url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTAgKDU0OTgzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExIiBmaWxsPSIjRTBFMEUwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weS0yIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weSIgZmlsbD0iI0ZGRkZGRiIgeD0iMyIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHktMyIgZmlsbD0iI0UwRTBFMCIgeD0iMyIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+") !important; /* stylelint-disable-line declaration-no-important */
1846
+ background-size: 8px !important; /* stylelint-disable-line declaration-no-important */
1847
+ }
1848
+
1849
+ .e-dropdown-popup .e-selected-btn {
1850
+ background: var(--color-sf-content-bg-color-selected) !important; /* stylelint-disable-line declaration-no-important */
1851
+ }