PluginProbe
Master Addons for Elementor – Elementor Addons, Widgets, Mega Menu Builder, Popup Builder, Widget Builder & Template Kits / 3.2.3
Master Addons for Elementor – Elementor Addons, Widgets, Mega Menu Builder, Popup Builder, Widget Builder & Template Kits v3.2.3
3.2.2 3.2.3 3.2.1 3.2.0 3.1.9 3.1.8 3.1.7 3.1.6 3.1.5 3.1.4 3.1.3 3.1.2 3.1.1 3.1.0 3.0.9 trunk 1.0.6 1.0.7 1.0.8 1.0.9 1.1.0 1.1.1 1.1.3 1.1.4 1.1.5 All 174 releases
master-addons / assets / css / admin / editor.css

editor.css in Master Addons for Elementor – Elementor Addons, Widgets, Mega Menu Builder, Popup Builder, Widget Builder & Template Kits 3.2.3, at assets/css/admin/editor.css

1,440 lines 36.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .ma-el-tab-loading-overlay {
2 position: absolute;
3 top: 0;
4 left: 0;
5 right: 0;
6 bottom: 0;
7 background: rgba(255, 255, 255, 0.9);
8 display: flex;
9 align-items: center;
10 justify-content: center;
11 z-index: 9999;
12 border-radius: 5px;
13 }
14 .ma-el-tab-loading-overlay .elementor-loader-wrapper {
15 text-align: center;
16 }
17 .ma-el-tab-loading-overlay .elementor-loader-wrapper .elementor-loading-title {
18 margin-top: 15px;
19 font-size: 14px;
20 color: #6c7781;
21 font-weight: 500;
22 }
23 .ma-el-tab-loading-overlay .elementor-loader {
24 display: flex;
25 gap: 4px;
26 }
27 .ma-el-tab-loading-overlay .elementor-loader .elementor-loader-box {
28 width: 8px;
29 height: 8px;
30 background-color: #9b59b6;
31 border-radius: 50%;
32 animation: ma-el-loader-bounce 1.4s ease-in-out infinite both;
33 }
34 .ma-el-tab-loading-overlay .elementor-loader .elementor-loader-box:nth-child(1) {
35 animation-delay: -0.32s;
36 }
37 .ma-el-tab-loading-overlay .elementor-loader .elementor-loader-box:nth-child(2) {
38 animation-delay: -0.16s;
39 }
40 .ma-el-tab-loading-overlay .elementor-loader .elementor-loader-box:nth-child(3) {
41 animation-delay: 0s;
42 }
43 .ma-el-tab-loading-overlay .elementor-loader .elementor-loader-box:nth-child(4) {
44 animation-delay: 0.16s;
45 }
46
47 @keyframes ma-el-loader-bounce {
48 0%, 80%, 100% {
49 transform: scale(0);
50 opacity: 0.5;
51 }
52 40% {
53 transform: scale(1);
54 opacity: 1;
55 }
56 }
57 #ma-el-template-library-content {
58 position: relative;
59 }
60
61 .elementor-element .icon {
62 position: relative;
63 }
64 .elementor-element .icon [class*=" jltma-"]::after,
65 .elementor-element .icon [class^=jltma-]::after {
66 content: "MA";
67 font-size: 10px;
68 opacity: 1;
69 position: absolute;
70 right: 0;
71 top: 0;
72 padding: 3px 4px;
73 background: #4b3fe1;
74 color: #fff;
75 }
76 .elementor-element .icon .jltma-pro-widget::after {
77 right: 25px;
78 }
79
80 .jltma-new-feature:after {
81 content: "NEW";
82 background-color: orangered;
83 color: #fff;
84 font-size: 7px;
85 font-weight: 700;
86 border-radius: 2px;
87 padding: 3px 4px;
88 margin-left: 5px;
89 vertical-align: middle;
90 }
91
92 body #ma-el-modal-template {
93 top: 48px !important;
94 left: 0;
95 background-color: transparent !important;
96 z-index: 999999;
97 }
98 body #ma-el-modal-template .dialog-message {
99 min-height: auto;
100 padding: 0;
101 }
102 body #ma-el-modal-template .dialog-widget-content {
103 max-width: 100%;
104 top: 0 !important;
105 height: 100%;
106 }
107 body.e-is-device-mode #ma-el-modal-template {
108 top: 68px !important;
109 left: 50% !important;
110 transform: translate(-50%);
111 }
112 body.elementor-device-desktop #ma-el-modal-template {
113 max-width: 100%;
114 height: 100%;
115 }
116 body.elementor-device-tablet #ma-el-modal-template {
117 max-width: 768px;
118 height: calc(100% - 88px);
119 }
120 body.elementor-device-mobile #ma-el-modal-template {
121 max-width: 360px;
122 height: calc(100% - 125px);
123 }
124 body.elementor-device-mobile #ma-el-template-modal-header-tabs #views-ma-el-template-modal-tabs-items .elementor-template-library-menu-item {
125 width: 0;
126 height: 0;
127 }
128 body.elementor-device-mobile #ma-el-template-modal-header-tabs #views-ma-el-template-modal-tabs-items .elementor-template-library-menu-item label {
129 opacity: 0;
130 visibility: hidden;
131 }
132 body.elementor-device-mobile #ma-el-template-modal-header-tabs #views-ma-el-template-modal-tabs-items .elementor-template-library-menu-item label span {
133 padding: 0;
134 }
135 body.elementor-device-mobile #ma-el-template-modal-header-tabs #views-ma-el-template-modal-tabs-items .elementor-template-library-menu-item:has(input[checked=checked]) {
136 width: auto;
137 height: auto;
138 }
139 body.elementor-device-mobile #ma-el-template-modal-header-tabs #views-ma-el-template-modal-tabs-items .elementor-template-library-menu-item:has(input[checked=checked]) label {
140 opacity: 1;
141 visibility: visible;
142 }
143 body.elementor-device-mobile #ma-el-template-modal-header-tabs #views-ma-el-template-modal-tabs-items .elementor-template-library-menu-item:has(input[checked=checked]) label span {
144 padding: 20px 0;
145 }
146
147 #ma-el-modal-template .dialog-header,
148 #ma-el-modal-template .dialog-widget-header {
149 padding: 0;
150 position: relative;
151 z-index: 1;
152 }
153 #ma-el-modal-template .dialog-buttons-wrapper {
154 display: none;
155 }
156 #ma-el-modal-template a.elementor-template-library-blank-footer-link {
157 transition: color 0.5s;
158 }
159 #ma-el-modal-template a.elementor-template-library-blank-footer-link:hover {
160 color: #9b0a46;
161 }
162 #ma-el-modal-template ::-webkit-scrollbar {
163 width: 6px;
164 height: 0;
165 border-radius: 3px;
166 }
167 #ma-el-modal-template ::-webkit-scrollbar-button {
168 width: 0;
169 height: 10px;
170 }
171 #ma-el-modal-template ::-webkit-scrollbar-thumb {
172 background-color: #d5dadf;
173 border: 0 none #d5dadf;
174 border-radius: 3px;
175 }
176 #ma-el-modal-template ::-webkit-scrollbar-track {
177 border: 0 none #fff;
178 border-radius: 0;
179 }
180 #ma-el-modal-template ::-webkit-scrollbar-corner {
181 background: 0 0;
182 }
183 #ma-el-modal-template .elementor-library-error {
184 margin: 18% 0 0;
185 }
186 #ma-el-modal-template .elementor-library-error .elementor-library-error-message {
187 font-size: 18px;
188 padding: 0 0 20px;
189 }
190 #ma-el-modal-template .elementor-library-error .elementor-library-error-link a {
191 display: inline-block;
192 color: #fff;
193 background-image: none;
194 background: #f47216;
195 font-size: 13px;
196 font-weight: 400;
197 font-style: normal;
198 text-transform: uppercase;
199 line-height: 40px;
200 height: 40px;
201 min-width: 170px;
202 padding: 0 20px;
203 border: none;
204 border-radius: 3px;
205 cursor: pointer;
206 transition: all 0.5s;
207 }
208 #ma-el-modal-template .elementor-library-error .elementor-library-error-link a:hover {
209 opacity: 0.85;
210 box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
211 }
212
213 #ma-el-template-modal-header {
214 display: flex;
215 justify-content: space-between;
216 align-items: center;
217 height: 50px;
218 }
219 #ma-el-template-modal-header .ma-el-template-modal-header-back {
220 background: 0 0;
221 border: none;
222 padding: 15px 20px 15px 0;
223 line-height: 20px;
224 font-size: 13px;
225 font-weight: 700;
226 outline: 0;
227 transition: all 0.2s linear;
228 cursor: pointer;
229 color: #6d7882;
230 }
231 #ma-el-template-modal-header .ma-el-template-modal-header-back:not(:hover) {
232 color: #a4afb7;
233 }
234 #ma-el-template-modal-header .jltma-live-preview-link {
235 margin-right: 25px;
236 color: light-dark(#4b00e7, #b794ff) !important;
237 font-size: 16px;
238 font-weight: 500;
239 transition: color 0.3s;
240 }
241
242 #jltma-template-modal-insert-wrapper {
243 cursor: default;
244 padding: 0 10px;
245 }
246
247 .jltma-modal-template-header-item {
248 position: relative;
249 display: flex;
250 align-items: center;
251 justify-content: center;
252 box-sizing: content-box;
253 }
254
255 #ma-el-template-modal-header-close-modal {
256 width: 45px;
257 display: flex;
258 align-items: center;
259 justify-content: center;
260 cursor: pointer;
261 transition: all 0.2s linear;
262 }
263 #ma-el-template-modal-header-close-modal i {
264 color: #a4afb7;
265 font-size: 16px;
266 }
267 #ma-el-template-modal-header-close-modal:hover i {
268 color: #6d7882;
269 }
270
271 #ma-el-template-modal-header-actions .template-library-activate-license {
272 display: block;
273 padding: 8px 14px;
274 color: #fff;
275 background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
276 border-radius: 6px;
277 font-size: 13px;
278 font-weight: 600;
279 text-decoration: none;
280 transition: all 0.2s ease;
281 }
282 #ma-el-template-modal-header-actions .template-library-activate-license:hover {
283 color: #fff;
284 opacity: 0.9;
285 box-shadow: 0 2px 8px rgba(234, 88, 12, 0.4);
286 transform: translateY(-1px);
287 }
288
289 #ma-el-template-cache-refresh {
290 display: flex;
291 align-items: center;
292 justify-content: center;
293 padding: 4px 8px;
294 margin: 0 4px;
295 border-radius: 3px;
296 font-size: 12px;
297 color: #6d7882;
298 cursor: pointer;
299 transition: all 0.2s ease;
300 }
301
302 #ma-el-template-cache-refresh {
303 background: transparent;
304 border: 1px solid rgba(0, 0, 0, 0.1);
305 }
306 #ma-el-template-cache-refresh:hover {
307 background: #4b00e7;
308 color: #fff;
309 border-color: #4b00e7;
310 }
311 #ma-el-template-cache-refresh:hover i {
312 font-size: 16px;
313 color: #fff;
314 }
315 #ma-el-template-cache-refresh i {
316 font-size: 16px;
317 transition: transform 0.3s ease;
318 }
319 #ma-el-template-cache-refresh.updating i {
320 animation: spin 1s linear infinite;
321 }
322
323 @keyframes spin {
324 from {
325 transform: rotate(0deg);
326 }
327 to {
328 transform: rotate(360deg);
329 }
330 }
331 #views-ma-el-template-modal-tabs-items .elementor-template-library-menu-item {
332 display: inline-block;
333 position: relative;
334 text-align: left;
335 padding: 0;
336 width: auto;
337 font-size: 13px;
338 color: #fff;
339 border: 0;
340 }
341 #views-ma-el-template-modal-tabs-items .elementor-template-library-menu-item input[type=radio] {
342 position: absolute;
343 left: 0;
344 top: 0;
345 right: 0;
346 bottom: 0;
347 margin: 0;
348 opacity: 0;
349 display: block;
350 width: 100%;
351 height: 100%;
352 cursor: pointer;
353 }
354 #views-ma-el-template-modal-tabs-items .elementor-template-library-menu-item input:checked + span, #views-ma-el-template-modal-tabs-items .elementor-template-library-menu-item:hover span {
355 border-bottom: 3px solid #4b00e7;
356 }
357 #views-ma-el-template-modal-tabs-items .elementor-template-library-menu-item span {
358 display: block;
359 padding: 20px 19px 16px 19px;
360 color: var(--e-a-color-txt-accent);
361 }
362
363 #ma-el-template-modal-header-tabs {
364 display: flex;
365 flex: 2;
366 align-items: center;
367 }
368 #ma-el-template-modal-header-tabs:has(#views-ma-el-template-modal-tabs-items) {
369 justify-content: center;
370 }
371
372 #ma-el-template-modal-header-logo-area {
373 text-align: left;
374 padding-left: 15px;
375 color: #6d7882;
376 }
377 #ma-el-template-modal-header-logo-area > * {
378 display: flex;
379 align-items: center;
380 }
381
382 #ma-el-template-modal-header-logo .ma-el-modal-header-logo-icon {
383 display: flex;
384 align-items: center;
385 gap: 7px;
386 }
387 #ma-el-template-modal-header-logo .ma-el-modal-header-logo-icon img {
388 height: 30px;
389 }
390 #ma-el-template-modal-header-logo .ma-el-modal-header-logo-icon .jltma-template-lib-title {
391 font-size: 16px;
392 font-weight: 500;
393 }
394
395 .ma-el-keywords-filters-wrap {
396 position: relative;
397 }
398 .ma-el-keywords-filters-wrap .ma-el-keywords-filter-action {
399 width: 230px;
400 padding: 10px 15px;
401 border-radius: 3px;
402 background-color: #fff;
403 display: flex;
404 justify-content: space-between;
405 align-items: center;
406 font-weight: normal;
407 font-family: "Roboto", Arial, Helvetica, Verdana, sans-serif;
408 color: #1d2327;
409 cursor: pointer;
410 border: 0;
411 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05);
412 }
413 .ma-el-keywords-filters-wrap .ma-el-keywords-filter-action i {
414 font-size: 16px;
415 width: 16px;
416 height: 16px;
417 }
418 .ma-el-keywords-filters-wrap .ma-el-keywords-filters-container {
419 position: absolute;
420 top: 100%;
421 right: 0;
422 left: auto;
423 width: 700px;
424 max-width: calc(100vw - 40px);
425 background: #fff;
426 padding: 10px;
427 border-radius: 3px;
428 visibility: hidden;
429 opacity: 0;
430 transition: all 0.2s ease-in;
431 box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 5px 0px;
432 }
433 .ma-el-keywords-filters-wrap .ma-el-keywords-filters-container ul {
434 display: flex;
435 flex-wrap: wrap;
436 row-gap: 6px;
437 }
438 .ma-el-keywords-filters-wrap .ma-el-keywords-filters-container ul li {
439 padding: 8px 12px;
440 cursor: pointer;
441 width: 25%;
442 color: #6d7882;
443 background: #fff;
444 font-size: 13px;
445 line-height: 1;
446 }
447 .ma-el-keywords-filters-wrap .ma-el-keywords-filters-container ul li:hover {
448 background: #f9f9f9;
449 color: #222;
450 }
451 .ma-el-keywords-filters-wrap .ma-el-keywords-filters-container.active {
452 visibility: visible;
453 opacity: 1;
454 }
455
456 .ma-el-modal-filters-wrap .ma-el-modal-filter-action {
457 width: 230px !important;
458 padding: 10px 15px;
459 border-radius: 3px;
460 background-color: #fff;
461 display: flex;
462 justify-content: space-between;
463 align-items: center;
464 font-weight: normal;
465 font-family: "Roboto", Arial, Helvetica, Verdana, sans-serif;
466 color: #1d2327;
467 cursor: pointer;
468 border: 0;
469 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05);
470 }
471 .ma-el-modal-filters-wrap .ma-el-modal-filter-action i {
472 font-size: 16px;
473 width: 16px;
474 height: 16px;
475 }
476 .ma-el-modal-filters-wrap .ma-el-modal-filters-container {
477 position: absolute;
478 top: auto;
479 bottom: auto;
480 width: 700px;
481 background: #fff;
482 padding: 10px;
483 border-radius: 3px;
484 visibility: hidden;
485 opacity: 0;
486 transition: all 0.2s ease-in;
487 box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 5px 0px;
488 z-index: 99;
489 }
490 .ma-el-modal-filters-wrap .ma-el-modal-filters-container ul {
491 display: flex;
492 flex-wrap: wrap;
493 row-gap: 6px;
494 }
495 .ma-el-modal-filters-wrap .ma-el-modal-filters-container ul li {
496 padding: 8px 12px;
497 cursor: pointer;
498 width: 25%;
499 color: #6d7882;
500 background: #fff;
501 font-size: 13px;
502 line-height: 1;
503 border-radius: 3px;
504 }
505 .ma-el-modal-filters-wrap .ma-el-modal-filters-container ul li:hover {
506 background: #f9f9f9;
507 color: #222;
508 }
509 .ma-el-modal-filters-wrap .ma-el-modal-filters-container.active {
510 visibility: visible;
511 opacity: 1;
512 }
513 .ma-el-modal-filters-wrap .ma-el-modal-filters-container .ma-el-filters-list h4 {
514 font-size: 14px;
515 font-weight: 600;
516 color: #6d7882;
517 margin: 0 0 15px 0;
518 text-transform: uppercase;
519 letter-spacing: 0.5px;
520 }
521 .ma-el-modal-filters-wrap .ma-el-modal-filters-container .ma-el-filters-list .ma-el-filter-items {
522 margin-bottom: 25px;
523 }
524 .ma-el-modal-filters-wrap .ma-el-modal-filters-container .ma-el-filters-list .ma-el-filter-item {
525 display: block;
526 padding: 8px 12px;
527 margin-bottom: 2px;
528 border-radius: 4px;
529 cursor: pointer;
530 transition: all 0.2s ease;
531 border: 1px solid transparent;
532 }
533 .ma-el-modal-filters-wrap .ma-el-modal-filters-container .ma-el-filters-list .ma-el-filter-item span {
534 font-size: 13px;
535 color: #6d7882;
536 display: block;
537 }
538 .ma-el-modal-filters-wrap .ma-el-modal-filters-container .ma-el-filters-list .ma-el-filter-item:hover {
539 background: #f8f9fa;
540 border-color: #e0e0e0;
541 }
542 .ma-el-modal-filters-wrap .ma-el-modal-filters-container .ma-el-filters-list .ma-el-filter-item.active {
543 background: #4b00e7;
544 border-color: #4b00e7;
545 color: #fff;
546 }
547 .ma-el-modal-filters-wrap .ma-el-modal-filters-container .ma-el-filters-list .ma-el-filter-item.active span {
548 color: #fff;
549 }
550 .ma-el-modal-filters-wrap .ma-el-modal-filters-container .ma-el-modal-templates-wrap {
551 width: 100%;
552 display: flex;
553 flex-direction: column;
554 }
555 .ma-el-modal-filters-wrap .ma-el-modal-filters-container .ma-el-modal-templates-wrap .ma-el-template-library-banner {
556 width: 100%;
557 margin-bottom: 15px;
558 border-radius: 6px;
559 overflow: hidden;
560 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
561 transition: transform 0.2s ease, box-shadow 0.2s ease;
562 }
563 .ma-el-modal-filters-wrap .ma-el-modal-filters-container .ma-el-modal-templates-wrap .ma-el-template-library-banner:hover {
564 transform: translateY(-1px);
565 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
566 }
567 .ma-el-modal-filters-wrap .ma-el-modal-filters-container .ma-el-modal-templates-wrap .ma-el-template-library-banner .ma-el-template-library--banner {
568 display: block;
569 text-decoration: none;
570 width: 100%;
571 line-height: 0;
572 }
573 .ma-el-modal-filters-wrap .ma-el-modal-filters-container .ma-el-modal-templates-wrap .ma-el-template-library-banner .ma-el-template-library--banner img {
574 width: 100%;
575 height: auto;
576 display: block;
577 max-height: 120px;
578 object-fit: cover;
579 transition: transform 0.2s ease;
580 border: none;
581 outline: none;
582 }
583 .ma-el-modal-filters-wrap .ma-el-modal-filters-container .ma-el-modal-templates-wrap .ma-el-template-library-banner .ma-el-template-library--banner:hover img {
584 transform: scale(1.01);
585 }
586 @media (max-width: 1200px) {
587 .ma-el-modal-filters-wrap .ma-el-modal-filters-container .ma-el-modal-templates-wrap .ma-el-template-library-banner .ma-el-template-library--banner img {
588 max-height: 100px;
589 }
590 }
591 @media (max-width: 768px) {
592 .ma-el-modal-filters-wrap .ma-el-modal-filters-container .ma-el-modal-templates-wrap .ma-el-template-library-banner {
593 margin-bottom: 10px;
594 border-radius: 4px;
595 }
596 .ma-el-modal-filters-wrap .ma-el-modal-filters-container .ma-el-modal-templates-wrap .ma-el-template-library-banner .ma-el-template-library--banner img {
597 max-height: 80px;
598 }
599 }
600 .ma-el-modal-filters-wrap .ma-el-modal-filters-container .ma-el-keywords-list {
601 width: max-content;
602 padding-bottom: 15px;
603 margin-bottom: 15px;
604 }
605 .ma-el-modal-filters-wrap .ma-el-modal-filters-container .ma-el-keywords-list h4 {
606 font-size: 14px;
607 font-weight: 600;
608 color: #6d7882;
609 margin: 0 0 15px 0;
610 text-transform: uppercase;
611 letter-spacing: 0.5px;
612 }
613 .ma-el-modal-filters-wrap .ma-el-modal-filters-container .ma-el-keywords-list .ma-el-keyword-items {
614 display: flex;
615 flex-wrap: wrap;
616 gap: 8px;
617 }
618 .ma-el-modal-filters-wrap .ma-el-modal-filters-container .ma-el-keywords-list .ma-el-filter-item {
619 display: inline-block;
620 padding: 6px 12px;
621 border-radius: 20px;
622 cursor: pointer;
623 transition: all 0.2s ease;
624 border: 1px solid #e0e0e0;
625 background: #fff;
626 }
627 .ma-el-modal-filters-wrap .ma-el-modal-filters-container .ma-el-keywords-list .ma-el-filter-item span {
628 font-size: 12px;
629 color: #6d7882;
630 white-space: nowrap;
631 }
632 .ma-el-modal-filters-wrap .ma-el-modal-filters-container .ma-el-keywords-list .ma-el-filter-item:hover {
633 border-color: #4b00e7;
634 background: rgba(75, 0, 231, 0.05);
635 }
636 .ma-el-modal-filters-wrap .ma-el-modal-filters-container .ma-el-keywords-list .ma-el-filter-item:hover span {
637 color: #4b00e7;
638 }
639 .ma-el-modal-filters-wrap .ma-el-modal-filters-container .ma-el-keywords-list .ma-el-filter-item.active {
640 background: #4b00e7;
641 border-color: #4b00e7;
642 }
643 .ma-el-modal-filters-wrap .ma-el-modal-filters-container .ma-el-keywords-list .ma-el-filter-item.active span {
644 color: #fff;
645 }
646 .ma-el-modal-filters-wrap .ma-el-modal-filters-container .ma-el-templates-list {
647 position: inherit !important;
648 flex: 1;
649 overflow: auto;
650 }
651
652 .ma-el-modal-template-filter-label {
653 display: block;
654 position: relative;
655 text-align: left;
656 padding: 8px;
657 color: #888;
658 }
659 .ma-el-modal-template-filter-label input[type=radio] {
660 position: absolute;
661 left: 0;
662 top: 0;
663 right: 0;
664 bottom: 0;
665 margin: 0;
666 opacity: 0;
667 display: block;
668 width: 100%;
669 height: 100%;
670 cursor: pointer;
671 }
672 .ma-el-modal-template-filter-label input:checked + span, .ma-el-modal-template-filter-label:hover span {
673 color: #4b00e7;
674 }
675
676 .ma-el-modal-template-filter-item {
677 border-block-start: #333438;
678 }
679 .ma-el-modal-template-filter-item:hover {
680 cursor: pointer;
681 }
682 .ma-el-modal-template-filter-item:first-child {
683 border-top: none;
684 }
685
686 .ma-el-modal-templates-wrap {
687 width: 100%;
688 padding: 20px;
689 }
690
691 .elementor-template-library-template-name {
692 width: 100%;
693 }
694
695 #elementor-template-library-filter {
696 display: flex;
697 align-items: center;
698 justify-content: flex-end;
699 }
700 #elementor-template-library-filter label {
701 font-size: 14px;
702 font-weight: 500;
703 margin-right: 0.5em;
704 color: #6d7882;
705 }
706 #elementor-template-library-filter .select2 {
707 width: 250px !important;
708 }
709
710 .ma-el-no-search-results,
711 .ma-el-no-filter-results {
712 display: flex;
713 justify-content: center;
714 align-items: center;
715 min-height: 300px;
716 width: 100%;
717 margin: 40px 0;
718 }
719 .ma-el-no-search-results .ma-el-no-results-content,
720 .ma-el-no-filter-results .ma-el-no-results-content {
721 text-align: center;
722 color: #a4afb7;
723 }
724 .ma-el-no-search-results .ma-el-no-results-content i,
725 .ma-el-no-filter-results .ma-el-no-results-content i {
726 font-size: 48px;
727 margin-bottom: 20px;
728 color: #d5dadf;
729 }
730 .ma-el-no-search-results .ma-el-no-results-content h3,
731 .ma-el-no-filter-results .ma-el-no-results-content h3 {
732 font-size: 20px;
733 font-weight: 600;
734 margin-bottom: 10px;
735 color: #6d7882;
736 }
737 .ma-el-no-search-results .ma-el-no-results-content p,
738 .ma-el-no-filter-results .ma-el-no-results-content p {
739 font-size: 14px;
740 margin: 0;
741 color: #a4afb7;
742 }
743
744 #ma-el-modal-loading {
745 display: flex;
746 align-items: center;
747 justify-content: center;
748 min-height: 400px;
749 width: 100%;
750 }
751 #ma-el-modal-loading .elementor-loader-wrapper {
752 text-align: center;
753 display: flex;
754 flex-direction: column;
755 align-items: center;
756 gap: 25px;
757 }
758 #ma-el-modal-loading .ma-el-logo-container {
759 display: flex;
760 justify-content: center;
761 }
762 #ma-el-modal-loading .ma-el-logo-container .ma-el-loading-logo {
763 width: 80px;
764 height: 80px;
765 animation: ma-el-logo-pulse 2s ease-in-out infinite;
766 filter: drop-shadow(0 0 15px rgba(75, 77, 237, 0.4));
767 }
768 #ma-el-modal-loading .elementor-loading-title {
769 font-size: 18px;
770 font-weight: 500;
771 color: #6d7882;
772 letter-spacing: 0.5px;
773 text-transform: uppercase;
774 }
775
776 @keyframes ma-el-logo-pulse {
777 0%, 100% {
778 transform: scale(1);
779 opacity: 0.8;
780 }
781 50% {
782 transform: scale(1.05);
783 opacity: 1;
784 }
785 }
786 #ma-el-modal-template .elementor-loader {
787 position: relative;
788 }
789 #ma-el-modal-template .elementor-loader .elementor-loader-box:first-of-type {
790 left: 40px;
791 top: 40px;
792 width: 14px;
793 height: 70px;
794 }
795 #ma-el-modal-template .elementor-loader .elementor-loader-box:nth-of-type(2) {
796 top: 40px;
797 }
798 #ma-el-modal-template .elementor-loader .elementor-loader-box:nth-of-type(3) {
799 top: 68px;
800 }
801 #ma-el-modal-template .elementor-loader .elementor-loader-box:nth-of-type(4) {
802 bottom: 40px;
803 }
804 #ma-el-modal-template .elementor-loader .elementor-loader-box:not(:first-of-type) {
805 right: 40px;
806 height: 14px;
807 width: 42px;
808 }
809
810 #ma-el-modal-templates-container {
811 position: relative;
812 padding: 20px;
813 }
814 #ma-el-modal-templates-container .elementor-template-library-template {
815 position: relative;
816 overflow: hidden;
817 border-radius: 6px;
818 border: 1px solid #e5e7eb;
819 background: #fff;
820 transition: box-shadow 0.2s ease, border-color 0.2s ease;
821 box-sizing: border-box;
822 cursor: pointer;
823 margin: 0;
824 }
825 #ma-el-modal-templates-container .elementor-template-library-template:hover {
826 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
827 border-color: #d1d5db;
828 }
829 #ma-el-modal-templates-container .elementor-template-library-template-body {
830 width: 100%;
831 }
832 #ma-el-modal-templates-container .elementor-template-library-template-screenshot {
833 position: relative;
834 overflow: hidden;
835 background: #f1f3f5;
836 min-height: 60px;
837 max-height: 520px;
838 }
839 #ma-el-modal-templates-container .elementor-template-library-template-screenshot img {
840 position: relative;
841 z-index: 1;
842 width: 100%;
843 height: auto;
844 display: block;
845 opacity: 0;
846 transition: opacity 0.3s ease;
847 }
848 #ma-el-modal-templates-container .elementor-template-library-template-screenshot img.is-loaded {
849 opacity: 1;
850 }
851 #ma-el-modal-templates-container .elementor-template-library-template-screenshot::before {
852 content: "";
853 position: absolute;
854 inset: 0;
855 background: linear-gradient(100deg, #eef1f4 30%, #f7f9fb 50%, #eef1f4 70%);
856 background-size: 200% 100%;
857 animation: jltma-tpl-shimmer 1.4s ease-in-out infinite;
858 z-index: 0;
859 }
860 #ma-el-modal-templates-container .elementor-template-library-template-screenshot.is-loaded::before {
861 display: none;
862 }
863 @keyframes jltma-tpl-shimmer {
864 0% {
865 background-position: 150% 0;
866 }
867 100% {
868 background-position: -50% 0;
869 }
870 }
871 #ma-el-modal-templates-container .ma-el-modal-template-pro::before {
872 position: absolute;
873 right: -76px;
874 top: 2px;
875 content: "PRO";
876 z-index: 10;
877 width: 180px;
878 height: 20px;
879 padding: 0 20px;
880 font-size: 12px;
881 line-height: 10px;
882 text-align: center;
883 color: #fff;
884 font-weight: 700;
885 box-shadow: 0 1px 3px #888;
886 background: #f47216;
887 border-top: 5px solid #f47216;
888 border-bottom: 5px solid #f47216;
889 transform: rotate(35deg);
890 }
891
892 .ma-el-template-insert {
893 background-color: #4b00e7;
894 }
895 .ma-el-template-insert i {
896 margin-right: 2px;
897 }
898
899 #ma-el-template-library-content #ma-el-modal-templates-container .elementor-template-library-template-controls {
900 position: absolute;
901 left: 0;
902 bottom: -15px;
903 right: 0;
904 display: flex;
905 justify-content: center;
906 transition: all 0.3s ease;
907 padding: 8px;
908 z-index: 10;
909 }
910 #ma-el-template-library-content #ma-el-modal-templates-container .elementor-template-library-template:hover .elementor-template-library-template-controls {
911 bottom: 0;
912 }
913 #ma-el-template-library-content #ma-el-modal-templates-container .ma-el-template-insert {
914 padding: 8px;
915 margin: 0;
916 color: #fff;
917 background: #4b00e7;
918 text-transform: none;
919 font-size: 12px;
920 width: 100%;
921 }
922 #ma-el-template-library-content #ma-el-modal-templates-container .ma-el-template-insert:hover {
923 box-shadow: none;
924 }
925 #ma-el-template-library-content #ma-el-modal-templates-container .ma-el-modal-clone-template {
926 background: 0 0;
927 border: none;
928 padding: 0;
929 margin: 0;
930 color: #9b0a46;
931 cursor: pointer;
932 display: none;
933 font-size: 12px;
934 box-shadow: none;
935 outline: 0;
936 font-weight: 700;
937 }
938 #ma-el-template-library-content #ma-el-modal-templates-container .elementor-template-library-template-name {
939 position: absolute;
940 bottom: 0;
941 left: 0;
942 right: 0;
943 padding: 8px 10px;
944 text-align: left;
945 display: block !important;
946 font-size: 12px;
947 font-weight: 500;
948 color: #374151;
949 white-space: nowrap;
950 overflow: hidden;
951 text-overflow: ellipsis;
952 box-sizing: border-box;
953 background: rgba(255, 255, 255, 0.95);
954 border-top: 1px solid #e5e7eb;
955 transition: opacity 0.2s ease;
956 }
957 #ma-el-template-library-content #ma-el-modal-templates-container .elementor-template-library-template-name-holder {
958 height: auto;
959 }
960 #ma-el-template-library-content #ma-el-modal-templates-container .template-library-activate-license {
961 display: none;
962 background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
963 color: #fff;
964 font-size: 11px;
965 font-weight: 600;
966 padding: 5px 10px;
967 border-radius: 4px;
968 text-decoration: none;
969 transition: all 0.2s ease;
970 }
971 #ma-el-template-library-content #ma-el-modal-templates-container .template-library-activate-license:hover {
972 color: #fff;
973 box-shadow: 0 2px 6px rgba(234, 88, 12, 0.4);
974 }
975 #ma-el-template-library-content #ma-el-modal-templates-container .elementor-template-library-template:hover .elementor-template-library-template-name {
976 opacity: 0;
977 }
978
979 div.ma-el-modal-template-has-url:hover .ma-el-modal-clone-template {
980 display: block !important;
981 }
982
983 .library-tab-ma_el_template #ma-el-modal-templates-container .elementor-template-library-template-remote .elementor-template-library-template-action {
984 padding: 8px;
985 }
986
987 #ma-el-modal-templates-container .ma-el-modal-template-no-url .elementor-template-library-template-preview i {
988 color: #fff;
989 }
990 #ma-el-modal-templates-container .ma-el-modal-template-no-url .elementor-template-library-template-preview {
991 cursor: default !important;
992 opacity: 0 !important;
993 }
994 #ma-el-modal-templates-container .ma-el-modal-template-no-url .fa-search-plus {
995 display: none !important;
996 }
997 #ma-el-modal-templates-container .elementor-template-library-template:hover .template-library-activate-license {
998 display: block !important;
999 }
1000
1001 .elementor-template-library-template-screenshot img {
1002 width: 100%;
1003 max-width: 100%;
1004 height: auto;
1005 display: block;
1006 }
1007
1008 #ma-el-item-preview-wrap {
1009 height: 100%;
1010 overflow: hidden;
1011 display: flex;
1012 flex-direction: column;
1013 }
1014
1015 #ma-el-item-preview-wrap .ma-el-item-preview-iframe {
1016 flex: 1 1 auto;
1017 min-height: 0;
1018 overflow: hidden;
1019 position: relative;
1020 }
1021
1022 #ma-el-item-preview-wrap iframe {
1023 width: 100%;
1024 height: 100%;
1025 border: 0;
1026 display: block;
1027 }
1028
1029 #ma-el-item-preview-wrap .ma-el-item-preview-empty {
1030 display: flex;
1031 align-items: center;
1032 justify-content: center;
1033 height: 100%;
1034 color: #7a7a7a;
1035 font-size: 14px;
1036 }
1037
1038 .ma-el-item-notice div {
1039 color: #31708f;
1040 background-color: #d9edf7;
1041 border-color: #bcdff1;
1042 padding: 15px;
1043 border-left: 5px solid #bcdff1;
1044 position: relative;
1045 text-align: left;
1046 margin-bottom: 8px;
1047 }
1048
1049 .jltma-visual-select {
1050 height: auto;
1051 display: inline-block;
1052 width: 100%;
1053 max-width: 900px;
1054 }
1055 .jltma-visual-select:after {
1056 content: "";
1057 display: table;
1058 clear: both;
1059 }
1060 .jltma-visual-select .jltma-select-item {
1061 float: left;
1062 border: 3px solid #d8d8d8;
1063 margin: 0 5px 5px 0;
1064 cursor: pointer;
1065 }
1066 .jltma-visual-select .jltma-select-item.jltma-selected {
1067 border-color: #0077a3;
1068 }
1069 .jltma-visual-select .jltma-select-item.jltma-selected img[src*=svg] {
1070 filter: brightness(40%) sepia(100%) hue-rotate(170deg) saturate(250%);
1071 }
1072 .jltma-visual-select .jltma-select-item img {
1073 display: block;
1074 clear: both;
1075 }
1076 .jltma-visual-select .jltma-select-item video {
1077 display: block;
1078 }
1079 .jltma-visual-select .jltma-select-item.jltma-small-height img,
1080 .jltma-visual-select .jltma-select-item.jltma-small-height video {
1081 max-height: 82px;
1082 height: 82px;
1083 }
1084 .jltma-visual-select .jltma-select-item.jltma-medium-height img,
1085 .jltma-visual-select .jltma-select-item.jltma-medium-height video {
1086 max-height: 100px;
1087 height: 100px;
1088 }
1089 .jltma-visual-select .jltma-select-caption {
1090 display: block;
1091 font-size: 11px;
1092 padding: 2px 5px;
1093 background: #eee;
1094 margin-top: 2px;
1095 }
1096 .jltma-visual-select .jltma-color-selector {
1097 width: 22px;
1098 height: 22px;
1099 border: 2px solid #d8d8d8;
1100 }
1101
1102 .jltma-visual-selector-black {
1103 background-color: #3d3d3d;
1104 }
1105
1106 .jltma-visual-selector-white {
1107 background-color: #ffffff;
1108 }
1109
1110 .jltma-visual-selector-masala {
1111 background-color: #3d3d3d;
1112 }
1113
1114 .jltma-visual-selector-dark-gray {
1115 background-color: #aaaaaa;
1116 }
1117
1118 .jltma-visual-selector-ball-blue {
1119 background-color: #1bb0ce;
1120 }
1121
1122 .jltma-visual-selector-fountain-blue {
1123 background-color: #5bacba;
1124 }
1125
1126 .jltma-visual-selector-shamrock {
1127 background-color: #2cc990;
1128 }
1129
1130 .jltma-visual-selector-curios-blue {
1131 background-color: #2c82c9;
1132 }
1133
1134 .jltma-visual-selector-light-sea-green {
1135 background-color: #1abc9c;
1136 }
1137
1138 .jltma-visual-selector-emerald {
1139 background-color: #4eba6f;
1140 }
1141
1142 .jltma-visual-selector-energy-yellow {
1143 background-color: #eee657;
1144 }
1145
1146 .jltma-visual-selector-mikado-yellow {
1147 background-color: #fccd0f;
1148 }
1149
1150 .jltma-visual-selector-pink-salmon {
1151 background-color: #ff91a9;
1152 }
1153
1154 .jltma-visual-selector-wisteria {
1155 background-color: #9e69af;
1156 }
1157
1158 .jltma-visual-selector-lilac {
1159 background-color: #ceacd2;
1160 }
1161
1162 .jltma-visual-selector-pale-sky {
1163 background-color: #5f7487;
1164 }
1165
1166 .jltma-visual-selector-tower-gray {
1167 background-color: #adbcc3;
1168 }
1169
1170 .jltma-visual-selector-william {
1171 background-color: #3a5f6f;
1172 }
1173
1174 .jltma-visual-selector-carmine-pink {
1175 background-color: #e74c3c;
1176 }
1177
1178 .jltma-visual-selector-persimmon {
1179 background-color: #ff6a55;
1180 }
1181
1182 .jltma-visual-selector-tan-hide {
1183 background-color: #ff9f55;
1184 }
1185
1186 .jltma-visual-selector-wild-watermelon {
1187 background-color: #ff6e78;
1188 }
1189
1190 .jltma-visual-selector-iceberg {
1191 background-color: #73b1d6;
1192 }
1193
1194 .jltma-visual-selector-dark-lavender {
1195 background-color: #745a90;
1196 }
1197
1198 .jltma-visual-selector-viking {
1199 background-color: #5cd5e6;
1200 }
1201
1202 .jltma-visual-selector-tiffany-blue {
1203 background-color: #00b5b5;
1204 }
1205
1206 .jltma-visual-selector-pastel-orange {
1207 background-color: #fcb941;
1208 }
1209
1210 .jltma-visual-selector-east-bay {
1211 background-color: #395781;
1212 }
1213
1214 .jltma-visual-selector-steel-blue {
1215 background-color: #4589b0;
1216 }
1217
1218 .jltma-visual-selector-half-backed {
1219 background-color: #84ccd1;
1220 }
1221
1222 .jltma-visual-selector-tapestry {
1223 background-color: #b95a84;
1224 }
1225
1226 .jltma-visual-selector-fire-engine-red {
1227 background-color: #cd2c24;
1228 }
1229
1230 .jltma-visual-selector-dark-orange {
1231 background-color: #ff8c00;
1232 }
1233
1234 .jltma-visual-selector-brick-red {
1235 background-color: #cc4452;
1236 }
1237
1238 .jltma-visual-selector-khaki {
1239 background-color: khaki;
1240 }
1241
1242 .ma-el-template-library-banner {
1243 width: 100% !important;
1244 margin: 0 0 20px 0 !important;
1245 padding: 0 !important;
1246 border-radius: 8px !important;
1247 overflow: hidden !important;
1248 }
1249 .ma-el-template-library-banner .ma-el-template-library--banner {
1250 display: block !important;
1251 width: 100% !important;
1252 height: 200px !important;
1253 overflow: hidden !important;
1254 }
1255 .ma-el-template-library-banner .ma-el-template-library--banner img {
1256 width: 100% !important;
1257 height: 100% !important;
1258 object-fit: cover !important;
1259 display: block !important;
1260 }
1261
1262 .ma-el-template-filters-row {
1263 display: flex !important;
1264 align-items: center !important;
1265 gap: 15px !important;
1266 margin-bottom: 20px !important;
1267 padding: 15px 20px !important;
1268 background: #f8f9fa !important;
1269 border-radius: 6px !important;
1270 }
1271 .ma-el-template-filters-row > div {
1272 flex: 1 !important;
1273 }
1274
1275 .ma-el-filters-list,
1276 .ma-el-keywords-list,
1277 .ma-el-template-search-bar {
1278 min-width: 0 !important;
1279 }
1280
1281 .ma-el-template-search-bar {
1282 max-width: 300px !important;
1283 display: block !important;
1284 visibility: visible !important;
1285 }
1286
1287 .ma-el-search-container {
1288 position: relative !important;
1289 width: 100% !important;
1290 display: block !important;
1291 }
1292
1293 .ma-el-search-input {
1294 width: 100% !important;
1295 padding: 8px 35px 8px 12px !important;
1296 border: 1px solid #ddd !important;
1297 border-radius: 4px !important;
1298 font-size: 14px !important;
1299 background: #fff !important;
1300 color: #333 !important;
1301 outline: none !important;
1302 }
1303 .ma-el-search-input::placeholder {
1304 color: #999 !important;
1305 font-weight: 500 !important;
1306 letter-spacing: 0.5px !important;
1307 }
1308 .ma-el-search-input:focus {
1309 border-color: #4b00e7 !important;
1310 box-shadow: 0 0 0 3px rgba(75, 0, 231, 0.1) !important;
1311 }
1312
1313 .ma-el-search-icon {
1314 position: absolute !important;
1315 right: 10px !important;
1316 top: 50% !important;
1317 transform: translateY(-50%) !important;
1318 color: #999 !important;
1319 pointer-events: none !important;
1320 font-size: 16px !important;
1321 }
1322
1323 .ma-el-modal-filters-wrap,
1324 .ma-el-keywords-filters-wrap {
1325 position: relative !important;
1326 }
1327
1328 .ma-el-keywords-filter-action {
1329 display: flex !important;
1330 align-items: center !important;
1331 justify-content: space-between !important;
1332 width: 100% !important;
1333 padding: 8px 12px !important;
1334 background: #fff !important;
1335 border: 1px solid #ddd !important;
1336 border-radius: 4px !important;
1337 cursor: pointer !important;
1338 font-size: 14px !important;
1339 }
1340 .ma-el-keywords-filter-action:hover {
1341 border-color: #999 !important;
1342 }
1343
1344 .ma-el-keywords-filters-container {
1345 position: absolute !important;
1346 top: 100% !important;
1347 left: auto !important;
1348 right: 0 !important;
1349 max-width: calc(100vw - 40px) !important;
1350 background: #fff !important;
1351 border: 1px solid #ddd !important;
1352 border-radius: 4px !important;
1353 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
1354 z-index: 1000 !important;
1355 max-height: 200px !important;
1356 overflow-y: auto !important;
1357 display: none !important;
1358 }
1359 .ma-el-keywords-filters-container.active {
1360 display: block !important;
1361 }
1362 .ma-el-keywords-filters-container ul {
1363 list-style: none !important;
1364 margin: 0 !important;
1365 padding: 0 !important;
1366 }
1367
1368 .ma-el-modal-template-filter-item,
1369 .ma-el-keywords-filter-item {
1370 padding: 8px 12px !important;
1371 cursor: pointer !important;
1372 font-size: 14px !important;
1373 border-bottom: 1px solid #f0f0f0 !important;
1374 }
1375 .ma-el-modal-template-filter-item:hover,
1376 .ma-el-keywords-filter-item:hover {
1377 background: #f8f9fa !important;
1378 }
1379 .ma-el-modal-template-filter-item:last-child,
1380 .ma-el-keywords-filter-item:last-child {
1381 border-bottom: none !important;
1382 }
1383
1384 @media (max-width: 768px) {
1385 .ma-el-template-filters-row {
1386 flex-direction: column !important;
1387 gap: 10px !important;
1388 }
1389 .ma-el-template-filters-row > div {
1390 width: 100% !important;
1391 }
1392 .ma-el-template-search-bar {
1393 max-width: none !important;
1394 }
1395 }
1396 body.elementor-editor-preview.elementor-device-desktop:has(.ma-el-item-preview-iframe) .dialog-message.dialog-lightbox-message {
1397 height: 90% !important;
1398 max-height: 90% !important;
1399 }
1400 body.elementor-editor-preview.elementor-device-tablet:has(.ma-el-item-preview-iframe) .dialog-message.dialog-lightbox-message, body.elementor-editor-preview.elementor-device-mobile:has(.ma-el-item-preview-iframe) .dialog-message.dialog-lightbox-message {
1401 height: 94% !important;
1402 max-height: 94% !important;
1403 }
1404 body.elementor-editor-preview.elementor-device-mobile .ma-el-template-filters-row {
1405 flex-direction: column;
1406 gap: 12px !important;
1407 }
1408 body.elementor-editor-preview.elementor-device-mobile .ma-el-template-filters-row .ma-el-filters-list {
1409 width: 100%;
1410 }
1411 body.elementor-editor-preview.elementor-device-mobile .ma-el-template-filters-row .ma-el-filters-list .ma-el-modal-filter-action {
1412 min-width: 100% !important;
1413 max-width: 100% !important;
1414 }
1415 body.elementor-editor-preview.elementor-device-mobile .ma-el-template-filters-row #ma-el-modal-filters-container {
1416 width: 100%;
1417 }
1418 body.elementor-editor-preview.elementor-device-mobile .ma-el-template-filters-row #ma-el-modal-filters-container ul {
1419 flex-direction: column;
1420 gap: 8px;
1421 }
1422 body.elementor-editor-preview.elementor-device-mobile .ma-el-template-filters-row #ma-el-modal-filters-container ul li {
1423 width: 100%;
1424 }
1425 body.elementor-editor-preview.elementor-device-mobile .ma-el-template-filters-row .ma-el-template-search-bar {
1426 width: 100% !important;
1427 }
1428 body.elementor-editor-preview.elementor-device-mobile .ma-el-template-filters-row .ma-el-keywords-list {
1429 display: none;
1430 }
1431 body.elementor-editor-preview.elementor-device-mobile #ma-el-template-modal-header .jltma-live-preview-link {
1432 display: none;
1433 }
1434
1435 body.master-addons-template-popup-loaded .elementor-templates-modal .dialog-message {
1436 height: auto !important;
1437 }
1438 body.master-addons-template-popup-loaded #elementor-preview-responsive-wrapper {
1439 display: none !important;
1440 }