@syncfusion/ej2-vue-layouts 23.1.36 → 24.1.41

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 (88) hide show
  1. package/dist/ej2-vue-layouts.umd.min.js +2 -2
  2. package/dist/global/ej2-vue-layouts.min.js +3 -3
  3. package/package.json +9 -9
  4. package/styles/avatar/bootstrap-dark.css +1 -45
  5. package/styles/avatar/bootstrap.css +1 -45
  6. package/styles/avatar/bootstrap4.css +1 -45
  7. package/styles/avatar/bootstrap5-dark.css +1 -60
  8. package/styles/avatar/bootstrap5.css +1 -60
  9. package/styles/avatar/fabric-dark.css +1 -45
  10. package/styles/avatar/fabric.css +1 -45
  11. package/styles/avatar/fluent-dark.css +1 -58
  12. package/styles/avatar/fluent.css +1 -58
  13. package/styles/avatar/highcontrast-light.css +1 -45
  14. package/styles/avatar/highcontrast.css +1 -45
  15. package/styles/avatar/material-dark.css +1 -45
  16. package/styles/avatar/material.css +1 -45
  17. package/styles/avatar/material3-dark.css +1 -113
  18. package/styles/avatar/material3.css +1 -169
  19. package/styles/avatar/tailwind-dark.css +1 -58
  20. package/styles/avatar/tailwind.css +1 -58
  21. package/styles/bootstrap-dark.css +1 -1351
  22. package/styles/bootstrap.css +1 -1352
  23. package/styles/bootstrap4.css +1 -1357
  24. package/styles/bootstrap5-dark.css +1 -1368
  25. package/styles/bootstrap5.css +1 -1368
  26. package/styles/card/bootstrap-dark.css +1 -513
  27. package/styles/card/bootstrap.css +1 -514
  28. package/styles/card/bootstrap4.css +1 -520
  29. package/styles/card/bootstrap5-dark.css +1 -513
  30. package/styles/card/bootstrap5.css +1 -513
  31. package/styles/card/fabric-dark.css +1 -513
  32. package/styles/card/fabric.css +1 -524
  33. package/styles/card/fluent-dark.css +1 -534
  34. package/styles/card/fluent.css +1 -534
  35. package/styles/card/highcontrast-light.css +1 -513
  36. package/styles/card/highcontrast.css +1 -525
  37. package/styles/card/material-dark.css +1 -513
  38. package/styles/card/material.css +1 -513
  39. package/styles/card/material3-dark.css +1 -566
  40. package/styles/card/material3.css +1 -622
  41. package/styles/card/tailwind-dark.css +1 -514
  42. package/styles/card/tailwind.css +1 -514
  43. package/styles/dashboard-layout/bootstrap-dark.css +1 -296
  44. package/styles/dashboard-layout/bootstrap.css +1 -296
  45. package/styles/dashboard-layout/bootstrap4.css +1 -296
  46. package/styles/dashboard-layout/bootstrap5-dark.css +1 -305
  47. package/styles/dashboard-layout/bootstrap5.css +1 -305
  48. package/styles/dashboard-layout/fabric-dark.css +1 -296
  49. package/styles/dashboard-layout/fabric.css +1 -296
  50. package/styles/dashboard-layout/fluent-dark.css +1 -300
  51. package/styles/dashboard-layout/fluent.css +1 -300
  52. package/styles/dashboard-layout/highcontrast-light.css +1 -234
  53. package/styles/dashboard-layout/highcontrast.css +1 -292
  54. package/styles/dashboard-layout/material-dark.css +1 -296
  55. package/styles/dashboard-layout/material.css +1 -296
  56. package/styles/dashboard-layout/material3-dark.css +1 -356
  57. package/styles/dashboard-layout/material3.css +1 -412
  58. package/styles/dashboard-layout/tailwind-dark.css +1 -317
  59. package/styles/dashboard-layout/tailwind.css +1 -317
  60. package/styles/fabric-dark.css +1 -1351
  61. package/styles/fabric.css +1 -1362
  62. package/styles/fluent-dark.css +1 -1382
  63. package/styles/fluent.css +1 -1382
  64. package/styles/highcontrast-light.css +1 -1289
  65. package/styles/highcontrast.css +1 -1359
  66. package/styles/material-dark.css +1 -1350
  67. package/styles/material.css +1 -1351
  68. package/styles/material3-dark.css +1 -1581
  69. package/styles/material3.css +1 -1805
  70. package/styles/splitter/bootstrap-dark.css +1 -496
  71. package/styles/splitter/bootstrap.css +1 -496
  72. package/styles/splitter/bootstrap4.css +1 -495
  73. package/styles/splitter/bootstrap5-dark.css +1 -489
  74. package/styles/splitter/bootstrap5.css +1 -489
  75. package/styles/splitter/fabric-dark.css +1 -496
  76. package/styles/splitter/fabric.css +1 -496
  77. package/styles/splitter/fluent-dark.css +1 -489
  78. package/styles/splitter/fluent.css +1 -489
  79. package/styles/splitter/highcontrast-light.css +1 -496
  80. package/styles/splitter/highcontrast.css +1 -496
  81. package/styles/splitter/material-dark.css +1 -495
  82. package/styles/splitter/material.css +1 -496
  83. package/styles/splitter/material3-dark.css +1 -544
  84. package/styles/splitter/material3.css +1 -600
  85. package/styles/splitter/tailwind-dark.css +1 -489
  86. package/styles/splitter/tailwind.css +1 -489
  87. package/styles/tailwind-dark.css +1 -1379
  88. package/styles/tailwind.css +1 -1379
