PluginProbe
Elementor Website Builder – more than just a page builder / 3.11.2
Elementor Website Builder – more than just a page builder v3.11.2
4.3.0-beta2 4.3.0-beta1 4.2.4 4.2.3 4.2.2 4.2.1 4.2.0 4.1.5 4.2.0-beta2 4.2.0-dev2 4.2.0-beta1 4.1.4 4.1.3 4.1.2 4.1.1 4.1.0 4.1.0-beta3 4.1.0-dev3 4.0.9 4.1.0-beta2 4.1.0-dev2 4.0.8 4.1.0-beta1 4.1.0-dev1 4.0.7 All 451 releases
← All changes | assets/css/app.css +1261 -1142 4.2.43.11.2 View file →
@@ -1,5 +1,8 @@
1 +/*! elementor - v3.11.2 - 22-02-2023 */
1 2 @import "//fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";
3 +@import "//fonts.googleapis.com/css2?family=DM%20Sans&display=swap";
4 +@import "//fonts.googleapis.com/css2?family=Source%20Serif%20Pro&display=swap";
2 5 :root {
3 6 --color-box-shadow-color: rgba(0, 0, 0, 0.05);
4 7 }
5 8
@@ -113,41 +116,36 @@
113 116 display: inline-flex;
114 117 --button-line-height: 16px;
115 118 --button-padding-y: 0.5em;
116 119 --button-padding-x: 1.5em;
117 - --button-primary-background-color: #F3BAFD;
118 - --button-primary-hover-background-color: #F5D0FE;
119 - --button-primary-active-background-color: #F3BAFD;
120 - --button-primary-color: #0C0D0E;
121 - --button-secondary-background-color: #69727D;
122 - --button-secondary-hover-background-color: rgb(81.7173913043, 88.7217391304, 97.2826086957);
123 - --button-secondary-active-background-color: rgb(58.4347826087, 63.4434782609, 69.5652173913);
124 - --button-secondary-color: #ffffff;
125 - --button-danger-background-color: #DC2626;
126 - --button-danger-hover-background-color: rgb(178.25, 28.75, 28.75);
127 - --button-danger-active-background-color: rgb(134.3333333333, 21.6666666667, 21.6666666667);
128 - --button-danger-color: #ffffff;
129 - --button-cta-background-color: #93003f;
130 - --button-cta-hover-background-color: rgb(96, 0, 41.1428571429);
131 - --button-cta-active-background-color: rgb(45, 0, 19.2857142857);
132 - --button-cta-color: #ffffff;
133 - --button-brand-background-color: #93003f;
134 - --button-brand-hover-background-color: rgb(96, 0, 41.1428571429);
135 - --button-brand-active-background-color: rgb(45, 0, 19.2857142857);
136 - --button-brand-color: #ffffff;
137 - --button-link-background-color: #515962;
138 - --button-link-hover-background-color: rgb(57.9217877095, 63.6424581006, 70.0782122905);
139 - --button-link-active-background-color: rgb(34.843575419, 38.2849162011, 42.156424581);
140 - --button-link-color: #ffffff;
141 - --button-disabled-background-color: #D5D8DC;
142 - --button-disabled-hover-background-color: rgb(185.1818181818, 190.1688311688, 196.8181818182);
143 - --button-disabled-active-background-color: rgb(157.3636363636, 164.3376623377, 173.6363636364);
144 - --button-disabled-color: #ffffff;
120 + --button-primary-background-color: #39b54a;
121 + --button-primary-hover-background-color: #33a242;
122 + --button-primary-active-background-color: #35a945;
123 + --button-primary-color: #fff;
124 + --button-secondary-background-color: #a4afb7;
125 + --button-secondary-hover-background-color: #96a2ac;
126 + --button-secondary-active-background-color: #9ba7b0;
127 + --button-secondary-color: #fff;
128 + --button-danger-background-color: #b01b1b;
129 + --button-danger-hover-background-color: #9a1818;
130 + --button-danger-active-background-color: #a31919;
131 + --button-danger-color: #fff;
132 + --button-cta-background-color: #93003F;
133 + --button-cta-hover-background-color: #7a0034;
134 + --button-cta-active-background-color: #840038;
135 + --button-cta-color: #fff;
136 + --button-link-background-color: #58d0f5;
137 + --button-link-hover-background-color: #40c9f4;
138 + --button-link-active-background-color: #4accf4;
139 + --button-link-color: #fff;
140 + --button-disabled-background-color: #c2cbd2;
141 + --button-disabled-hover-background-color: #b3bec7;
142 + --button-disabled-active-background-color: #b9c3cc;
143 + --button-disabled-color: #fff;
145 144 color: var(--button-background-color, currentColor);
146 145 font-size: var(--button-font-size, inherit);
147 146 font-weight: 500;
148 147 line-height: var(--button-line-height);
149 - transition: var(--e-a-transition-hover);
150 148 cursor: pointer;
151 149 }
152 150 .eps-button:active {
153 151 --button-background-color: var(--button-active-background-color, transparent);
@@ -155,31 +153,27 @@
155 153 .eps-button:hover {
156 154 --button-background-color: var(--button-hover-background-color);
157 155 }
158 156 .eps-theme-dark .eps-button {
159 - --button-primary-background-color: #F3BAFD;
160 - --button-primary-color: #0C0D0E;
161 - --button-primary-hover-background-color: #EB8EFB;
162 - --button-primary-active-background-color: #F3BAFD;
163 - --button-secondary-background-color: #BABFC5;
157 + --button-primary-background-color: #39b54a;
158 + --button-primary-color: #fff;
159 + --button-primary-hover-background-color: #33a242;
160 + --button-primary-active-background-color: #35a945;
161 + --button-secondary-background-color: #b4b5b7;
164 162 --button-secondary-color: #fff;
165 - --button-secondary-hover-background-color: rgb(158.2913385827, 165.2992125984, 173.7086614173);
166 - --button-secondary-active-background-color: rgb(130.5826771654, 139.5984251969, 150.4173228346);
167 - --button-cta-background-color: #93003f;
168 - --button-cta-hover-background-color: rgb(96, 0, 41.1428571429);
169 - --button-cta-active-background-color: rgb(45, 0, 19.2857142857);
163 + --button-secondary-hover-background-color: #a7a8ab;
164 + --button-secondary-active-background-color: #acadb0;
165 + --button-cta-background-color: #93003F;
166 + --button-cta-hover-background-color: #7a0034;
167 + --button-cta-active-background-color: #840038;
170 168 --button-cta-color: #fff;
171 - --button-brand-hover-background-color: rgb(96, 0, 41.1428571429);
172 - --button-brand-active-background-color: rgb(45, 0, 19.2857142857);
173 - --button-brand-color: #fff;
174 - --button-brand-background-color: #93003f;
175 - --button-link-background-color: #515962;
176 - --button-link-hover-background-color: rgb(57.9217877095, 63.6424581006, 70.0782122905);
177 - --button-link-active-background-color: rgb(34.843575419, 38.2849162011, 42.156424581);
178 - --button-link-color: #ffffff;
179 - --button-disabled-background-color: #69727D;
180 - --button-disabled-hover-background-color: rgb(81.7173913043, 88.7217391304, 97.2826086957);
181 - --button-disabled-active-background-color: rgb(58.4347826087, 63.4434782609, 69.5652173913);
169 + --button-link-background-color: #58d0f5;
170 + --button-link-hover-background-color: #40c9f4;
171 + --button-link-active-background-color: #4accf4;
172 + --button-link-color: #fff;
173 + --button-disabled-background-color: #64666a;
174 + --button-disabled-hover-background-color: #58595d;
175 + --button-disabled-active-background-color: #5d5e62;
182 176 --button-disabled-color: #fff;
183 177 }
184 178 .eps-button--contained {
185 179 color: var(--button-color);
@@ -227,14 +221,8 @@
227 221 --button-hover-background-color: var(--button-danger-hover-background-color);
228 222 --button-active-background-color: var(--button-danger-active-background-color);
229 223 }
230 224 .eps-button--cta {
231 - --button-color: var(--button-brand-color);
232 - --button-background-color: var(--button-cta-background-color);
233 - --button-hover-background-color: var(--button-cta-hover-background-color);
234 - --button-active-background-color: var(--button-cta-active-background-color);
235 -}
236 -.eps-button--brand {
237 225 --button-color: var(--button-cta-color);
238 226 --button-background-color: var(--button-cta-background-color);
239 227 --button-hover-background-color: var(--button-cta-hover-background-color);
240 228 --button-active-background-color: var(--button-cta-active-background-color);
@@ -253,142 +241,111 @@
253 241 cursor: default;
254 242 }
255 243
256 244 :root {
257 - --app-background-color: #ffffff;
245 + --app-background-color: #f1f3f5;
258 246 --app-box-shadow-color: rgba(var(--box-shadow-color, rgba(0, 0, 0, 0.15)), 0.2);
259 - --app-header-color: #1f2124;
260 - --app-logo-color: #ffffff;
261 - --app-logo-background-color: #0C0D0E;
262 - --app-title-color: #0C0D0E;
263 - --app-header-buttons-separator-color: #9DA5AE;
264 - --app-header-buttons-color: #515962;
265 - --app-header-buttons-color-hover: #0C0D0E;
247 + --app-header-background-color: #fff;
248 + --app-header-color: #495157;
249 + --app-sidebar-background-color: rgba(255, 255, 255, 0.5);
250 + --app-header-buttons-separator-color: #d5dadf;
251 + --app-header-buttons-color: #a4afb7;
266 252 --app-lightbox-background-color: rgba(0, 0, 0, 0.8);
267 253 }
268 254
269 255 .eps-theme-dark {
270 - --app-background-color: #1f2124;
256 + --app-background-color: #34383c;
271 257 --app-box-shadow-color: rgba(var(--box-shadow-color, rgba(0, 0, 0, 0.15)), 0.2);
272 - --app-header-color: #D5D8DC;
273 - --app-logo-color: #0C0D0E;
274 - --app-logo-background-color: #ffffff;
275 - --app-title-color: #fff;
276 - --app-header-buttons-separator-color: #818A96;
277 - --app-header-buttons-color: #BABFC5;
278 - --app-header-buttons-color-hover: #9DA5AE;
258 + --app-header-background-color: #26292C;
259 + --app-header-color: #e0e1e3;
260 + --app-sidebar-background-color: #34383c;
261 + --app-header-buttons-separator-color: #64666a;
262 + --app-header-buttons-color: #b4b5b7;
279 263 --app-lightbox-background-color: rgba(0, 0, 0, 0.8);
280 264 }
281 265
282 266 :root {
283 - --text-muted: #BABFC5;
284 - --disabled: #D5D8DC;
285 - --light: #ffffff;
286 - --dark: #000000;
287 - --cta: #93003f;
288 - --brand: #93003f;
289 - --accent: #F3BAFD;
290 - --primary: #93003f;
291 - --primary-bg: #FAE8FF;
292 - --secondary: #515962;
293 - --info: #2563EB;
294 - --info-bg: #F0F7FF;
295 - --danger: #DC2626;
296 - --danger-bg: #FEF1F4;
297 - --success: #0A875A;
298 - --success-bg: #F2FDF5;
299 - --warning: #F59E0B;
300 - --warning-bg: #FFFBEB;
301 - --body-color: #515962;
302 - --body-bg: #ffffff;
303 - --link-color: #515962;
304 - --link-hover-color: rgb(46.3826815642, 50.9636871508, 56.1173184358);
305 - --hr-color: #E6E8EA;
267 + --text-muted: #d5dadf;
268 + --disabled: #c2cbd2;
269 + --light: #fff;
270 + --dark: #000;
271 + --info: #58d0f5;
272 + --cta: #93003F;
273 + --danger: #b01b1b;
274 + --success: #39b54a;
275 + --warning: #fcb92c;
276 + --body-color: #6d7882;
277 + --link-color: #58d0f5;
278 + --link-hover-color: #10bcf1;
279 + --hr-color: #d5dadf;
306 280 --box-shadow-color: theme-colors(dark);
307 - --display-1-color: #515962;
308 - --display-2-color: #515962;
309 - --display-3-color: #515962;
310 - --display-4-color: #515962;
311 - --h1-color: #515962;
312 - --h2-color: #515962;
313 - --h3-color: #515962;
314 - --h4-color: #515962;
315 - --h5-color: #515962;
316 - --h6-color: #515962;
317 - --text-base-color: #515962;
318 - --text-xl-color: #515962;
319 - --text-lg-color: #515962;
320 - --text-sm-color: #515962;
321 - --text-xs-color: #515962;
322 - --text-xxs-color: #515962;
323 - --gray-900: #0C0D0E;
324 - --gray-800: #1f2124;
325 - --gray-750: #2b2c31;
326 - --gray-725: #333438;
327 - --gray-700: #3f444b;
328 - --gray-600: #515962;
329 - --gray-500: #69727D;
330 - --gray-400: #818A96;
331 - --gray-300: #9DA5AE;
332 - --gray-200: #BABFC5;
333 - --gray-100: #D5D8DC;
334 - --gray-75: #E6E8EA;
335 - --gray-50: #F1F2F3;
336 - --gray-25: #F9FAFA;
281 + --display-1-color: #495157;
282 + --display-2-color: #495157;
283 + --display-3-color: #6d7882;
284 + --display-4-color: #495157;
285 + --h1-color: #6d7882;
286 + --h2-color: #6d7882;
287 + --h3-color: #495157;
288 + --h4-color: #495157;
289 + --h5-color: #495157;
290 + --h6-color: #495157;
291 + --text-base-color: #495157;
292 + --text-xl-color: #495157;
293 + --text-lg-color: #495157;
294 + --text-sm-color: #495157;
295 + --text-xs-color: #495157;
296 + --text-xxs-color: #495157;
297 + --gray-800: #495157;
298 + --gray-700: #556068;
299 + --gray-600: #6d7882;
300 + --gray-500: #a4afb7;
301 + --gray-400: #c2cbd2;
302 + --gray-300: #d5dadf;
303 + --gray-200: #f1f3f5;
304 + --gray-100: #fcfcfc;
337 305 }
338 306
339 307 .eps-theme-dark {
340 - --text-muted: #818A96;
341 - --disabled: #69727D;
308 + --text-muted: #7d7e82;
309 + --disabled: #64666a;
342 310 --light: #fff;
343 311 --dark: #000;
344 - --accent: #524CFF;
345 - --cta: #93003f;
346 - --brand: #93003f;
312 + --info: #58d0f5;
313 + --accent: #58d0f5;
314 + --danger: #F84343;
315 + --cta: #93003F;
347 316 --success: #39b54a;
348 - --success-bg: #032317;
349 - --info: #0077CC;
350 - --info-bg: #0A1A3D;
351 317 --warning: #fcb92c;
352 - --warning-bg: #311808;
353 - --danger: #F84343;
354 - --danger-bg: #390A0A;
355 - --body-color: #BABFC5;
356 - --body-bg: #1f2124;
357 - --link-color: #0077CC;
358 - --link-hover-color: rgb(46.3826815642, 50.9636871508, 56.1173184358);
359 - --hr-color: #333438;
318 + --body-color: #e0e1e3;
319 + --body-bg: #fff;
320 + --link-color: #58d0f5;
321 + --link-hover-color: #10bcf1;
322 + --hr-color: #4c4f56;
360 323 --box-shadow-color: rgba(0, 0, 0, 0.15);
361 - --display-1-color: #BABFC5;
362 - --display-2-color: #BABFC5;
363 - --display-3-color: #BABFC5;
364 - --display-4-color: #BABFC5;
365 - --h1-color: #BABFC5;
366 - --h2-color: #BABFC5;
367 - --h3-color: #BABFC5;
368 - --h4-color: #BABFC5;
369 - --h5-color: #BABFC5;
370 - --h6-color: #BABFC5;
371 - --text-base-color: #BABFC5;
372 - --text-xl-color: #BABFC5;
373 - --text-lg-color: #BABFC5;
374 - --text-sm-color: #BABFC5;
375 - --text-xs-color: #BABFC5;
376 - --text-xxs-color: #BABFC5;
377 - --gray-900: #0C0D0E;
378 - --gray-800: #1f2124;
379 - --gray-750: #2b2c31;
380 - --gray-725: #333438;
381 - --gray-700: #3f444b;
382 - --gray-600: #515962;
383 - --gray-500: #69727D;
384 - --gray-400: #818A96;
385 - --gray-300: #9DA5AE;
386 - --gray-200: #BABFC5;
387 - --gray-100: #D5D8DC;
388 - --gray-75: #E6E8EA;
389 - --gray-50: #F1F2F3;
390 - --gray-25: #F9FAFA;
324 + --display-1-color: #e0e1e3;
325 + --display-2-color: #e0e1e3;
326 + --display-3-color: #e0e1e3;
327 + --display-4-color: #e0e1e3;
328 + --h1-color: #e0e1e3;
329 + --h2-color: #e0e1e3;
330 + --h3-color: #e0e1e3;
331 + --h4-color: #e0e1e3;
332 + --h5-color: #e0e1e3;
333 + --h6-color: #e0e1e3;
334 + --text-base-color: #b4b5b7;
335 + --text-xl-color: #b4b5b7;
336 + --text-lg-color: #b4b5b7;
337 + --text-sm-color: #b4b5b7;
338 + --text-xs-color: #b4b5b7;
339 + --text-xxs-color: #b4b5b7;
340 + --gray-800: #26292C;
341 + --gray-700: #34383c;
342 + --gray-600: #404349;
343 + --gray-500: #4c4f56;
344 + --gray-400: #64666a;
345 + --gray-300: #7d7e82;
346 + --gray-200: #b4b5b7;
347 + --gray-100: #e0e1e3;
391 348 }
392 349
393 350 *,
394 351 *::before,
@@ -413,11 +370,23 @@
413 370 font-size: 0.875rem;
414 371 font-weight: 400;
415 372 line-height: 1.5;
416 373 color: var(--body-color);
374 + -webkit-font-smoothing: antialiased;
375 + -moz-osx-font-smoothing: grayscale;
417 376 background-color: var(--body-bg);
418 377 }
419 378
379 +::-moz-selection {
380 + background-color: #58d0f5;
381 + color: #fff;
382 +}
383 +
384 +::selection {
385 + background-color: #58d0f5;
386 + color: #fff;
387 +}
388 +
420 389 [tabindex="-1"]:focus:not(:focus-visible) {
421 390 outline: 0 !important;
422 391 }
423 392
@@ -429,9 +398,9 @@
429 398 font-weight: normal;
430 399 }
431 400
432 401 p {
433 - margin-block-start: 0;
402 + margin-top: 0;
434 403 }
435 404
436 405 b,
437 406 strong {
@@ -489,9 +458,9 @@
489 458 button {
490 459 border-radius: 0;
491 460 }
492 461
493 -button:focus:not(:where([data-module=onboarding] *)) {
462 +button:focus {
494 463 outline: 1px dotted;
495 464 outline: 5px auto -webkit-focus-ring-color;
496 465 }
497 466
@@ -539,8 +508,16 @@
539 508 [type=submit]:not(:disabled) {
540 509 cursor: pointer;
541 510 }
542 511
512 +button::-moz-focus-inner,
513 +[type=button]::-moz-focus-inner,
514 +[type=reset]::-moz-focus-inner,
515 +[type=submit]::-moz-focus-inner {
516 + padding: 0;
517 + border-style: none;
518 +}
519 +
543 520 input[type=radio],
544 521 input[type=checkbox] {
545 522 box-sizing: border-box;
546 523 padding: 0;
@@ -556,37 +533,37 @@
556 533 }
557 534
558 535 hr {
559 536 border: 0 none;
560 - border-block-end: 1px solid var(--hr-color);
537 + border-bottom: 1px solid var(--hr-color);
561 538 }
562 539
563 540 .eps-display-1 {
564 541 font-size: 1.85rem;
565 542 color: var(--display-1-color);
566 - margin-block-start: 0.5rem;
567 - margin-block-end: 0.5rem;
543 + margin-top: 0.5rem;
544 + margin-bottom: 0.5rem;
568 545 }
569 546
570 547 .eps-display-2 {
571 548 font-size: 1.85rem;
572 549 color: var(--display-2-color);
573 - margin-block-start: 0.5rem;
574 - margin-block-end: 0.5rem;
550 + margin-top: 0.5rem;
551 + margin-bottom: 0.5rem;
575 552 }
576 553
577 554 .eps-display-3 {
578 555 font-size: 1.85rem;
579 556 color: var(--display-3-color);
580 - margin-block-start: 0;
581 - margin-block-end: 1.25rem;
557 + margin-top: 0;
558 + margin-bottom: 1.25rem;
582 559 }
583 560
584 561 .eps-display-4 {
585 562 font-size: 1.85rem;
586 563 color: var(--display-4-color);
587 - margin-block-start: 0.5rem;
588 - margin-block-end: 0.5rem;
564 + margin-top: 0.5rem;
565 + margin-bottom: 0.5rem;
589 566 }
590 567
591 568 h1,
592 569 .eps-h1 {
@@ -592,9 +569,9 @@
592 569 .eps-h1 {
593 570 font-size: 1.625rem;
594 571 line-height: 1;
595 572 color: var(--h1-color);
596 - margin-block-end: 1.25rem;
573 + margin-bottom: 1.25rem;
597 574 font-weight: 500;
598 575 }
599 576
600 577 h2,
@@ -601,10 +578,10 @@
601 578 .eps-h2 {
602 579 font-size: 1.25rem;
603 580 line-height: 1.2;
604 581 color: var(--h2-color);
605 - margin-block-start: 0;
606 - margin-block-end: 1.25rem;
582 + margin-top: 0;
583 + margin-bottom: 1.25rem;
607 584 font-weight: 500;
608 585 }
609 586
610 587 h3,
@@ -611,10 +588,10 @@
611 588 .eps-h3 {
612 589 font-size: 1rem;
613 590 line-height: 1.2;
614 591 color: var(--h3-color);
615 - margin-block-start: 0;
616 - margin-block-end: 0.5rem;
592 + margin-top: 0;
593 + margin-bottom: 0.5rem;
617 594 font-weight: 500;
618 595 }
619 596
620 597 h4,
@@ -620,10 +597,10 @@
620 597 h4,
621 598 .eps-h4 {
622 599 font-size: 0.9375rem;
623 600 color: var(--h4-color);
624 - margin-block-start: 0;
625 - margin-block-end: 0.5rem;
601 + margin-top: 0;
602 + margin-bottom: 0.5rem;
626 603 }
627 604
628 605 h5,
629 606 .eps-h5 {
@@ -628,10 +605,10 @@
628 605 h5,
629 606 .eps-h5 {
630 607 font-size: 0.875rem;
631 608 color: var(--h5-color);
632 - margin-block-start: 0;
633 - margin-block-end: 0.5rem;
609 + margin-top: 0;
610 + margin-bottom: 0.5rem;
634 611 }
635 612
636 613 h6,
637 614 .eps-h6 {
@@ -636,10 +613,10 @@
636 613 h6,
637 614 .eps-h6 {
638 615 font-size: 0.875rem;
639 616 color: var(--h-6-color);
640 - margin-block-start: 0;
641 - margin-block-end: 0.5rem;
617 + margin-top: 0;
618 + margin-bottom: 0.5rem;
642 619 font-weight: 700;
643 620 }
644 621
645 622 .eps-text-xxs {
@@ -685,33 +662,34 @@
685 662 }
686 663
687 664 .video-wrapper {
688 665 position: relative;
689 - padding-block-end: 56.25%;
666 + padding-bottom: 56.25%;
690 667 height: 0;
691 668 }
692 669 .video-wrapper iframe {
693 670 position: absolute;
694 - inset-block-start: 0;
695 - inset-inline-start: 0;
671 + top: 0;
672 + left: 0;
696 673 width: 100%;
697 674 height: 100%;
698 675 }
699 676
700 677 .eps-separator {
701 - margin-block-end: 2.75rem;
678 + margin-bottom: 2.75rem;
702 679 }
703 680
704 681 .eps-theme-dark {
705 - --e-app-back-button-color: #BABFC5;
682 + --e-app-back-button-color: #b4b5b7;
706 683 }
707 684
708 685 .back-button, .e-app-back-button {
709 - --button-background-color: var(--e-app-back-button-color, #69727D);
710 - margin-block-end: 1.5rem;
686 + --button-background-color: var(--e-app-back-button-color, #a4afb7);
687 + margin-bottom: 1.5rem;
711 688 }
712 689 .back-button .eps-icon, .e-app-back-button .eps-icon {
713 - margin-inline-end: 0.3125rem;
690 + -webkit-margin-end: 0.3125rem;
691 + margin-inline-end: 0.3125rem;
714 692 }
715 693
716 694 .eps-theme-dark {
717 695 --input-border-color: --hr-color;
@@ -749,22 +727,23 @@
749 727 justify-content: center;
750 728 position: fixed;
751 729 height: 100%;
752 730 width: 100%;
753 - inset-block-end: 0;
754 - inset-inline-start: 0;
755 731 background-color: var(--app-lightbox-background-color);
756 732 z-index: 1040;
733 + bottom: 0;
734 + left: 0;
757 735 }
758 736 .eps-app__header {
759 737 flex-shrink: 0;
760 738 font-size: 0.9375rem;
761 - border-block-end: var(--e-a-border);
739 + color: var(--app-header-color);
740 + background-color: var(--app-header-background-color);
741 + box-shadow: 0 4px 10px var(--color-box-shadow-color);
762 742 position: relative;
763 743 z-index: 3;
764 744 height: 3.125rem;
765 - padding-block: 0;
766 - padding-inline: 1rem;
745 + padding: 0 1rem;
767 746 }
768 747 .eps-app__header-buttons {
769 748 display: flex;
770 749 align-items: center;
@@ -771,20 +750,21 @@
771 750 flex-direction: row-reverse;
772 751 font-size: 1.125rem;
773 752 }
774 753 .eps-app__header-btn {
775 - padding-inline-start: 1rem;
754 + --button-background-color: var(--app-header-buttons-color);
755 + -webkit-padding-start: 1rem;
756 + padding-inline-start: 1rem;
776 757 font-size: 1.125rem;
777 758 line-height: 1.25rem;
778 759 }
779 -.eps-app__header-btn:hover {
780 - color: var(--app-header-buttons-color-hover);
781 -}
782 760 .eps-app__header-btn:first-child {
783 - border-inline-start: 1px solid var(--app-header-buttons-separator-color);
761 + -webkit-border-start: 1px solid var(--app-header-buttons-separator-color);
762 + border-inline-start: 1px solid var(--app-header-buttons-separator-color);
784 763 }
785 764 .eps-app__header-btn:not(:first-child) {
786 - padding-inline-end: 1rem;
765 + -webkit-padding-end: 1rem;
766 + padding-inline-end: 1rem;
787 767 }
788 768 .eps-app__logo-title-wrapper {
789 769 display: flex;
790 770 align-items: center;
@@ -794,21 +774,22 @@
794 774 width: 1.75rem;
795 775 height: 1.75rem;
796 776 line-height: 1.75rem;
797 777 text-align: center;
798 - font-size: 1.75rem;
778 + font-size: calc(0.4 * 1.75rem);
799 779 border-radius: 50%;
800 - color: var(--app-logo-background-color);
780 + color: #fff;
781 + background-color: #93003F;
801 782 }
802 783 .eps-app__logo:not(:last-child) {
803 - margin-inline-end: 0.625rem;
784 + -webkit-margin-end: 0.625rem;
785 + margin-inline-end: 0.625rem;
804 786 }
805 787 .eps-app__title {
806 - color: var(--app-title-color);
807 788 font-size: 0.9375rem;
808 789 font-weight: 700;
809 790 text-transform: uppercase;
810 - margin-block-end: 0;
791 + margin-bottom: 0;
811 792 }
812 793 .eps-app__main {
813 794 display: flex;
814 795 overflow: hidden;
@@ -815,14 +796,14 @@
815 796 flex-grow: 1;
816 797 }
817 798 .eps-app__sidebar {
818 799 background-color: var(--app-sidebar-background-color);
819 - padding-block-start: 1.25rem;
800 + padding-top: 1.25rem;
820 801 width: 30%;
821 802 max-width: 17.1875rem;
822 - border-inline-end: var(--e-a-border);
823 803 flex-grow: 0;
824 804 overflow-y: auto;
805 + box-shadow: 2px 8px 23px 3px var(--color-box-shadow-color);
825 806 z-index: 4;
826 807 }
827 808 .eps-app__content {
828 809 flex-grow: 1;
@@ -836,13 +817,15 @@
836 817 display: none;
837 818 }
838 819
839 820 .e-app-drop-zone {
840 - --e-app-drop-zone-text-color: #69727D;
841 - --e-app-drop-zone-secondary-text-color: #515962;
821 + --e-app-drop-zone-icon-color: #c2cbd2;
822 + --e-app-drop-zone-text-color: #a4afb7;
823 + --e-app-drop-zone-secondary-text-color: #6d7882;
842 824 }
843 825 .e-app-drop-zone__icon {
844 - margin-block-end: 2.75rem;
826 + margin-bottom: 2.75rem;
827 + color: var(--e-app-drop-zone-icon-color);
845 828 font-size: 60px;
846 829 }
847 830 .e-app-drop-zone__text {
848 831 color: var(--e-app-drop-zone-text-color);
@@ -851,21 +834,22 @@
851 834 color: var(--e-app-drop-zone-secondary-text-color);
852 835 }
853 836
854 837 .eps-theme-dark .e-app-drop-zone {
855 - --e-app-drop-zone-text-color: #BABFC5;
856 - --e-app-drop-zone-secondary-text-color: #D5D8DC;
838 + --e-app-drop-zone-icon-color: #c2cbd2;
839 + --e-app-drop-zone-text-color: #b4b5b7;
840 + --e-app-drop-zone-secondary-text-color: #e0e1e3;
857 841 }
858 842
859 843 :root {
860 - --info-toggle-color: #9DA5AE;
861 - --info-toggle-hover-color: #69727D;
844 + --info-toggle-color: #d5dadf;
845 + --info-toggle-hover-color: #a4afb7;
862 846 }
863 847
864 848 .eps-theme-dark {
865 849 --placeholder-filter: invert(0.8) sepia(1) saturate(0.2) hue-rotate(180deg) contrast(1.25) brightness(1.2);
866 - --info-toggle-color: #818A96;
867 - --info-toggle-hover-color: #BABFC5;
850 + --info-toggle-color: #64666a;
851 + --info-toggle-hover-color: #b4b5b7;
868 852 }
869 853
870 854 .e-site-part .eps-card__image {
871 855 filter: var(--placeholder-filter, none);
@@ -877,39 +861,36 @@
877 861 --info-toggle-color: var(--info-toggle-hover-color);
878 862 }
879 863
880 864 .e-site-editor__header {
881 - margin-block-end: 2.75rem;
882 - border-block-end: 1px solid var(--hr-color);
865 + margin-bottom: 2.75rem;
866 + border-bottom: 1px solid var(--hr-color);
883 867 }
884 868
885 869 :root {
886 - --e-elementor-loader-color: #ffffff;
887 - --e-elementor-loader-wrapper-color: #F9FAFA;
888 - --e-elementor-loader-box-color: #E6E8EA;
870 + --e-elementor-loader-container-background-color: #f1f3f5;
871 + --e-elementor-loader-background-color: rgba(255, 255, 255, 0.9);
889 872 }
890 873
891 874 .eps-theme-dark {
892 - --e-elementor-loader-color: #1f2124;
893 - --e-elementor-loader-wrapper-color: #2b2c31;
894 - --e-elementor-loader-box-color: #3f444b;
875 + --e-elementor-loader-container-background-color: #34383c;
876 + --e-elementor-loader-background-color: #4c4f56;
895 877 }
896 878
897 879 .elementor-loading {
898 - background-color: var(--e-elementor-loader-color);
880 + background-color: var(--e-elementor-loader-container-background-color);
899 881 height: 100vh;
900 882 }
901 883
902 884 .elementor-loader-wrapper {
903 885 position: absolute;
904 - inset-block-start: 50%;
905 - inset-inline-start: 50%;
906 - transform: translate(calc(-50% * var(--direction-multiplier)), -50%);
886 + top: 50%;
887 + left: 50%;
888 + transform: translate(-50%, -50%);
907 889 width: 300px;
908 890 display: flex;
909 - flex-direction: column;
910 - align-items: center;
911 - gap: 30px;
891 + flex-wrap: wrap;
892 + justify-content: center;
912 893 }
913 894
914 895 .elementor-loader {
915 896 border-radius: 50%;
@@ -915,9 +896,9 @@
915 896 border-radius: 50%;
916 897 padding: 40px;
917 898 height: 150px;
918 899 width: 150px;
919 - background-color: var(--e-elementor-loader-wrapper-color);
900 + background-color: var(--e-elementor-loader-background-color);
920 901 box-sizing: border-box;
921 902 box-shadow: 2px 2px 20px 4px rgba(0, 0, 0, 0.02);
922 903 }
923 904
@@ -928,39 +909,40 @@
928 909 }
929 910
930 911 .elementor-loader-box {
931 912 position: absolute;
932 - background-color: var(--e-elementor-loader-box-color);
913 + background-color: #d5dadf;
933 914 animation: load 1.8s linear infinite;
934 915 }
935 916 .elementor-loader-box:nth-of-type(1) {
936 917 width: 20%;
937 918 height: 100%;
938 - inset-block-start: 0;
939 - inset-inline-start: 0;
919 + left: 0;
920 + top: 0;
940 921 }
941 922 .elementor-loader-box:not(:nth-of-type(1)) {
942 - inset-inline-end: 0;
923 + right: 0;
943 924 height: 20%;
944 925 width: 60%;
945 926 }
946 927 .elementor-loader-box:nth-of-type(2) {
947 928 top: 0;
948 - animation-delay: calc(1.8s / 4 * -1);
929 + animation-delay: calc( 1.8s / 4 * -1 );
949 930 }
950 931 .elementor-loader-box:nth-of-type(3) {
951 932 top: 40%;
952 - animation-delay: calc(1.8s / 4 * -2);
933 + animation-delay: calc( 1.8s / 4 * -2 );
953 934 }
954 935 .elementor-loader-box:nth-of-type(4) {
955 936 bottom: 0;
956 - animation-delay: calc(1.8s / 4 * -3);
937 + animation-delay: calc( 1.8s / 4 * -3 );
957 938 }
958 939
959 940 .elementor-loading-title {
960 - color: #9DA5AE;
941 + color: #a4afb7;
961 942 text-align: center;
962 943 text-transform: uppercase;
944 + margin-top: 30px;
963 945 letter-spacing: 7px;
964 946 text-indent: 7px;
965 947 font-size: 10px;
966 948 width: 100%;
@@ -977,29 +959,30 @@
977 959 opacity: 0.3;
978 960 }
979 961 }
980 962 .eps-menu__title {
981 - margin-block-start: 2.75rem;
982 - margin-block-end: 1rem;
963 + margin-top: 2.75rem;
964 + margin-bottom: 1rem;
983 965 }
984 966
985 967 .e-app-import {
986 - --e-app-import-back-to-library-color: #69727D;
987 - padding-block-end: 1.25rem;
968 + --e-app-import-back-to-library-color: #a4afb7;
969 + padding-bottom: 1.25rem;
988 970 }
989 971 .e-app-import__drop-zone {
990 - margin-block-start: 1.25rem;
972 + margin-top: 1.25rem;
991 973 }
992 974 .e-app-import__back-to-library {
993 975 color: var(--e-app-import-back-to-library-color);
994 - margin-block-end: 1.5rem;
976 + margin-bottom: 1.5rem;
995 977 }
996 978 .e-app-import__back-to-library > i {
997 - margin-inline-end: 0.5rem;
979 + -webkit-margin-end: 0.5rem;
980 + margin-inline-end: 0.5rem;
998 981 }
999 982
1000 983 .eps-theme-dark .e-app-import {
1001 - --e-app-import-back-to-library-color: #BABFC5;
984 + --e-app-import-back-to-library-color: #b4b5b7;
1002 985 }
1003 986
1004 987 .e-site-editor__promotion-overlay__link {
1005 988 display: flex;
@@ -1011,16 +994,16 @@
1011 994 text-decoration: none;
1012 995 }
1013 996 .e-site-editor__promotion-overlay__icon {
1014 997 font-size: 1.25rem;
1015 - color: #ffffff;
1016 - margin-block-end: 1rem;
998 + color: #fff;
999 + margin-bottom: 1rem;
1017 1000 }
1018 1001
1019 1002 .e-app-import-export-wizard-step {
1020 - --e-app-import-export-wizard-step-icon-color: #818A96;
1021 - --e-app-import-export-wizard-step-text-color: #69727D;
1022 - --e-app-import-export-wizard-step-block-end-text-color: #69727D;
1003 + --e-app-import-export-wizard-step-icon-color: #c2cbd2;
1004 + --e-app-import-export-wizard-step-text-color: #a4afb7;
1005 + --e-app-import-export-wizard-step-bottom-text-color: #a4afb7;
1023 1006 height: 100%;
1024 1007 position: relative;
1025 1008 text-align: center;
1026 1009 }
@@ -1035,42 +1018,44 @@
1035 1018 .e-app-import-export-wizard-step__icon.eicon-loading {
1036 1019 font-size: 1.85rem;
1037 1020 }
1038 1021 .e-app-import-export-wizard-step__heading {
1039 - margin-block-end: 1.5rem;
1022 + margin-bottom: 1.5rem;
1040 1023 }
1041 1024 .e-app-import-export-wizard-step__description, .e-app-import-export-wizard-step__info {
1042 1025 color: var(--e-app-import-export-wizard-step-text-color);
1043 1026 }
1044 1027 .e-app-import-export-wizard-step__info {
1045 - margin-block-start: 1.5rem;
1028 + margin-top: 1.5rem;
1046 1029 }
1047 1030 .e-app-import-export-wizard-step__content {
1048 1031 text-align: initial;
1049 - margin-block-end: 1.25rem;
1032 + margin-bottom: 1.25rem;
1050 1033 }
1051 1034 .e-app-import-export-wizard-step__notice {
1052 1035 display: block;
1053 1036 position: sticky;
1054 - inset-block-start: 100%; /* Will prevent text overlapping when window height is too short. */
1055 - color: var(--e-app-import-export-wizard-step-block-end-text-color);
1037 + top: 100%; /* Will prevent text overlapping when window height is too short. */
1038 + color: var(--e-app-import-export-wizard-step-bottom-text-color);
1056 1039 font-style: italic;
1057 - margin-block-end: 0;
1040 + margin-bottom: 0;
1058 1041 }
1059 1042
1060 1043 .eps-theme-dark .e-app-import-export-wizard-step {
1061 - --e-app-import-export-wizard-step-icon-color: #818A96;
1062 - --e-app-import-export-wizard-step-text-color: #BABFC5;
1063 - --e-app-import-export-wizard-step-block-end-text-color: #BABFC5;
1044 + --e-app-import-export-wizard-step-icon-color: #64666a;
1045 + --e-app-import-export-wizard-step-text-color: #b4b5b7;
1046 + --e-app-import-export-wizard-step-bottom-text-color: #b4b5b7;
1064 1047 }
1065 1048
1066 1049 .e-app-import-export-page-header {
1067 - --e-app-import-export-page-header-heading-color: #515962;
1068 - --e-app-import-export-page-header-description-color: #69727D;
1069 - margin-block-end: 2.75rem;
1050 + --e-app-import-export-page-header-border-bottom-color: #d5dadf;
1051 + --e-app-import-export-page-header-heading-color: #6d7882;
1052 + --e-app-import-export-page-header-description-color: #a4afb7;
1053 + border-bottom: 1px solid var(--e-app-import-export-page-header-border-bottom-color);
1054 + margin-bottom: 2.75rem;
1070 1055 }
1071 1056 .e-app-import-export-page-header__content-wrapper {
1072 - max-width: 655px;
1057 + max-width: 645px;
1073 1058 }
1074 1059 .e-app-import-export-page-header__heading {
1075 1060 color: var(--e-app-import-export-page-header-heading-color);
1076 1061 }
@@ -1075,24 +1060,25 @@
1075 1060 color: var(--e-app-import-export-page-header-heading-color);
1076 1061 }
1077 1062 .e-app-import-export-page-header__description {
1078 1063 color: var(--e-app-import-export-page-header-description-color);
1079 - margin-block-start: 1.25rem;
1064 + margin-top: 1.25rem;
1080 1065 }
1081 1066
1082 1067 .eps-theme-dark .e-app-import-export-page-header {
1083 - --e-app-import-export-page-header-heading-color: #D5D8DC;
1084 - --e-app-import-export-page-header-description-color: #D5D8DC;
1068 + --e-app-import-export-page-header-border-bottom-color: #4c4f56;
1069 + --e-app-import-export-page-header-heading-color: #e0e1e3;
1070 + --e-app-import-export-page-header-description-color: #e0e1e3;
1085 1071 }
1086 1072
1087 1073 .e-app-export-kit-content {
1088 - --e-app-export-kit-content-title-color: #3f444b;
1089 - --e-app-export-kit-content-description-color: #515962;
1090 - --e-app-export-kit-content-sm-notice-color: #BABFC5;
1074 + --e-app-export-kit-content-title-color: #556068;
1075 + --e-app-export-kit-content-description-color: #6d7882;
1091 1076 }
1092 1077 .e-app-export-kit-content__checkbox {
1093 1078 flex-shrink: 0;
1094 - margin-inline-end: 0.75rem;
1079 + -webkit-margin-end: 0.75rem;
1080 + margin-inline-end: 0.75rem;
1095 1081 }
1096 1082 .e-app-export-kit-content__title {
1097 1083 color: var(--e-app-export-kit-content-title-color);
1098 1084 }
@@ -1097,43 +1083,43 @@
1097 1083 color: var(--e-app-export-kit-content-title-color);
1098 1084 }
1099 1085 .e-app-export-kit-content__description {
1100 1086 color: var(--e-app-export-kit-content-description-color);
1101 - margin-inline-end: 1.25rem;
1087 + -webkit-margin-end: 1.25rem;
1088 + margin-inline-end: 1.25rem;
1102 1089 }
1103 1090 .e-app-export-kit-content__notice {
1104 - margin-block-start: 1rem;
1091 + margin-top: 1rem;
1105 1092 }
1106 1093 .e-app-export-kit-content__small-notice {
1107 1094 font-style: italic;
1108 - color: var(--e-app-export-kit-content-sm-notice-color);
1095 + color: var(--e-app-export-kit-content-description-color);
1109 1096 }
1110 1097
1111 1098 .eps-theme-dark .e-app-export-kit-content {
1112 - --e-app-export-kit-content-title-color: #D5D8DC;
1113 - --e-app-export-kit-content-description-color: #BABFC5;
1114 - --e-app-export-kit-content-sm-notice-color: #818A96;
1099 + --e-app-export-kit-content-title-color: #e0e1e3;
1100 + --e-app-export-kit-content-description-color: #b4b5b7;
1115 1101 }
1116 1102
1117 1103 .e-app-wizard-footer {
1118 - --e-app-wizard-footer-border-color: #E6E8EA;
1104 + --e-app-wizard-footer-border-color: #d5dadf;
1119 1105 padding: 0.5rem;
1120 1106 }
1121 1107 .e-app-wizard-footer__separator {
1122 - border-block-start: 1px solid var(--e-app-wizard-footer-border-color);
1108 + border-top: 1px solid var(--e-app-wizard-footer-border-color);
1123 1109 }
1124 1110
1125 1111 .eps-theme-dark .e-app-wizard-footer {
1126 - --e-app-wizard-footer-border-color: #333438;
1112 + --e-app-wizard-footer-border-color: #4c4f56;
1127 1113 }
1128 1114
1129 1115 .e-app-export-templates-features__locked {
1130 - --e-app-export-templates-features-locked-color: #69727D;
1116 + --e-app-export-templates-features-locked-color: #a4afb7;
1131 1117 color: var(--e-app-export-templates-features-locked-color);
1132 1118 }
1133 1119
1134 1120 .eps-theme-dark .e-app-export-templates-features__locked {
1135 - --e-app-export-templates-features-locked-color: #9DA5AE;
1121 + --e-app-export-templates-features-locked-color: #7d7e82;
1136 1122 }
1137 1123
1138 1124 :root {
1139 1125 --color-box-shadow-color: rgba(0, 0, 0, 0.05);
@@ -1143,36 +1129,42 @@
1143 1129 --color-box-shadow-color: rgba(0, 0, 0, 0.1);
1144 1130 }
1145 1131
1146 1132 :root {
1147 - --card-background-color-hover: #ffffff;
1148 - --card-border: 1px solid #D5D8DC;
1149 - --card-header-footer-border: 1px solid var(--e-a-border-color);
1150 - --card-header-footer-active-border: 2px solid #BABFC5;
1151 - --card-headline-color: #515962;
1152 - --card-figure-background-color: #BABFC5;
1133 + --card-background-color: rgba(255, 255, 255, 0.5);
1134 + --card-background-color-hover: #fff;
1135 + --card-box-shadow: 0 4px 10px var(--color-box-shadow-color);
1136 + --card-header-footer-border: 1px solid #f1f3f5;
1137 + --card-header-footer-active-border: 2px solid #e2e6ea;
1138 + --card-headline-color: #6d7882;
1139 + --card-figure-background-color: #f1f3f5;
1153 1140 --card-image-overlay-background-color: rgba(0, 0, 0, 0.2);
1154 1141 }
1155 1142
1156 1143 .eps-theme-dark {
1157 - --card-background-color-hover: #2b2c31;
1158 - --card-border: 1px solid #333438;
1159 - --card-header-footer-border: 1px solid #333438;
1160 - --card-header-footer-active-border: 1px solid #1f2124;
1161 - --card-headline-color: #D5D8DC;
1162 - --card-figure-background-color: #3f444b;
1163 - --card-image-overlay-background-color: rgba(63, 68, 75, 0.5);
1144 + --card-background-color: #404349;
1145 + --card-background-color-hover: rgba(76, 79, 86, 0.8);
1146 + --card-box-shadow: 0 3px 6px var(--color-box-shadow-color);
1147 + --card-header-footer-border: 1px solid #34383c;
1148 + --card-header-footer-active-border: 1px solid #26292C;
1149 + --card-headline-color: #e0e1e3;
1150 + --card-figure-background-color: #34383c;
1151 + --card-image-overlay-background-color: rgba(52, 56, 60, 0.5);
1164 1152 }
1165 1153
1166 1154 .eps-card {
1167 - border: var(--card-border);
1155 + background-color: var(--card-background-color);
1156 + box-shadow: 0 4px 10px var(--color-box-shadow-color);
1168 1157 border-radius: 0.1875rem;
1169 1158 transition: 0.3s;
1170 1159 font-size: 0.75rem;
1160 + /*
1161 + todo: TBD: Optionally remove headline styling in favor of a global atom depending on variation needs
1162 + */
1171 1163 }
1172 1164 .eps-card__header {
1173 1165 padding: 0.625rem;
1174 - border-block-end: var(--card-header-footer-border);
1166 + border-bottom: var(--card-header-footer-border);
1175 1167 min-height: 2.5rem;
1176 1168 display: flex;
1177 1169 align-items: center;
1178 1170 }
@@ -1178,16 +1170,11 @@
1178 1170 }
1179 1171 .eps-card__header--padding {
1180 1172 padding: var(--eps-card-header-padding);
1181 1173 }
1182 -.eps-card {
1183 - /*
1184 - todo: TBD: Optionally remove headline styling in favor of a global atom depending on variation needs
1185 - */
1186 -}
1187 1174 .eps-card__headline {
1188 1175 color: var(--card-headline-color);
1189 - margin-block-end: 0;
1176 + margin-bottom: 0;
1190 1177 font-weight: 500;
1191 1178 flex-grow: 1;
1192 1179 overflow: hidden;
1193 1180 text-overflow: ellipsis;
@@ -1201,9 +1188,9 @@
1201 1188 }
1202 1189 .eps-card__figure {
1203 1190 background-color: var(--card-figure-background-color);
1204 1191 position: relative;
1205 - padding-block-end: var(--card-image-aspect-ratio, 95.6%);
1192 + padding-bottom: var(--card-image-aspect-ratio, 95.6%);
1206 1193 overflow: hidden;
1207 1194 height: 0;
1208 1195 }
1209 1196 .eps-card__image {
@@ -1212,14 +1199,14 @@
1212 1199 object-fit: contain;
1213 1200 -o-object-position: top;
1214 1201 object-position: top;
1215 1202 position: absolute;
1216 - inset-block-start: 0;
1217 - inset-inline-start: 0;
1203 + top: 0;
1204 + left: 0;
1218 1205 }
1219 1206 .eps-card__image-overlay {
1220 1207 position: absolute;
1221 - inset-block-start: 0;
1208 + top: 0;
1222 1209 background-color: var(--card-image-overlay-background-color);
1223 1210 z-index: 1;
1224 1211 width: 100%;
1225 1212 height: 100%;
@@ -1230,31 +1217,32 @@
1230 1217 opacity: 1;
1231 1218 }
1232 1219 .eps-card__footer {
1233 1220 padding: 0.625rem;
1234 - border-block-start: var(--card-header-footer-border);
1221 + border-top: var(--card-header-footer-border);
1235 1222 font-size: 0.6875rem;
1236 1223 }
1237 1224 .eps-card__footer--padding {
1238 1225 padding: var(--eps-card-footer-padding);
1239 1226 }
1227 +.eps-card:hover {
1228 + background-color: var(--card-background-color-hover);
1229 +}
1240 1230
1241 1231 :root {
1242 - --menu-item-color: #515962;
1243 - --menu-item-color-hover: #3f444b;
1244 - --menu-item-color-active: #0C0D0E;
1245 - --menu-item-background-color-hover: #F9FAFA;
1246 - --menu-item-background-color-active: #E6E8EA;
1247 - --menu-item-action-button-color: #9DA5AE;
1232 + --menu-item-color: #6d7882;
1233 + --menu-item-color-hover: #556068;
1234 + --menu-item-background-color-active: #fff;
1235 + --menu-item-icon-color: #a4afb7;
1236 + --menu-item-action-button-color: #d5dadf;
1248 1237 }
1249 1238
1250 1239 .eps-theme-dark {
1251 - --menu-item-color: #D5D8DC;
1252 - --menu-item-color-hover: #BABFC5;
1253 - --menu-item-color-active: #9DA5AE;
1254 - --menu-item-background-color-hover: #2b2c31;
1255 - --menu-item-background-color-active: #333438;
1256 - --menu-item-action-button-color: #818A96;
1240 + --menu-item-color: #e0e1e3;
1241 + --menu-item-color-hover: #e0e1e3;
1242 + --menu-item-background-color-active: #404349;
1243 + --menu-item-icon-color: #b4b5b7;
1244 + --menu-item-action-button-color: #64666a;
1257 1245 }
1258 1246
1259 1247 .eps-menu-item {
1260 1248 display: flex;
@@ -1266,24 +1254,24 @@
1266 1254 .eps-menu-item::before {
1267 1255 content: "";
1268 1256 display: block;
1269 1257 position: absolute;
1270 - inset-block-start: 0;
1258 + top: 0;
1271 1259 inset-inline-start: 0;
1272 1260 height: 100%;
1273 1261 width: var(--menu-item-pointer-width);
1274 - background-color: #0C0D0E;
1262 + background-color: #58d0f5;
1275 1263 }
1276 -.eps-menu-item:hover:not(.eps-menu-item--active) {
1277 - background-color: var(--menu-item-background-color-hover);
1264 +.eps-menu-item:hover {
1278 1265 --action-button-opacity: 1;
1266 +}
1267 +.eps-menu-item:hover, .eps-menu-item--active {
1279 1268 --menu-item-color: var(--menu-item-color-hover);
1280 1269 --eps-link-color: var(--menu-item-color-hover);
1270 + --menu-item-icon-color: #58d0f5;
1281 1271 }
1282 1272 .eps-menu-item--active {
1283 1273 background-color: var(--menu-item-background-color-active);
1284 - --menu-item-color: var(--menu-item-color-active);
1285 - --eps-link-color: var(--menu-item-color-active);
1286 1274 }
1287 1275 .eps-menu-item__link {
1288 1276 padding: 0.5rem 1.875rem;
1289 1277 min-height: 2.75rem;
@@ -1295,23 +1283,32 @@
1295 1283 color: var(--menu-item-color);
1296 1284 --eps-link-color: var(--menu-item-color);
1297 1285 }
1298 1286 .eps-menu-item__link:not(:last-child) {
1299 - padding-inline-end: 0;
1287 + -webkit-padding-end: 0;
1288 + padding-inline-end: 0;
1300 1289 }
1301 1290 .eps-menu-item__link .eps-icon {
1302 1291 font-size: 1.125rem;
1303 - margin-inline-end: 0.75rem;
1292 + color: var(--menu-item-icon-color);
1293 + -webkit-margin-end: 0.75rem;
1294 + margin-inline-end: 0.75rem;
1304 1295 }
1305 1296 .eps-menu-item__action-button {
1297 + color: var(--menu-item-action-button-color);
1306 1298 opacity: var(--action-button-opacity);
1307 1299 padding: 0.625rem;
1308 1300 transition: 0.3s;
1309 - margin-inline-end: 1.25rem;
1301 + -webkit-margin-end: 1.25rem;
1302 + margin-inline-end: 1.25rem;
1310 1303 }
1311 1304 .eps-menu-item--active {
1312 1305 --menu-item-pointer-width: 0.3125rem;
1306 + box-shadow: 0 3px 6px var(--color-box-shadow-color);
1313 1307 }
1308 +.eps-menu-item--active .eps-menu-item__link .eps-icon {
1309 + color: #58d0f5;
1310 +}
1314 1311
1315 1312 .eps-grid-container {
1316 1313 display: flex;
1317 1314 flex-wrap: wrap;
@@ -1323,9 +1320,9 @@
1323 1320 .eps-grid-container--wrap-reverse {
1324 1321 flex-wrap: wrap-reverse;
1325 1322 }
1326 1323 .eps-grid-container--spacing {
1327 - --grid-row-gutter: calc(-1 * calc(var(--grid-spacing-gutter) * 0.625rem / 10));
1324 + --grid-row-gutter: calc(-1 * calc(var(--grid-spacing-gutter) * (0.625rem / 10)));
1328 1325 width: var(--grid-spacing-width);
1329 1326 margin: var(--grid-row-gutter);
1330 1327 }
1331 1328 .eps-grid-container--spacing > .eps-grid-item {
@@ -1435,394 +1432,394 @@
1435 1432 }
1436 1433 }
1437 1434 .eps-grid-item-xs-1 {
1438 1435 flex-grow: 0;
1439 - max-width: calc(1 / 12 * 100%);
1440 - flex-basis: calc(1 / 12 * 100%);
1436 + max-width: calc( 1 / 12 * 100% );
1437 + flex-basis: calc( 1 / 12 * 100% );
1441 1438 }
1442 1439
1443 1440 .eps-grid-item-xs-2 {
1444 1441 flex-grow: 0;
1445 - max-width: calc(2 / 12 * 100%);
1446 - flex-basis: calc(2 / 12 * 100%);
1442 + max-width: calc( 2 / 12 * 100% );
1443 + flex-basis: calc( 2 / 12 * 100% );
1447 1444 }
1448 1445
1449 1446 .eps-grid-item-xs-3 {
1450 1447 flex-grow: 0;
1451 - max-width: calc(3 / 12 * 100%);
1452 - flex-basis: calc(3 / 12 * 100%);
1448 + max-width: calc( 3 / 12 * 100% );
1449 + flex-basis: calc( 3 / 12 * 100% );
1453 1450 }
1454 1451
1455 1452 .eps-grid-item-xs-4 {
1456 1453 flex-grow: 0;
1457 - max-width: calc(4 / 12 * 100%);
1458 - flex-basis: calc(4 / 12 * 100%);
1454 + max-width: calc( 4 / 12 * 100% );
1455 + flex-basis: calc( 4 / 12 * 100% );
1459 1456 }
1460 1457
1461 1458 .eps-grid-item-xs-5 {
1462 1459 flex-grow: 0;
1463 - max-width: calc(5 / 12 * 100%);
1464 - flex-basis: calc(5 / 12 * 100%);
1460 + max-width: calc( 5 / 12 * 100% );
1461 + flex-basis: calc( 5 / 12 * 100% );
1465 1462 }
1466 1463
1467 1464 .eps-grid-item-xs-6 {
1468 1465 flex-grow: 0;
1469 - max-width: calc(6 / 12 * 100%);
1470 - flex-basis: calc(6 / 12 * 100%);
1466 + max-width: calc( 6 / 12 * 100% );
1467 + flex-basis: calc( 6 / 12 * 100% );
1471 1468 }
1472 1469
1473 1470 .eps-grid-item-xs-7 {
1474 1471 flex-grow: 0;
1475 - max-width: calc(7 / 12 * 100%);
1476 - flex-basis: calc(7 / 12 * 100%);
1472 + max-width: calc( 7 / 12 * 100% );
1473 + flex-basis: calc( 7 / 12 * 100% );
1477 1474 }
1478 1475
1479 1476 .eps-grid-item-xs-8 {
1480 1477 flex-grow: 0;
1481 - max-width: calc(8 / 12 * 100%);
1482 - flex-basis: calc(8 / 12 * 100%);
1478 + max-width: calc( 8 / 12 * 100% );
1479 + flex-basis: calc( 8 / 12 * 100% );
1483 1480 }
1484 1481
1485 1482 .eps-grid-item-xs-9 {
1486 1483 flex-grow: 0;
1487 - max-width: calc(9 / 12 * 100%);
1488 - flex-basis: calc(9 / 12 * 100%);
1484 + max-width: calc( 9 / 12 * 100% );
1485 + flex-basis: calc( 9 / 12 * 100% );
1489 1486 }
1490 1487
1491 1488 .eps-grid-item-xs-10 {
1492 1489 flex-grow: 0;
1493 - max-width: calc(10 / 12 * 100%);
1494 - flex-basis: calc(10 / 12 * 100%);
1490 + max-width: calc( 10 / 12 * 100% );
1491 + flex-basis: calc( 10 / 12 * 100% );
1495 1492 }
1496 1493
1497 1494 .eps-grid-item-xs-11 {
1498 1495 flex-grow: 0;
1499 - max-width: calc(11 / 12 * 100%);
1500 - flex-basis: calc(11 / 12 * 100%);
1496 + max-width: calc( 11 / 12 * 100% );
1497 + flex-basis: calc( 11 / 12 * 100% );
1501 1498 }
1502 1499
1503 1500 .eps-grid-item-xs-12 {
1504 1501 flex-grow: 0;
1505 - max-width: calc(12 / 12 * 100%);
1506 - flex-basis: calc(12 / 12 * 100%);
1502 + max-width: calc( 12 / 12 * 100% );
1503 + flex-basis: calc( 12 / 12 * 100% );
1507 1504 }
1508 1505
1509 1506 @media screen and (min-width: 480px) {
1510 1507 .eps-grid-item-sm-1 {
1511 1508 flex-grow: 0;
1512 - max-width: calc(1 / 12 * 100%);
1513 - flex-basis: calc(1 / 12 * 100%);
1509 + max-width: calc( 1 / 12 * 100% );
1510 + flex-basis: calc( 1 / 12 * 100% );
1514 1511 }
1515 1512 .eps-grid-item-sm-2 {
1516 1513 flex-grow: 0;
1517 - max-width: calc(2 / 12 * 100%);
1518 - flex-basis: calc(2 / 12 * 100%);
1514 + max-width: calc( 2 / 12 * 100% );
1515 + flex-basis: calc( 2 / 12 * 100% );
1519 1516 }
1520 1517 .eps-grid-item-sm-3 {
1521 1518 flex-grow: 0;
1522 - max-width: calc(3 / 12 * 100%);
1523 - flex-basis: calc(3 / 12 * 100%);
1519 + max-width: calc( 3 / 12 * 100% );
1520 + flex-basis: calc( 3 / 12 * 100% );
1524 1521 }
1525 1522 .eps-grid-item-sm-4 {
1526 1523 flex-grow: 0;
1527 - max-width: calc(4 / 12 * 100%);
1528 - flex-basis: calc(4 / 12 * 100%);
1524 + max-width: calc( 4 / 12 * 100% );
1525 + flex-basis: calc( 4 / 12 * 100% );
1529 1526 }
1530 1527 .eps-grid-item-sm-5 {
1531 1528 flex-grow: 0;
1532 - max-width: calc(5 / 12 * 100%);
1533 - flex-basis: calc(5 / 12 * 100%);
1529 + max-width: calc( 5 / 12 * 100% );
1530 + flex-basis: calc( 5 / 12 * 100% );
1534 1531 }
1535 1532 .eps-grid-item-sm-6 {
1536 1533 flex-grow: 0;
1537 - max-width: calc(6 / 12 * 100%);
1538 - flex-basis: calc(6 / 12 * 100%);
1534 + max-width: calc( 6 / 12 * 100% );
1535 + flex-basis: calc( 6 / 12 * 100% );
1539 1536 }
1540 1537 .eps-grid-item-sm-7 {
1541 1538 flex-grow: 0;
1542 - max-width: calc(7 / 12 * 100%);
1543 - flex-basis: calc(7 / 12 * 100%);
1539 + max-width: calc( 7 / 12 * 100% );
1540 + flex-basis: calc( 7 / 12 * 100% );
1544 1541 }
1545 1542 .eps-grid-item-sm-8 {
1546 1543 flex-grow: 0;
1547 - max-width: calc(8 / 12 * 100%);
1548 - flex-basis: calc(8 / 12 * 100%);
1544 + max-width: calc( 8 / 12 * 100% );
1545 + flex-basis: calc( 8 / 12 * 100% );
1549 1546 }
1550 1547 .eps-grid-item-sm-9 {
1551 1548 flex-grow: 0;
1552 - max-width: calc(9 / 12 * 100%);
1553 - flex-basis: calc(9 / 12 * 100%);
1549 + max-width: calc( 9 / 12 * 100% );
1550 + flex-basis: calc( 9 / 12 * 100% );
1554 1551 }
1555 1552 .eps-grid-item-sm-10 {
1556 1553 flex-grow: 0;
1557 - max-width: calc(10 / 12 * 100%);
1558 - flex-basis: calc(10 / 12 * 100%);
1554 + max-width: calc( 10 / 12 * 100% );
1555 + flex-basis: calc( 10 / 12 * 100% );
1559 1556 }
1560 1557 .eps-grid-item-sm-11 {
1561 1558 flex-grow: 0;
1562 - max-width: calc(11 / 12 * 100%);
1563 - flex-basis: calc(11 / 12 * 100%);
1559 + max-width: calc( 11 / 12 * 100% );
1560 + flex-basis: calc( 11 / 12 * 100% );
1564 1561 }
1565 1562 .eps-grid-item-sm-12 {
1566 1563 flex-grow: 0;
1567 - max-width: calc(12 / 12 * 100%);
1568 - flex-basis: calc(12 / 12 * 100%);
1564 + max-width: calc( 12 / 12 * 100% );
1565 + flex-basis: calc( 12 / 12 * 100% );
1569 1566 }
1570 1567 }
1571 1568 @media screen and (min-width: 768px) {
1572 1569 .eps-grid-item-md-1 {
1573 1570 flex-grow: 0;
1574 - max-width: calc(1 / 12 * 100%);
1575 - flex-basis: calc(1 / 12 * 100%);
1571 + max-width: calc( 1 / 12 * 100% );
1572 + flex-basis: calc( 1 / 12 * 100% );
1576 1573 }
1577 1574 .eps-grid-item-md-2 {
1578 1575 flex-grow: 0;
1579 - max-width: calc(2 / 12 * 100%);
1580 - flex-basis: calc(2 / 12 * 100%);
1576 + max-width: calc( 2 / 12 * 100% );
1577 + flex-basis: calc( 2 / 12 * 100% );
1581 1578 }
1582 1579 .eps-grid-item-md-3 {
1583 1580 flex-grow: 0;
1584 - max-width: calc(3 / 12 * 100%);
1585 - flex-basis: calc(3 / 12 * 100%);
1581 + max-width: calc( 3 / 12 * 100% );
1582 + flex-basis: calc( 3 / 12 * 100% );
1586 1583 }
1587 1584 .eps-grid-item-md-4 {
1588 1585 flex-grow: 0;
1589 - max-width: calc(4 / 12 * 100%);
1590 - flex-basis: calc(4 / 12 * 100%);
1586 + max-width: calc( 4 / 12 * 100% );
1587 + flex-basis: calc( 4 / 12 * 100% );
1591 1588 }
1592 1589 .eps-grid-item-md-5 {
1593 1590 flex-grow: 0;
1594 - max-width: calc(5 / 12 * 100%);
1595 - flex-basis: calc(5 / 12 * 100%);
1591 + max-width: calc( 5 / 12 * 100% );
1592 + flex-basis: calc( 5 / 12 * 100% );
1596 1593 }
1597 1594 .eps-grid-item-md-6 {
1598 1595 flex-grow: 0;
1599 - max-width: calc(6 / 12 * 100%);
1600 - flex-basis: calc(6 / 12 * 100%);
1596 + max-width: calc( 6 / 12 * 100% );
1597 + flex-basis: calc( 6 / 12 * 100% );
1601 1598 }
1602 1599 .eps-grid-item-md-7 {
1603 1600 flex-grow: 0;
1604 - max-width: calc(7 / 12 * 100%);
1605 - flex-basis: calc(7 / 12 * 100%);
1601 + max-width: calc( 7 / 12 * 100% );
1602 + flex-basis: calc( 7 / 12 * 100% );
1606 1603 }
1607 1604 .eps-grid-item-md-8 {
1608 1605 flex-grow: 0;
1609 - max-width: calc(8 / 12 * 100%);
1610 - flex-basis: calc(8 / 12 * 100%);
1606 + max-width: calc( 8 / 12 * 100% );
1607 + flex-basis: calc( 8 / 12 * 100% );
1611 1608 }
1612 1609 .eps-grid-item-md-9 {
1613 1610 flex-grow: 0;
1614 - max-width: calc(9 / 12 * 100%);
1615 - flex-basis: calc(9 / 12 * 100%);
1611 + max-width: calc( 9 / 12 * 100% );
1612 + flex-basis: calc( 9 / 12 * 100% );
1616 1613 }
1617 1614 .eps-grid-item-md-10 {
1618 1615 flex-grow: 0;
1619 - max-width: calc(10 / 12 * 100%);
1620 - flex-basis: calc(10 / 12 * 100%);
1616 + max-width: calc( 10 / 12 * 100% );
1617 + flex-basis: calc( 10 / 12 * 100% );
1621 1618 }
1622 1619 .eps-grid-item-md-11 {
1623 1620 flex-grow: 0;
1624 - max-width: calc(11 / 12 * 100%);
1625 - flex-basis: calc(11 / 12 * 100%);
1621 + max-width: calc( 11 / 12 * 100% );
1622 + flex-basis: calc( 11 / 12 * 100% );
1626 1623 }
1627 1624 .eps-grid-item-md-12 {
1628 1625 flex-grow: 0;
1629 - max-width: calc(12 / 12 * 100%);
1630 - flex-basis: calc(12 / 12 * 100%);
1626 + max-width: calc( 12 / 12 * 100% );
1627 + flex-basis: calc( 12 / 12 * 100% );
1631 1628 }
1632 1629 }
1633 1630 @media screen and (min-width: 1025px) {
1634 1631 .eps-grid-item-lg-1 {
1635 1632 flex-grow: 0;
1636 - max-width: calc(1 / 12 * 100%);
1637 - flex-basis: calc(1 / 12 * 100%);
1633 + max-width: calc( 1 / 12 * 100% );
1634 + flex-basis: calc( 1 / 12 * 100% );
1638 1635 }
1639 1636 .eps-grid-item-lg-2 {
1640 1637 flex-grow: 0;
1641 - max-width: calc(2 / 12 * 100%);
1642 - flex-basis: calc(2 / 12 * 100%);
1638 + max-width: calc( 2 / 12 * 100% );
1639 + flex-basis: calc( 2 / 12 * 100% );
1643 1640 }
1644 1641 .eps-grid-item-lg-3 {
1645 1642 flex-grow: 0;
1646 - max-width: calc(3 / 12 * 100%);
1647 - flex-basis: calc(3 / 12 * 100%);
1643 + max-width: calc( 3 / 12 * 100% );
1644 + flex-basis: calc( 3 / 12 * 100% );
1648 1645 }
1649 1646 .eps-grid-item-lg-4 {
1650 1647 flex-grow: 0;
1651 - max-width: calc(4 / 12 * 100%);
1652 - flex-basis: calc(4 / 12 * 100%);
1648 + max-width: calc( 4 / 12 * 100% );
1649 + flex-basis: calc( 4 / 12 * 100% );
1653 1650 }
1654 1651 .eps-grid-item-lg-5 {
1655 1652 flex-grow: 0;
1656 - max-width: calc(5 / 12 * 100%);
1657 - flex-basis: calc(5 / 12 * 100%);
1653 + max-width: calc( 5 / 12 * 100% );
1654 + flex-basis: calc( 5 / 12 * 100% );
1658 1655 }
1659 1656 .eps-grid-item-lg-6 {
1660 1657 flex-grow: 0;
1661 - max-width: calc(6 / 12 * 100%);
1662 - flex-basis: calc(6 / 12 * 100%);
1658 + max-width: calc( 6 / 12 * 100% );
1659 + flex-basis: calc( 6 / 12 * 100% );
1663 1660 }
1664 1661 .eps-grid-item-lg-7 {
1665 1662 flex-grow: 0;
1666 - max-width: calc(7 / 12 * 100%);
1667 - flex-basis: calc(7 / 12 * 100%);
1663 + max-width: calc( 7 / 12 * 100% );
1664 + flex-basis: calc( 7 / 12 * 100% );
1668 1665 }
1669 1666 .eps-grid-item-lg-8 {
1670 1667 flex-grow: 0;
1671 - max-width: calc(8 / 12 * 100%);
1672 - flex-basis: calc(8 / 12 * 100%);
1668 + max-width: calc( 8 / 12 * 100% );
1669 + flex-basis: calc( 8 / 12 * 100% );
1673 1670 }
1674 1671 .eps-grid-item-lg-9 {
1675 1672 flex-grow: 0;
1676 - max-width: calc(9 / 12 * 100%);
1677 - flex-basis: calc(9 / 12 * 100%);
1673 + max-width: calc( 9 / 12 * 100% );
1674 + flex-basis: calc( 9 / 12 * 100% );
1678 1675 }
1679 1676 .eps-grid-item-lg-10 {
1680 1677 flex-grow: 0;
1681 - max-width: calc(10 / 12 * 100%);
1682 - flex-basis: calc(10 / 12 * 100%);
1678 + max-width: calc( 10 / 12 * 100% );
1679 + flex-basis: calc( 10 / 12 * 100% );
1683 1680 }
1684 1681 .eps-grid-item-lg-11 {
1685 1682 flex-grow: 0;
1686 - max-width: calc(11 / 12 * 100%);
1687 - flex-basis: calc(11 / 12 * 100%);
1683 + max-width: calc( 11 / 12 * 100% );
1684 + flex-basis: calc( 11 / 12 * 100% );
1688 1685 }
1689 1686 .eps-grid-item-lg-12 {
1690 1687 flex-grow: 0;
1691 - max-width: calc(12 / 12 * 100%);
1692 - flex-basis: calc(12 / 12 * 100%);
1688 + max-width: calc( 12 / 12 * 100% );
1689 + flex-basis: calc( 12 / 12 * 100% );
1693 1690 }
1694 1691 }
1695 1692 @media screen and (min-width: 1440px) {
1696 1693 .eps-grid-item-xl-1 {
1697 1694 flex-grow: 0;
1698 - max-width: calc(1 / 12 * 100%);
1699 - flex-basis: calc(1 / 12 * 100%);
1695 + max-width: calc( 1 / 12 * 100% );
1696 + flex-basis: calc( 1 / 12 * 100% );
1700 1697 }
1701 1698 .eps-grid-item-xl-2 {
1702 1699 flex-grow: 0;
1703 - max-width: calc(2 / 12 * 100%);
1704 - flex-basis: calc(2 / 12 * 100%);
1700 + max-width: calc( 2 / 12 * 100% );
1701 + flex-basis: calc( 2 / 12 * 100% );
1705 1702 }
1706 1703 .eps-grid-item-xl-3 {
1707 1704 flex-grow: 0;
1708 - max-width: calc(3 / 12 * 100%);
1709 - flex-basis: calc(3 / 12 * 100%);
1705 + max-width: calc( 3 / 12 * 100% );
1706 + flex-basis: calc( 3 / 12 * 100% );
1710 1707 }
1711 1708 .eps-grid-item-xl-4 {
1712 1709 flex-grow: 0;
1713 - max-width: calc(4 / 12 * 100%);
1714 - flex-basis: calc(4 / 12 * 100%);
1710 + max-width: calc( 4 / 12 * 100% );
1711 + flex-basis: calc( 4 / 12 * 100% );
1715 1712 }
1716 1713 .eps-grid-item-xl-5 {
1717 1714 flex-grow: 0;
1718 - max-width: calc(5 / 12 * 100%);
1719 - flex-basis: calc(5 / 12 * 100%);
1715 + max-width: calc( 5 / 12 * 100% );
1716 + flex-basis: calc( 5 / 12 * 100% );
1720 1717 }
1721 1718 .eps-grid-item-xl-6 {
1722 1719 flex-grow: 0;
1723 - max-width: calc(6 / 12 * 100%);
1724 - flex-basis: calc(6 / 12 * 100%);
1720 + max-width: calc( 6 / 12 * 100% );
1721 + flex-basis: calc( 6 / 12 * 100% );
1725 1722 }
1726 1723 .eps-grid-item-xl-7 {
1727 1724 flex-grow: 0;
1728 - max-width: calc(7 / 12 * 100%);
1729 - flex-basis: calc(7 / 12 * 100%);
1725 + max-width: calc( 7 / 12 * 100% );
1726 + flex-basis: calc( 7 / 12 * 100% );
1730 1727 }
1731 1728 .eps-grid-item-xl-8 {
1732 1729 flex-grow: 0;
1733 - max-width: calc(8 / 12 * 100%);
1734 - flex-basis: calc(8 / 12 * 100%);
1730 + max-width: calc( 8 / 12 * 100% );
1731 + flex-basis: calc( 8 / 12 * 100% );
1735 1732 }
1736 1733 .eps-grid-item-xl-9 {
1737 1734 flex-grow: 0;
1738 - max-width: calc(9 / 12 * 100%);
1739 - flex-basis: calc(9 / 12 * 100%);
1735 + max-width: calc( 9 / 12 * 100% );
1736 + flex-basis: calc( 9 / 12 * 100% );
1740 1737 }
1741 1738 .eps-grid-item-xl-10 {
1742 1739 flex-grow: 0;
1743 - max-width: calc(10 / 12 * 100%);
1744 - flex-basis: calc(10 / 12 * 100%);
1740 + max-width: calc( 10 / 12 * 100% );
1741 + flex-basis: calc( 10 / 12 * 100% );
1745 1742 }
1746 1743 .eps-grid-item-xl-11 {
1747 1744 flex-grow: 0;
1748 - max-width: calc(11 / 12 * 100%);
1749 - flex-basis: calc(11 / 12 * 100%);
1745 + max-width: calc( 11 / 12 * 100% );
1746 + flex-basis: calc( 11 / 12 * 100% );
1750 1747 }
1751 1748 .eps-grid-item-xl-12 {
1752 1749 flex-grow: 0;
1753 - max-width: calc(12 / 12 * 100%);
1754 - flex-basis: calc(12 / 12 * 100%);
1750 + max-width: calc( 12 / 12 * 100% );
1751 + flex-basis: calc( 12 / 12 * 100% );
1755 1752 }
1756 1753 }
1757 1754 @media screen and (min-width: 1600px) {
1758 1755 .eps-grid-item-xxl-1 {
1759 1756 flex-grow: 0;
1760 - max-width: calc(1 / 12 * 100%);
1761 - flex-basis: calc(1 / 12 * 100%);
1757 + max-width: calc( 1 / 12 * 100% );
1758 + flex-basis: calc( 1 / 12 * 100% );
1762 1759 }
1763 1760 .eps-grid-item-xxl-2 {
1764 1761 flex-grow: 0;
1765 - max-width: calc(2 / 12 * 100%);
1766 - flex-basis: calc(2 / 12 * 100%);
1762 + max-width: calc( 2 / 12 * 100% );
1763 + flex-basis: calc( 2 / 12 * 100% );
1767 1764 }
1768 1765 .eps-grid-item-xxl-3 {
1769 1766 flex-grow: 0;
1770 - max-width: calc(3 / 12 * 100%);
1771 - flex-basis: calc(3 / 12 * 100%);
1767 + max-width: calc( 3 / 12 * 100% );
1768 + flex-basis: calc( 3 / 12 * 100% );
1772 1769 }
1773 1770 .eps-grid-item-xxl-4 {
1774 1771 flex-grow: 0;
1775 - max-width: calc(4 / 12 * 100%);
1776 - flex-basis: calc(4 / 12 * 100%);
1772 + max-width: calc( 4 / 12 * 100% );
1773 + flex-basis: calc( 4 / 12 * 100% );
1777 1774 }
1778 1775 .eps-grid-item-xxl-5 {
1779 1776 flex-grow: 0;
1780 - max-width: calc(5 / 12 * 100%);
1781 - flex-basis: calc(5 / 12 * 100%);
1777 + max-width: calc( 5 / 12 * 100% );
1778 + flex-basis: calc( 5 / 12 * 100% );
1782 1779 }
1783 1780 .eps-grid-item-xxl-6 {
1784 1781 flex-grow: 0;
1785 - max-width: calc(6 / 12 * 100%);
1786 - flex-basis: calc(6 / 12 * 100%);
1782 + max-width: calc( 6 / 12 * 100% );
1783 + flex-basis: calc( 6 / 12 * 100% );
1787 1784 }
1788 1785 .eps-grid-item-xxl-7 {
1789 1786 flex-grow: 0;
1790 - max-width: calc(7 / 12 * 100%);
1791 - flex-basis: calc(7 / 12 * 100%);
1787 + max-width: calc( 7 / 12 * 100% );
1788 + flex-basis: calc( 7 / 12 * 100% );
1792 1789 }
1793 1790 .eps-grid-item-xxl-8 {
1794 1791 flex-grow: 0;
1795 - max-width: calc(8 / 12 * 100%);
1796 - flex-basis: calc(8 / 12 * 100%);
1792 + max-width: calc( 8 / 12 * 100% );
1793 + flex-basis: calc( 8 / 12 * 100% );
1797 1794 }
1798 1795 .eps-grid-item-xxl-9 {
1799 1796 flex-grow: 0;
1800 - max-width: calc(9 / 12 * 100%);
1801 - flex-basis: calc(9 / 12 * 100%);
1797 + max-width: calc( 9 / 12 * 100% );
1798 + flex-basis: calc( 9 / 12 * 100% );
1802 1799 }
1803 1800 .eps-grid-item-xxl-10 {
1804 1801 flex-grow: 0;
1805 - max-width: calc(10 / 12 * 100%);
1806 - flex-basis: calc(10 / 12 * 100%);
1802 + max-width: calc( 10 / 12 * 100% );
1803 + flex-basis: calc( 10 / 12 * 100% );
1807 1804 }
1808 1805 .eps-grid-item-xxl-11 {
1809 1806 flex-grow: 0;
1810 - max-width: calc(11 / 12 * 100%);
1811 - flex-basis: calc(11 / 12 * 100%);
1807 + max-width: calc( 11 / 12 * 100% );
1808 + flex-basis: calc( 11 / 12 * 100% );
1812 1809 }
1813 1810 .eps-grid-item-xxl-12 {
1814 1811 flex-grow: 0;
1815 - max-width: calc(12 / 12 * 100%);
1816 - flex-basis: calc(12 / 12 * 100%);
1812 + max-width: calc( 12 / 12 * 100% );
1813 + flex-basis: calc( 12 / 12 * 100% );
1817 1814 }
1818 1815 }
1819 1816 :root {
1820 - --menu-title-color: #515962;
1817 + --menu-title-color: #6d7882;
1821 1818 }
1822 1819
1823 1820 .eps-theme-dark {
1824 - --menu-title-color: #515962;
1821 + --menu-title-color: #6d7882;
1825 1822 }
1826 1823
1827 1824 .eps-menu ul {
1828 1825 list-style: none;
@@ -1841,17 +1838,15 @@
1841 1838 color: var(--menu-title-color);
1842 1839 }
1843 1840
1844 1841 :root {
1845 - --eps-modal-background-color: #ffffff;
1846 - --eps-modal-header-background-color: #2563EB;
1847 - --eps-tip-background-color: #F0F7FF;
1842 + --eps-modal-background-color: #fff;
1843 + --eps-modal-header-background-color: #58d0f5;
1848 1844 }
1849 1845
1850 1846 .eps-theme-dark {
1851 - --eps-modal-background-color: #0C0D0E;
1852 - --eps-modal-header-background-color: #0077CC;
1853 - --eps-tip-background-color: #0A1A3D;
1847 + --eps-modal-background-color: #34383c;
1848 + --eps-modal-header-background-color: #58d0f5;
1854 1849 }
1855 1850
1856 1851 /** ----------------------------------------------------------------
1857 1852 EPS Modal
@@ -1865,9 +1860,12 @@
1865 1860 .eps-modal__overlay {
1866 1861 background: rgba(0, 0, 0, 0.5);
1867 1862 position: fixed;
1868 1863 display: flex;
1869 - inset: 0;
1864 + top: 0;
1865 + left: 0;
1866 + width: 100%;
1867 + height: 100%;
1870 1868 align-items: center;
1871 1869 justify-content: center;
1872 1870 z-index: 1030;
1873 1871 }
@@ -1878,34 +1876,37 @@
1878 1876 padding: 0.625rem 1rem;
1879 1877 border-radius: 0.1875rem;
1880 1878 }
1881 1879 .eps-modal__header, .eps-modal__header .title {
1882 - color: #ffffff;
1880 + color: #fff;
1883 1881 }
1884 1882 .eps-modal__icon {
1885 - margin-inline-end: 0.625rem;
1883 + -webkit-margin-end: 0.625rem;
1884 + margin-inline-end: 0.625rem;
1886 1885 }
1887 1886 .eps-modal__body {
1888 1887 padding: 1.875rem;
1889 1888 }
1890 1889 .eps-modal__tip, .eps-modal .eps-tip {
1891 - padding: 0.5rem;
1892 - padding-inline-start: 0.75rem;
1893 - border-inline-start: 3px solid #2563EB;
1894 - background-color: var(--eps-tip-background-color);
1890 + -webkit-padding-start: 0.75rem;
1891 + padding-inline-start: 0.75rem;
1892 + -webkit-border-start: 3px solid #58d0f5;
1893 + border-inline-start: 3px solid #58d0f5;
1895 1894 }
1896 1895 .eps-modal__tip:not(:last-child), .eps-modal .eps-tip:not(:last-child) {
1897 - margin-block-end: 1.875rem;
1896 + margin-bottom: 1.875rem;
1898 1897 }
1899 1898 .eps-modal__tip:not(:first-child), .eps-modal .eps-tip:not(:first-child) {
1900 - margin-block-start: 1.875rem;
1899 + margin-top: 1.875rem;
1901 1900 }
1902 1901 .eps-modal__section:not(:first-child) {
1903 - margin-block-start: 1.875rem;
1902 + margin-top: 1.875rem;
1904 1903 }
1905 1904 .eps-modal__close-wrapper {
1906 - padding-inline-start: 1rem;
1907 - border-inline-start: solid 1px #ffffff;
1905 + -webkit-padding-start: 1rem;
1906 + padding-inline-start: 1rem;
1907 + -webkit-border-start: solid 1px #fff;
1908 + border-inline-start: solid 1px #fff;
1908 1909 }
1909 1910
1910 1911 .eps-add-new-button {
1911 1912 display: inline-flex;
@@ -1913,10 +1914,10 @@
1913 1914 line-height: var(--eps-add-new-button-size);
1914 1915 cursor: pointer;
1915 1916 }
1916 1917 .eps-add-new-button .eps-icon {
1917 - background-color: #F3BAFD;
1918 - color: #0C0D0E;
1918 + background-color: #58d0f5;
1919 + color: #fff;
1919 1920 width: var(--eps-add-new-button-size);
1920 1921 height: var(--eps-add-new-button-size);
1921 1922 border-radius: 100%;
1922 1923 font-size: calc(var(--eps-add-new-button-size) * 0.75);
@@ -1923,9 +1924,10 @@
1923 1924 text-align: center;
1924 1925 line-height: var(--eps-add-new-button-size);
1925 1926 }
1926 1927 .eps-add-new-button span:not(.sr-only) {
1927 - margin-inline-start: 0.625rem;
1928 + -webkit-margin-start: 0.625rem;
1929 + margin-inline-start: 0.625rem;
1928 1930 font-weight: 500;
1929 1931 }
1930 1932 .eps-add-new-button--sm {
1931 1933 --eps-add-new-button-size: 1rem;
@@ -1931,53 +1933,53 @@
1931 1933 --eps-add-new-button-size: 1rem;
1932 1934 }
1933 1935
1934 1936 :root {
1935 - --select2-selection-background-color: #ffffff;
1936 - --select2-selection-color: #515962;
1937 - --select2-selection-border-color: #9DA5AE;
1938 - --select2-selection-opened-focused-border-color: #BABFC5;
1939 - --select2-single-selection-rendered-color: #515962;
1940 - --select2-default-single-selection-background-color: #ffffff;
1941 - --select2-default-single-selection-border-color: #9DA5AE;
1942 - --select2-default-multiple-selection-background-color: #ffffff;
1943 - --select2-default-multiple-selection-choice-background-color: #BABFC5;
1944 - --select2-default-multiple-selection-choice-color: #515962;
1945 - --select2-default-multiple-selection-choice-border-color: #BABFC5;
1946 - --select2-default-multiple-selection-choice-remove-color: #69727D;
1947 - --select2-default-multiple-selection-choice-remove-hover-color: #515962;
1948 - --select2-default-results-selected-option-background-color: #ffffff;
1949 - --select2-default-results-selected-option-color: #515962;
1937 + --select2-selection-background-color: #fff;
1938 + --select2-selection-color: #6d7882;
1939 + --select2-selection-border-color: #d5dadf;
1940 + --select2-selection-opened-focused-border-color: #f1f3f5;
1941 + --select2-single-selection-rendered-color: #6d7882;
1942 + --select2-default-single-selection-background-color: #fff;
1943 + --select2-default-single-selection-border-color: #d5dadf;
1944 + --select2-default-multiple-selection-background-color: #fff;
1945 + --select2-default-multiple-selection-choice-background-color: #f1f3f5;
1946 + --select2-default-multiple-selection-choice-color: #6d7882;
1947 + --select2-default-multiple-selection-choice-border-color: #f1f3f5;
1948 + --select2-default-multiple-selection-choice-remove-color: #a4afb7;
1949 + --select2-default-multiple-selection-choice-remove-hover-color: #6d7882;
1950 + --select2-default-results-selected-option-background-color: #fff;
1951 + --select2-default-results-selected-option-color: #6d7882;
1950 1952 --select2-default-results-highlighted-option-background-color: #5897fb;
1951 - --select2-default-results-highlighted-option-color: #ffffff;
1953 + --select2-default-results-highlighted-option-color: #fff;
1952 1954 --select2-results-selected-option-background-color: #5897fb;
1953 - --select2-results-selected-option-color: #ffffff;
1954 - --select2-dropdown-background-color: #ffffff;
1955 - --select2-dropdown-border-color: #9DA5AE;
1955 + --select2-results-selected-option-color: #fff;
1956 + --select2-dropdown-background-color: #fff;
1957 + --select2-dropdown-border-color: #d5dadf;
1956 1958 }
1957 1959
1958 1960 .eps-theme-dark {
1959 - --select2-selection-background-color: #3f444b;
1960 - --select2-selection-color: #D5D8DC;
1961 - --select2-selection-border-color: #818A96;
1962 - --select2-selection-opened-focused-border-color: #9DA5AE;
1963 - --select2-single-selection-rendered-color: #D5D8DC;
1964 - --select2-default-single-selection-background-color: #3f444b;
1965 - --select2-default-single-selection-border-color: #69727D;
1966 - --select2-default-multiple-selection-background-color: #3f444b;
1967 - --select2-default-multiple-selection-choice-background-color: #69727D;
1968 - --select2-default-multiple-selection-choice-color: #D5D8DC;
1969 - --select2-default-multiple-selection-choice-border-color: #69727D;
1970 - --select2-default-multiple-selection-choice-remove-color: #BABFC5;
1971 - --select2-default-multiple-selection-choice-remove-hover-color: #D5D8DC;
1972 - --select2-default-results-selected-option-background-color: #3f444b;
1973 - --select2-default-results-selected-option-color: #D5D8DC;
1974 - --select2-default-results-highlighted-option-background-color: #69727D;
1975 - --select2-default-results-highlighted-option-color: #D5D8DC;
1976 - --select2-results-selected-option-background-color: #69727D;
1977 - --select2-results-selected-option-color: #D5D8DC;
1978 - --select2-dropdown-background-color: #3f444b;
1979 - --select2-dropdown-border-color: #818A96;
1961 + --select2-selection-background-color: #34383c;
1962 + --select2-selection-color: #e0e1e3;
1963 + --select2-selection-border-color: #64666a;
1964 + --select2-selection-opened-focused-border-color: #7d7e82;
1965 + --select2-single-selection-rendered-color: #e0e1e3;
1966 + --select2-default-single-selection-background-color: #34383c;
1967 + --select2-default-single-selection-border-color: #4c4f56;
1968 + --select2-default-multiple-selection-background-color: #34383c;
1969 + --select2-default-multiple-selection-choice-background-color: #4c4f56;
1970 + --select2-default-multiple-selection-choice-color: #e0e1e3;
1971 + --select2-default-multiple-selection-choice-border-color: #4c4f56;
1972 + --select2-default-multiple-selection-choice-remove-color: #b4b5b7;
1973 + --select2-default-multiple-selection-choice-remove-hover-color: #e0e1e3;
1974 + --select2-default-results-selected-option-background-color: #34383c;
1975 + --select2-default-results-selected-option-color: #e0e1e3;
1976 + --select2-default-results-highlighted-option-background-color: #4c4f56;
1977 + --select2-default-results-highlighted-option-color: #e0e1e3;
1978 + --select2-results-selected-option-background-color: #4c4f56;
1979 + --select2-results-selected-option-color: #e0e1e3;
1980 + --select2-dropdown-background-color: #34383c;
1981 + --select2-dropdown-border-color: #64666a;
1980 1982 }
1981 1983
1982 1984 .select2-container:not(.select2-container--open):not(.select2-container--focus) .select2-selection--single,
1983 1985 .select2-container:not(.select2-container--open):not(.select2-container--focus) .select2-selection--multiple {
@@ -2028,61 +2030,54 @@
2028 2030 border-color: var(--select2-dropdown-border-color);
2029 2031 }
2030 2032
2031 2033 .eps-notice {
2032 - --eps-box-notice-background-color: #F1F2F3;
2034 + --eps-box-notice-color: #a4afb7;
2035 + --eps-box-notice-background-color: #fcfcfc;
2033 2036 padding: 0.625rem 1rem;
2037 + box-shadow: 0 2px 3px 1px var(--color-box-shadow-color);
2038 + background-color: var(--eps-box-notice-background-color);
2034 2039 }
2035 2040 .eps-notice-semantic {
2036 - border-inline-start: 3px solid var(--eps-notice-semantic-color);
2037 - background-color: var(--eps-notice-semantic-bg);
2041 + -webkit-border-start: 3px solid var(--eps-notice-semantic-color);
2042 + border-inline-start: 3px solid var(--eps-notice-semantic-color);
2038 2043 }
2039 2044 .eps-notice-semantic .eps-notice__icon {
2040 2045 color: var(--eps-notice-semantic-color);
2041 2046 font-size: 1rem;
2042 - margin-inline-end: 0.75rem;
2047 + -webkit-margin-end: 0.75rem;
2048 + margin-inline-end: 0.75rem;
2043 2049 }
2044 2050 .eps-notice--warning {
2045 - --eps-notice-semantic-color: #F59E0B;
2046 - --eps-notice-semantic-bg: #FFFBEB;
2051 + --eps-notice-semantic-color: #fcb92c;
2047 2052 }
2048 2053 .eps-notice--danger {
2049 - --eps-notice-semantic-color: #DC2626;
2050 - --eps-notice-semantic-bg: #FEF1F4;
2054 + --eps-notice-semantic-color: #b01b1b;
2051 2055 }
2052 2056 .eps-notice--info {
2053 - --eps-notice-semantic-color: #2563EB;
2054 - --eps-notice-semantic-bg: #F0F7FF;
2057 + --eps-notice-semantic-color: #58d0f5;
2055 2058 }
2056 2059 .eps-notice__text {
2057 2060 margin: 0;
2058 2061 padding: 0;
2062 + color: var(--eps-box-notice-color);
2063 + font-style: italic;
2059 2064 }
2060 2065 .eps-notice__button-container {
2061 2066 flex-shrink: 0;
2062 - margin-inline-start: 1.25rem;
2067 + margin-left: 1.25rem;
2063 2068 width: auto;
2064 2069 }
2065 2070
2066 2071 .eps-theme-dark .eps-notice {
2067 - --eps-box-notice-background-color: #515962;
2072 + --eps-box-notice-color: #b4b5b7;
2073 + --eps-box-notice-background-color: #404349;
2068 2074 }
2069 -.eps-theme-dark .eps-notice--warning {
2070 - --eps-notice-semantic-bg: #311808;
2071 -}
2072 -.eps-theme-dark .eps-notice--danger {
2073 - --eps-notice-semantic-bg: #390A0A;
2074 -}
2075 -.eps-theme-dark .eps-notice--info {
2076 - --eps-notice-semantic-bg: #0A1A3D;
2077 -}
2078 2075
2079 2076 .eps-list {
2080 - --eps-list-item-separated-border-color: #BABFC5;
2077 + --eps-list-item-separated-border-color: #f1f3f5;
2081 2078 padding: 0;
2082 2079 margin: 0;
2083 - border-radius: 0.1875rem;
2084 - border: 1px solid var(--e-a-border-color);
2085 2080 list-style-type: none;
2086 2081 }
2087 2082 .eps-list--padding {
2088 2083 padding: var(--eps-list-padding);
@@ -2093,35 +2088,35 @@
2093 2088 .eps-list__item--padding {
2094 2089 padding: var(--eps-list-item-padding);
2095 2090 }
2096 2091 .eps-list--separated .eps-list__item:not(:last-child) {
2097 - border-block-end: 1px solid var(--eps-list-item-separated-border-color);
2092 + border-bottom: 1px solid var(--eps-list-item-separated-border-color);
2098 2093 }
2099 2094
2100 2095 .eps-theme-dark .eps-list {
2101 - --eps-list-item-separated-border-color: #3f444b;
2096 + --eps-list-item-separated-border-color: #34383c;
2102 2097 }
2103 2098
2104 2099 :root {
2105 - --popover-background-color: #ffffff;
2106 - --popover-item-color: #515962;
2107 - --popover-item-hover-color: #3f444b;
2108 - --popover-item-danger-hover-color: #DC2626;
2109 - --popover-item-background-color: #ffffff;
2100 + --popover-background-color: #fff;
2101 + --popover-item-color: #6d7882;
2102 + --popover-item-hover-color: #556068;
2103 + --popover-item-danger-hover-color: #b01b1b;
2104 + --popover-item-background-color: #fff;
2110 2105 --popover-box-shadow-color: rgba(0, 0, 0, 0.15);
2111 2106 --popover-box-shadow-size: 0px 1px 20px;
2112 - --popover-arrow-color: #ffffff;
2107 + --popover-arrow-color: #fff;
2113 2108 }
2114 2109
2115 2110 .eps-theme-dark {
2116 - --popover-background-color: #1f2124;
2117 - --popover-item-color: #ffffff;
2118 - --popover-item-hover-color: #D5D8DC;
2111 + --popover-background-color: #4c4f56;
2112 + --popover-item-color: #fff;
2113 + --popover-item-hover-color: #e0e1e3;
2119 2114 --popover-item-danger-hover-color: #F84343;
2120 - --popover-item-background-color: #1f2124;
2115 + --popover-item-background-color: #4c4f56;
2121 2116 --popover-box-shadow-color: rgba(0, 0, 0, 0.15);
2122 2117 --popover-box-shadow-size: 0px 1px 20px;
2123 - --popover-arrow-color: #1f2124;
2118 + --popover-arrow-color: #4c4f56;
2124 2119 }
2125 2120
2126 2121 .eps-popover {
2127 2122 padding: 10px 0;
@@ -2133,15 +2128,18 @@
2133 2128 min-width: 120px;
2134 2129 border-radius: 0.1875rem;
2135 2130 position: absolute;
2136 2131 z-index: 1050;
2137 - margin-block-start: 9px;
2132 + margin-top: 9px;
2138 2133 transform: translateX(-50%);
2139 - inset-inline-start: 0.25rem;
2134 + left: 0.25rem;
2140 2135 }
2141 2136 .eps-popover__background {
2142 2137 position: fixed;
2143 - inset: 0;
2138 + top: 0;
2139 + bottom: 0;
2140 + left: 0;
2141 + right: 0;
2144 2142 z-index: 1030;
2145 2143 }
2146 2144 .eps-popover__container {
2147 2145 position: relative;
@@ -2152,28 +2150,16 @@
2152 2150 position: absolute;
2153 2151 width: 16px;
2154 2152 height: 9px;
2155 2153 margin: 0 0.1875rem 9px;
2156 - inset-block-start: -9px;
2157 - inset-inline-start: 50%;
2154 + top: -9px;
2155 + left: 50%;
2158 2156 transform: translateX(-50%);
2159 2157 border-color: transparent;
2160 2158 border-style: solid;
2161 2159 border-width: 0 calc(16px / 2) 9px calc(16px / 2);
2162 - border-block-end-color: var(--popover-arrow-color);
2160 + border-bottom-color: var(--popover-arrow-color);
2163 2161 }
2164 -.eps-popover--arrow-start::before {
2165 - inset-inline-start: 0.1875rem;
2166 - transform: none;
2167 -}
2168 -.eps-popover--arrow-end::before {
2169 - inset-inline-start: auto;
2170 - inset-inline-end: 0.1875rem;
2171 - transform: none;
2172 -}
2173 -.eps-popover--arrow-none::before {
2174 - display: none;
2175 -}
2176 2162 .eps-popover__item {
2177 2163 padding: 0.3125rem 1rem;
2178 2164 background-color: var(--popover-item-background-color);
2179 2165 color: var(--popover-item-color);
@@ -2191,9 +2177,10 @@
2191 2177 color: var(--popover-item-danger-hover-color);
2192 2178 }
2193 2179 .eps-popover__item .eps-icon {
2194 2180 font-size: inherit;
2195 - margin-inline-end: 0.3125rem;
2181 + -webkit-margin-end: 0.3125rem;
2182 + margin-inline-end: 0.3125rem;
2196 2183 }
2197 2184
2198 2185 .eps-css-grid {
2199 2186 display: grid;
@@ -2201,12 +2188,14 @@
2201 2188 grid-gap: var(--eps-grid-spacing);
2202 2189 }
2203 2190
2204 2191 .eps-box {
2205 - --eps-box-color: #1f2124;
2206 - --eps-box-input-color: #1f2124;
2192 + --eps-box-background-color: #fff;
2193 + --eps-box-color: #495157;
2194 + --eps-box-input-color: #495157;
2207 2195 padding: 0;
2208 2196 border-radius: 0.1875rem;
2197 + background-color: var(--eps-box-background-color);
2209 2198 color: var(--eps-box-color);
2210 2199 }
2211 2200 .eps-box--padding {
2212 2201 padding: var(--eps-box-padding);
@@ -2214,28 +2203,29 @@
2214 2203 .eps-box > input {
2215 2204 width: 100%;
2216 2205 outline: 0;
2217 2206 border: 0;
2218 - background-color: transparent;
2207 + background-color: var(--eps-box-background-color);
2219 2208 color: var(--eps-box-input-color);
2220 2209 }
2221 2210
2222 2211 .eps-theme-dark .eps-box {
2223 - --eps-box-color: #D5D8DC;
2224 - --eps-box-input-color: #D5D8DC;
2212 + --eps-box-background-color: #404349;
2213 + --eps-box-color: #e0e1e3;
2214 + --eps-box-input-color: #e0e1e3;
2225 2215 }
2226 2216
2227 2217 :root {
2228 - --checkbox-border-color: #9DA5AE;
2229 - --checkbox-hover-border-color: rgb(143.0391061453, 152.1787709497, 162.4608938547);
2230 - --checkbox-active-border-color: rgb(170.9608938547, 177.8212290503, 185.5391061453);
2231 - --checkbox-background-color: #ffffff;
2232 - --checkbox-checked-background-color: #515962;
2233 - --checkbox-checked-hover-background-color: rgb(69.4608938547, 76.3212290503, 84.0391061453);
2234 - --checkbox-checked-active-background-color: rgb(92.5391061453, 101.6787709497, 111.9608938547);
2235 - --checkbox-checked-disabled-background-color: #D5D8DC;
2236 - --checkbox-indicator-color: #ffffff;
2237 - --checkbox-error-background-color: #DC2626;
2218 + --checkbox-border-color: #d5dadf;
2219 + --checkbox-hover-border-color: #c7cdd4;
2220 + --checkbox-active-border-color: #e3e7ea;
2221 + --checkbox-background-color: #fff;
2222 + --checkbox-checked-background-color: #39b54a;
2223 + --checkbox-checked-hover-background-color: #33a242;
2224 + --checkbox-checked-active-background-color: #44c455;
2225 + --checkbox-checked-disabled-background-color: #c2cbd2;
2226 + --checkbox-indicator-color: #fff;
2227 + --checkbox-error-background-color: #b01b1b;
2238 2228 }
2239 2229
2240 2230 .eps-theme-dark {
2241 2231 --checkbox-background-color: transparent;
@@ -2256,9 +2246,9 @@
2256 2246 border: 1px solid var(--checkbox-border-color);
2257 2247 }
2258 2248 .eps-checkbox::after {
2259 2249 display: inline-block;
2260 - margin-block-end: calc(0.25 / 2 * 100%);
2250 + margin-bottom: calc(0.25 / 2 * 100%);
2261 2251 content: " ";
2262 2252 width: 3px;
2263 2253 height: 6px;
2264 2254 transform: rotate(45deg);
@@ -2273,9 +2263,9 @@
2273 2263 --checkbox-background-color: var(--checkbox-checked-background-color);
2274 2264 --checkbox-border-color: var(--checkbox-checked-background-color);
2275 2265 }
2276 2266 .eps-checkbox:checked::after {
2277 - border: solid #ffffff;
2267 + border: solid #fff;
2278 2268 border-width: 0 1px 1px 0;
2279 2269 }
2280 2270 .eps-checkbox:checked:hover {
2281 2271 --checkbox-background-color: var(--checkbox-checked-hover-background-color);
@@ -2291,28 +2281,28 @@
2291 2281 }
2292 2282 .eps-checkbox--rounded {
2293 2283 border-radius: 50%;
2294 2284 }
2285 +.eps-checkbox--indeterminate {
2286 + --checkbox-background-color: var(--checkbox-checked-background-color);
2287 + --checkbox-border-color: var(--checkbox-checked-background-color);
2288 +}
2295 2289 .eps-checkbox--indeterminate::after {
2296 2290 display: inline-block;
2297 - margin-block-end: 0;
2291 + margin-bottom: 0;
2298 2292 content: " ";
2299 2293 width: 7px;
2300 2294 height: 0;
2301 2295 transform: rotate(0deg);
2302 - border-block-start: 1px solid #ffffff;
2296 + border-top: 1px solid #fff;
2303 2297 }
2304 -.eps-checkbox--indeterminate {
2305 - --checkbox-background-color: var(--checkbox-checked-background-color);
2306 - --checkbox-border-color: var(--checkbox-checked-background-color);
2307 -}
2308 2298 .eps-checkbox--error::before, .eps-checkbox--error::after, .eps-checkbox--error:checked::before, .eps-checkbox--error:checked::after {
2309 2299 display: inline-block;
2310 - margin-block-end: 0;
2300 + margin-bottom: 0;
2311 2301 content: " ";
2312 2302 width: 7px;
2313 2303 height: 0;
2314 - border: solid #ffffff;
2304 + border: solid #fff;
2315 2305 border-width: 1px 0 0 0;
2316 2306 position: absolute;
2317 2307 }
2318 2308 .eps-checkbox--error::before, .eps-checkbox--error:checked::before {
@@ -2326,15 +2316,15 @@
2326 2316 --checkbox-border-color: var(--checkbox-error-background-color);
2327 2317 }
2328 2318
2329 2319 :root {
2330 - --e-app-drag-drop-background-color: #ffffff;
2331 - --e-app-drag-drop-outline-color: #E6E8EA;
2320 + --e-app-drag-drop-background-color: #fff;
2321 + --e-app-drag-drop-outline-color: #d5dadf;
2332 2322 }
2333 2323
2334 2324 .eps-theme-dark {
2335 - --e-app-drag-drop-background-color: #2b2c31;
2336 - --e-app-drag-drop-outline-color: #333438;
2325 + --e-app-drag-drop-background-color: #404349;
2326 + --e-app-drag-drop-outline-color: #7d7e82;
2337 2327 }
2338 2328
2339 2329 .e-app-drag-drop {
2340 2330 background-color: var(--e-app-drag-drop-background-color);
@@ -2339,14 +2329,14 @@
2339 2329 .e-app-drag-drop {
2340 2330 background-color: var(--e-app-drag-drop-background-color);
2341 2331 outline: 2px dashed var(--e-app-drag-drop-outline-color);
2342 2332 outline-offset: -0.75rem;
2343 - margin-block-end: 1.5rem;
2333 + margin-bottom: 1.5rem;
2344 2334 padding: 4.125rem;
2345 2335 text-align: center;
2346 2336 }
2347 2337 .e-app-drag-drop--drag-over {
2348 - outline-color: #2563EB;
2338 + outline-color: #58d0f5;
2349 2339 }
2350 2340
2351 2341 .eps-dialog {
2352 2342 border-radius: 3px;
@@ -2353,15 +2343,15 @@
2353 2343 width: 375px;
2354 2344 }
2355 2345 .eps-dialog__close-button {
2356 2346 position: absolute;
2357 - inset-block-start: -2.75rem;
2358 - inset-inline-end: -2.75rem;
2359 - margin-block-start: 0.625rem;
2360 - margin-inline-end: 0.625rem;
2347 + top: -2.75rem;
2348 + right: -2.75rem;
2349 + margin-top: 0.625rem;
2350 + margin-right: 0.625rem;
2361 2351 z-index: 1040;
2362 2352 font-size: 1.25rem;
2363 - color: #ffffff;
2353 + color: #fff;
2364 2354 }
2365 2355 .eps-dialog__content {
2366 2356 padding: 1.5rem 1.875rem 1rem;
2367 2357 font-size: 0.75rem;
@@ -2373,15 +2363,16 @@
2373 2363 display: flex;
2374 2364 }
2375 2365 .eps-dialog__button {
2376 2366 flex: 1;
2377 - border-block-start: 1px solid var(--hr-color);
2367 + border-top: 1px solid var(--hr-color);
2378 2368 line-height: 2.75rem;
2379 2369 text-align: center;
2380 2370 justify-content: center;
2381 2371 }
2382 2372 .eps-dialog__button:last-child:not(:first-child) {
2383 - border-inline-start: 1px solid var(--hr-color);
2373 + -webkit-border-start: 1px solid var(--hr-color);
2374 + border-inline-start: 1px solid var(--hr-color);
2384 2375 }
2385 2376
2386 2377 .e-app__popover {
2387 2378 display: none;
@@ -2391,17 +2382,17 @@
2391 2382 padding: 20px;
2392 2383 width: -moz-fit-content;
2393 2384 width: fit-content;
2394 2385 z-index: 999;
2395 - background-color: var(--e-a-bg-default);
2386 + background-color: #ffffff;
2396 2387 }
2397 2388 .e-app__popover:before {
2398 2389 content: "";
2399 2390 position: absolute;
2400 - inset-block-start: -16px;
2401 - inset-inline-end: var(--popover-arrow-offset-end, 22px);
2391 + top: -16px;
2392 + right: var(--popover-arrow-offset-end, 22px);
2402 2393 border: 8px solid transparent;
2403 - border-block-end-color: #fff;
2394 + border-bottom-color: #fff;
2404 2395 }
2405 2396
2406 2397 .eps-inline-link {
2407 2398 color: var(--eps-inline-link-color);
@@ -2409,24 +2400,24 @@
2409 2400 border: 0;
2410 2401 padding: 0;
2411 2402 }
2412 2403 .eps-inline-link--color-primary {
2413 - --eps-inline-link-color: #0A875A;
2404 + --eps-inline-link-color: #39b54a;
2414 2405 }
2415 2406 .eps-inline-link--color-secondary {
2416 - --eps-inline-link-color: #818A96;
2407 + --eps-inline-link-color: #c2cbd2;
2417 2408 }
2418 2409 .eps-inline-link--color-danger {
2419 - --eps-inline-link-color: #DC2626;
2410 + --eps-inline-link-color: #b01b1b;
2420 2411 }
2421 2412 .eps-inline-link--color-cta {
2422 - --eps-inline-link-color: #93003f;
2413 + --eps-inline-link-color: #93003F;
2423 2414 }
2424 2415 .eps-inline-link--color-link {
2425 - --eps-inline-link-color: #515962;
2416 + --eps-inline-link-color: #58d0f5;
2426 2417 }
2427 2418 .eps-inline-link--color-disabled {
2428 - --eps-inline-link-color: #D5D8DC;
2419 + --eps-inline-link-color: #c2cbd2;
2429 2420 }
2430 2421 .eps-inline-link--underline-hover:hover, .eps-inline-link--underline-always, .eps-inline-link--underline-always:hover {
2431 2422 text-decoration: underline;
2432 2423 }
@@ -2437,43 +2428,33 @@
2437 2428 outline: none;
2438 2429 }
2439 2430
2440 2431 .eps-text-field {
2441 - --eps-text-field-color: #515962;
2442 - --eps-text-field-background-color: transparent;
2443 - --eps-text-field-placeholder-color: #69727D;
2444 - --eps-text-field-outlined-border-color: #9DA5AE;
2445 - --eps-text-field-outlined-focus-border-color: #515962;
2446 - --eps-text-field-standard-border-color: #9DA5AE;
2447 - --eps-text-field-standard-focus-border-color: #515962;
2448 - --border: 1px solid var(--eps-text-field-outlined-border-color);
2432 + --eps-text-field-color: #6d7882;
2433 + --eps-text-field-background-color: #fff;
2434 + --eps-text-field-placeholder-color: #a4afb7;
2435 + --eps-text-field-outlined-border-color: #d5dadf;
2436 + --eps-text-field-outlined-focus-border-color: #c2cbd2;
2449 2437 width: 100%;
2450 2438 color: var(--eps-text-field-color);
2451 2439 background-color: var(--eps-text-field-background-color);
2452 2440 border: 0;
2453 - margin-block-end: 5px;
2454 2441 outline: none;
2455 2442 font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;
2456 2443 font-size: 0.875rem;
2457 2444 font-weight: 400;
2458 2445 line-height: 1.5;
2446 + -webkit-font-smoothing: antialiased;
2447 + -moz-osx-font-smoothing: grayscale;
2459 2448 }
2460 2449 .eps-text-field--outlined {
2461 2450 border-radius: 0.1875rem;
2462 - border: var(--border);
2451 + border: 1px solid var(--eps-text-field-outlined-border-color);
2463 2452 padding: 0.625rem;
2464 2453 }
2465 2454 .eps-text-field--outlined:focus {
2466 2455 border-color: var(--eps-text-field-outlined-focus-border-color);
2467 2456 }
2468 -.eps-text-field--standard {
2469 - padding-top: 0.625rem;
2470 - padding-bottom: 0.625rem;
2471 - border-bottom: var(--border);
2472 -}
2473 -.eps-text-field--standard:focus {
2474 - border-color: var(--eps-text-field-standard-focus-border-color);
2475 -}
2476 2457 .eps-text-field::-moz-placeholder {
2477 2458 color: var(--eps-text-field-placeholder-color);
2478 2459 font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;
2479 2460 font-size: 0.875rem;
@@ -2478,8 +2459,10 @@
2478 2459 font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;
2479 2460 font-size: 0.875rem;
2480 2461 font-weight: 400;
2481 2462 line-height: 1.5;
2463 + -webkit-font-smoothing: antialiased;
2464 + -moz-osx-font-smoothing: grayscale;
2482 2465 }
2483 2466 .eps-text-field::placeholder {
2484 2467 color: var(--eps-text-field-placeholder-color);
2485 2468 font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;
@@ -2485,29 +2468,19 @@
2485 2468 font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;
2486 2469 font-size: 0.875rem;
2487 2470 font-weight: 400;
2488 2471 line-height: 1.5;
2472 + -webkit-font-smoothing: antialiased;
2473 + -moz-osx-font-smoothing: grayscale;
2489 2474 }
2490 2475
2491 2476 .eps-theme-dark .eps-text-field {
2492 - --eps-text-field-color: #BABFC5;
2493 - --eps-text-field-background-color: transparent;
2494 - --eps-text-field-placeholder-color: #9DA5AE;
2495 - --eps-text-field-outlined-border-color: #3f444b;
2496 - --eps-text-field-outlined-focus-border-color: #9DA5AE;
2477 + --eps-text-field-color: #b4b5b7;
2478 + --eps-text-field-background-color: #34383c;
2479 + --eps-text-field-placeholder-color: #7d7e82;
2480 + --eps-text-field-outlined-border-color: #64666a;
2481 + --eps-text-field-outlined-focus-border-color: #7d7e82;
2497 2482 }
2498 -.eps-theme-dark--outlined {
2499 - border-color: var(--eps-text-field-outlined-border-color);
2500 -}
2501 -.eps-theme-dark--outlined:focus {
2502 - border-color: var(--eps-text-field-outlined-focus-border-color);
2503 -}
2504 -.eps-theme-dark--standard {
2505 - border-color: var(--eps-text-field-standard-border-color);
2506 -}
2507 -.eps-theme-dark--standard:focus {
2508 - border-color: var(--eps-text-field-standard-focus-border-color);
2509 -}
2510 2483
2511 2484 .e-app-import-export-content-layout {
2512 2485 display: flex;
2513 2486 justify-content: center;
@@ -2521,15 +2494,15 @@
2521 2494 margin: 2.75rem 0 0.625rem;
2522 2495 }
2523 2496
2524 2497 .e-app-export-kit-content {
2525 - --e-app-export-kit-content-title-color: #3f444b;
2526 - --e-app-export-kit-content-description-color: #515962;
2527 - --e-app-export-kit-content-sm-notice-color: #BABFC5;
2498 + --e-app-export-kit-content-title-color: #556068;
2499 + --e-app-export-kit-content-description-color: #6d7882;
2528 2500 }
2529 2501 .e-app-export-kit-content__checkbox {
2530 2502 flex-shrink: 0;
2531 - margin-inline-end: 0.75rem;
2503 + -webkit-margin-end: 0.75rem;
2504 + margin-inline-end: 0.75rem;
2532 2505 }
2533 2506 .e-app-export-kit-content__title {
2534 2507 color: var(--e-app-export-kit-content-title-color);
2535 2508 }
@@ -2534,30 +2507,30 @@
2534 2507 color: var(--e-app-export-kit-content-title-color);
2535 2508 }
2536 2509 .e-app-export-kit-content__description {
2537 2510 color: var(--e-app-export-kit-content-description-color);
2538 - margin-inline-end: 1.25rem;
2511 + -webkit-margin-end: 1.25rem;
2512 + margin-inline-end: 1.25rem;
2539 2513 }
2540 2514 .e-app-export-kit-content__notice {
2541 - margin-block-start: 1rem;
2515 + margin-top: 1rem;
2542 2516 }
2543 2517 .e-app-export-kit-content__small-notice {
2544 2518 font-style: italic;
2545 - color: var(--e-app-export-kit-content-sm-notice-color);
2519 + color: var(--e-app-export-kit-content-description-color);
2546 2520 }
2547 2521
2548 2522 .eps-theme-dark .e-app-export-kit-content {
2549 - --e-app-export-kit-content-title-color: #D5D8DC;
2550 - --e-app-export-kit-content-description-color: #BABFC5;
2551 - --e-app-export-kit-content-sm-notice-color: #818A96;
2523 + --e-app-export-kit-content-title-color: #e0e1e3;
2524 + --e-app-export-kit-content-description-color: #b4b5b7;
2552 2525 }
2553 2526
2554 2527 .e-app-import-export-kit-data {
2555 - --e-app-import-export-kit-data-site-area-color: #3f444b;
2556 - --e-app-import-export-kit-data-included-color: #69727D;
2528 + --e-app-import-export-kit-data-site-area-color: #556068;
2529 + --e-app-import-export-kit-data-included-color: #a4afb7;
2557 2530 }
2558 2531 .e-app-import-export-kit-data__site-area, .e-app-import-export-kit-data__included {
2559 - margin-block-end: 0;
2532 + margin-bottom: 0;
2560 2533 }
2561 2534 .e-app-import-export-kit-data__site-area {
2562 2535 color: var(--e-app-import-export-kit-data-site-area-color);
2563 2536 font-weight: bold;
@@ -2566,21 +2539,21 @@
2566 2539 color: var(--e-app-import-export-kit-data-included-color);
2567 2540 }
2568 2541
2569 2542 .eps-theme-dark .e-app-import-export-kit-data {
2570 - --e-app-import-export-kit-data-site-area-color: #BABFC5;
2571 - --e-app-import-export-kit-data-included-color: #9DA5AE;
2543 + --e-app-import-export-kit-data-site-area-color: #b4b5b7;
2544 + --e-app-import-export-kit-data-included-color: #7d7e82;
2572 2545 }
2573 2546
2574 2547 .e-app-import-resolver {
2575 - --e-app-import-resolver-panel-header-background-color: #ffffff;
2548 + --e-app-import-resolver-panel-header-background-color: #fff;
2576 2549 --e-app-import-resolver-panel-body-background-color: rgba(255, 255, 255, 0.5);
2577 - --e-app-import-resolver-conflicts-asset-border-color: #818A96;
2578 - --e-app-import-resolver-conflicts-asset-inactive-color: #69727D;
2579 - padding-block-end: 1.25rem;
2550 + --e-app-import-resolver-conflicts-asset-border-color: #c2cbd2;
2551 + --e-app-import-resolver-conflicts-asset-inactive-color: #a4afb7;
2552 + padding-bottom: 1.25rem;
2580 2553 }
2581 2554 .e-app-import-resolver__notice {
2582 - margin-block-end: 1.25rem;
2555 + margin-bottom: 1.25rem;
2583 2556 }
2584 2557 .e-app-import-resolver__panel, .e-app-import-resolver__panel:hover {
2585 2558 background-color: initial;
2586 2559 }
@@ -2594,35 +2567,40 @@
2594 2567 box-shadow: 0 2px 3px 1px var(--color-box-shadow-color);
2595 2568 }
2596 2569 .e-app-import-resolver-conflicts__checkbox {
2597 2570 flex-shrink: 0;
2598 - margin-inline-end: 0.75rem;
2571 + -webkit-margin-end: 0.75rem;
2572 + margin-inline-end: 0.75rem;
2599 2573 }
2600 2574 .e-app-import-resolver-conflicts__title {
2601 2575 line-height: 1;
2602 2576 }
2603 2577 .e-app-import-resolver-conflicts__asset:not(:first-child) {
2604 - border-inline-start: 2px solid var(--e-app-import-resolver-conflicts-asset-border-color);
2605 - padding-inline-start: 1rem;
2606 - margin-inline-start: 1rem;
2578 + -webkit-border-start: 2px solid var(--e-app-import-resolver-conflicts-asset-border-color);
2579 + border-inline-start: 2px solid var(--e-app-import-resolver-conflicts-asset-border-color);
2580 + -webkit-padding-start: 1rem;
2581 + padding-inline-start: 1rem;
2582 + -webkit-margin-start: 1rem;
2583 + margin-inline-start: 1rem;
2607 2584 }
2608 2585 .e-app-import-resolver-conflicts__asset:not(.active) {
2609 2586 color: var(--e-app-import-resolver-conflicts-asset-inactive-color);
2610 2587 }
2611 2588 .e-app-import-resolver-conflicts__edit-template {
2612 - margin-inline-start: 0.3125rem;
2589 + -webkit-margin-start: 0.3125rem;
2590 + margin-inline-start: 0.3125rem;
2613 2591 }
2614 2592
2615 2593 .eps-theme-dark .e-app-import-resolver {
2616 - --e-app-import-resolver-panel-header-background-color: #69727D;
2594 + --e-app-import-resolver-panel-header-background-color: #4c4f56;
2617 2595 --e-app-import-resolver-panel-body-background-color: rgba(0, 0, 0, 0.05);
2618 - --e-app-import-resolver-conflicts-asset-border-color: #818A96;
2619 - --e-app-import-resolver-conflicts-asset-inactive-color: #9DA5AE;
2596 + --e-app-import-resolver-conflicts-asset-border-color: #64666a;
2597 + --e-app-import-resolver-conflicts-asset-inactive-color: #7d7e82;
2620 2598 }
2621 2599
2622 2600 .eps-panel {
2623 - --eps-panel-header-background-color: transparent;
2624 - --eps-panel-body-background-color: transparent;
2601 + --eps-panel-header-background-color: #fff;
2602 + --eps-panel-body-background-color: rgba(255, 255, 255, 0.5);
2625 2603 }
2626 2604 .eps-panel, .eps-panel:hover {
2627 2605 background-color: initial;
2628 2606 }
@@ -2635,56 +2613,49 @@
2635 2613 border-radius: 0 0 0.1875rem 0.1875rem;
2636 2614 }
2637 2615
2638 2616 .eps-theme-dark .eps-panel {
2639 - --eps-panel-header-background-color: transparent;
2640 - --eps-panel-body-background-color: transparent;
2617 + --eps-panel-header-background-color: #404349;
2618 + --eps-panel-body-background-color: rgba(64, 67, 73, 0.5);
2641 2619 }
2642 2620
2643 2621 .e-app-export-kit {
2644 - padding-block-end: 1.25rem;
2622 + padding-bottom: 1.25rem;
2645 2623 }
2624 +.e-app-export-kit-information {
2625 + margin-top: 1.25rem;
2626 +}
2646 2627 .e-app-export-kit-information__field-header {
2647 - margin-block-end: 0.625rem;
2628 + margin-bottom: 0.625rem;
2648 2629 }
2649 2630 .e-app-export-kit-information__label {
2650 2631 margin: 0;
2651 2632 }
2652 2633 .e-app-export-kit-information__info-icon {
2653 - margin-inline-start: 0.625rem;
2634 + -webkit-margin-start: 0.625rem;
2635 + margin-inline-start: 0.625rem;
2654 2636 }
2655 -.e-app-export-kit-information__content {
2656 - gap: 16px;
2637 +.e-app-export-kit-info-modal__icon {
2638 + -webkit-padding-start: 0.625rem;
2639 + padding-inline-start: 0.625rem;
2657 2640 }
2658 -.e-app-export-kit-information__field--error {
2659 - border-color: var(--e-a-color-danger);
2641 +.e-app-export-kit-info-modal__heading {
2642 + margin-bottom: 1.25rem;
2660 2643 }
2661 -.e-app-export-kit-information__error-container {
2662 - height: 20px;
2663 - display: flex;
2664 - align-items: flex-start;
2665 - margin-block-start: 4px;
2666 -}
2667 -.e-app-export-kit-information__validation-error {
2668 - color: var(--e-a-color-danger);
2669 -}
2670 -.e-app-export-kit__content {
2671 - gap: 20px;
2672 -}
2673 2644
2674 2645 .e-app-import-export-info-modal__section:not(:first-child) {
2675 - margin-block-start: 1.875rem;
2646 + margin-top: 1.875rem;
2676 2647 }
2677 2648 .e-app-import-export-info-modal__heading {
2678 - margin-block-end: 1.25rem;
2649 + margin-bottom: 1.25rem;
2679 2650 }
2680 2651
2681 2652 :root {
2682 - --eps-badge-background-color: #ffffff;
2653 + --eps-badge-background-color: #fff;
2683 2654 }
2684 2655
2685 2656 .eps-theme-dark {
2686 - --eps-badge-background-color: #515962;
2657 + --eps-badge-background-color: #404349;
2687 2658 }
2688 2659
2689 2660 .eps-badge {
2690 2661 display: inline-block;
@@ -2717,12 +2688,12 @@
2717 2688 outline: none;
2718 2689 }
2719 2690 .eps-collapse__icon {
2720 2691 transition: all 150ms;
2721 - scale: calc(1 * var(--direction-multiplier)) 1;
2692 + transform: rotate(0deg);
2722 2693 }
2723 2694 .eps-collapse__content {
2724 - margin-block-start: 0.625rem;
2695 + margin-top: 0.625rem;
2725 2696 display: none;
2726 2697 }
2727 2698 .eps-collapse[data-open] .eps-collapse__content {
2728 2699 display: block;
@@ -2730,33 +2701,33 @@
2730 2701 .eps-collapse[data-open] .eps-collapse__icon {
2731 2702 transform: rotate(90deg);
2732 2703 }
2733 2704
2734 -.e-kit-library-promotion {
2735 - --e-kit-library-promotion-color: tints(600);
2705 +.e-kit-library-bottom-promotion {
2706 + --e-kit-library-bottom-promotion-color: tints(600);
2736 2707 }
2737 2708
2738 -.eps-theme-dark .e-kit-library-promotion {
2739 - --e-kit-library-promotion-color: dark-tints(400);
2709 +.eps-theme-dark .e-kit-library-bottom-promotion {
2710 + --e-kit-library-bottom-promotion-color: dark-tints(400);
2740 2711 }
2741 2712
2742 -.e-kit-library-promotion {
2713 +.e-kit-library-bottom-promotion {
2743 2714 width: 100%;
2744 2715 text-align: center;
2745 - margin-block-start: 1.875rem;
2746 - color: var(--e-kit-library-promotion-color);
2716 + margin-top: 1.875rem;
2717 + color: var(--e-kit-library-bottom-promotion-color);
2747 2718 }
2748 2719
2749 2720 .e-kit-library__error-screen {
2750 - margin-block-start: 2.75rem;
2721 + margin-top: 2.75rem;
2751 2722 }
2752 2723 .e-kit-library__error-screen-title {
2753 - margin-block-start: 2.75rem;
2754 - margin-block-end: 0;
2724 + margin-top: 2.75rem;
2725 + margin-bottom: 0;
2755 2726 }
2756 2727 .e-kit-library__error-screen-description {
2757 - margin-block-start: 1.5rem;
2758 - color: #69727D;
2728 + margin-top: 1.5rem;
2729 + color: #a4afb7;
2759 2730 text-align: center;
2760 2731 max-width: 520px;
2761 2732 }
2762 2733
@@ -2765,9 +2736,9 @@
2765 2736 transition: 0.3s all;
2766 2737 border-radius: 4px;
2767 2738 }
2768 2739 .e-kit-library__kit-favorite-actions--active {
2769 - color: #DC2626;
2740 + color: #b01b1b;
2770 2741 }
2771 2742 .e-kit-library__kit-favorite-actions--loading {
2772 2743 opacity: 50%;
2773 2744 cursor: default;
@@ -2772,49 +2743,41 @@
2772 2743 opacity: 50%;
2773 2744 cursor: default;
2774 2745 }
2775 2746 .e-kit-library__kit-favorite-actions:hover {
2776 - background-color: rgba(220, 38, 38, 0.1);
2747 + background-color: rgba(176, 27, 27, 0.1);
2777 2748 }
2778 2749
2779 2750 .e-kit-library__filter-indication {
2780 - margin-block-start: 1.5rem;
2751 + margin-top: 1.5rem;
2781 2752 display: flex;
2782 2753 align-items: center;
2783 2754 }
2784 2755 .e-kit-library__filter-indication-text {
2785 - margin-block-end: 0;
2756 + margin-bottom: 0;
2786 2757 display: flex;
2787 2758 align-items: center;
2788 2759 }
2789 2760 .e-kit-library__filter-indication-badge {
2790 - margin-inline-start: 0.3125rem;
2761 + margin-left: 0.3125rem;
2791 2762 display: flex;
2792 2763 align-items: center;
2793 2764 }
2794 2765 .e-kit-library__filter-indication-badge-remove {
2795 - margin-inline-start: 0.3125rem;
2766 + margin-left: 0.3125rem;
2796 2767 font-size: 0.875rem;
2797 2768 }
2798 2769 .e-kit-library__filter-indication-button {
2799 - margin-inline-start: 1.5rem;
2770 + margin-left: 1.5rem;
2800 2771 }
2801 2772
2773 +#eps-app-header-btn-apply,
2802 2774 #eps-app-header-btn-promotion,
2803 2775 #eps-app-header-btn-connect {
2804 - margin-inline-start: 0.625rem;
2805 - margin-inline-end: 0.625rem;
2776 + margin-left: 0.625rem;
2777 + margin-right: 0.625rem;
2806 2778 }
2807 2779
2808 -#eps-app-header-btn-apply {
2809 - margin-inline-start: 0.625rem;
2810 -}
2811 -
2812 -#eps-app-header-btn-download {
2813 - margin-inline-end: 1rem;
2814 - margin-inline-start: 1rem;
2815 -}
2816 -
2817 2780 .e-kit-library__apply-button {
2818 2781 display: flex;
2819 2782 align-items: center;
2820 2783 justify-content: center;
@@ -2821,18 +2784,21 @@
2821 2784 gap: 0.3125rem;
2822 2785 }
2823 2786
2824 2787 .e-kit-library__kit-item {
2825 - --e-kit-library-kit-item-overlay-promotion-button-background-color: #D5D8DC;
2788 + --e-kit-library-kit-item-overlay-promotion-button-background-color: #fcfcfc;
2826 2789 }
2827 2790
2828 2791 .eps-theme-dark .e-kit-library__kit-item {
2829 - --e-kit-library-kit-item-overlay-promotion-button-background-color: #515962;
2792 + --e-kit-library-kit-item-overlay-promotion-button-background-color: #404349;
2830 2793 }
2831 2794
2832 2795 .e-kit-library__kit-item-overlay {
2833 2796 height: 100%;
2834 2797 }
2798 +.e-kit-library__kit-item-overlay > *:first-child {
2799 + flex: 1;
2800 +}
2835 2801 .e-kit-library__kit-item-overlay-overview-button {
2836 2802 display: flex;
2837 2803 flex-direction: column;
2838 2804 align-items: center;
@@ -2842,9 +2808,9 @@
2842 2808 width: 100%;
2843 2809 }
2844 2810 .e-kit-library__kit-item-overlay-overview-button > i {
2845 2811 font-size: 2rem;
2846 - margin-block-end: 5px;
2812 + margin-bottom: 5px;
2847 2813 }
2848 2814 .e-kit-library__kit-item-overlay-overview-button > span {
2849 2815 font-size: 0.9rem;
2850 2816 }
@@ -2855,9 +2821,9 @@
2855 2821 align-items: center;
2856 2822 justify-content: center;
2857 2823 padding: 10px;
2858 2824 font-size: 13px;
2859 - color: #93003f;
2825 + color: #93003F;
2860 2826 background: var(--e-kit-library-kit-item-overlay-promotion-button-background-color);
2861 2827 }
2862 2828 .e-kit-library__kit-item-overlay-promotion-button > * {
2863 2829 margin: 0 3px;
@@ -2862,124 +2828,35 @@
2862 2828 .e-kit-library__kit-item-overlay-promotion-button > * {
2863 2829 margin: 0 3px;
2864 2830 }
2865 2831 .e-kit-library__kit-item-subscription-plan-badge {
2866 - --e-a-color-brand: #467FF7;
2867 -}
2868 -.e-kit-library__kit-item-subscription-plan-badge.promoted {
2869 - --e-a-color-brand: #92003B;
2870 -}
2871 -.e-kit-library__kit-item-subscription-plan-badge {
2872 2832 position: absolute;
2873 - inset-block-start: 0;
2874 - inset-inline-end: 0;
2833 + top: 0;
2834 + right: 0;
2875 2835 margin: 0.3125rem;
2876 - background-color: var(--e-a-color-brand);
2877 - color: #ffffff;
2836 + color: #fff;
2878 2837 text-transform: uppercase;
2879 2838 }
2880 -.e-kit-library__kit-item-header {
2881 - position: relative;
2882 -}
2883 -.e-kit-library__kit-item-lock-icon {
2884 - font-size: 14px;
2885 - margin-inline-end: 8px;
2886 - color: var(--card-headline-color);
2887 - cursor: pointer;
2888 -}
2889 -.e-kit-library__kit-item-actions-menu i {
2890 - font-size: 16px;
2891 -}
2892 -.e-kit-library__kit-item-actions-popover {
2893 - display: flex;
2894 - flex-direction: column;
2895 - align-items: start;
2896 - min-width: 0;
2897 - padding: 12px 0;
2898 - position: absolute;
2899 - inset-block-start: 25px;
2900 - inset-inline-start: 100%;
2901 - transform: translateX(calc(-100% * var(--direction-multiplier)));
2902 -}
2903 -.e-kit-library__kit-item-actions-popover-item {
2904 - display: flex;
2905 - height: 30px;
2906 - width: 100%;
2907 - align-items: center;
2908 - gap: 8px;
2909 - padding: 0 12px;
2910 - cursor: pointer;
2911 -}
2912 -.e-kit-library__kit-item-actions-popover-item i {
2913 - font-size: 16px;
2914 -}
2915 -.e-kit-library__kit-item-actions-popover-item:hover {
2916 - background-color: var(--e-a-bg-hover);
2917 -}
2918 -.e-kit-library__kit-item-actions-popover-item--danger {
2919 - color: var(--e-a-color-danger);
2920 -}
2921 -.e-kit-library__kit-item-actions-popover-item--danger:hover {
2922 - background-color: var(--e-a-bg-danger);
2923 -}
2924 -.e-kit-library__kit-item-actions-popover-item--danger i {
2925 - color: var(--e-a-color-danger);
2926 -}
2927 -.e-kit-library__kit-item-cloud-overlay {
2928 - height: 100%;
2929 - display: flex;
2930 - flex-direction: column;
2931 - align-items: center;
2932 - justify-content: center;
2933 -}
2934 -.e-kit-library__kit-item-cloud-overlay-import-button {
2935 - display: flex;
2936 - align-items: center;
2937 - justify-content: center;
2938 - padding: 8px 22px;
2939 - gap: 8px;
2940 -}
2941 -.e-kit-library__kit-item-cloud-overlay-import-button > i {
2942 - font-size: 20px;
2943 - font-weight: 600;
2944 -}
2945 -.e-kit-library__kit-item-cloud-overlay-import-button > span {
2946 - font-size: 15px;
2947 -}
2948 -.e-kit-library__kit-item-cloud-overlay i.eicon-lock {
2949 - font-size: 48px;
2950 - color: rgba(255, 255, 255, 0.8);
2951 - cursor: pointer;
2952 -}
2953 -.e-kit-library__kit-item--locked {
2954 - opacity: 0.6;
2955 -}
2956 -.e-kit-library__kit-item--locked .eps-card__image {
2957 - opacity: 0.7;
2958 -}
2959 -.e-kit-library__kit-item--locked .eps-card__overlay {
2960 - background-color: rgba(0, 0, 0, 0.5);
2961 -}
2962 2839
2963 2840 :root {
2964 - --e-kit-library-header-back-border: 1px solid var(--e-a-border-color);
2965 - --e-kit-library-header-back-color: #69727D;
2841 + --e-kit-library-header-back-border: 1px solid #f1f3f5;
2842 + --e-kit-library-header-back-color: #a4afb7;
2966 2843 }
2967 2844
2968 2845 .eps-theme-dark {
2969 - --e-kit-library-header-back-border: 1px solid #818A96;
2970 - --e-kit-library-header-back-color: #BABFC5;
2846 + --e-kit-library-header-back-border: 1px solid #64666a;
2847 + --e-kit-library-header-back-color: #b4b5b7;
2971 2848 }
2972 2849
2973 2850 .e-kit-library__header-back {
2974 2851 color: var(--e-kit-library-header-back-color);
2975 - padding-inline-end: 1.25rem;
2976 - padding-inline-start: 0.3125rem;
2852 + padding-right: 1.25rem;
2853 + padding-left: 0.3125rem;
2977 2854 display: inline-flex;
2978 2855 justify-content: center;
2979 2856 align-items: center;
2980 2857 height: 100%;
2981 - border-inline-end: var(--e-kit-library-header-back-border);
2858 + border-right: var(--e-kit-library-header-back-border);
2982 2859 }
2983 2860 .e-kit-library__header-back-container {
2984 2861 flex: 1;
2985 2862 height: 100%;
@@ -2984,9 +2861,9 @@
2984 2861 flex: 1;
2985 2862 height: 100%;
2986 2863 }
2987 2864 .e-kit-library__header-back .eps-icon {
2988 - scale: calc(1 * var(--direction-multiplier)) 1;
2865 + transform: rotate(0deg);
2989 2866 }
2990 2867
2991 2868 .e-kit-library__page-loader {
2992 2869 width: 100%;
@@ -2993,23 +2870,23 @@
2993 2870 height: 100%;
2994 2871 display: grid;
2995 2872 place-items: center;
2996 2873 font-size: 1.85rem;
2997 - color: #69727D;
2874 + color: #a4afb7;
2998 2875 }
2999 2876
3000 2877 .eps-search-input {
3001 - --eps-search-input-background-color: #D5D8DC;
3002 - --eps-search-input-background-color-focus: #ffffff;
3003 - --eps-search-input-color: #3f444b;
3004 - --eps-search-input-placeholder-color: #69727D;
2878 + --eps-search-input-background-color: #fcfcfc;
2879 + --eps-search-input-background-color-focus: #fff;
2880 + --eps-search-input-color: #556068;
2881 + --eps-search-input-placeholder-color: #a4afb7;
3005 2882 }
3006 2883
3007 2884 .eps-theme-dark .eps-search-input {
3008 - --eps-search-input-background-color: #515962;
3009 - --eps-search-input-background-color-focus: #69727D;
3010 - --eps-search-input-color: #BABFC5;
3011 - --eps-search-input-placeholder-color: #BABFC5;
2885 + --eps-search-input-background-color: #404349;
2886 + --eps-search-input-background-color-focus: #4c4f56;
2887 + --eps-search-input-color: #b4b5b7;
2888 + --eps-search-input-placeholder-color: #b4b5b7;
3012 2889 }
3013 2890
3014 2891 .eps-search-input {
3015 2892 width: 100%;
@@ -3042,11 +2919,11 @@
3042 2919 }
3043 2920 .eps-search-input__icon {
3044 2921 font-size: 1.25rem;
3045 2922 padding: 0.625rem;
3046 - color: #69727D;
2923 + color: #a4afb7;
3047 2924 position: absolute;
3048 - inset-block-start: 0;
2925 + top: 0;
3049 2926 inset-inline-start: 0;
3050 2927 height: 100%;
3051 2928 display: flex;
3052 2929 align-items: center;
@@ -3057,12 +2934,12 @@
3057 2934 }
3058 2935 .eps-search-input__clear-icon {
3059 2936 font-size: 0.875rem;
3060 2937 padding: 0.625rem;
3061 - color: #69727D;
2938 + color: #a4afb7;
3062 2939 position: absolute;
3063 - inset-block-start: 0;
3064 - inset-inline-end: 0;
2940 + top: 0;
2941 + right: 0;
3065 2942 height: 100%;
3066 2943 display: flex;
3067 2944 align-items: center;
3068 2945 justify-content: center;
@@ -3071,19 +2948,19 @@
3071 2948 font-size: 0.6875rem;
3072 2949 }
3073 2950
3074 2951 :root {
3075 - --eps-sort-select-select-background-color: #D5D8DC;
3076 - --eps-sort-select-select-color: #3f444b;
3077 - --eps-sort-select-button-background-color: #D5D8DC;
3078 - --eps-sort-select-button-border: 1px solid var(--e-a-border-color);
2952 + --eps-sort-select-select-background-color: #fcfcfc;
2953 + --eps-sort-select-select-color: #556068;
2954 + --eps-sort-select-button-background-color: #fcfcfc;
2955 + --eps-sort-select-button-border: 1px solid #f1f3f5;
3079 2956 }
3080 2957
3081 2958 .eps-theme-dark {
3082 - --eps-sort-select-select-background-color: #515962;
3083 - --eps-sort-select-select-color: #BABFC5;
3084 - --eps-sort-select-button-background-color: #515962;
3085 - --eps-sort-select-button-border: 1px solid #1f2124;
2959 + --eps-sort-select-select-background-color: #404349;
2960 + --eps-sort-select-select-color: #b4b5b7;
2961 + --eps-sort-select-button-background-color: #404349;
2962 + --eps-sort-select-button-border: 1px solid #26292C;
3086 2963 }
3087 2964
3088 2965 .eps-sort-select {
3089 2966 width: 100%;
@@ -3097,11 +2974,12 @@
3097 2974 .eps-sort-select__select-wrapper::after {
3098 2975 content: "\e8ad";
3099 2976 font-family: eicons;
3100 2977 position: absolute;
3101 - inset-inline-end: 0.625rem;
3102 - inset-block: 0;
3103 - color: #69727D;
2978 + right: 0.625rem;
2979 + top: 0;
2980 + bottom: 0;
2981 + color: #a4afb7;
3104 2982 display: flex;
3105 2983 align-items: center;
3106 2984 justify-content: center;
3107 2985 pointer-events: none;
@@ -3123,30 +3001,30 @@
3123 3001 }
3124 3002 .eps-sort-select__button {
3125 3003 padding: 0.75rem 0.75rem;
3126 3004 background: var(--eps-sort-select-button-background-color);
3127 - border-inline-start: var(--eps-sort-select-button-border);
3005 + border-left: var(--eps-sort-select-button-border);
3128 3006 line-height: 1;
3129 - color: #69727D;
3007 + color: #a4afb7;
3130 3008 }
3131 3009
3132 3010 .e-kit-library__tags-filter {
3133 - --e-kit-library-tags-filter-list-search-background-color: #ffffff;
3011 + --e-kit-library-tags-filter-list-search-background-color: #fff;
3134 3012 }
3135 3013
3136 3014 .eps-theme-dark .e-kit-library__tags-filter {
3137 - --e-kit-library-tags-filter-list-search-background-color: #515962;
3015 + --e-kit-library-tags-filter-list-search-background-color: #404349;
3138 3016 }
3139 3017
3140 3018 .e-kit-library__tags-filter {
3141 - margin-block-start: 2.75rem;
3019 + margin-top: 2.75rem;
3142 3020 }
3143 3021 .e-kit-library__tags-filter-list {
3144 - margin-block-end: 2.75rem;
3022 + margin-bottom: 2.75rem;
3145 3023 }
3146 3024 .e-kit-library__tags-filter-list .eps-collapse__title {
3147 - padding-inline-end: 1.875rem;
3148 - padding-inline-start: 1.875rem;
3025 + padding-right: 1.875rem;
3026 + padding-left: 1.875rem;
3149 3027 text-transform: uppercase;
3150 3028 }
3151 3029 .e-kit-library__tags-filter-list .eps-collapse__content {
3152 3030 margin: 0.3125rem 1.875rem;
@@ -3155,9 +3033,9 @@
3155 3033 max-height: 250px;
3156 3034 overflow: auto;
3157 3035 }
3158 3036 .e-kit-library__tags-filter-list-search {
3159 - margin-block-end: 0.625rem;
3037 + margin-bottom: 0.625rem;
3160 3038 }
3161 3039 .e-kit-library__tags-filter-list-search .eps-search-input {
3162 3040 background: var(--e-kit-library-tags-filter-list-search-background-color);
3163 3041 }
@@ -3167,9 +3045,9 @@
3167 3045 align-items: center;
3168 3046 font-weight: 500;
3169 3047 }
3170 3048 .e-kit-library__tags-filter-list-item input {
3171 - margin-inline-end: 0.3125rem;
3049 + margin-right: 0.3125rem;
3172 3050 }
3173 3051
3174 3052 .e-kit-library #eps-app-header-btn-refetch {
3175 3053 padding: 0;
@@ -3175,9 +3053,9 @@
3175 3053 padding: 0;
3176 3054 }
3177 3055
3178 3056 .e-kit-library-header-info-modal-container {
3179 - margin-block-end: 2.75rem;
3057 + margin-bottom: 2.75rem;
3180 3058 }
3181 3059
3182 3060 .e-kit-library__tooltip {
3183 3061 padding: 5px 12px;
@@ -3185,9 +3063,9 @@
3185 3063 background-color: #26292C;
3186 3064 font-size: 10px;
3187 3065 }
3188 3066 .e-kit-library__tooltip:before {
3189 - border-block-end-color: #26292C;
3067 + border-bottom-color: #26292C;
3190 3068 }
3191 3069
3192 3070 .e-kit-library__index-layout-container {
3193 3071 flex-grow: 1;
@@ -3194,32 +3072,26 @@
3194 3072 overflow-y: auto;
3195 3073 display: flex;
3196 3074 flex-direction: column;
3197 3075 }
3198 -.e-kit-library__index-layout-heading {
3076 +.e-kit-library__index-layout-top-area {
3199 3077 padding: 1.875rem 2.75rem;
3200 3078 position: sticky;
3201 - inset-block-start: -1px;
3079 + top: -1px;
3202 3080 width: 100%;
3203 3081 z-index: 2;
3204 3082 background-color: var(--app-background-color);
3205 3083 gap: 1.5rem;
3206 - align-items: center;
3207 3084 }
3208 -.e-kit-library__index-layout-heading-search, .e-kit-library__index-layout-heading-sort {
3085 +.e-kit-library__index-layout-top-area-search, .e-kit-library__index-layout-top-area-sort {
3209 3086 min-width: 265px;
3210 3087 }
3211 -.e-kit-library__index-layout-heading-search {
3088 +.e-kit-library__index-layout-top-area-search {
3212 3089 flex: 1;
3213 3090 }
3214 -.e-kit-library__index-layout-heading-quota {
3215 - display: flex;
3216 - align-items: center;
3217 - justify-content: flex-end;
3218 -}
3219 3091 .e-kit-library__index-layout-main {
3220 - padding-block-start: 0;
3221 - padding-block-end: 1.5rem;
3092 + padding-top: 0;
3093 + padding-bottom: 1.5rem;
3222 3094 overflow-y: hidden;
3223 3095 height: auto;
3224 3096 flex: 1 0 auto;
3225 3097 display: flex;
@@ -3225,56 +3097,19 @@
3225 3097 display: flex;
3226 3098 flex-direction: column;
3227 3099 justify-content: space-between;
3228 3100 }
3229 -.e-kit-library__index-layout-main.e-kit-library__connect-container {
3230 - justify-content: center;
3231 - align-items: center;
3232 -}
3233 -.e-kit-library__connect-button {
3234 - background-color: var(--e-a-btn-bg-primary);
3235 - color: var(--e-a-btn-color);
3236 - border-radius: 4px;
3237 - padding: 8px;
3238 -}
3239 -.e-kit-library__connect-button:hover {
3240 - opacity: 0.8;
3241 -}
3242 -.e-kit-library__upgrade-button {
3243 - background-color: var(--e-a-color-accent);
3244 - color: var(--e-a-color-txt-invert);
3245 - border-radius: 4px;
3246 - padding: 8px;
3247 -}
3248 -.e-kit-library__upgrade-button:hover {
3249 - opacity: 0.8;
3250 -}
3251 -.e-kit-library .eicon-library-cloud-connect,
3252 -.e-kit-library .eicon-library-subscription-upgrade {
3253 - font-size: 65px;
3254 -}
3255 -.e-kit-library .connect-badge {
3256 - color: #C00BB9;
3257 - margin-inline-start: 10px;
3258 -}
3259 -.e-kit-library .upgrade-badge {
3260 - color: #93003f;
3261 - border: 1px solid #93003f;
3262 - border-radius: 10px;
3263 - padding: 2px 6px;
3264 - margin-inline-start: 10px;
3265 -}
3266 3101
3267 3102 .e-kit-library__tags-filter {
3268 - --e-kit-library-item-sidebar-header-title-color: #515962;
3269 - --e-kit-library-item-sidebar-description-color: #515962;
3270 - --e-kit-library-item-information-text-color: #515962;
3103 + --e-kit-library-item-sidebar-header-title-color: #6d7882;
3104 + --e-kit-library-item-sidebar-description-color: #6d7882;
3105 + --e-kit-library-item-information-text-color: #6d7882;
3271 3106 }
3272 3107
3273 3108 .eps-theme-dark .e-kit-library__tags-filter {
3274 - --e-kit-library-item-sidebar-header-title-color: #BABFC5;
3275 - --e-kit-library-item-sidebar-description-color: #BABFC5;
3276 - --e-kit-library-item-information-text-color: #BABFC5;
3109 + --e-kit-library-item-sidebar-header-title-color: #b4b5b7;
3110 + --e-kit-library-item-sidebar-description-color: #b4b5b7;
3111 + --e-kit-library-item-information-text-color: #b4b5b7;
3277 3112 }
3278 3113
3279 3114 .e-kit-library__item-sidebar {
3280 3115 padding: 1.5rem 1.875rem;
@@ -3285,23 +3120,23 @@
3285 3120 justify-content: space-between;
3286 3121 }
3287 3122 .e-kit-library__item-sidebar-header-title {
3288 3123 color: var(--e-kit-library-item-sidebar-header-title-color);
3289 - margin-block-end: 0;
3124 + margin-bottom: 0;
3290 3125 }
3291 3126 .e-kit-library__item-sidebar-thumbnail {
3292 - margin-block-start: 1.5rem;
3127 + margin-top: 1.5rem;
3293 3128 box-shadow: 0 4px 10px var(--color-box-shadow-color);
3294 3129 }
3295 3130 .e-kit-library__item-sidebar-description {
3296 - margin-block-start: 1.5rem;
3131 + margin-top: 1.5rem;
3297 3132 color: var(--e-kit-library-item-sidebar-description-color);
3298 3133 }
3299 3134 .e-kit-library__item-sidebar-collapse-tags {
3300 - margin-block-start: 2.75rem;
3135 + margin-top: 2.75rem;
3301 3136 }
3302 3137 .e-kit-library__item-sidebar-collapse-info {
3303 - margin-block-start: 1.875rem;
3138 + margin-top: 1.875rem;
3304 3139 }
3305 3140 .e-kit-library__item-sidebar-tags-container {
3306 3141 gap: 0.625rem;
3307 3142 }
@@ -3307,24 +3142,24 @@
3307 3142 }
3308 3143 .e-kit-library__item-information-text {
3309 3144 font-size: 0.8125rem;
3310 3145 color: var(--e-kit-library-item-information-text-color);
3311 - margin-block-end: 0.3125rem;
3146 + margin-bottom: 0.3125rem;
3312 3147 }
3313 3148
3314 3149 .e-kit-library {
3315 - --e-kit-library-content-overview-group-title-color: #515962;
3150 + --e-kit-library-content-overview-group-title-color: #6d7882;
3316 3151 }
3317 3152
3318 3153 .eps-theme-dark .e-kit-library {
3319 - --e-kit-library-content-overview-group-title-color: #BABFC5;
3154 + --e-kit-library-content-overview-group-title-color: #b4b5b7;
3320 3155 }
3321 3156
3322 3157 .e-kit-library__content-overview-group-item {
3323 - margin-block-end: 2.75rem;
3158 + margin-bottom: 2.75rem;
3324 3159 }
3325 3160 .e-kit-library__content-overview-group-title {
3326 - margin-block-end: 1.875rem;
3161 + margin-bottom: 1.875rem;
3327 3162 color: var(--e-kit-library-content-overview-group-title-color);
3328 3163 }
3329 3164
3330 3165 .e-kit-library__preview-responsive-controls {
@@ -3331,24 +3166,24 @@
3331 3166 width: auto;
3332 3167 }
3333 3168 .e-kit-library__preview-responsive-controls-item {
3334 3169 margin: 0 0.3125rem;
3335 - color: #69727D;
3170 + color: #a4afb7;
3336 3171 padding: 0.3125rem;
3337 3172 }
3338 3173 .e-kit-library__preview-responsive-controls-item:hover {
3339 - background: rgba(37, 99, 235, 0.1);
3174 + background: rgba(88, 208, 245, 0.1);
3340 3175 border-radius: 3px;
3341 3176 transition: all 0.3s;
3342 3177 }
3343 3178 .e-kit-library__preview-responsive-controls-item--active {
3344 - color: #2563EB;
3179 + color: #58d0f5;
3345 3180 }
3346 3181
3347 3182 .e-kit-library__preview-loader {
3348 3183 position: absolute;
3349 - inset-block-start: 0;
3350 - inset-inline-start: 0;
3184 + top: 0;
3185 + left: 0;
3351 3186 z-index: 0;
3352 3187 }
3353 3188 .e-kit-library__preview-iframe {
3354 3189 border: none;
@@ -3361,9 +3196,9 @@
3361 3196 z-index: 1;
3362 3197 }
3363 3198
3364 3199 .e-app-collapse {
3365 - --e-app-collapse-icon-color: #515962;
3200 + --e-app-collapse-icon-color: #6d7882;
3366 3201 }
3367 3202 .e-app-collapse-toggle {
3368 3203 position: relative;
3369 3204 }
@@ -3376,10 +3211,10 @@
3376 3211 align-items: center;
3377 3212 justify-content: center;
3378 3213 font-size: 0.875rem;
3379 3214 position: absolute;
3380 - inset-block-start: 50%;
3381 - inset-inline-end: var(--e-app-collapse-toggle-icon-spacing);
3215 + top: 50%;
3216 + right: var(--e-app-collapse-toggle-icon-spacing);
3382 3217 transform: translateY(-50%);
3383 3218 }
3384 3219 .e-app-collapse-toggle__icon:before {
3385 3220 transition: all 0.2s linear;
@@ -3394,42 +3229,41 @@
3394 3229 display: block;
3395 3230 }
3396 3231
3397 3232 [dir=rtl] .e-app-collapse-toggle__icon {
3398 - inset-inline-start: var(--e-app-collapse-toggle-icon-spacing);
3399 - inset-inline-end: initial;
3233 + right: initial;
3234 + left: var(--e-app-collapse-toggle-icon-spacing);
3400 3235 }
3401 3236
3402 3237 .eps-theme-dark .e-app-collapse {
3403 - --e-app-collapse-icon-color: #BABFC5;
3238 + --e-app-collapse-icon-color: #b4b5b7;
3404 3239 }
3405 3240
3406 3241 .e-app-import-plugins {
3407 - --e-app-import-plugins-selection-section-heading-color: #515962;
3408 - padding-block-end: 1.5rem;
3242 + --e-app-import-plugins-selection-section-heading-color: #6d7882;
3243 + padding-bottom: 1.5rem;
3409 3244 }
3410 3245 .e-app-import-plugins__section {
3411 - margin-block-start: 1.875rem;
3246 + margin-top: 1.875rem;
3412 3247 }
3413 3248 .e-app-import-plugins__section-heading {
3414 3249 color: var(--e-app-import-plugins-selection-section-heading-color);
3415 - margin-block-end: 1rem;
3250 + margin-bottom: 1rem;
3416 3251 }
3417 3252 .e-app-import-plugins__versions-notice {
3418 - margin-block-end: 0.75rem;
3253 + margin-bottom: 0.75rem;
3419 3254 }
3420 3255
3421 3256 .eps-theme-dark .e-app-import-plugins {
3422 - --e-app-import-plugins-selection-section-heading-color: #BABFC5;
3257 + --e-app-import-plugins-selection-section-heading-color: #b4b5b7;
3423 3258 }
3424 3259
3425 3260 .eps-table {
3426 - --eps-table-body-color: #3f444b;
3261 + --eps-table-body-color: #556068;
3262 + --eps-table-body-background-color: #fff;
3427 3263 border-spacing: 0 2px;
3428 3264 table-layout: fixed;
3429 3265 width: 100%;
3430 - border: 1px solid var(--e-a-border-color);
3431 - border-radius: 0.1875rem;
3432 3266 }
3433 3267 .eps-table__checkboxes-column {
3434 3268 width: 1.875rem;
3435 3269 }
@@ -3442,14 +3276,11 @@
3442 3276 }
3443 3277 .eps-table__head .eps-table__cell {
3444 3278 text-align: start;
3445 3279 }
3446 -.eps-table__row {
3447 - border-block-end: 1px solid var(--e-a-border-color);
3280 +.eps-table__body .eps-table__row {
3281 + background-color: var(--eps-table-body-background-color);
3448 3282 }
3449 -.eps-table__row:last-child {
3450 - border-block-end: none;
3451 -}
3452 3283 .eps-table__body .eps-table__cell:first-child {
3453 3284 border-radius: 0.1875rem 0 0 0.1875rem;
3454 3285 }
3455 3286 .eps-table__body .eps-table__cell:last-child {
@@ -3455,13 +3286,15 @@
3455 3286 .eps-table__body .eps-table__cell:last-child {
3456 3287 border-radius: 0 0.1875rem 0.1875rem 0;
3457 3288 }
3458 3289 .eps-table--selection .eps-table__cell:first-child {
3459 - padding-inline-end: 0;
3290 + -webkit-padding-end: 0;
3291 + padding-inline-end: 0;
3460 3292 }
3461 3293
3462 3294 .eps-theme-dark .eps-table {
3463 - --eps-table-body-color: #BABFC5;
3295 + --eps-table-body-color: #b4b5b7;
3296 + --eps-table-body-background-color: #404349;
3464 3297 }
3465 3298
3466 3299 [dir=rtl] .eps-table__body [dir=rtl] .eps-table__cell:first-child {
3467 3300 border-radius: 0 0.1875rem 0.1875rem 0;
@@ -3470,35 +3303,35 @@
3470 3303 border-radius: 0.1875rem 0 0 0.1875rem;
3471 3304 }
3472 3305
3473 3306 .e-app-import-plugins-pro-banner {
3474 - --e-app-import-plugins-pro-banner-heading-color: #3f444b;
3475 - --e-app-import-plugins-pro-banner-description-color: #515962;
3476 - margin-block-end: 1.875rem;
3307 + --e-app-import-plugins-pro-banner-heading-color: #556068;
3308 + --e-app-import-plugins-pro-banner-description-color: #6d7882;
3309 + margin-bottom: 1.875rem;
3477 3310 }
3478 3311 .e-app-import-plugins-pro-banner__heading {
3479 3312 color: var(--e-app-import-plugins-pro-banner-heading-color);
3480 - margin-block-end: 0.625rem;
3313 + margin-bottom: 0.625rem;
3481 3314 }
3482 3315 .e-app-import-plugins-pro-banner__description {
3483 3316 color: var(--e-app-import-plugins-pro-banner-description-color);
3484 - margin-block-end: 0;
3317 + margin-bottom: 0;
3485 3318 }
3486 3319
3487 3320 .eps-theme-dark .e-app-import-plugins-pro-banner {
3488 - --e-app-import-plugins-pro-banner-heading-color: #9DA5AE;
3489 - --e-app-import-plugins-pro-banner-description-color: #BABFC5;
3321 + --e-app-import-plugins-pro-banner-heading-color: #7d7e82;
3322 + --e-app-import-plugins-pro-banner-description-color: #b4b5b7;
3490 3323 }
3491 3324
3492 3325 .e-app-export-plugins {
3493 - padding-block-end: 1.25rem;
3326 + padding-bottom: 1.25rem;
3494 3327 }
3495 3328
3496 3329 .e-app-import-content {
3497 - padding-block-end: 1.25rem;
3330 + padding-bottom: 1.25rem;
3498 3331 }
3499 3332 .e-app-import-content__plugins-notice {
3500 - margin-block-end: 1.25rem;
3333 + margin-bottom: 1.25rem;
3501 3334 }
3502 3335
3503 3336 .e-app-import-plugins-activation__installing-plugins {
3504 3337 padding: 0.625rem 0;
@@ -3503,21 +3336,22 @@
3503 3336 .e-app-import-plugins-activation__installing-plugins {
3504 3337 padding: 0.625rem 0;
3505 3338 }
3506 3339 .e-app-import-plugins-activation__plugin-name {
3507 - margin-inline-start: 0.5rem;
3340 + -webkit-margin-start: 0.5rem;
3341 + margin-inline-start: 0.5rem;
3508 3342 }
3509 3343 .e-app-import-plugins-activation__plugin-status-item {
3510 - margin-block-end: 0.75rem;
3344 + margin-bottom: 0.75rem;
3511 3345 }
3512 3346
3513 3347 .e-app-import-export-plugins-table__cell-content {
3514 - margin-block-end: 0;
3348 + margin-bottom: 0;
3515 3349 text-transform: capitalize;
3516 3350 }
3517 3351
3518 3352 .e-app-import-export-loader {
3519 - --e-app-import-export-loader-color: #818A96;
3353 + --e-app-import-export-loader-color: #c2cbd2;
3520 3354 color: var(--e-app-import-export-loader-color);
3521 3355 font-size: 50px;
3522 3356 }
3523 3357 .e-app-import-export-loader.eicon-loading {
@@ -3524,195 +3358,480 @@
3524 3358 font-size: 1.85rem;
3525 3359 }
3526 3360 .e-app-import-export-loader--absolute-center {
3527 3361 position: absolute;
3528 - inset-block-start: 50%;
3529 - inset-inline-start: 50%;
3362 + top: 50%;
3363 + left: 50%;
3530 3364 transform: translateX(-50%) translateY(-50%);
3531 3365 }
3532 3366
3533 3367 .eps-theme-dark .e-app-import-export-loader {
3534 - --e-app-import-export-loader-color: #818A96;
3368 + --e-app-import-export-loader-color: #64666a;
3535 3369 }
3536 3370
3537 3371 .e-app-import-export-message-banner {
3538 - --e-app-import-export-message-banner-heading-color: #3f444b;
3539 - --e-app-import-export-message-banner-description-color: #515962;
3540 - margin-block-end: 1.875rem;
3372 + --e-app-import-export-message-banner-heading-color: #556068;
3373 + --e-app-import-export-message-banner-description-color: #6d7882;
3374 + margin-bottom: 1.875rem;
3541 3375 }
3542 3376 .e-app-import-export-message-banner__heading {
3543 3377 color: var(--e-app-import-export-message-banner-heading-color);
3544 - margin-block-end: 0.625rem;
3378 + margin-bottom: 0.625rem;
3545 3379 }
3546 3380 .e-app-import-export-message-banner__description {
3547 3381 color: var(--e-app-import-export-message-banner-description-color);
3548 - margin-block-end: 0;
3382 + margin-bottom: 0;
3549 3383 }
3550 3384
3551 3385 .eps-theme-dark .e-app-import-export-message-banner {
3552 - --e-app-import-export-message-banner-heading-color: #9DA5AE;
3553 - --e-app-import-export-message-banner-description-color: #BABFC5;
3386 + --e-app-import-export-message-banner-heading-color: #7d7e82;
3387 + --e-app-import-export-message-banner-description-color: #b4b5b7;
3554 3388 }
3555 3389
3556 3390 .e-app-import-connect-pro-notice {
3557 - margin-block-end: 1.25rem;
3391 + margin-bottom: 1.25rem;
3558 3392 }
3559 3393
3560 3394 .e-app-import-failed-plugins-notice {
3561 - margin-block-end: 1.25rem;
3395 + margin-bottom: 1.25rem;
3562 3396 }
3563 3397
3564 -.e-app-export-actions-container {
3398 +.e-onboarding {
3399 + font-family: "DM Sans", "Roboto", sans-serif;
3400 +}
3401 +.e-onboarding .eps-app__main {
3402 + justify-content: center;
3403 + overflow-y: auto;
3404 +}
3405 +.e-onboarding__content {
3406 + max-width: 1135px;
3407 + padding: initial;
3408 + margin: 2.75rem;
3409 + overflow-y: initial;
3410 +}
3411 +.e-onboarding__checkbox-label {
3565 3412 display: flex;
3566 - gap: 15px;
3413 + line-height: 18px;
3414 + margin-bottom: 27px;
3415 +}
3416 +.e-onboarding__checkbox-input {
3417 + -webkit-margin-end: 14px;
3418 + margin-inline-end: 14px;
3419 + width: 16px;
3420 + height: 16px;
3421 + border-color: #69727D;
3422 + border-radius: 2px;
3423 +}
3424 +.e-onboarding__checkbox-input:checked {
3425 + background-color: #525861;
3426 +}
3427 +.e-onboarding__checkbox-input:checked::after {
3428 + margin-bottom: 15%;
3429 + width: 6px;
3430 + height: 9px;
3431 + border-width: 0 2px 2px 0;
3432 +}
3433 +.e-onboarding__feature-list {
3434 + margin-bottom: 40px;
3435 +}
3436 +.e-onboarding__text-input {
3437 + font-size: 14px;
3438 + width: 325px;
3439 + padding: 12px 16px;
3440 + color: #69727D;
3441 + border: 1px solid #9EA5AD;
3442 +}
3443 +.e-onboarding__text-input:focus-visible {
3444 + outline: initial;
3445 + border: 1px solid #3A3F45;
3446 +}
3447 +.e-onboarding__text-input::-moz-placeholder {
3448 + color: #C2C7CC;
3449 +}
3450 +.e-onboarding__text-input::placeholder {
3451 + color: #C2C7CC;
3452 +}
3453 +.e-onboarding__footnote {
3454 + margin-top: 24px;
3455 + width: 325px;
3456 + text-align: center;
3457 +}
3458 +.e-onboarding__footnote a {
3459 + text-decoration: underline;
3460 + color: #3A3F45;
3461 +}
3462 +
3463 +#e-app ~ #__wp-uploader-id-2 .media-modal {
3464 + max-width: 1024px;
3465 + max-height: 768px;
3466 + margin: auto;
3467 +}
3468 +
3469 +.e-onboarding__page-content {
3470 + margin-bottom: 70px;
3471 +}
3472 +.e-onboarding__page-content-start {
3473 + max-width: 675px;
3474 + text-align: start;
3475 + flex-basis: 555px;
3476 + align-self: start;
3477 +}
3478 +.e-onboarding__page-content-end {
3479 + min-width: 440px;
3480 + max-width: 540px;
3481 +}
3482 +.e-onboarding__page-content-end img {
3567 3483 width: 100%;
3568 - justify-content: flex-end;
3569 3484 }
3485 +.e-onboarding__page-content-section-title {
3486 + font-family: "DM Serif Display", serif;
3487 + font-size: 36px;
3488 + font-weight: 700;
3489 + color: #0C0D0E;
3490 +}
3491 +.e-onboarding__page-content-section-text {
3492 + font-size: 18px;
3493 + color: #3A3F45;
3494 +}
3570 3495
3571 -.e-kit-library__quota-bar {
3496 +.e-onboarding__header-logo .eps-app__logo {
3497 + background-color: #0C0D0E;
3498 + color: #ffffff;
3499 + width: 1.3rem;
3500 + height: 1.3rem;
3501 + line-height: 1.3rem;
3502 + font-size: 0.48rem;
3503 +}
3504 +.e-onboarding__header-logo .eps-app__logo:not(:last-child) {
3505 + -webkit-margin-end: 7px;
3506 + margin-inline-end: 7px;
3507 +}
3508 +.e-onboarding__header-logo img {
3509 + width: 104px;
3510 +}
3511 +.e-onboarding__header .eps-app__header-btn {
3572 3512 display: flex;
3573 3513 align-items: center;
3514 + font-size: 13px;
3574 3515 }
3575 -.e-kit-library__quota-bar__container {
3516 +.e-onboarding__header .eps-app__header-btn .eps-icon:not(:last-child) {
3517 + -webkit-margin-end: 7px;
3518 + margin-inline-end: 7px;
3519 +}
3520 +.e-onboarding__header .eps-button {
3521 + color: #0C0D0E;
3522 +}
3523 +.e-onboarding__header .eps-button__go-pro-btn {
3524 + background-color: #871A40;
3525 + color: #ffffff;
3526 + padding: 4px 8px;
3527 + border-radius: 4px;
3528 + font-weight: 700;
3529 + font-size: 12px;
3530 + transition: 0.5s;
3531 +}
3532 +.e-onboarding__header .eps-button__go-pro-btn:hover {
3533 + background: #b22254;
3534 +}
3535 +
3536 +.e-onboarding__go-pro {
3537 + width: 288px;
3538 + font-size: 12px;
3539 +}
3540 +.e-onboarding__go-pro-title {
3541 + font-size: 18px;
3542 + font-weight: 700;
3543 + color: #871A40;
3544 +}
3545 +.e-onboarding__go-pro-cta {
3546 + display: inline-block;
3547 + color: #871A40;
3548 + padding: 9px;
3549 + border: 1px solid #871A40;
3550 +}
3551 +.e-onboarding__go-pro-cta.e-onboarding__button {
3552 + font-size: 14px;
3553 +}
3554 +.e-onboarding__go-pro-paragraph:not(:last-child) {
3555 + margin-bottom: 20px;
3556 +}
3557 +.e-onboarding__go-pro-already-have {
3558 + text-decoration: underline;
3559 +}
3560 +
3561 +.e-onboarding__progress-bar {
3576 3562 display: flex;
3577 - flex-direction: column;
3578 - gap: 8px;
3579 - min-width: 230px;
3563 + justify-content: center;
3564 + margin-bottom: 125px;
3580 3565 }
3581 -.e-kit-library__quota-bar__header {
3566 +.e-onboarding__progress-bar-item {
3582 3567 display: flex;
3583 - justify-content: space-between;
3584 3568 align-items: center;
3569 + color: #69727D;
3570 + font-size: 0.75rem;
3585 3571 }
3586 -.e-kit-library__quota-bar__label {
3587 - color: var(--body-color);
3588 - font-weight: 400;
3589 - white-space: nowrap;
3590 - font-size: 12px;
3572 +.e-onboarding__progress-bar-item-icon {
3573 + display: inline-block;
3574 + font-family: "DM Serif Display", serif;
3575 + text-align: center;
3576 + width: 1.1rem;
3577 + height: 1.1rem;
3578 + line-height: 1rem;
3579 + font-size: 0.75rem;
3580 + font-weight: bold;
3581 + border-radius: 50%;
3582 + border: 1px solid #69727D;
3583 + -webkit-margin-end: 8px;
3584 + margin-inline-end: 8px;
3585 + flex-shrink: 0;
3591 3586 }
3592 -.e-kit-library__quota-bar__progress-container {
3593 - width: 100%;
3594 - height: 4px;
3595 - overflow: hidden;
3596 - position: relative;
3587 +.e-onboarding__progress-bar-item:not(:last-child) {
3588 + -webkit-margin-end: 22px;
3589 + margin-inline-end: 22px;
3597 3590 }
3598 -.e-kit-library__quota-bar__progress-container--empty {
3599 - background-color: #F0ABFC;
3591 +.e-onboarding__progress-bar-item:not(:last-child):after {
3592 + font-family: "eicons";
3593 + -webkit-margin-start: 22px;
3594 + margin-inline-start: 22px;
3595 + content: "\e89e";
3600 3596 }
3601 -.e-kit-library__quota-bar__progress-container--normal {
3602 - background-color: #F0ABFC;
3597 +.e-onboarding__progress-bar-item--active {
3598 + color: #040080;
3603 3599 }
3604 -.e-kit-library__quota-bar__progress-container--warning {
3605 - background-color: rgb(251.0236220472, 216.4291338583, 157.9763779528);
3600 +.e-onboarding__progress-bar-item--active .e-onboarding__progress-bar-item-icon, .e-onboarding__progress-bar-item--completed .e-onboarding__progress-bar-item-icon {
3601 + color: #ffffff;
3602 + border-color: #040080;
3603 + background-color: #040080;
3606 3604 }
3607 -.e-kit-library__quota-bar__progress-container--alert {
3608 - background: #93003f;
3605 +.e-onboarding__progress-bar-item--skipped, .e-onboarding__progress-bar-item--completed {
3606 + cursor: pointer;
3609 3607 }
3610 -.e-kit-library__quota-bar__progress-bar {
3611 - height: 100%;
3612 - transition: width 0.3s ease;
3608 +.e-onboarding__progress-bar-item--skipped .e-onboarding__progress-bar-item-icon {
3609 + color: #ffffff;
3610 + background-color: #69727D;
3613 3611 }
3614 -.e-kit-library__quota-bar__progress-bar--empty {
3615 - background: transparent;
3612 +
3613 +.e-onboarding__button {
3614 + font-size: 18px;
3615 + cursor: pointer;
3616 3616 }
3617 -.e-kit-library__quota-bar__progress-bar--normal {
3618 - background: #D004D4;
3617 +.e-onboarding__button-action {
3618 + color: #46F2B6;
3619 + background-color: #040080;
3620 + width: 325px;
3621 + padding: 15px 15px;
3622 + text-align: center;
3619 3623 }
3620 -.e-kit-library__quota-bar__progress-bar--warning {
3621 - background: #F59E0B;
3624 +.e-onboarding__button-skip {
3625 + color: #6A727C;
3626 + padding: 15px 29px;
3622 3627 }
3623 -.e-kit-library__quota-bar__progress-bar--alert {
3624 - background: #93003f;
3628 +.e-onboarding__button--disabled {
3629 + pointer-events: none;
3630 + background-color: #D5D8DC;
3631 + color: #9EA5AD;
3625 3632 }
3626 -.e-kit-library__quota-bar__upgrade-message {
3633 +.e-onboarding__button--disabled:hover {
3634 + cursor: progress;
3635 +}
3636 +.e-onboarding__button--processing {
3637 + pointer-events: none;
3638 + filter: brightness(90%);
3639 +}
3640 +
3641 +.e-onboarding__card {
3642 + border: 1px solid #3A3F45;
3643 + border-radius: 8px;
3644 + padding: 40px 40px;
3645 + background-color: #ffffff;
3646 + cursor: pointer;
3647 + flex-grow: 1;
3627 3648 display: flex;
3649 + flex-direction: column;
3628 3650 align-items: center;
3629 - gap: 4px;
3630 3651 }
3631 -.e-kit-library__quota-bar__upgrade-link {
3632 - color: #93003f;
3633 - text-decoration: underline;
3634 - cursor: pointer;
3652 +.e-onboarding__card-image, .e-onboarding__card-text {
3653 + width: 345px;
3654 +}
3655 +.e-onboarding__card-image {
3656 + margin-bottom: 44px;
3657 +}
3658 +.e-onboarding__card-text {
3659 + font-size: 20px;
3660 + font-weight: 700;
3661 + text-align: center;
3662 + color: #0C0D0E;
3663 +}
3664 +.e-onboarding__card:hover {
3665 + box-shadow: 4px 4px 0 0 #000000;
3666 +}
3667 +.e-onboarding__card:active {
3668 + box-shadow: initial;
3669 +}
3670 +
3671 +.e-onboarding__checklist {
3672 + -webkit-padding-start: 0;
3673 + padding-inline-start: 0;
3674 +}
3675 +.e-onboarding__checklist-item {
3676 + display: flex;
3677 + align-items: center;
3635 3678 font-size: 12px;
3636 - font-weight: 400;
3679 + margin-bottom: 12px;
3637 3680 }
3638 -.e-kit-library__quota-bar__upgrade-link:hover {
3639 - opacity: 0.8;
3681 +.e-onboarding__checklist-item .eicon-check-circle {
3682 + -webkit-margin-end: 9px;
3683 + margin-inline-end: 9px;
3684 + font-size: 16px;
3685 + font-weight: 600;
3640 3686 }
3641 -.e-kit-library__quota-bar__count {
3642 - color: var(--body-color);
3643 - white-space: nowrap;
3644 - font-size: 12px;
3687 +
3688 +.e-onboarding__notice {
3689 + display: inline-block;
3690 + padding: 12px 14px;
3691 + margin-bottom: 16px;
3692 + color: #3A3F45;
3645 3693 }
3694 +.e-onboarding__notice--error {
3695 + background-color: #FDE8EC;
3696 +}
3697 +.e-onboarding__notice--error i {
3698 + font-size: 16px;
3699 + color: #B92136;
3700 +}
3701 +.e-onboarding__notice--success {
3702 + background-color: #ECF9F2;
3703 +}
3704 +.e-onboarding__notice--success i {
3705 + color: #117740;
3706 +}
3707 +.e-onboarding__notice i {
3708 + -webkit-margin-end: 14px;
3709 + margin-inline-end: 14px;
3710 +}
3711 +.e-onboarding__notice-empty-spacer {
3712 + height: 61px;
3713 +}
3646 3714
3647 -:root {
3648 - --text-secondary: #3F444B;
3715 +.e-onboarding__page-account .e-onboarding__checkbox-label {
3716 + margin-top: 50px;
3649 3717 }
3650 3718
3651 -.e-kit-library__quota-notification {
3719 +.e-onboarding__action-button-text {
3720 + -webkit-margin-start: 10px;
3721 + margin-inline-start: 10px;
3722 +}
3723 +
3724 +.e-onboarding__site-name-input {
3725 + margin-top: 80px;
3726 +}
3727 +
3728 +.e-onboarding__page-siteLogo .e-app-upload-file__button {
3729 + color: #040080;
3730 + border-color: #040080;
3731 +}
3732 +.e-onboarding__drop-zone {
3733 + margin-top: 3rem;
3734 +}
3735 +.e-onboarding .eps-display-3 {
3736 + font-size: 16px;
3737 + margin-bottom: 0.5rem;
3738 +}
3739 +.e-onboarding .e-app-upload-file__button {
3740 + max-width: 198px;
3741 + margin: 0 auto;
3742 +}
3743 +.e-onboarding .e-app-drop-zone__secondary-text {
3744 + font-size: 14px;
3745 +}
3746 +.e-onboarding__logo-container {
3747 + position: relative;
3748 + margin-top: 3rem;
3749 + height: 220px;
3750 + width: -moz-fit-content;
3751 + width: fit-content;
3652 3752 display: flex;
3653 - align-items: flex-start;
3654 - justify-content: space-between;
3655 - padding: 16px 20px;
3656 - margin: 0 44px 30px;
3657 - border-radius: 4px;
3753 + align-items: center;
3754 + min-width: 220px;
3658 3755 }
3659 -.e-kit-library__quota-notification--warning {
3660 - background-color: #FBF1E6;
3661 - color: #3f444b;
3756 +.e-onboarding__logo-container img {
3757 + height: auto;
3758 + max-height: 100%;
3759 + width: auto;
3662 3760 }
3663 -.e-kit-library__quota-notification--alert {
3664 - background-color: #FDECEC;
3665 - color: #3f444b;
3761 +.e-onboarding__logo-remove {
3762 + position: absolute;
3763 + right: 8px;
3764 + top: 5px;
3666 3765 }
3667 -.e-kit-library__quota-notification__content {
3668 - display: flex;
3669 - align-items: flex-start;
3670 - gap: 12px;
3671 - flex: 1;
3766 +.e-onboarding__logo-remove i {
3767 + font-size: 16px;
3768 + width: 15px;
3672 3769 }
3673 -.e-kit-library__quota-notification__icon {
3674 - font-size: 18px;
3675 - margin-top: 1px;
3676 - flex-shrink: 0;
3770 +.e-onboarding__logo-remove:hover {
3771 + cursor: pointer;
3677 3772 }
3678 -.e-kit-library__quota-notification__icon.eicon-warning-full {
3679 - color: #F59E0B;
3773 +.e-onboarding__is-uploading {
3774 + visibility: hidden;
3680 3775 }
3681 -.e-kit-library__quota-notification__icon.eicon-alert {
3682 - color: #DC2626;
3776 +
3777 +.e-onboarding__page-goodToGo .e-onboarding__page-content-section-title,
3778 +.e-onboarding__page-goodToGo .e-onboarding__page-content-section-text {
3779 + text-align: center;
3683 3780 }
3684 -.e-kit-library__quota-notification__message {
3685 - flex: 1;
3686 - line-height: 1.5;
3687 - font-size: 13px;
3781 +.e-onboarding__cards-grid.e-onboarding__page-content {
3782 + margin-top: 48px;
3783 + margin-bottom: 48px;
3688 3784 }
3689 -.e-kit-library__quota-notification__message span {
3690 - color: var(--text-secondary);
3691 - font-size: 13px;
3785 +.e-onboarding__cards-grid .e-onboarding__card {
3786 + max-width: 555px;
3692 3787 }
3693 -.e-kit-library__quota-notification__action-link {
3694 - color: inherit;
3695 - text-decoration: underline;
3696 - font-size: 13px;
3697 - font-weight: 400;
3788 +.e-onboarding__cards-grid .e-onboarding__card:not(:last-child) {
3789 + -webkit-margin-end: 20px;
3790 + margin-inline-end: 20px;
3698 3791 }
3699 -.e-kit-library__quota-notification__action-link:hover {
3700 - opacity: 0.8;
3792 +.e-onboarding__good-to-go-footer {
3793 + justify-content: end;
3701 3794 }
3702 -.e-kit-library__quota-notification__dismiss {
3703 - background: none;
3704 - border: none;
3705 - cursor: pointer;
3706 - padding: 0;
3707 - margin-inline-start: 12px;
3708 - color: inherit;
3709 - opacity: 0.7;
3710 - flex-shrink: 0;
3795 +
3796 +.e-onboarding__upload-pro {
3797 + flex-direction: row;
3798 + justify-content: center;
3799 + font-family: "DM Sans", "Roboto", sans-serif;
3800 + text-align: center;
3711 3801 }
3712 -.e-kit-library__quota-notification__dismiss:hover {
3713 - opacity: 1;
3802 +.e-onboarding__upload-pro .eps-app__content {
3803 + overflow-y: hidden;
3804 + max-width: 1113px;
3805 + padding: 30px;
3714 3806 }
3715 -.e-kit-library__quota-notification__dismiss i {
3716 - font-size: 14px;
3807 +.e-onboarding__upload-pro-drop-zone {
3808 + margin-bottom: 24px;
3809 +}
3810 +.e-onboarding__upload-pro-drop-zone h1 {
3811 + font-family: "Source Serif Pro", "Roboto", sans-serif;
3812 +}
3813 +.e-onboarding__upload-pro-drop-zone .e-app-drag-drop {
3814 + padding: 48px;
3815 +}
3816 +.e-onboarding__upload-pro-drop-zone .eps-display-3,
3817 +.e-onboarding__upload-pro-drop-zone .e-app-drop-zone__text,
3818 +.e-onboarding__upload-pro-drop-zone .e-app-drop-zone__secondary-text {
3819 + margin-bottom: 12px;
3820 +}
3821 +.e-onboarding__upload-pro-drop-zone .e-app-upload-file__button {
3822 + background-color: #040080;
3823 + color: #46F2B6;
3824 + padding: 14px 40px;
3825 + border-color: #040080;
3826 +}
3827 +.e-onboarding__upload-pro-get-file {
3828 + font-size: 12px;
3829 + margin-top: 24px;
3830 +}
3831 +.e-onboarding__upload-pro-get-file a {
3832 + text-decoration: underline;
3833 +}
3834 +.e-onboarding__upload-pro .e-onboarding__notice {
3835 + margin-bottom: 0;
3717 3836 }
3718 3837 /*# sourceMappingURL=app.css.map */