PluginProbe
Easy Elements for Elementor – Addons & Website Templates / 1.2.8
Easy Elements for Elementor – Addons & Website Templates v1.2.8
1.5.3 1.5.2 1.5.1 1.5.0 1.4.9 1.4.6 1.4.7 1.4.8 1.4.5 1.4.4 1.4.3 1.2.7 1.2.8 1.2.9 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 1.3.7 1.3.8 1.3.9 1.4.0 All 47 releases
easy-elements / assets / css / admin / admin.css

admin.css in Easy Elements for Elementor – Addons & Website Templates 1.2.8, at assets/css/admin/admin.css

1,567 lines 33.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 :root{
2 --easy-primary-color: #7455FF;
3 --easy-white-color: #ffffff;
4 --easy-title-color: #09051B;
5 --easy-black-color: #000000;
6 }
7 /* Common Class CSS */
8 .easyel-tColor{
9 color: var(--easy-title-color);
10 }
11 .overflow-hidden{
12 overflow: hidden;
13 }
14 .easyel-decoration-none{
15 text-decoration: none;
16 }
17 .easyel-border-radius-20{
18 border-radius: 20px;
19 }
20 .easyel-position-rl{
21 position: relative;
22 }
23 .easyel-position-ab{
24 position: absolute;
25 }
26 .easyel-top-0{
27 top: 0;
28 }
29 .easyel-bottom-0{
30 bottom: 0;
31 }
32 .easyel-star-0{
33 left: 0;
34 }
35 .easyel-end-0{
36 right: 0;
37 }
38 .easyel-section-gap{
39 padding: 120px 80px;
40 }
41 .easyel-py-0{
42 padding-top: 0px;
43 padding-bottom: 0px;
44 }
45 .easyel-dflex{
46 display: flex;
47 }
48 .easyel-align-center{
49 align-items: center;
50 }
51 .easyel-justify-between{
52 justify-content: space-between;
53 }
54 .easyel-section-heading .easyel-title{
55 color: var(--easy-title-color);
56 font-size: 40px;
57 font-weight: 600;
58 line-height: 130%;
59 margin: 0 0 35px;
60 }
61 .easyel-section-heading .easyel-desc{
62 font-size: 18px;
63 color: #09051bcc;
64 margin: 0;
65 text-transform: capitalize;
66 }
67 .easyel-tab-panel .easyel-dashboard-heading{
68 font-size: 28px;
69 font-weight: 500;
70 color: var(--easy-title-color);
71 line-height: 160%;
72 padding: 0;
73 margin-bottom: 25px;
74 }
75 .easyel-focus-hide:focus{
76 box-shadow: none;
77 outline: none;
78 color: inherit;
79 }
80 /* End Common Class CSS */
81 body.toplevel_page_easy-elements-dashboard #wpbody-content{
82 font-family: "Inter", sans-serif !important;
83 font-size: 16px;
84 }
85 .elementor-panel .elementor-element .icon i.rt-icon::before{
86 display: none;
87 }
88 .elementor-panel .elementor-element .icon i.rt-icon::after{
89 width: 30px;
90 height: 30px;
91 content: "";
92 display: inline-block;
93 border-radius: 5px;
94 background: url("../img/icons/easy-editor-logo.svg") no-repeat center center/cover;
95 }
96
97 .elementor-icons-manager__tab-link i.rt-icon{
98 width: 30px;
99 height: 30px;
100 content: "";
101 border-radius: 100%;
102 background: url(../img/icons/easy-editor-logo.svg) no-repeat center center/cover;
103 display: inline-block;
104 position: relative;
105 top: 10px;
106 margin-right: 6px;
107 }
108
109 .easy-form-table{
110 background-color: #f9f9f9;
111 border-top: 3px solid #003599;
112 }
113 .easy-widget-row strong{
114 display: block;
115 }
116 .easy-form-table td {
117 border: 1px solid #0000000a;
118 padding: 25px !important;
119 text-align: center;
120 box-sizing: border-box;
121 background: var(--easy-white-color);
122 }
123
124 .easy-form-table td:nth-child(2n+0) {
125 background: #fafafa;
126 }
127
128 .eel-pro-notice {
129 padding: 10px;
130 color: #d94a4a;
131 font-weight: bold;
132 }
133
134 .eel-popup-note {
135 padding: 8px 10px;
136 color: #2271b1;
137 background: #f0f6fb;
138 border-radius: 4px;
139 margin: 8px 0 0 0;
140 font-size: 14px;
141 }
142
143 /* Upload box */
144 #easyel-custom-fonts-upload-form input[type="file"] {
145 padding: 10px;
146 border: 2px dashed #0073aa;
147 border-radius: 6px;
148 background: #f1f1f1;
149 width: 100%;
150 margin-bottom: 10px;
151 transition: border-color 0.3s, background 0.3s;
152 }
153 #easyel-custom-fonts-upload-form input[type="file"]:hover {
154 border-color: #00a0d2;
155 background: #e8f7ff;
156 }
157
158 /* Uploaded fonts grid */
159 #easyel-custom-fonts-upload-form input[type="file"] {
160 padding: 10px;
161 border: 2px dashed #0073aa;
162 border-radius: 6px;
163 background: #f1f1f1;
164 width: 100%;
165 margin-bottom: 10px;
166 transition: all 0.3s;
167 }
168 #easyel-custom-fonts-upload-form input[type="file"]:hover {
169 border-color: #00a0d2;
170 background: #e8f7ff;
171 }
172 .easyel-fonts-grid {
173 display: grid;
174 grid-template-columns: repeat(5, 1fr);
175 gap: 15px;
176 margin-top: 15px;
177 }
178 .easyel-font-box {
179 padding: 15px;
180 border: 1px solid #ccc;
181 border-radius: 6px;
182 background: #f9f9f9;
183 text-align: center;
184 transition: transform 0.2s, box-shadow 0.2s;
185 }
186 .easyel-font-box:hover {
187 transform: translateY(-2px);
188 box-shadow: 0 4px 10px rgba(0,0,0,0.1);
189 }
190 .easyel-font-box p { margin: 5px 0; }
191 .easyel-font-box .button-secondary { margin-top: 8px; }
192
193 #easy-elements-notifications {
194 position: fixed;
195 top: 32px;
196 right: 20px;
197 z-index: 999999;
198 max-width: 400px;
199 }
200
201 .easy-elements-notification {
202 background: var(--easy-white-color);
203 border-left: 4px solid;
204 box-shadow: 0 2px 8px rgba(0,0,0,0.15);
205 margin-bottom: 10px;
206 padding: 12px 16px;
207 border-radius: 4px;
208 font-size: 14px;
209 display: none;
210 }
211
212 .easy-elements-notification.success {
213 border-color: #4CAF50;
214 color: #155724;
215 background-color: #d4edda;
216 }
217
218 .easy-elements-notification.error {
219 border-color: #f44336;
220 color: #721c24;
221 background-color: #f8d7da;
222 }
223
224 .easy-elements-notification.info {
225 border-color: #2196F3;
226 color: #0c5460;
227 background-color: #d1ecf1;
228 }
229
230
231 /*Theme builder css*/
232 .easyel-builder-tabs {
233 display:flex;
234 gap:10px;
235 margin:15px 0;
236 padding:10px;
237 background:var(--easy-white-color);
238 border:1px solid #ccd0d4;
239 }
240
241 .easyel-tab {
242 padding:6px 12px;
243 border:1px solid #ccd0d4;
244 text-decoration:none;
245 border-radius:4px;
246 }
247 .easyel-tab.active,
248 .easyel-tab:hover {
249 background:#2271b1;
250 color:var(--easy-white-color);
251 }
252
253 .easyel-choose-template {
254 display: flex;
255 flex-direction: column;
256 align-items: center;
257 justify-content: center;
258 gap: 20px;
259 max-width: 400px;
260 margin: 0 auto;
261 }
262
263 .easyel-choose-template h2 {
264 font-size: 22px;
265 font-weight: 600;
266 color: #333;
267 text-align: center;
268 }
269
270 .easyel-template-type {
271 width: 100%;
272 }
273
274 .easyel-builder-tmpl-type,
275 .easyel-builder-template-name {
276 width: 100%;
277 padding: 8px 15px !important;
278 border: 1px solid #ddd !important;;
279 border-radius: 4px !important;;
280 font-size: 15px;
281 outline: none;
282 transition: all 0.3s ease;
283 }
284
285 .easyel-builder-tmpl-type:focus,
286 .easyel-builder-template-name:focus {
287 border-color: #4a90e2;
288 box-shadow: 0 0 8px rgba(74, 144, 226, 0.3);
289 }
290
291 .easyel-builder-tmpl-type option {
292 padding: 10px;
293 }
294
295 .easyel-builder-template-name::placeholder {
296 color: #aaa;
297 font-style: italic;
298 }
299
300 /* easy elements tab css */
301 .easyel-overview-header{
302 padding: 24px 30px;
303 background: var(--easy-white-color);
304 }
305 .easyel-plugin-settings-wrapper{
306 display: flex;
307 justify-content: flex-start;
308 gap: 30px;
309 margin-top: 35px;
310 }
311 /* Left Side */
312 .easyel-nav-tab-item{
313 width: 20%;
314 }
315 .easyel-nav-tab-wrapper{
316 position: sticky;
317 top: 50px;
318 height: 85vh;
319 }
320 .easyel-nav-tab-wrapper,
321 .easyel-tab-panel{
322 padding: 20px;
323 background: var(--easy-white-color);
324 }
325 .easyel-nav-tab-pro,
326 .easyel-nav-tab{
327 display: flex;
328 gap: 10px;
329 align-items: center;
330 font-size: 18px;
331 color: var(--easy-title-color);
332 font-weight: 500;
333 text-decoration: none;
334 padding: 16px;
335 margin-bottom: 24px;
336 border-radius: 10px;
337 transition: 0.3s;
338 line-height: 1em;
339 }
340 .easyel-nav-tab-pro i,
341 .easyel-nav-tab i{
342 font-size: 23px;
343 }
344 .easyel-nav-tab:focus,
345 .easyel-nav-tab:hover,
346 .easyel-nav-tab-active {
347 background: var(--easy-primary-color);
348 color: var(--easy-white-color);
349 outline: none;
350 box-shadow: none;
351 }
352 .easyel-tab-pro-link{
353 position: absolute;
354 left: 20px;
355 bottom: 20px;
356 width: calc(100% - 40px);
357 }
358 .easyel-tab-pro-link .easyel-nav-tab-pro{
359 margin-bottom: 0;
360 border-radius: 8px;
361 color: var(--easy-primary-color);
362 background: #7455ff26;
363 justify-content: center;
364 }
365 .easyel-tab-pro-link .easyel-nav-tab-pro i{
366 font-size: 23px;
367 top: -2px;
368 position: relative;
369 }
370 /* Right Side */
371 #easyel-tab-content{
372 width: 77%;
373 }
374
375 /************************/
376 /* Start Overview Area */
377 /***********************/
378 .easyel-overview-area{
379 margin: 0;
380 }
381 .easyel-overview-area .easyel-position-rl{
382 background-image: url(../../../admin/img/overview/easy-right-gallery-overview.webp) !important;
383 background-position: top 50% right -30%;
384 background-repeat: no-repeat;
385 background-size: 61%;
386 }
387 /* Start Banner Area */
388 .easyel-overview-area .easyel-banner-section .easyel-shape-2{
389 margin-top: 30px;
390 }
391 .easyel-overview-area .easyel-banner-content-area{
392 background: #f1f2fa80;
393 padding: 120px 60px 78px;
394 }
395 .easyel-overview-area .easyel-banner-content{
396 max-width: 432px;
397 width: 100%;
398 position: relative;
399 z-index: 2;
400 }
401 .easyel-overview-area .easyel-banner-content .title{
402 margin-top: 40px;
403 font-size: 56px;
404 line-height: 1em;
405 }
406 .easyel-overview-area .easyel-banner-content .title span{
407 color: var(--easy-primary-color);
408 font-weight: 700;
409 }
410 .easyel-overview-area .easyel-banner-rating{
411 gap: 30px;
412 margin-top: 70px;
413 }
414 .easyel-overview-area .easyel-rating-content{
415 gap: 20px;
416 }
417 .easyel-overview-area .easyel-banner-rating h3{
418 font-size: 40px;
419 margin: 0;
420 }
421 .easyel-overview-area .easyel-rating .rating-icon i{
422 color: #1CB165;
423 font-size: 16px;
424 width: 16px;
425 height: 16px;
426 }
427 .easyel-overview-area .easyel-rating span{
428 color: var(--easy-black-color);
429 font-size: 14px;
430 }
431 .easyel-overview-area .easyel-btn{
432 display: inline-flex;
433 align-items: center;
434 gap: 10px;
435 font-size: 16px;
436 font-weight: 600;
437 padding: 14px 28px;
438 color: var(--easy-white-color);
439 border: 2px solid transparent;
440 border-radius: 30px;
441 background: linear-gradient(to right, #8E74FF, var(--easy-primary-color) 57%, var(--easy-primary-color)) padding-box,
442 linear-gradient(to right, var(--easy-primary-color), #C2B4FF) border-box;
443 background-size: 200% 100%;
444 background-position: left center;
445 transition: all 0.4s ease;
446 }
447 .easyel-overview-area .easyel-btn i{
448 font-size: 22px;
449 }
450 .easyel-overview-area .easyel-btn:focus,
451 .easyel-overview-area .easyel-btn:hover{
452 color: var(--easy-white-color);
453 background: linear-gradient(to left, var(--easy-primary-color), #8E74FF 57%, var(--easy-primary-color)) padding-box,
454 linear-gradient(to left, #C2B4FF, var(--easy-primary-color) ) border-box;
455 background-size: 200% 100%;
456 background-position: right center;
457 box-shadow: none;
458 outline: none;
459 }
460
461 /* End Banner Area */
462
463 /* Start Documentation Area */
464 .easyel-overview-area .easyel-docx-area{
465 gap: 40px;
466 }
467 .easyel-overview-area .easyel-docx-image-area{
468 background: #F9FAFD;
469 padding: 50px;
470 }
471 .easyel-overview-area .easyel-docx-image-area img{
472 max-width: 100%;
473 }
474 .easyel-overview-area .easyel-docx-content{
475 max-width: 490px;
476 width: 100%;
477 padding-bottom: 55px;
478 }
479 /* End Documentation Area */
480
481 /* Start Video Area */
482 .easyel-overview-area .easyel-video-heading{
483 max-width: 600px;
484 text-align: center;
485 margin: auto;
486 padding-bottom: 40px;
487 }
488 .easyel-overview-area .easyel-video-heading .easyel-title{
489 margin-bottom: 20px;
490 }
491 .easyel-overview-area .easyel-video-items{
492 gap:28px;
493 }
494 .easyel-overview-area .easyel-video-item{
495 flex-basis: 33%;
496 width: 33%;
497 }
498 .easyel-overview-area .easyel-video-img span{
499 display: none;
500 }
501 .easyel-overview-area .easyel-video-img a{
502 display: block;
503 border-radius: 20px;
504 overflow: hidden;
505 }
506 .easyel-overview-area .easyel-video-img a::before{
507 content: '';
508 position: absolute;
509 left: 0;
510 top: 0;
511 width: 100%;
512 height: 100%;
513 background: var(--easy-white-color);
514 opacity: 0.2;
515 }
516 .easyel-overview-area .easyel-video-img a img{
517 width: 100%;
518 max-height: 200px;
519 object-fit: cover;
520 }
521 .easyel-overview-area .easyel-video-img svg{
522 width: 50px;
523 position: absolute;
524 left: 50%;
525 top: 50%;
526 transform: translate(-50%, -50%);
527 }
528 .easyel-overview-area .easyel-video-item .easyel-video-text{
529 font-size: 16px;
530 font-weight: 600;
531 margin: 20px 0 0 ;
532 }
533 .easyel-overview-area .easyel-video-btn{
534 text-align: center;
535 margin-top: 50px;
536 }
537
538 /* Popup Style */
539 #easyel-popup-video-area {
540 display: none;
541 position: fixed;
542 inset: 0;
543 background: rgba(0,0,0,0.75);
544 z-index: 9999;
545 }
546 #easyel-popup-video-area .easyel-popup-content {
547 position: relative;
548 max-width: 800px;
549 width: 100%;
550 top: 50%;
551 left: 50%;
552 transform: translate(-50%, -50%);
553 }
554 #easyel-popup-video-area .easyel-popup-video {
555 aspect-ratio: 16 / 9;
556 border-radius: 12px;
557 overflow: hidden;
558 }
559
560 #easyel-popup-video-area .easyel-popup-close {
561 position: absolute;
562 top: -23px;
563 right: -23px;
564 font-size: 18px;
565 font-weight: bold;
566 width: 32px;
567 height: 32px;
568 color: var(--easy-white-color);
569 background: linear-gradient(to left, var(--easy-primary-color), #8E74FF 57%, var(--easy-primary-color));
570 opacity: .8;
571 border-radius: 50%;
572 cursor: pointer;
573 z-index: 10;
574 justify-content: center;
575 transition: all 0.3s ease;
576 }
577 #easyel-popup-video-area .easyel-popup-close:hover {
578 transform: scale(1.1);
579 }
580
581 #easyel-popup-video-area iframe {
582 width: 100%;
583 height: 100%;
584 border: none;
585 display: block;
586 }
587 /* End Video Area */
588
589 /* Start Faq Area */
590 .easyel-faq-area{
591 gap: 30px;
592 }
593 .easyel-faq-heading{
594 max-width: 335px;
595 width: 100%;
596 }
597 .easyel-faq-heading .easyel-title{
598 font-size: 32px;
599 margin-bottom: 30px;
600 }
601 .easyel-faq-item:not(:last-child){
602 padding-bottom: 40px;
603 }
604 .easyel-faq-item-heading {
605 position: relative;
606 width: 100%;
607 text-align: left;
608 font-size: 20px;
609 font-weight: 600;
610 padding: 0;
611 cursor: pointer;
612 background: none;
613 border: none;
614 outline: none;
615 }
616 .easyel-faq-item-heading span{
617 display: inline-block;
618 width: 93%;
619 }
620 .easyel-faq-item-heading:before {
621 content: "";
622 position: absolute;
623 right: 0;
624 width: 25px;
625 height: 25px;
626 color: var(--easy-primary-color);
627 font-size: 18px;
628 display: flex;
629 justify-content: center;
630 align-items: center;
631 border: 2px solid var(--easy-primary-color);
632 border-radius: 50%;
633 }
634 .easyel-faq-item.active .easyel-faq-item-heading:before {
635 content: "";
636 }
637 .easyel-faq-item-content {
638 display: none;
639 padding-top: 12px;
640 font-weight: 500;
641 line-height: 1.5;
642 width: 95%;
643 }
644 /* End Faq Area */
645
646 /* Start Request Feature Area */
647 .easyel-requestFeature-section{
648 background: #F9FAFD;
649 padding: 100px 40px 40px;
650 }
651 .easyel-requestFeature-heading{
652 max-width: 800px;
653 width: 100%;
654 margin: auto;
655 text-align: center;
656 margin-bottom: 60px;
657 }
658 .easyel-requestFeature-heading .easyel-title{
659 margin-bottom: 20px;
660 }
661 .easyel-requestFeature-heading .easyel-btn{
662 margin-top: 40px;
663 }
664 .easyel-requestFeature-image img{
665 width: 100%;
666 }
667 /* End Request Feature Area */
668
669 /* Start Support Area */
670 .easyel-support-area{
671 padding-top: 60px;
672 gap: 20px;
673 }
674 .easyel-support-item{
675 padding: 28px;
676 width: 50%;
677 position: relative;
678 }
679 .easyel-support-item-left{
680 background: #F9FAFD;
681 }
682 .easyel-support-item img{
683 width: 100%;
684 }
685 .easyel-support-heading{
686 max-width: 450px;
687 width: 100%;
688 margin-bottom: 110px;
689 }
690 .easyel-support-heading .easyel-title{
691 font-size: 28px;
692 margin-top: 35px;
693 margin-bottom: 28px;
694 }
695 .easyel-support-item .easyel-btn{
696 position: absolute;
697 left: 28px;
698 bottom: 28px;
699 }
700 .easyel-support-item-right{
701 background: var(--easy-primary-color);
702 }
703 .easyel-support-item-right .easyel-support-heading *{
704 color: var(--easy-white-color) !important;
705 }
706 .easyel-support-item-right .easyel-btn{
707 background: linear-gradient(to right, var(--easy-white-color), var(--easy-white-color)) padding-box,
708 linear-gradient(to right, var(--easy-primary-color), #C2B4FF) border-box;
709 color: var(--easy-primary-color);
710 }
711 .easyel-support-item-right .easyel-btn svg{
712 fill: currentColor;
713 }
714 /* End Support Area */
715
716 /****************************/
717 /* End Overview Area */
718 /****************************/
719
720 /****************************/
721 /* Start Widget Area */
722 /****************************/
723
724 /* Widget top section style */
725 .easyel-addon-search button{
726 font-size: 16px;
727 line-height: 150%;
728 border: none;
729 box-shadow: none;
730 border-radius: 8px;
731 cursor: pointer;
732 transition: all 0.3s ease;
733 }
734 .easyel-addon-search .easyel-action-btn{
735 background: #7455ff1a;
736 color: var(--easy-primary-color);
737 padding: 6px 16px;
738 margin-right: 5px;
739 }
740 .easyel-addon-search .easyel-action-btn:hover,
741 .easyel-addon-search .easyel-action-btn.active{
742 background: var(--easy-primary-color);
743 color: var(--easy-white-color);
744 }
745 .easyel-widget-activeDeactivate-button button{
746 background: var(--easy-primary-color);
747 color: var(--easy-white-color);
748 font-weight: 500;
749 padding: 12px 24px;
750 }
751 .easyel-widget-activeDeactivate-button button#deactivate-all-btn{
752 margin-left: 10px;
753 background: #E21700;
754 }
755 .easyel-addon-search #element-search{
756 width: 100%;
757 font-size: 14px;
758 background: #F4F6F8;
759 color: var(--easy-title-color);
760 padding: 8px 12px;
761 border: none;
762 box-shadow: none;
763 border-radius: 10px;
764 margin-top: 24px;
765 height: 36px;
766 }
767 .easyel-addon-search #element-search::placeholder{
768 color: #919EAB;
769 }
770 /* Widget Item Style */
771 .easyel-widgets-grid,
772 .easyel-extension-wrapper {
773 display: grid;
774 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
775 gap: 20px;
776 padding-bottom: 20px;
777 }
778 .easyel-widget-group-title,
779 .easyel-extension-group-title {
780 font-size: 20px;
781 font-weight: 600;
782 color: var(--easy-title-color);
783 margin: 40px 0 28px;
784 }
785 .easyel-widget-card {
786 position: relative;
787 overflow: hidden;
788 background: #F1F2FA;
789 padding: 10px;
790 border-radius: 12px;
791 }
792 .easyel-widget-card.easyel-pro-enable {
793 opacity: 0.7;
794 }
795 .easyel-widget-icon {
796 font-size: 24px;
797 width: 60px;
798 height: 60px;
799 background: var(--easy-white-color);
800 display: flex;
801 justify-content: center;
802 align-items: center;
803 border-radius: 8px;
804 margin-right: 12px;
805 position: relative;
806 }
807 .easyel-pro-badge {
808 position: absolute;
809 left: 50%;
810 top: -4px;
811 background-color: #F2295B;
812 color: var(--easy-white-color);
813 border-radius: 36px;
814 font-size: 8px;
815 font-weight: 500;
816 transform: translateX(-50%);
817 display: inline-flex;
818 align-items: center;
819 gap: 3px;
820 padding: 4px 6px;
821 line-height: 100%;
822 }
823 .widget-header strong{
824 font-size: 16px;
825 font-weight: 600;
826 color:var(--easy-title-color);
827 line-height: 1.2;
828 }
829 .easyel-demo-link{
830 margin-top: 8px;
831 gap: 14px;
832 }
833 .easyel-demo-link a{
834 font-size: 12px;
835 color: #09091480;
836 text-decoration: none;
837 box-shadow: none;
838 transition: 0.3s;
839 line-height: 1em;
840 }
841 .easyel-demo-link a i{
842 font-size: 14px;
843 }
844 .easyel-demo-link a:hover{
845 color: var(--easy-primary-color);
846 }
847 /* Widget Toggle switcher */
848 .easy-toggle-switch{
849 position: relative;
850 display: inline-block;
851 width: 40px;
852 height: 24px;
853 margin-top: 0;
854 }
855 .easy-toggle-switch input,
856 .easyel-toggle-switch-extension input,
857 .easyel-toggle-switch-widget input{
858 opacity: 0;
859 width: 0;
860 height: 0;
861 }
862 .easy-toggle-switch .slider{
863 position: absolute;
864 cursor: pointer;
865 top: 0;
866 left: 0;
867 right: 0;
868 bottom: 0;
869 background-color: #e9e9e9;
870 transition: .4s;
871 border-radius: 24px;
872 }
873 .easy-toggle-switch .slider:before,
874 .easyel-toggle-switch-widget .slider:before,
875 .easyel-toggle-switch-extension .slider:before,
876 .easyel-toggle-switch-widget .slider:before {
877 position: absolute;
878 content: "";
879 height: 16px;
880 width: 16px;
881 left: 4px;
882 top: 4px;
883 background-color: var(--easy-white-color);
884 transition: all .3s ease;
885 border-radius: 50%;
886 }
887 .easy-toggle-switch input:checked + .slider,
888 .easyel-toggle-switch-extension input:checked ~ .slider,
889 .easyel-toggle-switch-widget input:checked ~ .slider {
890 background-color: #22C55E;
891 }
892
893 .easy-toggle-switch input:checked + .slider:before {
894 transform: translateX(16px);
895 }
896
897 /****************************/
898 /* End Widget Area */
899 /****************************/
900
901 /****************************/
902 /* Start Extention Area */
903 /****************************/
904
905 .easyel-toggle-switch-extension,
906 .easyel-toggle-switch-widget {
907 display: inline-flex;
908 align-items: center;
909 cursor: pointer;
910 position: relative;
911 user-select: none;
912 gap: 10px;
913 }
914 .easyel-toggle-switch-extension .easyel-enable-all,
915 .easyel-toggle-switch-widget .easyel-enable-all-widget {
916 font-size: 14px;
917 font-weight: 500;
918 color: var(--easy-title-color);
919 line-height: 1;
920 white-space: nowrap;
921 }
922 .easyel-toggle-switch-extension input,
923 .easyel-toggle-switch-widget input
924 {
925 position: absolute;
926 }
927 .easyel-toggle-switch-extension .slider,
928 .easyel-toggle-switch-widget .slider
929 {
930 position: relative;
931 width: 44px;
932 height: 24px;
933 background-color: #E5E7EB;
934 border-radius: 24px;
935 transition: all 0.3s ease;
936 }
937 .easyel-toggle-switch-extension .slider:before,
938 .easyel-toggle-switch-widget .slider:before
939 {
940 background-color: #fff;
941 box-shadow: 0 2px 4px rgba(0,0,0,0.2);
942 }
943
944 .easyel-toggle-switch-extension input:checked ~ .slider:before,
945 .easyel-toggle-switch-widget input:checked ~ .slider:before
946 {
947 transform: translateX(20px);
948 }
949
950 #toplevel_page_easy-elements-dashboard .wp-menu-image {
951 background: url('../../img/easy-dashicon.svg') no-repeat center center !important;
952 background-size: 20px 20px !important;
953 }
954 /* Remove default dashicon */
955 #toplevel_page_easy-elements-dashboard .wp-menu-image:before {
956 content: none !important;
957 }
958
959 .easyel-extension-main-wrapper .easyel-widget-icon img {
960 width: 28px;
961 height: 28px;
962 max-width: 100%;
963 }
964
965 .easyel-video-section {
966 display: none;
967 }
968
969 /*black friday sale notice*/
970
971 .easyel-promo-notice {
972 padding: 0;
973 border: none !important;
974 background: #0d0c24;
975 color: #fff;
976 margin-top: 20px;
977 position: relative;
978 overflow: hidden;
979 border-radius: 6px;
980 margin-bottom: 30px;
981 }
982 .easyel-promo-content {
983 display: flex;
984 justify-content: space-between;
985 align-items: center;
986 padding: 18px 25px;
987 background: linear-gradient(90deg, #062e87, #0d0c24);
988 }
989 .easyel-promo-left {
990 font-size: 20px;
991 font-weight: 600;
992 display: flex;
993 align-items: center;
994 gap: 10px;
995 }
996 .easyel-promo-left span.orange {
997 color: #ff7a00;
998 }
999 .easyel-promo-right {
1000 font-size: 18px;
1001 font-weight: 700;
1002 }
1003 .easyel-promo-btn {
1004 background: #fff;
1005 padding: 10px 18px;
1006 border-radius: 5px;
1007 font-weight: 600;
1008 text-decoration: none;
1009 color: #000;
1010 margin-left: 20px;
1011 display: inline-flex;
1012 align-items: center;
1013 gap: 5px;
1014 font-size: 16px;
1015 }
1016 .easyel-promo-dismiss {
1017 position: absolute;
1018 right: 10px;
1019 top: 10px;
1020 color: #fff;
1021 cursor: pointer;
1022 text-decoration: none;
1023 font-size: 16px;
1024 }
1025
1026 .easyel-promo-notice .notice-dismiss::before {
1027 font-size: 30px;
1028 }
1029
1030 .easyel-promo-notice .notice-dismiss {
1031 top: 10px;
1032 right: 10px;
1033 }
1034
1035
1036 /****************************/
1037 /* End Extention Area */
1038 /****************************/
1039
1040 /****************************/
1041 /* Start Settings Area */
1042 /****************************/
1043 .easyel-settings-topbar {
1044 display: flex;
1045 justify-content: space-between;
1046 }
1047 .easyel-settings-topbar button {
1048 background: var(--easy-primary-color);
1049 color: var(--easy-white-color);
1050 font-weight: 500;
1051 padding: 12px 24px;
1052 font-size: 16px;
1053 line-height: 150%;
1054 border: none;
1055 box-shadow: none;
1056 border-radius: 8px;
1057 cursor: pointer;
1058 transition: all 0.3s ease;
1059 }
1060 .easyel-settings-wrapper .w-100 {
1061 width: 100% !important;
1062 }
1063 .easyel-settings-wrapper .easyel-settings-field {
1064 display: flex;
1065 margin-bottom: 20px;
1066 }
1067 .easyel-settings-field-label {
1068 min-width: 200px;
1069 }
1070 .easyel-settings-field-inputs {
1071 display: flex;
1072 gap: 10px;
1073 flex-direction: column;
1074 width: 100%;
1075 }
1076 .easyel-settings-field .easyel-settings-field-input {
1077 padding: 10px 20px;
1078 border-radius: 4px;
1079 border: 1px solid #ededed;
1080 width: min-content;
1081 }
1082 .easyel-settings-field-group {
1083 display: flex;
1084 gap: 10px;
1085 flex-direction: column;
1086 }
1087 .easyel-toast {
1088 position: fixed;
1089 top: 100px;
1090 right: 20px;
1091 background: #2271b1;
1092 color: #fff;
1093 padding: 10px 20px;
1094 border-radius: 5px;
1095 font-size: 14px;
1096 box-shadow: 0 4px 8px rgba(0,0,0,0.2);
1097 z-index: 99999;
1098 opacity: 0;
1099 transform: translateY(-20px);
1100 transition: all 0.3s ease;
1101 }
1102 .easyel-toast.show {
1103 opacity: 1;
1104 transform: translateY(0);
1105 }
1106 .easyel-toast.success { background: #46b450; }
1107 .easyel-toast.error { background: #d63638; }
1108 .easyel-toast.info { background: #1e73be; }
1109
1110 .easyel-export-settings .button-primary,
1111 .easyel-import-settings .button-primary
1112 {
1113 background: var(--easy-primary-color);
1114 color: var(--easy-white-color);
1115 font-weight: 500;
1116 padding: 4px 15px;
1117 outline: none;
1118 border-radius: 6px;
1119 border: none;
1120 }
1121
1122 .easyel-export-settings .button-primary:focus,
1123 .easyel-import-settings .button-primary:focus,
1124 .easyel-export-settings .button-primary:hover,
1125 .easyel-import-settings .button-primary:hover
1126 {
1127 background: var(--easy-primary-color);
1128 color: var(--easy-white-color);
1129 border: none;
1130 }
1131
1132
1133 /*scroll smoother popup settings*/
1134
1135 .easyel-scroll-smoother-popup-setting {
1136 cursor: pointer;
1137 }
1138
1139 .easyel-smooth-scroll-settings-main-wrapper {
1140 display: flex;
1141 flex-direction: column;
1142 gap: 30px;
1143 max-height: 280px;
1144 overflow-y: auto;
1145 }
1146 .easyel-smooth-scroll-heading {
1147 margin-bottom: 40px;
1148 }
1149
1150 .easyel-smooth-scroll-popup {
1151 position: fixed;
1152 top: 100px;
1153 left: 0;
1154 right: 0;
1155 width: 100%;
1156 max-width: 967px;
1157 margin: 0 auto;
1158 background: white;
1159 border-top: 1px solid #f1f0f3;
1160 box-shadow: 0px 10px 30px 5px rgba(19, 65, 98, 0.10);
1161 z-index: 104;
1162 visibility: hidden;
1163 opacity: 0;
1164 padding: 30px 20px;
1165 transition: opacity 0.3s linear, clip 0.6s linear, visibility 0s 0.2s;
1166 transform: translateZ(0);
1167 border-radius: 12px;
1168 opacity: 0;
1169 z-index: 1010;
1170 }
1171
1172 .easyel-smooth-scroll-popup .wrapper {
1173 font-weight: 400;
1174 }
1175
1176 .easyel-smooth-scroll-popup.active {
1177 visibility: visible;
1178 opacity: 1;
1179 transition: clip 0.6s linear, opacity 0.2s linear;
1180 }
1181
1182 .easyel-smooth-scroll-popup {
1183 overflow-x: hidden;
1184 overflow: hidden!important;
1185 }
1186
1187 .easyel-smooth-scroll-popup.active {
1188 overflow-x: hidden;
1189 overflow: visible!important;
1190 }
1191
1192 .easyel-smooth-scroll-popup-close-icon i.feather-search::before {
1193 content: "\ea02";
1194 }
1195
1196 .ajax-search-close-icon {
1197 position: relative;
1198 }
1199
1200 .easyel-smooth-scroll-popup .easyel-smooth-scroll-popup-close-icon {
1201 position: absolute;
1202 right: -23px;
1203 top: -25px;
1204 width: 40px;
1205 height: 40px;
1206 z-index: 1020;
1207 border-radius: 50%;
1208 border: 1px solid #E3E0F5;
1209 display: flex;
1210 align-items: center;
1211 justify-content: center;
1212 background-color: #fff;
1213 cursor: pointer;
1214 }
1215 .easyel-smooth-scroll-popup .easyel-smooth-scroll-popup-close-icon i {
1216 color: #04122B;
1217 text-align: center;
1218 font-family: "Font Awesome 6 Pro";
1219 font-size: 22px;
1220 font-style: normal;
1221 font-weight: 400;
1222 line-height: 22px;
1223 cursor: pointer;
1224 }
1225
1226 .easyel-smooth-scroll-popup {
1227 position: fixed;
1228 top: 100px;
1229 left: 0;
1230 right: 0;
1231 width: 100%;
1232 max-width: 700px;
1233 margin: 0 auto;
1234 background: white;
1235 border-top: 1px solid #f1f0f3;
1236 box-shadow: 0px 10px 30px 5px rgba(19, 65, 98, 0.1);
1237 z-index: 104;
1238 visibility: hidden;
1239 opacity: 0;
1240 transition: opacity 0.3s linear, clip 0.6s linear, visibility 0s 0.2s;
1241 transform: translateZ(0);
1242 border-radius: 12px;
1243 opacity: 0;
1244 z-index: 1010;
1245 }
1246
1247 .easyel-smooth-scroll-popup.active {
1248 visibility: visible;
1249 opacity: 1;
1250 transition: clip 0.6s linear, opacity 0.2s linear;
1251 }
1252
1253 .easyel-smooth-scroll-popup {
1254 overflow-x: hidden;
1255 overflow: hidden !important;
1256 }
1257
1258 .easyel-smooth-scroll-popup.active {
1259 overflow-x: hidden;
1260 overflow: visible !important;
1261 }
1262
1263 .easyel-smooth-scroll-popup-close-icon i.feather-search::before {
1264 content: "\ea02";
1265 }
1266
1267 .ajax-search-close-icon {
1268 position: relative;
1269 }
1270
1271 .easyel-smooth-scroll-popup .easyel-smooth-scroll-popup-close-icon {
1272 position: absolute;
1273 right: -38px;
1274 top: -50px;
1275 width: 35px;
1276 height: 35px;
1277 z-index: 1020;
1278 border-radius: 50%;
1279 border: 1px solid #E3E0F5;
1280 display: flex;
1281 align-items: center;
1282 justify-content: center;
1283 background-color: #fff;
1284 cursor: pointer;
1285 }
1286
1287 .easyel-smooth-scroll-popup .easyel-smooth-scroll-popup-close-icon i {
1288 color: #04122B;
1289 text-align: center;
1290 font-family: "Font Awesome 6 Pro";
1291 font-size: 22px;
1292 font-style: normal;
1293 font-weight: 400;
1294 line-height: 22px;
1295 cursor: pointer;
1296 }
1297
1298 .easyel-smooth-scroll-popup.active .rbt-search-all-product {
1299 overflow-y: auto !important;
1300 max-height: calc(100vh - 180px);
1301 }
1302
1303 .easyel-smooth-scroll-popup .rbt-search-all-product {
1304 overflow-x: hidden;
1305 }
1306
1307 .popup-opened #wpbody-content::before {
1308 content: " ";
1309 position: absolute;
1310 top: 0;
1311 left: 0;
1312 width: 100%;
1313 height: 100%;
1314 background-color: rgb(0 0 0 / 52%);
1315 z-index: 1002;
1316 transition: all 0.7s;
1317 }
1318
1319 .easyel-smooth-scroll-popup .easyel-smooth-scroll-popup-close-icon:focus {
1320 outline: none;
1321 border: none;
1322 box-shadow: unset!important;
1323 }
1324
1325 .easyel-smooth-scroll-popup .easyel-smooth-scroll-popup-close-icon:hover {
1326 background: var(--easy-primary-color);
1327 color: var(--easy-white-color);
1328 }
1329
1330 .easyel-smooth-scroll-popup .easyel-smooth-scroll-popup-close-icon:hover svg path {
1331 fill: #fff!important;
1332 }
1333
1334 .smooth-scroll-popup-item-save {
1335 display: flex;
1336 align-items: center;
1337 justify-content: flex-end;
1338 }
1339
1340 .smooth_scroll_popup_item_save {
1341 font-size: 14px;
1342 font-weight: bold;
1343 line-height: 30px;
1344 padding: 2px 15px;
1345 background: var(--easy-primary-color);
1346 color: var(--easy-white-color);
1347 border: 1px solid #0074e0;
1348 border-radius: 5px;
1349 margin-top: 30px;
1350 cursor: pointer;
1351 }
1352
1353
1354 .easyel-smooth-scroll-item {
1355 display: flex;
1356 align-items: center;
1357 gap: 15px;
1358 }
1359
1360 .easyel-smooth-scroll-item .easy-field-label {
1361 flex: 0 0 35%;
1362 }
1363
1364 .easyel-smooth-scroll-item .easy-field-item input[type="number"] {
1365 width: 150px;
1366 }
1367
1368 #easyel-message-box {
1369 position: fixed;
1370 top: 60px;
1371 right: 20px;
1372 background-color: #0074E0;
1373 border: 1px solid #0074E0;
1374 padding: 10px 15px;
1375 z-index: 9999;
1376 box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
1377 border-radius: 5px;
1378 display: none;
1379 width: 200px;
1380 text-transform: capitalize;
1381 text-align: center;
1382 font-size: 18px;
1383 color: #fff;
1384 }
1385
1386 #easyel-message-box p {
1387 margin: 0;
1388 font-size: 14px;
1389 text-align: center;
1390 color: #fff;
1391 }
1392
1393 .easyel-plugin-main-settings-page {
1394 position: relative;
1395 }
1396
1397 .easyel-plugin-main-settings-page::after {
1398 content: "";
1399 position: absolute;
1400 inset: 0;
1401 background: rgba(255, 255, 255, 0.6);
1402 opacity: 0;
1403 visibility: hidden;
1404 transition: opacity 0.3s ease;
1405 z-index: 10;
1406 }
1407
1408
1409 .easyel-plugin-main-settings-page.is-saving::after {
1410 opacity: 1;
1411 visibility: visible;
1412 }
1413
1414 .easyel-saving-indicator {
1415 position: fixed;
1416 top: 50%;
1417 left: 50%;
1418 transform: translate(-50%, -50%);
1419 font-size: 14px;
1420 font-weight: 600;
1421 padding: 6px 14px;
1422 border-radius: 4px;
1423 z-index: 99999;
1424 color: #3b82f6;
1425 opacity: 0;
1426
1427 }
1428
1429 .easyel-plugin-main-settings-page.is-saving .easyel-saving-indicator {
1430 opacity: 1;
1431 }
1432
1433
1434 /*custom font*/
1435
1436 .easyel-custom-font {
1437 font-family: "Inter", sans-serif;
1438 color: #1e293b;
1439 max-width: 1000px;
1440 margin: 20px auto;
1441 padding: 0 15px;
1442 }
1443
1444 .easyel-custom-font-banner {
1445 background: linear-gradient(135deg, #6d28d9, #a855f7);
1446 color: #fff;
1447 padding: 50px 40px;
1448 border-radius: 14px;
1449 text-align: center;
1450 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
1451 margin-bottom: 40px;
1452 }
1453
1454 .easyel-custom-font-banner h1 {
1455 margin-bottom: 10px;
1456 font-size: 28px;
1457 font-weight: 700;
1458 color: #fff;
1459 }
1460
1461 .easyel-custom-font-banner p {
1462 font-size: 15px;
1463 opacity: 0.9;
1464 margin-bottom: 20px;
1465 }
1466
1467 .easyel-upgrade-btn-custom-font {
1468 background: #fff;
1469 color: #6d28d9;
1470 font-weight: 600;
1471 text-decoration: none;
1472 padding: 10px 22px;
1473 border-radius: 6px;
1474 transition: all 0.3s ease;
1475 display: inline-block;
1476 }
1477
1478 .easyel-upgrade-btn-custom-font:hover {
1479 background: #ede9fe;
1480 color: #4c1d95;
1481 }
1482
1483 .easyel-custom-font-page {
1484 font-family: "Inter", sans-serif;
1485 color: #1e293b;
1486 max-width: 1000px;
1487 margin: 20px auto;
1488 padding: 0 15px;
1489 }
1490
1491 .easyel-promo-right a {
1492 color: #fff;
1493 font-size: 18px;
1494 }
1495
1496 /****************************/
1497 /* End Settings Area */
1498 /****************************/
1499
1500 /****************************/
1501 /* Start Responsive Area */
1502 /****************************/
1503 @media only screen and (min-width: 1600px) and (max-width: 1700px) {
1504 .easyel-banner-section .easyel-shape-3 {
1505 width: 45%;
1506 height: 100%;
1507 }
1508 }
1509
1510 @media only screen and (min-width: 1367px) and (max-width: 1599px) {
1511 .easyel-banner-section .easyel-shape-3 {
1512 width: 40%;
1513 height: 100%;
1514 }
1515 }
1516
1517
1518 @media only screen and (max-width: 1400px) {
1519 .easyel-nav-tab-item {
1520 width: 25%;
1521 }
1522 .easyel-plugin-settings-wrapper{
1523 gap: 20px;
1524 }
1525 .easyel-section-gap {
1526 padding: 80px 10px;
1527 }
1528 }
1529
1530 @media only screen and (max-width: 1366px) {
1531 .easyel-banner-section .easyel-shape-3 {
1532 display: none;
1533 }
1534 }
1535 @media only screen and (max-width: 1250px) {
1536 .easyel-section-heading .easyel-title{
1537 font-size: 28px;
1538 }
1539 .easyel-section-heading .easyel-desc{
1540 font-size: 16px;
1541 }
1542 }
1543
1544 @media only screen and (max-width: 990px) {
1545 .easyel-plugin-settings-wrapper{
1546 display: grid;
1547 }
1548 .easyel-nav-tab-item,
1549 #easyel-tab-content {
1550 width: 100%;
1551 }
1552 .easyel-overview-area .easyel-banner-content .title{
1553 font-size: 36px;
1554 }
1555 .easyel-overview-area .easyel-position-rl{
1556 background-image: none;
1557 }
1558 .easyel-overview-area .easyel-banner-content-area {
1559 padding: 100px 26px 60px;
1560 }
1561 .easyel-overview-area .easyel-banner-rating{
1562 display: grid;
1563 }
1564 .easyel-nav-tab, .easyel-nav-tab-pro{
1565 margin-bottom: 0;
1566 }
1567 }