@@ -1,1805 +1 @@
1
- :root {
2
- --color-sf-black: 0, 0, 0;
3
- --color-sf-white: 255, 255, 255;
4
- --color-sf-primary: 103, 80, 164;
5
- --color-sf-primary-container: 234, 221, 255;
6
- --color-sf-secondary: 98, 91, 113;
7
- --color-sf-secondary-container: 232, 222, 248;
8
- --color-sf-tertiary: 125, 82, 96;
9
- --color-sf-tertiary-container: 255, 216, 228;
10
- --color-sf-surface: 255, 255, 255;
11
- --color-sf-surface-variant: 231, 224, 236;
12
- --color-sf-background: var(--color-sf-surface);
13
- --color-sf-on-primary: 255, 255, 255;
14
- --color-sf-on-primary-container: 33, 0, 94;
15
- --color-sf-on-secondary: 255, 255, 255;
16
- --color-sf-on-secondary-container: 30, 25, 43;
17
- --color-sf-on-tertiary: 255, 255, 255;
18
- --color-sf-on-tertiary-containe: 55, 11, 30;
19
- --color-sf-on-surface: 28, 27, 31;
20
- --color-sf-on-surface-variant: 73, 69, 78;
21
- --color-sf-on-background: 28, 27, 31;
22
- --color-sf-outline: 121, 116, 126;
23
- --color-sf-outline-variant: 196, 199, 197;
24
- --color-sf-shadow: 0, 0, 0;
25
- --color-sf-surface-tint-color: 103, 80, 164;
26
- --color-sf-inverse-surface: 49, 48, 51;
27
- --color-sf-inverse-on-surface: 244, 239, 244;
28
- --color-sf-inverse-primary: 208, 188, 255;
29
- --color-sf-scrim: 0, 0, 0;
30
- --color-sf-error: 179, 38, 30;
31
- --color-sf-error-container: 249, 222, 220;
32
- --color-sf-on-error: 255, 250, 250;
33
- --color-sf-on-error-container: 65, 14, 11;
34
- --color-sf-success: 32, 81, 7;
35
- --color-sf-success-container: 209, 255, 186;
36
- --color-sf-on-success: 244, 255, 239;
37
- --color-sf-on-success-container: 13, 39, 0;
38
- --color-sf-info: 1, 87, 155;
39
- --color-sf-info-container: 233, 245, 255;
40
- --color-sf-on-info: 250, 253, 255;
41
- --color-sf-on-info-container: 0, 51, 91;
42
- --color-sf-warning: 145, 76, 0;
43
- --color-sf-warning-container: 254, 236, 222;
44
- --color-sf-on-warning: 255, 255, 255;
45
- --color-sf-on-warning-container: 47, 21, 0;
46
- --color-sf-spreadsheet-gridline: var(--color-sf-surface-variant);
47
- --color-sf-shadow-focus-ring1: 0 0 0 1px rgb(255, 255, 255), 0 0 0 3px rgb(0, 0, 0);
48
- --color-sf-diagram-palette-background: --color-sf-white;
49
- --color-sf-success-text: 255, 255, 255;
50
- --color-sf-warning-text: 255, 255, 255;
51
- --color-sf-danger-text: 255, 255, 255;
52
- --color-sf-info-text: 255, 255, 255;
53
- --color-sf-content-text-color-alt2: var(--color-sf-on-secondary-container);
54
- --color-sf-secondary-bg-color: var(--color-sf-surface);
55
- }
56
-
57
- .e-dark-mode {
58
- --color-sf-black: 0, 0, 0;
59
- --color-sf-white: 255, 255, 255;
60
- --color-sf-primary: 208, 188, 255;
61
- --color-sf-primary-container: 79, 55, 139;
62
- --color-sf-secondary: 204, 194, 220;
63
- --color-sf-secondary-container: 74, 68, 88;
64
- --color-sf-tertiary: 239, 184, 200;
65
- --color-sf-tertiary-container: 99, 59, 72;
66
- --color-sf-surface: 28, 27, 31;
67
- --color-sf-surface-variant: 28, 27, 31;
68
- --color-sf-background: var(--color-sf-surface);
69
- --color-sf-on-primary: 55, 30, 115;
70
- --color-sf-on-primary-container: 234, 221, 255;
71
- --color-sf-on-secondary: 51, 45, 65;
72
- --color-sf-on-secondary-container: 232, 222, 248;
73
- --color-sf-on-tertiary: 73, 37, 50;
74
- --color-sf-on-tertiary-containe: 255, 216, 228;
75
- --color-sf-on-surface: 230, 225, 229;
76
- --color-sf-on-surface-variant: 202, 196, 208;
77
- --color-sf-on-background: 230, 225, 229;
78
- --color-sf-outline: 147, 143, 153;
79
- --color-sf-outline-variant: 68, 71, 70;
80
- --color-sf-shadow: 0, 0, 0;
81
- --color-sf-surface-tint-color: 208, 188, 255;
82
- --color-sf-inverse-surface: 230, 225, 229;
83
- --color-sf-inverse-on-surface: 49, 48, 51;
84
- --color-sf-inverse-primary: 103, 80, 164;
85
- --color-sf-scrim: 0, 0, 0;
86
- --color-sf-error: 242, 184, 181;
87
- --color-sf-error-container: 140, 29, 24;
88
- --color-sf-on-error: 96, 20, 16;
89
- --color-sf-on-error-container: 249, 222, 220;
90
- --color-sf-success: 83, 202, 23;
91
- --color-sf-success-container: 22, 62, 2;
92
- --color-sf-on-success: 13, 39, 0;
93
- --color-sf-on-success-container: 183, 250, 150;
94
- --color-sf-info: 71, 172, 251;
95
- --color-sf-info-container: 0, 67, 120;
96
- --color-sf-on-info: 0, 51, 91;
97
- --color-sf-on-info-container: 173, 219, 255;
98
- --color-sf-warning: 245, 180, 130;
99
- --color-sf-warning-container: 123, 65, 0;
100
- --color-sf-on-warning: 99, 52, 0;
101
- --color-sf-on-warning-container: 255, 220, 193;
102
- --color-sf-spreadsheet-gridline: 231, 224, 236;
103
- --color-sf-shadow-focus-ring1: 0 0 0 1px #000000, 0 0 0 3px #ffffff;
104
- --color-sf-success-text: 0, 0, 0;
105
- --color-sf-warning-text: 0, 0, 0;
106
- --color-sf-info-text: 0, 0, 0;
107
- --color-sf-danger-text: 0, 0, 0;
108
- --color-sf-diagram-palette-background: var(--color-sf-inverse-surface);
109
- --color-sf-content-text-color-alt2: var(--color-sf-on-secondary);
110
- }
111
-
112
- .e-avatar {
113
- -ms-flex-line-pack: center;
114
- align-content: center;
115
- -ms-flex-align: center;
116
- align-items: center;
117
- background-color: rgba(var(--color-sf-primary-container));
118
- background-position: center;
119
- background-repeat: no-repeat;
120
- background-size: cover;
121
- border-radius: 4px;
122
- color: rgba(var(--color-sf-on-primary-container));
123
- display: -ms-inline-flexbox;
124
- display: inline-flex;
125
- font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
126
- font-size: 20px;
127
- font-weight: 500;
128
- height: 40px;
129
- -ms-flex-pack: center;
130
- justify-content: center;
131
- overflow: hidden;
132
- position: relative;
133
- width: 40px;
134
- line-height: 20px;
135
- }
136
- .e-avatar img {
137
- height: 100%;
138
- width: auto;
139
- }
140
- .e-avatar.e-avatar-circle {
141
- border-radius: 50%;
142
- }
143
- .e-avatar.e-avatar-circle.e-avatar-large, .e-avatar.e-avatar-circle.e-avatar-xlarge {
144
- border-radius: 50%;
145
- }
146
- .e-avatar.e-avatar-xsmall {
147
- font-size: 14px;
148
- height: 24px;
149
- line-height: 14px;
150
- width: 24px;
151
- }
152
- .e-avatar.e-avatar-small {
153
- font-size: 18px;
154
- height: 32px;
155
- line-height: 18px;
156
- width: 32px;
157
- }
158
- .e-avatar.e-avatar-large {
159
- font-size: 26px;
160
- height: 48px;
161
- line-height: 26px;
162
- width: 48px;
163
- }
164
- .e-avatar.e-avatar-xlarge {
165
- font-size: 30px;
166
- height: 56px;
167
- line-height: 30px;
168
- width: 56px;
169
- }
170
-
171
- :root {
172
- --color-sf-black: 0, 0, 0;
173
- --color-sf-white: 255, 255, 255;
174
- --color-sf-primary: 103, 80, 164;
175
- --color-sf-primary-container: 234, 221, 255;
176
- --color-sf-secondary: 98, 91, 113;
177
- --color-sf-secondary-container: 232, 222, 248;
178
- --color-sf-tertiary: 125, 82, 96;
179
- --color-sf-tertiary-container: 255, 216, 228;
180
- --color-sf-surface: 255, 255, 255;
181
- --color-sf-surface-variant: 231, 224, 236;
182
- --color-sf-background: var(--color-sf-surface);
183
- --color-sf-on-primary: 255, 255, 255;
184
- --color-sf-on-primary-container: 33, 0, 94;
185
- --color-sf-on-secondary: 255, 255, 255;
186
- --color-sf-on-secondary-container: 30, 25, 43;
187
- --color-sf-on-tertiary: 255, 255, 255;
188
- --color-sf-on-tertiary-containe: 55, 11, 30;
189
- --color-sf-on-surface: 28, 27, 31;
190
- --color-sf-on-surface-variant: 73, 69, 78;
191
- --color-sf-on-background: 28, 27, 31;
192
- --color-sf-outline: 121, 116, 126;
193
- --color-sf-outline-variant: 196, 199, 197;
194
- --color-sf-shadow: 0, 0, 0;
195
- --color-sf-surface-tint-color: 103, 80, 164;
196
- --color-sf-inverse-surface: 49, 48, 51;
197
- --color-sf-inverse-on-surface: 244, 239, 244;
198
- --color-sf-inverse-primary: 208, 188, 255;
199
- --color-sf-scrim: 0, 0, 0;
200
- --color-sf-error: 179, 38, 30;
201
- --color-sf-error-container: 249, 222, 220;
202
- --color-sf-on-error: 255, 250, 250;
203
- --color-sf-on-error-container: 65, 14, 11;
204
- --color-sf-success: 32, 81, 7;
205
- --color-sf-success-container: 209, 255, 186;
206
- --color-sf-on-success: 244, 255, 239;
207
- --color-sf-on-success-container: 13, 39, 0;
208
- --color-sf-info: 1, 87, 155;
209
- --color-sf-info-container: 233, 245, 255;
210
- --color-sf-on-info: 250, 253, 255;
211
- --color-sf-on-info-container: 0, 51, 91;
212
- --color-sf-warning: 145, 76, 0;
213
- --color-sf-warning-container: 254, 236, 222;
214
- --color-sf-on-warning: 255, 255, 255;
215
- --color-sf-on-warning-container: 47, 21, 0;
216
- --color-sf-spreadsheet-gridline: var(--color-sf-surface-variant);
217
- --color-sf-shadow-focus-ring1: 0 0 0 1px rgb(255, 255, 255), 0 0 0 3px rgb(0, 0, 0);
218
- --color-sf-diagram-palette-background: --color-sf-white;
219
- --color-sf-success-text: 255, 255, 255;
220
- --color-sf-warning-text: 255, 255, 255;
221
- --color-sf-danger-text: 255, 255, 255;
222
- --color-sf-info-text: 255, 255, 255;
223
- --color-sf-content-text-color-alt2: var(--color-sf-on-secondary-container);
224
- --color-sf-secondary-bg-color: var(--color-sf-surface);
225
- }
226
-
227
- .e-dark-mode {
228
- --color-sf-black: 0, 0, 0;
229
- --color-sf-white: 255, 255, 255;
230
- --color-sf-primary: 208, 188, 255;
231
- --color-sf-primary-container: 79, 55, 139;
232
- --color-sf-secondary: 204, 194, 220;
233
- --color-sf-secondary-container: 74, 68, 88;
234
- --color-sf-tertiary: 239, 184, 200;
235
- --color-sf-tertiary-container: 99, 59, 72;
236
- --color-sf-surface: 28, 27, 31;
237
- --color-sf-surface-variant: 28, 27, 31;
238
- --color-sf-background: var(--color-sf-surface);
239
- --color-sf-on-primary: 55, 30, 115;
240
- --color-sf-on-primary-container: 234, 221, 255;
241
- --color-sf-on-secondary: 51, 45, 65;
242
- --color-sf-on-secondary-container: 232, 222, 248;
243
- --color-sf-on-tertiary: 73, 37, 50;
244
- --color-sf-on-tertiary-containe: 255, 216, 228;
245
- --color-sf-on-surface: 230, 225, 229;
246
- --color-sf-on-surface-variant: 202, 196, 208;
247
- --color-sf-on-background: 230, 225, 229;
248
- --color-sf-outline: 147, 143, 153;
249
- --color-sf-outline-variant: 68, 71, 70;
250
- --color-sf-shadow: 0, 0, 0;
251
- --color-sf-surface-tint-color: 208, 188, 255;
252
- --color-sf-inverse-surface: 230, 225, 229;
253
- --color-sf-inverse-on-surface: 49, 48, 51;
254
- --color-sf-inverse-primary: 103, 80, 164;
255
- --color-sf-scrim: 0, 0, 0;
256
- --color-sf-error: 242, 184, 181;
257
- --color-sf-error-container: 140, 29, 24;
258
- --color-sf-on-error: 96, 20, 16;
259
- --color-sf-on-error-container: 249, 222, 220;
260
- --color-sf-success: 83, 202, 23;
261
- --color-sf-success-container: 22, 62, 2;
262
- --color-sf-on-success: 13, 39, 0;
263
- --color-sf-on-success-container: 183, 250, 150;
264
- --color-sf-info: 71, 172, 251;
265
- --color-sf-info-container: 0, 67, 120;
266
- --color-sf-on-info: 0, 51, 91;
267
- --color-sf-on-info-container: 173, 219, 255;
268
- --color-sf-warning: 245, 180, 130;
269
- --color-sf-warning-container: 123, 65, 0;
270
- --color-sf-on-warning: 99, 52, 0;
271
- --color-sf-on-warning-container: 255, 220, 193;
272
- --color-sf-spreadsheet-gridline: 231, 224, 236;
273
- --color-sf-shadow-focus-ring1: 0 0 0 1px #000000, 0 0 0 3px #ffffff;
274
- --color-sf-success-text: 0, 0, 0;
275
- --color-sf-warning-text: 0, 0, 0;
276
- --color-sf-info-text: 0, 0, 0;
277
- --color-sf-danger-text: 0, 0, 0;
278
- --color-sf-diagram-palette-background: var(--color-sf-inverse-surface);
279
- --color-sf-content-text-color-alt2: var(--color-sf-on-secondary);
280
- }
281
-
282
- /*! card layout */
283
- .e-bigger .e-card,
284
- .e-bigger.e-card {
285
- line-height: 48px;
286
- min-height: 48px;
287
- }
288
- .e-bigger .e-card > .e-card-header-title,
289
- .e-bigger.e-card > .e-card-header-title {
290
- line-height: 1.5;
291
- padding: 16px;
292
- }
293
- .e-bigger .e-card > .e-card-header-title + :not(.e-card-header-title),
294
- .e-bigger.e-card > .e-card-header-title + :not(.e-card-header-title) {
295
- margin-top: 0;
296
- padding-top: 0;
297
- }
298
- .e-bigger .e-card > .e-card-title,
299
- .e-bigger.e-card > .e-card-title {
300
- line-height: 1.5;
301
- padding: 16px;
302
- }
303
- .e-bigger .e-card > .e-card-title + :not(.e-card-title),
304
- .e-bigger.e-card > .e-card-title + :not(.e-card-title) {
305
- margin-top: 0;
306
- padding-top: 0;
307
- }
308
- .e-bigger .e-card.e-card-horizontal .e-card-image,
309
- .e-bigger .e-card.e-card-horizontal img,
310
- .e-bigger .e-card .e-card-horizontal .e-card-image,
311
- .e-bigger .e-card .e-card-horizontal img,
312
- .e-bigger.e-card.e-card-horizontal .e-card-image,
313
- .e-bigger.e-card.e-card-horizontal img,
314
- .e-bigger.e-card .e-card-horizontal .e-card-image,
315
- .e-bigger.e-card .e-card-horizontal img {
316
- margin: 2px;
317
- }
318
- .e-bigger .e-card .e-card-header,
319
- .e-bigger.e-card .e-card-header {
320
- min-height: 30px;
321
- padding: 16px;
322
- }
323
- .e-bigger .e-card .e-card-header .e-card-content,
324
- .e-bigger.e-card .e-card-header .e-card-content {
325
- padding-left: 0;
326
- padding-right: 0;
327
- }
328
- .e-bigger .e-card .e-card-header .e-card-header-caption,
329
- .e-bigger.e-card .e-card-header .e-card-header-caption {
330
- padding: 0 0 0 16px;
331
- }
332
- .e-bigger .e-card .e-card-header .e-card-header-caption:first-child,
333
- .e-bigger.e-card .e-card-header .e-card-header-caption:first-child {
334
- padding: 0;
335
- }
336
- .e-bigger .e-card .e-card-header .e-card-header-caption .e-card-header-title,
337
- .e-bigger.e-card .e-card-header .e-card-header-caption .e-card-header-title {
338
- font-size: 16px;
339
- line-height: 1.5;
340
- }
341
- .e-bigger .e-card .e-card-header .e-card-header-caption .e-card-sub-title,
342
- .e-bigger.e-card .e-card-header .e-card-header-caption .e-card-sub-title {
343
- font-size: 14px;
344
- line-height: 1.5;
345
- padding: 8px 0 0;
346
- }
347
- .e-bigger .e-card .e-card-header .e-card-header-image,
348
- .e-bigger.e-card .e-card-header .e-card-header-image {
349
- background-size: cover;
350
- height: 60px;
351
- width: 55px;
352
- }
353
- .e-bigger .e-card .e-card-image,
354
- .e-bigger.e-card .e-card-image {
355
- min-height: 150px;
356
- }
357
- .e-bigger .e-card .e-card-image .e-card-title,
358
- .e-bigger.e-card .e-card-image .e-card-title {
359
- font-size: 16px;
360
- line-height: 1.25;
361
- min-height: 40px;
362
- padding: 12px 16px;
363
- }
364
- .e-bigger .e-card .e-card-actions,
365
- .e-bigger.e-card .e-card-actions {
366
- padding: 16px;
367
- }
368
- .e-bigger .e-card .e-card-actions.e-card-vertical,
369
- .e-bigger.e-card .e-card-actions.e-card-vertical {
370
- padding: 16px 20px;
371
- }
372
- .e-bigger .e-card .e-card-actions.e-card-vertical .e-card-btn,
373
- .e-bigger .e-card .e-card-actions.e-card-vertical a,
374
- .e-bigger.e-card .e-card-actions.e-card-vertical .e-card-btn,
375
- .e-bigger.e-card .e-card-actions.e-card-vertical a {
376
- margin: 0 0 7px 0;
377
- }
378
- .e-bigger .e-card .e-card-actions.e-card-vertical .e-card-btn:last-child,
379
- .e-bigger .e-card .e-card-actions.e-card-vertical a:last-child,
380
- .e-bigger.e-card .e-card-actions.e-card-vertical .e-card-btn:last-child,
381
- .e-bigger.e-card .e-card-actions.e-card-vertical a:last-child {
382
- margin-bottom: 0;
383
- }
384
- .e-bigger .e-card .e-card-actions .e-card-btn span,
385
- .e-bigger .e-card .e-card-actions .e-card-btn span.e-icons,
386
- .e-bigger.e-card .e-card-actions .e-card-btn span,
387
- .e-bigger.e-card .e-card-actions .e-card-btn span.e-icons {
388
- height: 24px;
389
- width: 24px;
390
- }
391
- .e-bigger .e-card .e-card-actions .e-card-btn,
392
- .e-bigger .e-card .e-card-actions a,
393
- .e-bigger.e-card .e-card-actions .e-card-btn,
394
- .e-bigger.e-card .e-card-actions a {
395
- line-height: 38px;
396
- margin: 0 0 0 13px;
397
- min-height: 38px;
398
- padding: 0 8px;
399
- }
400
- .e-bigger .e-card .e-card-actions .e-card-btn:first-child,
401
- .e-bigger .e-card .e-card-actions a:first-child,
402
- .e-bigger.e-card .e-card-actions .e-card-btn:first-child,
403
- .e-bigger.e-card .e-card-actions a:first-child {
404
- margin-left: 0;
405
- }
406
- .e-bigger .e-card .e-card-content,
407
- .e-bigger.e-card .e-card-content {
408
- padding: 16px;
409
- }
410
- .e-bigger .e-card .e-card-content + :not(.e-card-content),
411
- .e-bigger .e-card .e-card-content + .e-card-actions.e-card-vertical,
412
- .e-bigger.e-card .e-card-content + :not(.e-card-content),
413
- .e-bigger.e-card .e-card-content + .e-card-actions.e-card-vertical {
414
- margin-top: 0;
415
- padding-top: 0;
416
- }
417
-
418
- .e-card {
419
- border-radius: 12px;
420
- box-sizing: border-box;
421
- display: -ms-flexbox;
422
- display: flex;
423
- -ms-flex-direction: column;
424
- flex-direction: column;
425
- font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
426
- font-size: 15px;
427
- -ms-flex-pack: center;
428
- justify-content: center;
429
- line-height: 36px;
430
- min-height: 36px;
431
- overflow: hidden;
432
- position: relative;
433
- text-overflow: ellipsis;
434
- vertical-align: middle;
435
- width: 100%;
436
- }
437
- .e-card > * {
438
- -ms-flex-pack: center;
439
- justify-content: center;
440
- }
441
- .e-card > .e-card-header-title {
442
- box-sizing: border-box;
443
- font-size: 14px;
444
- line-height: 1.375;
445
- padding: 12px;
446
- }
447
- .e-card > .e-card-header-title + :not(.e-card-header-title) {
448
- margin-top: 0;
449
- padding-top: 0;
450
- }
451
- .e-card > .e-card-title {
452
- font-size: 14px;
453
- line-height: 1.5;
454
- padding: 12px;
455
- }
456
- .e-card > .e-card-title + :not(.e-card-title) {
457
- margin-top: 0;
458
- padding-top: 0;
459
- }
460
- .e-card > .e-card-header-title,
461
- .e-card > .e-card-title {
462
- overflow: hidden;
463
- text-overflow: ellipsis;
464
- }
465
- .e-card .e-card-header-caption {
466
- line-height: normal;
467
- }
468
- .e-card .e-card-header-caption .e-card-header-title {
469
- font-size: 14px;
470
- }
471
- .e-card .e-card-header-caption .e-card-sub-title {
472
- font-size: 12px;
473
- }
474
- .e-card .e-card-stacked {
475
- display: -ms-flexbox;
476
- display: flex;
477
- -ms-flex-direction: column;
478
- flex-direction: column;
479
- -ms-flex-pack: center;
480
- justify-content: center;
481
- overflow: hidden;
482
- }
483
- .e-card.e-card-horizontal,
484
- .e-card .e-card-horizontal {
485
- display: -ms-flexbox;
486
- display: flex;
487
- -ms-flex-direction: row;
488
- flex-direction: row;
489
- -ms-flex-pack: center;
490
- justify-content: center;
491
- }
492
- .e-card.e-card-horizontal .e-card-image,
493
- .e-card.e-card-horizontal img,
494
- .e-card .e-card-horizontal .e-card-image,
495
- .e-card .e-card-horizontal img {
496
- margin: 2px;
497
- }
498
- .e-card .e-card-horizontal {
499
- line-height: normal;
500
- padding: 2px;
501
- }
502
- .e-card.e-card-horizontal > * {
503
- -ms-flex: 1;
504
- flex: 1;
505
- }
506
- .e-card.e-card-horizontal .e-card-stacked {
507
- display: -ms-flexbox;
508
- display: flex;
509
- -ms-flex: 1;
510
- flex: 1;
511
- -ms-flex-direction: column;
512
- flex-direction: column;
513
- overflow: hidden;
514
- }
515
- .e-card.e-card-horizontal .e-card-stacked > :first-child {
516
- -ms-flex-positive: 1;
517
- flex-grow: 1;
518
- }
519
- .e-card .e-card-separator {
520
- display: block;
521
- }
522
- .e-card .e-card-corner {
523
- border-radius: 50%;
524
- }
525
- .e-card .e-card-header {
526
- box-sizing: border-box;
527
- display: -ms-flexbox;
528
- display: flex;
529
- -ms-flex-direction: row;
530
- flex-direction: row;
531
- -ms-flex-pack: center;
532
- justify-content: center;
533
- line-height: normal;
534
- min-height: 22.5px;
535
- padding: 12px;
536
- width: inherit;
537
- }
538
- .e-card .e-card-header .e-card-content {
539
- padding-left: 0;
540
- padding-right: 0;
541
- }
542
- .e-card .e-card-header .e-card-actions {
543
- -ms-flex-pack: start;
544
- justify-content: flex-start;
545
- }
546
- .e-card .e-card-header .e-card-header-image {
547
- -ms-flex-item-align: center;
548
- align-self: center;
549
- display: -ms-flexbox;
550
- display: flex;
551
- }
552
- .e-card .e-card-header .e-card-header-caption {
553
- -ms-flex-item-align: center;
554
- align-self: center;
555
- display: -ms-flexbox;
556
- display: flex;
557
- -ms-flex: 1;
558
- flex: 1;
559
- -ms-flex-direction: column;
560
- flex-direction: column;
561
- overflow: hidden;
562
- padding: 0 0 0 12px;
563
- }
564
- .e-card .e-card-header .e-card-header-caption:first-child {
565
- padding: 0;
566
- }
567
- .e-card .e-card-header .e-card-header-caption .e-card-header-title,
568
- .e-card .e-card-header .e-card-header-caption .e-card-sub-title {
569
- display: inline-block;
570
- overflow: hidden;
571
- text-overflow: ellipsis;
572
- white-space: nowrap;
573
- }
574
- .e-card .e-card-header .e-card-header-caption .e-card-header-title {
575
- font-size: 14px;
576
- font-weight: normal;
577
- line-height: 1.5;
578
- }
579
- .e-card .e-card-header .e-card-header-caption .e-card-sub-title {
580
- font-size: 12px;
581
- font-weight: normal;
582
- line-height: 1.5;
583
- padding: 4px 0 0;
584
- }
585
- .e-card .e-card-header .e-card-header-image {
586
- background-repeat: no-repeat;
587
- background-size: cover;
588
- height: 50px;
589
- width: 52px;
590
- }
591
- .e-card .e-card-header .e-card-corner {
592
- border-radius: 50%;
593
- }
594
- .e-card .e-card-image {
595
- background-size: cover;
596
- min-height: 112.5px;
597
- position: relative;
598
- width: 100%;
599
- }
600
- .e-card .e-card-image .e-card-title {
601
- bottom: 0;
602
- box-sizing: border-box;
603
- font-size: 14px;
604
- line-height: 30px;
605
- min-height: 30px;
606
- overflow: hidden;
607
- padding: 12px 16px;
608
- position: absolute;
609
- text-overflow: ellipsis;
610
- width: inherit;
611
- }
612
- .e-card .e-card-image .e-card-title.e-card-top-left, .e-card .e-card-image .e-card-title.e-card-top-right {
613
- bottom: auto;
614
- top: 0;
615
- }
616
- .e-card .e-card-image .e-card-title.e-card-top-right {
617
- text-align: right;
618
- }
619
- .e-card .e-card-image .e-card-title.e-card-bottom-right {
620
- text-align: right;
621
- }
622
- .e-card .e-card-actions {
623
- box-sizing: border-box;
624
- display: inline-block;
625
- -ms-flex-pack: start;
626
- justify-content: flex-start;
627
- padding: 12px;
628
- }
629
- .e-card .e-card-actions.e-card-vertical {
630
- display: -ms-flexbox;
631
- display: flex;
632
- -ms-flex-direction: column;
633
- flex-direction: column;
634
- padding: 12px;
635
- }
636
- .e-card .e-card-actions.e-card-vertical .e-card-btn,
637
- .e-card .e-card-actions.e-card-vertical a {
638
- -ms-flex-item-align: initial;
639
- -ms-grid-row-align: initial;
640
- align-self: initial;
641
- box-sizing: border-box;
642
- display: inline-block;
643
- -ms-flex-pack: center;
644
- justify-content: center;
645
- margin: 0 0 0 8px;
646
- text-align: center;
647
- width: 100%;
648
- }
649
- .e-card .e-card-actions.e-card-vertical .e-card-btn:last-child,
650
- .e-card .e-card-actions.e-card-vertical a:last-child {
651
- margin-bottom: 0;
652
- }
653
- .e-card .e-card-actions button,
654
- .e-card .e-card-actions a {
655
- -ms-flex-align: center;
656
- align-items: center;
657
- -ms-flex-item-align: center;
658
- align-self: center;
659
- cursor: pointer;
660
- display: -ms-inline-flexbox;
661
- display: inline-flex;
662
- overflow: hidden;
663
- vertical-align: middle;
664
- white-space: nowrap;
665
- }
666
- .e-card .e-card-actions .e-card-btn span,
667
- .e-card .e-card-actions .e-card-btn span.e-icons {
668
- display: -ms-flexbox;
669
- display: flex;
670
- font-size: 12px;
671
- height: 24px;
672
- width: 24px;
673
- }
674
- .e-card .e-card-actions .e-card-btn span::before,
675
- .e-card .e-card-actions .e-card-btn span.e-icons::before {
676
- -ms-flex-item-align: center;
677
- align-self: center;
678
- display: -ms-flexbox;
679
- display: flex;
680
- -ms-flex-pack: center;
681
- justify-content: center;
682
- width: inherit;
683
- }
684
- .e-card .e-card-actions .e-card-btn > * {
685
- overflow: hidden;
686
- text-overflow: ellipsis;
687
- width: inherit;
688
- }
689
- .e-card .e-card-actions .e-card-btn,
690
- .e-card .e-card-actions a {
691
- border-radius: 2px;
692
- }
693
- .e-card .e-card-actions .e-card-btn,
694
- .e-card .e-card-actions a {
695
- font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
696
- font-size: 12px;
697
- line-height: 30px;
698
- margin: 0 0 0 8px;
699
- min-height: 30px;
700
- padding: 0 6px;
701
- text-decoration: none;
702
- text-transform: none;
703
- }
704
- .e-card .e-card-actions .e-card-btn:first-child,
705
- .e-card .e-card-actions a:first-child {
706
- margin-left: 0;
707
- }
708
- .e-card .e-card-content {
709
- font-size: 14px;
710
- line-height: 1.5;
711
- padding: 12px;
712
- word-wrap: break-word;
713
- }
714
- .e-card .e-card-content + :not(.e-card-content),
715
- .e-card .e-card-content + .e-card-actions.e-card-vertical {
716
- margin-top: 0;
717
- padding-top: 0;
718
- }
719
- .e-card .e-card-content,
720
- .e-card .e-card-content p {
721
- line-height: 1.5;
722
- overflow: hidden;
723
- text-overflow: ellipsis;
724
- }
725
-
726
- /*! card theme */
727
- /* stylelint-disable property-no-vendor-prefix */
728
- .e-card {
729
- -webkit-tap-highlight-color: rgba(var(--color-sf-primary));
730
- background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
731
- border: none none none;
732
- box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
733
- color: rgba(var(--color-sf-on-surface));
734
- outline: none;
735
- }
736
- .e-card:hover {
737
- background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
738
- border-color: rgba(var(--color-sf-on-surface), 0.38);
739
- }
740
- .e-card:focus {
741
- background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
742
- border-color: rgba(var(--color-sf-outline-variant));
743
- }
744
- .e-card:active {
745
- background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
746
- border-color: rgba(var(--color-sf-primary));
747
- }
748
- .e-card .e-card-separator {
749
- border-bottom: 1px solid rgba(var(--color-sf-outline-variant));
750
- }
751
- .e-card .e-card-header-caption .e-card-header-title {
752
- color: rgba(var(--color-sf-on-surface));
753
- }
754
- .e-card .e-card-header-caption .e-card-sub-title {
755
- color: rgba(var(--color-sf-on-surface));
756
- }
757
- .e-card .e-card-image .e-card-title {
758
- background-color: rgba(var(--color-sf-scrim), 0.5);
759
- color: rgba(var(--color-sf-white));
760
- }
761
- .e-card .e-card-actions .e-card-btn span,
762
- .e-card .e-card-actions .e-card-btn span.e-icons {
763
- color: rgba(var(--color-sf-primary));
764
- }
765
- .e-card .e-card-actions .e-card-btn,
766
- .e-card .e-card-actions a {
767
- background-color: rgba(var(--color-sf-primary));
768
- border: 1px solid rgba(var(--color-sf-primary));
769
- color: rgba(var(--color-sf-on-primary));
770
- outline: 0;
771
- }
772
- .e-card .e-card-actions .e-card-btn:hover,
773
- .e-card .e-card-actions a:hover {
774
- background-color: rgba(var(--color-sf-primary));
775
- border: 1px solid linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08));
776
- color: rgba(var(--color-sf-on-primary));
777
- }
778
- .e-card .e-card-actions .e-card-btn:focus,
779
- .e-card .e-card-actions a:focus {
780
- background-color: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface));
781
- border: 1px solid;
782
- color: var(--color-sf-on-surface);
783
- }
784
- .e-card .e-card-actions .e-card-btn:active,
785
- .e-card .e-card-actions a:active {
786
- background-color: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface));
787
- border: 1px solid linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12));
788
- color: rgba(var(--color-sf-on-surface));
789
- }
790
- .e-card .e-card-content {
791
- color: rgba(var(--color-sf-on-surface));
792
- }
793
-
794
- :root {
795
- --color-sf-black: 0, 0, 0;
796
- --color-sf-white: 255, 255, 255;
797
- --color-sf-primary: 103, 80, 164;
798
- --color-sf-primary-container: 234, 221, 255;
799
- --color-sf-secondary: 98, 91, 113;
800
- --color-sf-secondary-container: 232, 222, 248;
801
- --color-sf-tertiary: 125, 82, 96;
802
- --color-sf-tertiary-container: 255, 216, 228;
803
- --color-sf-surface: 255, 255, 255;
804
- --color-sf-surface-variant: 231, 224, 236;
805
- --color-sf-background: var(--color-sf-surface);
806
- --color-sf-on-primary: 255, 255, 255;
807
- --color-sf-on-primary-container: 33, 0, 94;
808
- --color-sf-on-secondary: 255, 255, 255;
809
- --color-sf-on-secondary-container: 30, 25, 43;
810
- --color-sf-on-tertiary: 255, 255, 255;
811
- --color-sf-on-tertiary-containe: 55, 11, 30;
812
- --color-sf-on-surface: 28, 27, 31;
813
- --color-sf-on-surface-variant: 73, 69, 78;
814
- --color-sf-on-background: 28, 27, 31;
815
- --color-sf-outline: 121, 116, 126;
816
- --color-sf-outline-variant: 196, 199, 197;
817
- --color-sf-shadow: 0, 0, 0;
818
- --color-sf-surface-tint-color: 103, 80, 164;
819
- --color-sf-inverse-surface: 49, 48, 51;
820
- --color-sf-inverse-on-surface: 244, 239, 244;
821
- --color-sf-inverse-primary: 208, 188, 255;
822
- --color-sf-scrim: 0, 0, 0;
823
- --color-sf-error: 179, 38, 30;
824
- --color-sf-error-container: 249, 222, 220;
825
- --color-sf-on-error: 255, 250, 250;
826
- --color-sf-on-error-container: 65, 14, 11;
827
- --color-sf-success: 32, 81, 7;
828
- --color-sf-success-container: 209, 255, 186;
829
- --color-sf-on-success: 244, 255, 239;
830
- --color-sf-on-success-container: 13, 39, 0;
831
- --color-sf-info: 1, 87, 155;
832
- --color-sf-info-container: 233, 245, 255;
833
- --color-sf-on-info: 250, 253, 255;
834
- --color-sf-on-info-container: 0, 51, 91;
835
- --color-sf-warning: 145, 76, 0;
836
- --color-sf-warning-container: 254, 236, 222;
837
- --color-sf-on-warning: 255, 255, 255;
838
- --color-sf-on-warning-container: 47, 21, 0;
839
- --color-sf-spreadsheet-gridline: var(--color-sf-surface-variant);
840
- --color-sf-shadow-focus-ring1: 0 0 0 1px rgb(255, 255, 255), 0 0 0 3px rgb(0, 0, 0);
841
- --color-sf-diagram-palette-background: --color-sf-white;
842
- --color-sf-success-text: 255, 255, 255;
843
- --color-sf-warning-text: 255, 255, 255;
844
- --color-sf-danger-text: 255, 255, 255;
845
- --color-sf-info-text: 255, 255, 255;
846
- --color-sf-content-text-color-alt2: var(--color-sf-on-secondary-container);
847
- --color-sf-secondary-bg-color: var(--color-sf-surface);
848
- }
849
-
850
- .e-dark-mode {
851
- --color-sf-black: 0, 0, 0;
852
- --color-sf-white: 255, 255, 255;
853
- --color-sf-primary: 208, 188, 255;
854
- --color-sf-primary-container: 79, 55, 139;
855
- --color-sf-secondary: 204, 194, 220;
856
- --color-sf-secondary-container: 74, 68, 88;
857
- --color-sf-tertiary: 239, 184, 200;
858
- --color-sf-tertiary-container: 99, 59, 72;
859
- --color-sf-surface: 28, 27, 31;
860
- --color-sf-surface-variant: 28, 27, 31;
861
- --color-sf-background: var(--color-sf-surface);
862
- --color-sf-on-primary: 55, 30, 115;
863
- --color-sf-on-primary-container: 234, 221, 255;
864
- --color-sf-on-secondary: 51, 45, 65;
865
- --color-sf-on-secondary-container: 232, 222, 248;
866
- --color-sf-on-tertiary: 73, 37, 50;
867
- --color-sf-on-tertiary-containe: 255, 216, 228;
868
- --color-sf-on-surface: 230, 225, 229;
869
- --color-sf-on-surface-variant: 202, 196, 208;
870
- --color-sf-on-background: 230, 225, 229;
871
- --color-sf-outline: 147, 143, 153;
872
- --color-sf-outline-variant: 68, 71, 70;
873
- --color-sf-shadow: 0, 0, 0;
874
- --color-sf-surface-tint-color: 208, 188, 255;
875
- --color-sf-inverse-surface: 230, 225, 229;
876
- --color-sf-inverse-on-surface: 49, 48, 51;
877
- --color-sf-inverse-primary: 103, 80, 164;
878
- --color-sf-scrim: 0, 0, 0;
879
- --color-sf-error: 242, 184, 181;
880
- --color-sf-error-container: 140, 29, 24;
881
- --color-sf-on-error: 96, 20, 16;
882
- --color-sf-on-error-container: 249, 222, 220;
883
- --color-sf-success: 83, 202, 23;
884
- --color-sf-success-container: 22, 62, 2;
885
- --color-sf-on-success: 13, 39, 0;
886
- --color-sf-on-success-container: 183, 250, 150;
887
- --color-sf-info: 71, 172, 251;
888
- --color-sf-info-container: 0, 67, 120;
889
- --color-sf-on-info: 0, 51, 91;
890
- --color-sf-on-info-container: 173, 219, 255;
891
- --color-sf-warning: 245, 180, 130;
892
- --color-sf-warning-container: 123, 65, 0;
893
- --color-sf-on-warning: 99, 52, 0;
894
- --color-sf-on-warning-container: 255, 220, 193;
895
- --color-sf-spreadsheet-gridline: 231, 224, 236;
896
- --color-sf-shadow-focus-ring1: 0 0 0 1px #000000, 0 0 0 3px #ffffff;
897
- --color-sf-success-text: 0, 0, 0;
898
- --color-sf-warning-text: 0, 0, 0;
899
- --color-sf-info-text: 0, 0, 0;
900
- --color-sf-danger-text: 0, 0, 0;
901
- --color-sf-diagram-palette-background: var(--color-sf-inverse-surface);
902
- --color-sf-content-text-color-alt2: var(--color-sf-on-secondary);
903
- }
904
-
905
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler::before {
906
- content: "\e7e3";
907
- font-family: "e-icons";
908
- font-size: 14px;
909
- }
910
- .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler::before {
911
- content: "\e7fd";
912
- font-family: "e-icons";
913
- font-size: 14px;
914
- }
915
-
916
- .e-bigger .e-splitter .e-split-bar .e-resize-handler::before {
917
- font-size: 16px;
918
- }
919
- .e-bigger.e-splitter .e-split-bar .e-resize-handler::before {
920
- font-size: 16px;
921
- }
922
-
923
- .e-splitter.e-splitter-horizontal, .e-splitter.e-splitter-vertical {
924
- border-width: 1px;
925
- display: -ms-flexbox;
926
- display: flex;
927
- overflow: hidden;
928
- position: relative;
929
- -ms-touch-action: none;
930
- touch-action: none;
931
- width: 100%;
932
- }
933
- .e-splitter.e-splitter-horizontal .e-pane, .e-splitter.e-splitter-vertical .e-pane {
934
- -ms-flex: 1 1 auto;
935
- flex: 1 1 auto;
936
- font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
937
- font-size: 14px;
938
- font-weight: 400;
939
- }
940
- .e-splitter.e-splitter-horizontal .e-pane.e-scrollable, .e-splitter.e-splitter-vertical .e-pane.e-scrollable {
941
- overflow: auto;
942
- }
943
- .e-splitter.e-splitter-horizontal .e-pane.e-static-pane, .e-splitter.e-splitter-vertical .e-pane.e-static-pane {
944
- -ms-flex-positive: 0;
945
- flex-grow: 0;
946
- -ms-flex-negative: 0;
947
- flex-shrink: 0;
948
- }
949
- .e-splitter.e-splitter-horizontal .e-pane.e-pane-horizontal, .e-splitter.e-splitter-vertical .e-pane.e-pane-horizontal {
950
- overflow: auto;
951
- }
952
- .e-splitter.e-splitter-horizontal .e-pane.e-pane-horizontal.e-pane-hidden, .e-splitter.e-splitter-vertical .e-pane.e-pane-horizontal.e-pane-hidden {
953
- -ms-flex-preferred-size: 0 !important;
954
- flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
955
- overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
956
- }
957
- .e-splitter.e-splitter-horizontal {
958
- -ms-flex-direction: row;
959
- flex-direction: row;
960
- }
961
- .e-splitter.e-splitter-horizontal.e-pane.e-scrollable {
962
- overflow: hidden;
963
- }
964
- .e-splitter.e-splitter-horizontal.e-rtl {
965
- -ms-flex-direction: row-reverse;
966
- flex-direction: row-reverse;
967
- }
968
- .e-splitter.e-splitter-horizontal.e-rtl .e-split-bar.e-split-bar-horizontal {
969
- -ms-flex-direction: row-reverse;
970
- flex-direction: row-reverse;
971
- }
972
- .e-splitter.e-splitter-horizontal.e-rtl .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-arrow-right)::before,
973
- .e-splitter.e-splitter-horizontal.e-rtl .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-arrow-right)::after {
974
- right: auto;
975
- }
976
- .e-splitter.e-splitter-vertical {
977
- -ms-flex-direction: column;
978
- flex-direction: column;
979
- }
980
- .e-splitter.e-splitter-vertical.e-pane.e-scrollable {
981
- overflow: hidden;
982
- }
983
- .e-splitter.e-splitter-vertical .e-pane-vertical {
984
- overflow: auto;
985
- }
986
- .e-splitter.e-splitter-vertical .e-pane-vertical.e-pane-hidden {
987
- -ms-flex-preferred-size: 0 !important;
988
- flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
989
- overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
990
- }
991
- .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::before,
992
- .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::after {
993
- right: auto;
994
- }
995
- .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
996
- border-radius: 50%;
997
- bottom: 20px;
998
- right: 22px;
999
- }
1000
- .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down {
1001
- border-radius: 50%;
1002
- left: 22px;
1003
- right: auto;
1004
- top: 20px;
1005
- }
1006
- .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
1007
- right: auto;
1008
- }
1009
- .e-splitter .e-split-bar.e-split-bar-horizontal {
1010
- -ms-flex-align: center;
1011
- align-items: center;
1012
- display: -ms-flexbox;
1013
- display: flex;
1014
- -ms-flex: 0 0 auto;
1015
- flex: 0 0 auto;
1016
- -ms-flex-pack: center;
1017
- justify-content: center;
1018
- min-width: 1px;
1019
- z-index: 15;
1020
- }
1021
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-icon-hidden {
1022
- visibility: hidden;
1023
- }
1024
- .e-splitter .e-split-bar.e-split-bar-horizontal.e-resizable-split-bar {
1025
- cursor: col-resize;
1026
- }
1027
- .e-splitter .e-split-bar.e-split-bar-horizontal.e-resizable-split-bar::after {
1028
- content: "";
1029
- cursor: col-resize;
1030
- display: block;
1031
- height: 100%;
1032
- position: absolute;
1033
- width: 16px;
1034
- z-index: 10;
1035
- }
1036
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
1037
- -ms-flex-align: center;
1038
- align-items: center;
1039
- display: -ms-flexbox;
1040
- display: flex;
1041
- height: 18px;
1042
- -ms-flex-pack: center;
1043
- justify-content: center;
1044
- position: relative;
1045
- width: 1px;
1046
- }
1047
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler.e-hide-handler {
1048
- visibility: hidden;
1049
- }
1050
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-arrow-right)::before,
1051
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-arrow-right)::after {
1052
- left: 8px;
1053
- right: 3px;
1054
- }
1055
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow {
1056
- border-image: none;
1057
- border-width: 1px;
1058
- cursor: pointer;
1059
- display: -ms-flexbox;
1060
- display: flex;
1061
- height: 26px;
1062
- padding: 1px 12px;
1063
- position: relative;
1064
- }
1065
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow::before, .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow::after {
1066
- border-radius: 16px;
1067
- content: "";
1068
- height: 8px;
1069
- position: absolute;
1070
- transform: rotate(0deg);
1071
- width: 2px;
1072
- }
1073
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow::before {
1074
- top: 5px;
1075
- transform-origin: 1px 7px 0;
1076
- }
1077
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow::after {
1078
- top: 11px;
1079
- transform-origin: 1px 1px 0;
1080
- }
1081
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-arrow-right) {
1082
- border-radius: 50%;
1083
- right: 5px;
1084
- }
1085
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow.e-arrow-right {
1086
- border-radius: 50%;
1087
- left: 5px;
1088
- }
1089
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow.e-arrow-right::before, .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow.e-arrow-right::after {
1090
- right: 8px;
1091
- }
1092
- .e-splitter .e-split-bar.e-split-bar-horizontal.e-last-bar:not(.e-resizable-split-bar) {
1093
- margin: 0 3px;
1094
- }
1095
- .e-splitter .e-split-bar.e-split-bar-horizontal:not(.e-resizable-split-bar) {
1096
- margin: 0 0 0 3px;
1097
- }
1098
- .e-splitter .e-split-bar.e-split-bar-vertical {
1099
- -ms-flex-align: center;
1100
- align-items: center;
1101
- border-left: none;
1102
- border-right: none;
1103
- display: -ms-flexbox;
1104
- display: flex;
1105
- -ms-flex: 0 0 auto;
1106
- flex: 0 0 auto;
1107
- -ms-flex-pack: center;
1108
- justify-content: center;
1109
- min-height: 1px;
1110
- }
1111
- .e-splitter .e-split-bar.e-split-bar-vertical .e-icon-hidden {
1112
- visibility: hidden;
1113
- }
1114
- .e-splitter .e-split-bar.e-split-bar-vertical.e-resizable-split-bar {
1115
- cursor: row-resize;
1116
- }
1117
- .e-splitter .e-split-bar.e-split-bar-vertical.e-resizable-split-bar::after {
1118
- content: "";
1119
- cursor: row-resize;
1120
- display: block;
1121
- height: 16px;
1122
- position: absolute;
1123
- width: 100%;
1124
- z-index: 12;
1125
- }
1126
- .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
1127
- -ms-flex-align: center;
1128
- align-items: center;
1129
- display: -ms-flexbox;
1130
- display: flex;
1131
- height: 1px;
1132
- -ms-flex-pack: center;
1133
- justify-content: center;
1134
- width: 18px;
1135
- }
1136
- .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler.e-hide-handler {
1137
- visibility: hidden;
1138
- }
1139
- .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::before,
1140
- .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::after {
1141
- left: 10px;
1142
- }
1143
- .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow {
1144
- border-image: none;
1145
- border-width: 0;
1146
- cursor: pointer;
1147
- display: -ms-flexbox;
1148
- display: flex;
1149
- height: 26px;
1150
- padding: 10px 3px 10px 18px;
1151
- position: relative;
1152
- width: 26px;
1153
- }
1154
- .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow::after {
1155
- border-radius: 16px;
1156
- content: "";
1157
- height: 8px;
1158
- position: absolute;
1159
- transform: rotate(90deg);
1160
- width: 2px;
1161
- }
1162
- .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::before {
1163
- top: 3px;
1164
- transform-origin: 2px 7px 0;
1165
- }
1166
- .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::after {
1167
- left: 11px;
1168
- top: 8px;
1169
- transform-origin: 1px 1px 0;
1170
- }
1171
- .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::before {
1172
- left: 12px;
1173
- top: 8px;
1174
- transform-origin: 1px 6px 0;
1175
- }
1176
- .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
1177
- left: 10px;
1178
- top: 12px;
1179
- transform-origin: 1px 2px 0;
1180
- }
1181
- .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
1182
- border-radius: 50%;
1183
- bottom: 20px;
1184
- left: 22px;
1185
- }
1186
- .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down {
1187
- border-radius: 50%;
1188
- right: 22px;
1189
- top: 20px;
1190
- }
1191
- .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
1192
- right: 10px;
1193
- }
1194
- .e-splitter .e-split-bar.e-split-bar-vertical.e-last-bar:not(.e-resizable-split-bar) {
1195
- margin: 3px 0;
1196
- }
1197
- .e-splitter .e-split-bar.e-split-bar-vertical:not(.e-resizable-split-bar) {
1198
- margin: 3px 0 0;
1199
- }
1200
-
1201
- .e-bigger.e-splitter .e-pane {
1202
- font-size: 16px;
1203
- }
1204
- .e-bigger.e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
1205
- height: 20px;
1206
- }
1207
- .e-bigger.e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
1208
- width: 20px;
1209
- }
1210
- .e-bigger.e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::before,
1211
- .e-bigger.e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::after {
1212
- margin-top: -2px;
1213
- }
1214
- .e-bigger.e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
1215
- margin-top: 2px;
1216
- }
1217
-
1218
- .e-rtl .e-splitter.e-splitter-horizontal {
1219
- -ms-flex-direction: row-reverse;
1220
- flex-direction: row-reverse;
1221
- }
1222
-
1223
- .e-bigger .e-splitter .e-pane {
1224
- font-size: 16px;
1225
- }
1226
- .e-bigger .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
1227
- height: 20px;
1228
- }
1229
- .e-bigger .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
1230
- width: 20px;
1231
- }
1232
-
1233
- .e-content-placeholder.e-splitter.e-placeholder-splitter {
1234
- background-size: 100px 110px;
1235
- min-height: 110px;
1236
- }
1237
-
1238
- .e-bigger .e-content-placeholder.e-splitter.e-placeholder-splitter,
1239
- .e-bigger.e-content-placeholder.e-splitter.e-placeholder-splitter {
1240
- background-size: 100px 110px;
1241
- min-height: 110px;
1242
- }
1243
-
1244
- .e-splitter.e-ie .e-navigate-arrow.e-arrow-left {
1245
- margin-left: -26px;
1246
- }
1247
-
1248
- .e-splitter.e-ie .e-split-bar-horizontal .e-resize-handler {
1249
- -ms-flex-direction: column;
1250
- flex-direction: column;
1251
- }
1252
-
1253
- .e-splitter.e-splitter-horizontal, .e-splitter.e-splitter-vertical {
1254
- border: solid 1px rgba(var(--color-sf-outline-variant));
1255
- }
1256
- .e-splitter.e-splitter-horizontal .e-pane, .e-splitter.e-splitter-vertical .e-pane {
1257
- color: rgba(var(--color-sf-on-surface));
1258
- }
1259
- .e-splitter.e-splitter-horizontal .e-pane.e-splitter.e-splitter-horizontal, .e-splitter.e-splitter-horizontal .e-pane.e-splitter.e-splitter-vertical, .e-splitter.e-splitter-vertical .e-pane.e-splitter.e-splitter-horizontal, .e-splitter.e-splitter-vertical .e-pane.e-splitter.e-splitter-vertical {
1260
- border: transparent;
1261
- }
1262
- .e-splitter .e-split-bar.e-split-bar-horizontal {
1263
- background: rgba(var(--color-sf-outline-variant));
1264
- border-left: none;
1265
- border-right: none;
1266
- }
1267
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
1268
- background: rgba(var(--color-sf-surface));
1269
- color: rgba(var(--color-sf-on-surface-variant));
1270
- z-index: 10;
1271
- }
1272
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
1273
- background-color: transparent;
1274
- border-color: transparent;
1275
- color: transparent;
1276
- transition: background-color 500ms ease-out;
1277
- }
1278
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden)::before, .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden)::after {
1279
- background-color: rgba(var(--color-sf-primary));
1280
- opacity: 0;
1281
- transition-duration: 0.3s;
1282
- transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
1283
- }
1284
- .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active {
1285
- background: rgba(var(--color-sf-primary));
1286
- border-left: none;
1287
- border-right: none;
1288
- }
1289
- .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-resize-handler, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-resize-handler {
1290
- background: rgba(var(--color-sf-surface));
1291
- color: rgba(var(--color-sf-primary));
1292
- }
1293
- .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-left, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-right, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-navigate-arrow.e-arrow-left, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-navigate-arrow.e-arrow-right {
1294
- background-color: transparent;
1295
- border-color: rgba(var(--color-sf-primary));
1296
- border-width: 1px;
1297
- opacity: 0.9;
1298
- }
1299
- .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover.e-split-bar-hover .e-navigate-arrow::before, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover.e-split-bar-active .e-navigate-arrow::before, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active.e-split-bar-hover .e-navigate-arrow::before, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active.e-split-bar-active .e-navigate-arrow::before {
1300
- background-color: rgba(var(--color-sf-primary));
1301
- opacity: 1;
1302
- transform: rotate(40deg);
1303
- }
1304
- .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover.e-split-bar-hover .e-navigate-arrow::after, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover.e-split-bar-active .e-navigate-arrow::after, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active.e-split-bar-hover .e-navigate-arrow::after, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active.e-split-bar-active .e-navigate-arrow::after {
1305
- background-color: rgba(var(--color-sf-primary));
1306
- opacity: 1;
1307
- transform: rotate(-40deg);
1308
- }
1309
- .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-right::before, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-navigate-arrow.e-arrow-right::before {
1310
- background-color: rgba(var(--color-sf-primary));
1311
- opacity: 1;
1312
- transform: rotate(-40deg);
1313
- }
1314
- .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-right::after, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-navigate-arrow.e-arrow-right::after {
1315
- background-color: rgba(var(--color-sf-primary));
1316
- opacity: 1;
1317
- transform: rotate(40deg);
1318
- }
1319
- .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active {
1320
- background: rgba(var(--color-sf-primary));
1321
- }
1322
- .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-resize-handler {
1323
- background: rgba(var(--color-sf-surface));
1324
- color: rgba(var(--color-sf-primary));
1325
- }
1326
- .e-splitter .e-split-bar.e-split-bar-vertical {
1327
- background: rgba(var(--color-sf-outline-variant));
1328
- }
1329
- .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
1330
- background: rgba(var(--color-sf-surface));
1331
- color: rgba(var(--color-sf-on-surface-variant));
1332
- z-index: 12;
1333
- }
1334
- .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
1335
- background: rgba(var(--color-sf-primary));
1336
- border-left: none;
1337
- border-right: none;
1338
- }
1339
- .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-up, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-down, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-up, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-down {
1340
- background-color: transparent;
1341
- border-color: rgba(var(--color-sf-primary));
1342
- border-width: 1px;
1343
- opacity: 0.9;
1344
- }
1345
- .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-resize-handler, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-resize-handler {
1346
- background: rgba(var(--color-sf-surface));
1347
- color: rgba(var(--color-sf-primary));
1348
- }
1349
- .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-up::before, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-up::before {
1350
- background-color: rgba(var(--color-sf-primary));
1351
- opacity: 1;
1352
- transform: rotate(125deg);
1353
- }
1354
- .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-up::after, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-up::after {
1355
- background-color: rgba(var(--color-sf-primary));
1356
- opacity: 1;
1357
- transform: rotate(50deg);
1358
- }
1359
- .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-down::before {
1360
- background-color: rgba(var(--color-sf-primary));
1361
- opacity: 1;
1362
- transform: rotate(55deg);
1363
- }
1364
- .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-down::after, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-down::after {
1365
- background-color: rgba(var(--color-sf-primary));
1366
- opacity: 1;
1367
- transform: rotate(125deg);
1368
- }
1369
- .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow {
1370
- background-color: transparent;
1371
- border-color: transparent;
1372
- color: transparent;
1373
- transition: background-color 300ms ease-out;
1374
- }
1375
- .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow::after {
1376
- background-color: rgba(var(--color-sf-primary));
1377
- opacity: 0;
1378
- transition-duration: 0.3s;
1379
- transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
1380
- }
1381
- .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
1382
- background: rgba(var(--color-sf-primary));
1383
- }
1384
- .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-resize-handler {
1385
- background: rgba(var(--color-sf-surface));
1386
- color: rgba(var(--color-sf-primary));
1387
- }
1388
- .e-splitter.e-disabled {
1389
- opacity: 0.4;
1390
- pointer-events: none;
1391
- }
1392
-
1393
- /* stylelint-disable-line no-empty-source */
1394
- :root {
1395
- --color-sf-black: 0, 0, 0;
1396
- --color-sf-white: 255, 255, 255;
1397
- --color-sf-primary: 103, 80, 164;
1398
- --color-sf-primary-container: 234, 221, 255;
1399
- --color-sf-secondary: 98, 91, 113;
1400
- --color-sf-secondary-container: 232, 222, 248;
1401
- --color-sf-tertiary: 125, 82, 96;
1402
- --color-sf-tertiary-container: 255, 216, 228;
1403
- --color-sf-surface: 255, 255, 255;
1404
- --color-sf-surface-variant: 231, 224, 236;
1405
- --color-sf-background: var(--color-sf-surface);
1406
- --color-sf-on-primary: 255, 255, 255;
1407
- --color-sf-on-primary-container: 33, 0, 94;
1408
- --color-sf-on-secondary: 255, 255, 255;
1409
- --color-sf-on-secondary-container: 30, 25, 43;
1410
- --color-sf-on-tertiary: 255, 255, 255;
1411
- --color-sf-on-tertiary-containe: 55, 11, 30;
1412
- --color-sf-on-surface: 28, 27, 31;
1413
- --color-sf-on-surface-variant: 73, 69, 78;
1414
- --color-sf-on-background: 28, 27, 31;
1415
- --color-sf-outline: 121, 116, 126;
1416
- --color-sf-outline-variant: 196, 199, 197;
1417
- --color-sf-shadow: 0, 0, 0;
1418
- --color-sf-surface-tint-color: 103, 80, 164;
1419
- --color-sf-inverse-surface: 49, 48, 51;
1420
- --color-sf-inverse-on-surface: 244, 239, 244;
1421
- --color-sf-inverse-primary: 208, 188, 255;
1422
- --color-sf-scrim: 0, 0, 0;
1423
- --color-sf-error: 179, 38, 30;
1424
- --color-sf-error-container: 249, 222, 220;
1425
- --color-sf-on-error: 255, 250, 250;
1426
- --color-sf-on-error-container: 65, 14, 11;
1427
- --color-sf-success: 32, 81, 7;
1428
- --color-sf-success-container: 209, 255, 186;
1429
- --color-sf-on-success: 244, 255, 239;
1430
- --color-sf-on-success-container: 13, 39, 0;
1431
- --color-sf-info: 1, 87, 155;
1432
- --color-sf-info-container: 233, 245, 255;
1433
- --color-sf-on-info: 250, 253, 255;
1434
- --color-sf-on-info-container: 0, 51, 91;
1435
- --color-sf-warning: 145, 76, 0;
1436
- --color-sf-warning-container: 254, 236, 222;
1437
- --color-sf-on-warning: 255, 255, 255;
1438
- --color-sf-on-warning-container: 47, 21, 0;
1439
- --color-sf-spreadsheet-gridline: var(--color-sf-surface-variant);
1440
- --color-sf-shadow-focus-ring1: 0 0 0 1px rgb(255, 255, 255), 0 0 0 3px rgb(0, 0, 0);
1441
- --color-sf-diagram-palette-background: --color-sf-white;
1442
- --color-sf-success-text: 255, 255, 255;
1443
- --color-sf-warning-text: 255, 255, 255;
1444
- --color-sf-danger-text: 255, 255, 255;
1445
- --color-sf-info-text: 255, 255, 255;
1446
- --color-sf-content-text-color-alt2: var(--color-sf-on-secondary-container);
1447
- --color-sf-secondary-bg-color: var(--color-sf-surface);
1448
- }
1449
-
1450
- .e-dark-mode {
1451
- --color-sf-black: 0, 0, 0;
1452
- --color-sf-white: 255, 255, 255;
1453
- --color-sf-primary: 208, 188, 255;
1454
- --color-sf-primary-container: 79, 55, 139;
1455
- --color-sf-secondary: 204, 194, 220;
1456
- --color-sf-secondary-container: 74, 68, 88;
1457
- --color-sf-tertiary: 239, 184, 200;
1458
- --color-sf-tertiary-container: 99, 59, 72;
1459
- --color-sf-surface: 28, 27, 31;
1460
- --color-sf-surface-variant: 28, 27, 31;
1461
- --color-sf-background: var(--color-sf-surface);
1462
- --color-sf-on-primary: 55, 30, 115;
1463
- --color-sf-on-primary-container: 234, 221, 255;
1464
- --color-sf-on-secondary: 51, 45, 65;
1465
- --color-sf-on-secondary-container: 232, 222, 248;
1466
- --color-sf-on-tertiary: 73, 37, 50;
1467
- --color-sf-on-tertiary-containe: 255, 216, 228;
1468
- --color-sf-on-surface: 230, 225, 229;
1469
- --color-sf-on-surface-variant: 202, 196, 208;
1470
- --color-sf-on-background: 230, 225, 229;
1471
- --color-sf-outline: 147, 143, 153;
1472
- --color-sf-outline-variant: 68, 71, 70;
1473
- --color-sf-shadow: 0, 0, 0;
1474
- --color-sf-surface-tint-color: 208, 188, 255;
1475
- --color-sf-inverse-surface: 230, 225, 229;
1476
- --color-sf-inverse-on-surface: 49, 48, 51;
1477
- --color-sf-inverse-primary: 103, 80, 164;
1478
- --color-sf-scrim: 0, 0, 0;
1479
- --color-sf-error: 242, 184, 181;
1480
- --color-sf-error-container: 140, 29, 24;
1481
- --color-sf-on-error: 96, 20, 16;
1482
- --color-sf-on-error-container: 249, 222, 220;
1483
- --color-sf-success: 83, 202, 23;
1484
- --color-sf-success-container: 22, 62, 2;
1485
- --color-sf-on-success: 13, 39, 0;
1486
- --color-sf-on-success-container: 183, 250, 150;
1487
- --color-sf-info: 71, 172, 251;
1488
- --color-sf-info-container: 0, 67, 120;
1489
- --color-sf-on-info: 0, 51, 91;
1490
- --color-sf-on-info-container: 173, 219, 255;
1491
- --color-sf-warning: 245, 180, 130;
1492
- --color-sf-warning-container: 123, 65, 0;
1493
- --color-sf-on-warning: 99, 52, 0;
1494
- --color-sf-on-warning-container: 255, 220, 193;
1495
- --color-sf-spreadsheet-gridline: 231, 224, 236;
1496
- --color-sf-shadow-focus-ring1: 0 0 0 1px #000000, 0 0 0 3px #ffffff;
1497
- --color-sf-success-text: 0, 0, 0;
1498
- --color-sf-warning-text: 0, 0, 0;
1499
- --color-sf-info-text: 0, 0, 0;
1500
- --color-sf-danger-text: 0, 0, 0;
1501
- --color-sf-diagram-palette-background: var(--color-sf-inverse-surface);
1502
- --color-sf-content-text-color-alt2: var(--color-sf-on-secondary);
1503
- }
1504
-
1505
- /*! component's theme wise override material 3 definitions and variables */
1506
- /* stylelint-disable */
1507
- .e-dashboardlayout.e-control .e-panel .e-resize.e-single.e-east, .e-dashboardlayout.e-control .e-panel .e-resize.e-double.e-east {
1508
- height: 100%;
1509
- padding: 20px 0;
1510
- right: 1px;
1511
- top: 0;
1512
- width: 12px;
1513
- }
1514
- .e-dashboardlayout.e-control .e-panel .e-resize.e-single.e-west, .e-dashboardlayout.e-control .e-panel .e-resize.e-double.e-west {
1515
- height: 100%;
1516
- left: 0;
1517
- padding: 20px 0;
1518
- top: 0;
1519
- width: 12px;
1520
- }
1521
- .e-dashboardlayout.e-control .e-panel .e-resize.e-single.e-north, .e-dashboardlayout.e-control .e-panel .e-resize.e-double.e-north {
1522
- height: 12px;
1523
- padding: 0 20px;
1524
- top: 1px;
1525
- width: 100%;
1526
- }
1527
- .e-dashboardlayout.e-control .e-panel .e-resize.e-single.e-south, .e-dashboardlayout.e-control .e-panel .e-resize.e-double.e-south {
1528
- bottom: 1px;
1529
- height: 12px;
1530
- padding: 0 20px;
1531
- width: 100%;
1532
- }
1533
- .e-dashboardlayout.e-control .e-panel .e-resize.e-single.e-south-east, .e-dashboardlayout.e-control .e-panel .e-resize.e-double.e-south-east {
1534
- bottom: 0;
1535
- right: 1px;
1536
- z-index: 10;
1537
- }
1538
- .e-dashboardlayout.e-control .e-panel .e-resize.e-single.e-north-west, .e-dashboardlayout.e-control .e-panel .e-resize.e-double.e-north-west {
1539
- left: 2px;
1540
- top: 2px;
1541
- z-index: 10;
1542
- }
1543
- .e-dashboardlayout.e-control .e-panel .e-resize.e-single.e-north-east, .e-dashboardlayout.e-control .e-panel .e-resize.e-double.e-north-east {
1544
- right: 2px;
1545
- top: 2px;
1546
- z-index: 10;
1547
- }
1548
- .e-dashboardlayout.e-control .e-panel .e-resize.e-single.e-south-west, .e-dashboardlayout.e-control .e-panel .e-resize.e-double.e-south-west {
1549
- bottom: 1px;
1550
- left: 1px;
1551
- z-index: 10;
1552
- }
1553
- .e-dashboardlayout.e-control .e-panel .e-resize.e-single.e-south-east::before, .e-dashboardlayout.e-control .e-panel .e-resize.e-double.e-south-east::before {
1554
- bottom: 4px;
1555
- content: "\e761";
1556
- font-size: 12px;
1557
- position: absolute;
1558
- right: 4px;
1559
- }
1560
- .e-dashboardlayout.e-control .e-panel .e-resize.e-single.e-south-west::before, .e-dashboardlayout.e-control .e-panel .e-resize.e-double.e-south-west::before {
1561
- bottom: 4px;
1562
- content: "\e761";
1563
- font-size: 12px;
1564
- left: 4px;
1565
- position: absolute;
1566
- transform: rotateY(180deg);
1567
- }
1568
-
1569
- .e-dashboardlayout.e-control .e-dashboard-gridline-table {
1570
- background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
1571
- border-collapse: collapse;
1572
- height: 100%;
1573
- width: 100%;
1574
- }
1575
- .e-dashboardlayout.e-control .e-dashboard-gridline-table tbody tr td.e-dashboard-gridline {
1576
- border: 1px dashed rgba(var(--color-sf-primary));
1577
- position: absolute;
1578
- }
1579
- .e-dashboardlayout.e-control.e-responsive {
1580
- width: 100% !important;
1581
- }
1582
- .e-dashboardlayout.e-control.e-prevent {
1583
- -webkit-user-select: none;
1584
- -ms-user-select: none;
1585
- user-select: none;
1586
- }
1587
- .e-dashboardlayout.e-control .e-panel {
1588
- border-radius: 8px;
1589
- }
1590
- .e-dashboardlayout.e-control .e-panel:hover {
1591
- border: 1px solid rgba(var(--color-sf-outline-variant));
1592
- box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
1593
- }
1594
- .e-dashboardlayout.e-control .e-panel:hover .e-panel-container .e-resize.e-dl-icon {
1595
- display: block;
1596
- }
1597
- .e-dashboardlayout.e-control .e-panel:active {
1598
- border: 1px solid rgba(var(--color-sf-primary));
1599
- }
1600
- .e-dashboardlayout.e-control .e-panel .e-panel-container .e-resize.e-dl-icon {
1601
- display: none;
1602
- }
1603
- .e-dashboardlayout.e-control .e-panel.e-panel-transition {
1604
- transition: top 0.5s, left 0.5s;
1605
- }
1606
- .e-dashboardlayout.e-control .e-panel .e-panel-header {
1607
- border-bottom: 1px solid rgba(var(--color-sf-outline-variant));
1608
- color: rgba(var(--color-sf-on-surface));
1609
- font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
1610
- font-size: 14px;
1611
- font-weight: 600;
1612
- height: 40px;
1613
- padding: 11px 16px;
1614
- border-top-left-radius: 8px;
1615
- border-top-right-radius: 8px;
1616
- }
1617
- .e-dashboardlayout.e-control .e-panel .e-panel-header div {
1618
- overflow: hidden;
1619
- text-overflow: ellipsis;
1620
- white-space: nowrap;
1621
- }
1622
- .e-dashboardlayout.e-control .e-panel .e-panel-header .e-header-content {
1623
- display: inline-block;
1624
- }
1625
- .e-dashboardlayout.e-control .e-panel .e-panel-header .e-header-template {
1626
- float: right;
1627
- }
1628
- .e-dashboardlayout.e-control .e-panel .e-panel-container {
1629
- height: 100%;
1630
- width: 100%;
1631
- }
1632
- .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-content .e-blazor-template {
1633
- height: inherit;
1634
- width: inherit;
1635
- }
1636
- .e-dashboardlayout.e-control .e-panel {
1637
- border: 1px solid rgba(var(--color-sf-outline-variant));
1638
- height: 100%;
1639
- -webkit-user-select: none;
1640
- -ms-user-select: none;
1641
- user-select: none;
1642
- width: 100%;
1643
- }
1644
- .e-dashboardlayout.e-control .e-panel .e-resize.e-single, .e-dashboardlayout.e-control .e-panel .e-resize.e-double {
1645
- position: absolute;
1646
- -ms-touch-action: none;
1647
- touch-action: none;
1648
- }
1649
- .e-dashboardlayout.e-control .e-panel .e-resize.e-single.e-east, .e-dashboardlayout.e-control .e-panel .e-resize.e-single.e-west, .e-dashboardlayout.e-control .e-panel .e-resize.e-single.e-north, .e-dashboardlayout.e-control .e-panel .e-resize.e-single.e-south, .e-dashboardlayout.e-control .e-panel .e-resize.e-double.e-east, .e-dashboardlayout.e-control .e-panel .e-resize.e-double.e-west, .e-dashboardlayout.e-control .e-panel .e-resize.e-double.e-north, .e-dashboardlayout.e-control .e-panel .e-resize.e-double.e-south {
1650
- border: none;
1651
- }
1652
- .e-dashboardlayout.e-control .e-panel .e-resize.e-single.e-east:hover, .e-dashboardlayout.e-control .e-panel .e-resize.e-double.e-east:hover {
1653
- cursor: e-resize;
1654
- }
1655
- .e-dashboardlayout.e-control .e-panel .e-resize.e-single.e-west:hover, .e-dashboardlayout.e-control .e-panel .e-resize.e-double.e-west:hover {
1656
- cursor: w-resize;
1657
- }
1658
- .e-dashboardlayout.e-control .e-panel .e-resize.e-single.e-north:hover, .e-dashboardlayout.e-control .e-panel .e-resize.e-double.e-north:hover {
1659
- cursor: n-resize;
1660
- }
1661
- .e-dashboardlayout.e-control .e-panel .e-resize.e-single.e-south:hover, .e-dashboardlayout.e-control .e-panel .e-resize.e-double.e-south:hover {
1662
- cursor: s-resize;
1663
- }
1664
- .e-dashboardlayout.e-control .e-panel .e-resize.e-single.e-north-west:hover, .e-dashboardlayout.e-control .e-panel .e-resize.e-double.e-north-west:hover {
1665
- cursor: nw-resize;
1666
- }
1667
- .e-dashboardlayout.e-control .e-panel .e-resize.e-single.e-north-east:hover, .e-dashboardlayout.e-control .e-panel .e-resize.e-double.e-north-east:hover {
1668
- cursor: ne-resize;
1669
- }
1670
- .e-dashboardlayout.e-control .e-panel .e-resize.e-single.e-south-west:hover, .e-dashboardlayout.e-control .e-panel .e-resize.e-double.e-south-west:hover {
1671
- cursor: sw-resize;
1672
- }
1673
- .e-dashboardlayout.e-control .e-panel .e-resize.e-single.e-south-east:hover, .e-dashboardlayout.e-control .e-panel .e-resize.e-double.e-south-east:hover {
1674
- cursor: se-resize;
1675
- }
1676
- .e-dashboardlayout.e-control .e-panel .e-resize.e-single::before, .e-dashboardlayout.e-control .e-panel .e-resize.e-double::before {
1677
- font-family: "e-icons";
1678
- position: absolute;
1679
- }
1680
- .e-dashboardlayout.e-control .e-drag:hover {
1681
- cursor: move;
1682
- }
1683
- .e-dashboardlayout.e-control .e-drag-restrict.e-drag:hover,
1684
- .e-dashboardlayout.e-control .e-drag-restrict .e-drag:hover {
1685
- cursor: default;
1686
- }
1687
- .e-dashboardlayout.e-control .e-panel.e-dragging, .e-dashboardlayout.e-control .e-panel.e-item-moving {
1688
- cursor: move;
1689
- z-index: 1111 !important;
1690
- }
1691
- .e-dashboardlayout.e-control .e-panel.e-rtl .e-panel-header .e-header-template {
1692
- float: left;
1693
- }
1694
- .e-dashboardlayout.e-control .e-holder {
1695
- background: rgba(var(--color-sf-primary-container));
1696
- border: 1px rgba(var(--color-sf-primary)) dashed;
1697
- border-radius: 8px;
1698
- position: absolute;
1699
- border-radius: 8px;
1700
- }
1701
- .e-dashboardlayout.e-control .e-holder.e-holder-transition {
1702
- transition: top 0.3s, left 0.3s;
1703
- }
1704
- .e-dashboardlayout.e-control .e-panel.e-bigger .e-panel-header {
1705
- font-size: 16px;
1706
- font-weight: 600;
1707
- height: 48px;
1708
- padding: 14px 16px;
1709
- }
1710
-
1711
- .e-bigger .e-dashboardlayout.e-control .e-panel .e-panel-header {
1712
- font-size: 16px;
1713
- font-weight: 600;
1714
- height: 48px;
1715
- padding: 14px 16px;
1716
- }
1717
- .e-content-placeholder.e-dashboardlayout.e-placeholder-dashboardlayout {
1718
- height: 100%;
1719
- width: 100%;
1720
- }
1721
-
1722
- .e-dashboardlayout.e-control {
1723
- display: block;
1724
- position: relative;
1725
- }
1726
- .e-dashboardlayout.e-control .e-panel {
1727
- background: rgba(var(--color-sf-surface));
1728
- box-shadow: none;
1729
- box-sizing: border-box;
1730
- position: absolute;
1731
- }
1732
- .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header {
1733
- color: rgba(var(--color-sf-on-surface));
1734
- background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
1735
- box-sizing: border-box;
1736
- }
1737
- .e-dashboardlayout.e-control .e-panel {
1738
- background: rgba(var(--color-sf-surface));
1739
- box-shadow: none;
1740
- box-sizing: border-box;
1741
- position: absolute;
1742
- }
1743
- .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header {
1744
- color: rgba(var(--color-sf-on-surface));
1745
- }
1746
- .e-dashboardlayout.e-control .e-panel .e-panel-container .e-resize.e-single {
1747
- background: none;
1748
- }
1749
- .e-dashboardlayout.e-control .e-panel .e-panel-container .e-resize.e-double {
1750
- color: rgba(var(--color-sf-on-surface-variant), 0.38);
1751
- font-size: 8px;
1752
- height: 8px;
1753
- width: 8px;
1754
- }
1755
- .e-dashboardlayout.e-control .e-panel .e-panel-container .e-resize.e-double.e-south-east-double {
1756
- bottom: 2px;
1757
- right: 2px;
1758
- }
1759
- .e-dashboardlayout.e-control .e-panel .e-panel-container .e-resize.e-double.e-south-west-double {
1760
- bottom: 2px;
1761
- left: 2px;
1762
- }
1763
- .e-dashboardlayout.e-control .e-panel .e-panel-container .e-resize.e-double.e-north-west-double {
1764
- left: 2px;
1765
- top: 2px;
1766
- }
1767
- .e-dashboardlayout.e-control .e-panel .e-panel-container .e-resize.e-double.e-north-east-double {
1768
- right: 2px;
1769
- top: 2px;
1770
- }
1771
- .e-dashboardlayout.e-control .e-panel .e-panel-container .e-resize.e-double.e-north-east-shrink {
1772
- right: 2px;
1773
- top: 2px;
1774
- }
1775
- .e-dashboardlayout.e-control .e-panel .e-panel-container .e-resize.e-double.e-north-west-shrink {
1776
- left: 2px;
1777
- top: 2px;
1778
- }
1779
- .e-dashboardlayout.e-control .e-panel .e-panel-container .e-resize.e-double.e-south-west-shrink {
1780
- bottom: 2px;
1781
- left: 2px;
1782
- }
1783
- .e-dashboardlayout.e-control .e-panel .e-panel-container .e-resize.e-double.e-south-east-shrink {
1784
- bottom: 2px;
1785
- right: 2px;
1786
- }
1787
- .e-dashboardlayout.e-control .e-panel .e-panel-container .e-resize.e-double.e-north-east-expand {
1788
- right: 2px;
1789
- top: 2px;
1790
- }
1791
- .e-dashboardlayout.e-control .e-panel .e-panel-container .e-resize.e-double.e-north-west-expand {
1792
- left: 2px;
1793
- top: 2px;
1794
- }
1795
- .e-dashboardlayout.e-control .e-panel .e-panel-container .e-resize.e-double.e-south-west-expand {
1796
- bottom: 2px;
1797
- left: 2px;
1798
- }
1799
- .e-dashboardlayout.e-control .e-panel .e-panel-container .e-resize.e-double.e-south-east-expand {
1800
- bottom: 2px;
1801
- right: 2px;
1802
- }
1803
- .e-dashboardlayout.e-control .e-panel.e-bigger .e-panel-header {
1804
- color: rgba(var(--color-sf-on-surface));
1805
- }
1
+ @import '@syncfusion/ej2-layouts/styles/material3.css';