PluginProbe
Easy Elements for Elementor – Addons & Website Templates / 1.2.1
Easy Elements for Elementor – Addons & Website Templates v1.2.1
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.1, at assets/css/admin/admin.css

1,433 lines 30.9 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: 80%;
373 }
374
375 /************************/
376 /* Start Overview Area */
377 /***********************/
378 .easyel-overview-area{
379 margin: 0;
380 }
381 /* Start Banner Area */
382 .easyel-overview-area .easyel-banner-section .easyel-shape-2{
383 margin-top: 30px;
384 }
385 .easyel-overview-area .easyel-banner-content-area{
386 background: #f1f2fa80;
387 padding: 120px 60px 78px;
388 }
389 .easyel-overview-area .easyel-banner-content{
390 max-width: 432px;
391 width: 100%;
392 position: relative;
393 z-index: 2;
394 }
395 .easyel-overview-area .easyel-banner-content .title{
396 margin-top: 40px;
397 font-size: 56px;
398 line-height: 1em;
399 }
400 .easyel-overview-area .easyel-banner-content .title span{
401 color: var(--easy-primary-color);
402 font-weight: 700;
403 }
404 .easyel-overview-area .easyel-banner-rating{
405 gap: 30px;
406 margin-top: 70px;
407 }
408 .easyel-overview-area .easyel-rating-content{
409 gap: 20px;
410 }
411 .easyel-overview-area .easyel-banner-rating h3{
412 font-size: 40px;
413 margin: 0;
414 }
415 .easyel-overview-area .easyel-rating .rating-icon i{
416 color: #1CB165;
417 font-size: 16px;
418 width: 16px;
419 height: 16px;
420 }
421 .easyel-overview-area .easyel-rating span{
422 color: var(--easy-black-color);
423 font-size: 14px;
424 }
425 .easyel-overview-area .easyel-btn{
426 display: inline-flex;
427 align-items: center;
428 gap: 10px;
429 font-size: 16px;
430 font-weight: 600;
431 padding: 14px 28px;
432 color: var(--easy-white-color);
433 border: 2px solid transparent;
434 border-radius: 30px;
435 background: linear-gradient(to right, #8E74FF, var(--easy-primary-color) 57%, var(--easy-primary-color)) padding-box,
436 linear-gradient(to right, var(--easy-primary-color), #C2B4FF) border-box;
437 background-size: 200% 100%;
438 background-position: left center;
439 transition: all 0.4s ease;
440 }
441 .easyel-overview-area .easyel-btn i{
442 font-size: 22px;
443 }
444 .easyel-overview-area .easyel-btn:focus,
445 .easyel-overview-area .easyel-btn:hover{
446 color: var(--easy-white-color);
447 background: linear-gradient(to left, var(--easy-primary-color), #8E74FF 57%, var(--easy-primary-color)) padding-box,
448 linear-gradient(to left, #C2B4FF, var(--easy-primary-color) ) border-box;
449 background-size: 200% 100%;
450 background-position: right center;
451 box-shadow: none;
452 outline: none;
453 }
454
455 /* End Banner Area */
456
457 /* Start Documentation Area */
458 .easyel-overview-area .easyel-docx-area{
459 gap: 40px;
460 }
461 .easyel-overview-area .easyel-docx-image-area{
462 background: #F9FAFD;
463 padding: 50px;
464 }
465 .easyel-overview-area .easyel-docx-image-area img{
466 max-width: 100%;
467 }
468 .easyel-overview-area .easyel-docx-content{
469 max-width: 490px;
470 width: 100%;
471 padding-bottom: 55px;
472 }
473 /* End Documentation Area */
474
475 /* Start Video Area */
476 .easyel-overview-area .easyel-video-heading{
477 max-width: 600px;
478 text-align: center;
479 margin: auto;
480 padding-bottom: 40px;
481 }
482 .easyel-overview-area .easyel-video-heading .easyel-title{
483 margin-bottom: 20px;
484 }
485 .easyel-overview-area .easyel-video-items{
486 gap:28px;
487 }
488 .easyel-overview-area .easyel-video-item{
489 flex-basis: 33%;
490 width: 33%;
491 }
492 .easyel-overview-area .easyel-video-img span{
493 display: none;
494 }
495 .easyel-overview-area .easyel-video-img a{
496 display: block;
497 border-radius: 20px;
498 overflow: hidden;
499 }
500 .easyel-overview-area .easyel-video-img a::before{
501 content: '';
502 position: absolute;
503 left: 0;
504 top: 0;
505 width: 100%;
506 height: 100%;
507 background: var(--easy-white-color);
508 opacity: 0.2;
509 }
510 .easyel-overview-area .easyel-video-img a img{
511 width: 100%;
512 max-height: 200px;
513 object-fit: cover;
514 }
515 .easyel-overview-area .easyel-video-img svg{
516 width: 50px;
517 position: absolute;
518 left: 50%;
519 top: 50%;
520 transform: translate(-50%, -50%);
521 }
522 .easyel-overview-area .easyel-video-item .easyel-video-text{
523 font-size: 16px;
524 font-weight: 600;
525 margin: 20px 0 0 ;
526 }
527 .easyel-overview-area .easyel-video-btn{
528 text-align: center;
529 margin-top: 50px;
530 }
531
532 /* Popup Style */
533 #easyel-popup-video-area {
534 display: none;
535 position: fixed;
536 inset: 0;
537 background: rgba(0,0,0,0.75);
538 z-index: 9999;
539 }
540 #easyel-popup-video-area .easyel-popup-content {
541 position: relative;
542 max-width: 800px;
543 width: 100%;
544 top: 50%;
545 left: 50%;
546 transform: translate(-50%, -50%);
547 }
548 #easyel-popup-video-area .easyel-popup-video {
549 aspect-ratio: 16 / 9;
550 border-radius: 12px;
551 overflow: hidden;
552 }
553
554 #easyel-popup-video-area .easyel-popup-close {
555 position: absolute;
556 top: -23px;
557 right: -23px;
558 font-size: 18px;
559 font-weight: bold;
560 width: 32px;
561 height: 32px;
562 color: var(--easy-white-color);
563 background: linear-gradient(to left, var(--easy-primary-color), #8E74FF 57%, var(--easy-primary-color));
564 opacity: .8;
565 border-radius: 50%;
566 cursor: pointer;
567 z-index: 10;
568 justify-content: center;
569 transition: all 0.3s ease;
570 }
571 #easyel-popup-video-area .easyel-popup-close:hover {
572 transform: scale(1.1);
573 }
574
575 #easyel-popup-video-area iframe {
576 width: 100%;
577 height: 100%;
578 border: none;
579 display: block;
580 }
581 /* End Video Area */
582
583 /* Start Faq Area */
584 .easyel-faq-area{
585 gap: 30px;
586 }
587 .easyel-faq-heading{
588 max-width: 335px;
589 width: 100%;
590 }
591 .easyel-faq-heading .easyel-title{
592 font-size: 32px;
593 margin-bottom: 30px;
594 }
595 .easyel-faq-item:not(:last-child){
596 padding-bottom: 40px;
597 }
598 .easyel-faq-item-heading {
599 position: relative;
600 width: 100%;
601 text-align: left;
602 font-size: 20px;
603 font-weight: 600;
604 padding: 0;
605 cursor: pointer;
606 background: none;
607 border: none;
608 outline: none;
609 }
610 .easyel-faq-item-heading span{
611 display: inline-block;
612 width: 93%;
613 }
614 .easyel-faq-item-heading:before {
615 content: "";
616 position: absolute;
617 right: 0;
618 width: 25px;
619 height: 25px;
620 color: var(--easy-primary-color);
621 font-size: 18px;
622 display: flex;
623 justify-content: center;
624 align-items: center;
625 border: 2px solid var(--easy-primary-color);
626 border-radius: 50%;
627 }
628 .easyel-faq-item.active .easyel-faq-item-heading:before {
629 content: "";
630 }
631 .easyel-faq-item-content {
632 display: none;
633 padding-top: 12px;
634 font-weight: 500;
635 line-height: 1.5;
636 width: 95%;
637 }
638 /* End Faq Area */
639
640 /* Start Request Feature Area */
641 .easyel-requestFeature-section{
642 background: #F9FAFD;
643 padding: 100px 40px 40px;
644 }
645 .easyel-requestFeature-heading{
646 max-width: 800px;
647 width: 100%;
648 margin: auto;
649 text-align: center;
650 margin-bottom: 60px;
651 }
652 .easyel-requestFeature-heading .easyel-title{
653 margin-bottom: 20px;
654 }
655 .easyel-requestFeature-heading .easyel-btn{
656 margin-top: 40px;
657 }
658 .easyel-requestFeature-image img{
659 width: 100%;
660 }
661 /* End Request Feature Area */
662
663 /* Start Support Area */
664 .easyel-support-area{
665 padding-top: 60px;
666 gap: 20px;
667 }
668 .easyel-support-item{
669 padding: 28px;
670 width: 50%;
671 position: relative;
672 }
673 .easyel-support-item-left{
674 background: #F9FAFD;
675 }
676 .easyel-support-item img{
677 width: 100%;
678 }
679 .easyel-support-heading{
680 max-width: 450px;
681 width: 100%;
682 margin-bottom: 110px;
683 }
684 .easyel-support-heading .easyel-title{
685 font-size: 28px;
686 margin-top: 35px;
687 margin-bottom: 28px;
688 }
689 .easyel-support-item .easyel-btn{
690 position: absolute;
691 left: 28px;
692 bottom: 28px;
693 }
694 .easyel-support-item-right{
695 background: var(--easy-primary-color);
696 }
697 .easyel-support-item-right .easyel-support-heading *{
698 color: var(--easy-white-color) !important;
699 }
700 .easyel-support-item-right .easyel-btn{
701 background: linear-gradient(to right, var(--easy-white-color), var(--easy-white-color)) padding-box,
702 linear-gradient(to right, var(--easy-primary-color), #C2B4FF) border-box;
703 color: var(--easy-primary-color);
704 }
705 .easyel-support-item-right .easyel-btn svg{
706 fill: currentColor;
707 }
708 /* End Support Area */
709
710 /****************************/
711 /* End Overview Area */
712 /****************************/
713
714 /****************************/
715 /* Start Widget Area */
716 /****************************/
717
718 /* Widget top section style */
719 .easyel-addon-search button{
720 font-size: 16px;
721 line-height: 150%;
722 border: none;
723 box-shadow: none;
724 border-radius: 8px;
725 cursor: pointer;
726 transition: all 0.3s ease;
727 }
728 .easyel-addon-search .easyel-action-btn{
729 background: #7455ff1a;
730 color: var(--easy-primary-color);
731 padding: 6px 16px;
732 margin-right: 5px;
733 }
734 .easyel-addon-search .easyel-action-btn:hover,
735 .easyel-addon-search .easyel-action-btn.active{
736 background: var(--easy-primary-color);
737 color: var(--easy-white-color);
738 }
739 .easyel-widget-activeDeactivate-button button{
740 background: var(--easy-primary-color);
741 color: var(--easy-white-color);
742 font-weight: 500;
743 padding: 12px 24px;
744 }
745 .easyel-widget-activeDeactivate-button button#deactivate-all-btn{
746 margin-left: 10px;
747 background: #E21700;
748 }
749 .easyel-addon-search #element-search{
750 width: 100%;
751 font-size: 14px;
752 background: #F4F6F8;
753 color: var(--easy-title-color);
754 padding: 8px 12px;
755 border: none;
756 box-shadow: none;
757 border-radius: 10px;
758 margin-top: 24px;
759 height: 36px;
760 }
761 .easyel-addon-search #element-search::placeholder{
762 color: #919EAB;
763 }
764 /* Widget Item Style */
765 .easyel-widgets-grid,
766 .easyel-extension-wrapper {
767 display: grid;
768 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
769 gap: 20px;
770 padding-bottom: 20px;
771 }
772 .easyel-widget-group-title,
773 .easyel-extension-group-title {
774 font-size: 20px;
775 font-weight: 600;
776 color: var(--easy-title-color);
777 margin: 40px 0 28px;
778 }
779 .easyel-widget-card {
780 position: relative;
781 overflow: hidden;
782 background: #F1F2FA;
783 padding: 10px;
784 border-radius: 12px;
785 }
786 .easyel-widget-card.easyel-pro-enable {
787 opacity: 0.7;
788 }
789 .easyel-widget-icon {
790 font-size: 24px;
791 width: 60px;
792 height: 60px;
793 background: var(--easy-white-color);
794 display: flex;
795 justify-content: center;
796 align-items: center;
797 border-radius: 8px;
798 margin-right: 12px;
799 position: relative;
800 }
801 .easyel-pro-badge {
802 position: absolute;
803 left: 50%;
804 top: -4px;
805 background-color: #F2295B;
806 color: var(--easy-white-color);
807 border-radius: 36px;
808 font-size: 8px;
809 font-weight: 500;
810 transform: translateX(-50%);
811 display: inline-flex;
812 align-items: center;
813 gap: 3px;
814 padding: 4px 6px;
815 line-height: 100%;
816 }
817 .widget-header strong{
818 font-size: 16px;
819 font-weight: 600;
820 color:var(--easy-title-color);
821 line-height: 1.2;
822 }
823 .easyel-demo-link{
824 margin-top: 8px;
825 gap: 14px;
826 }
827 .easyel-demo-link a{
828 font-size: 12px;
829 color: #09091480;
830 text-decoration: none;
831 box-shadow: none;
832 transition: 0.3s;
833 line-height: 1em;
834 }
835 .easyel-demo-link a i{
836 font-size: 14px;
837 }
838 .easyel-demo-link a:hover{
839 color: var(--easy-primary-color);
840 }
841 /* Widget Toggle switcher */
842 .easy-toggle-switch{
843 position: relative;
844 display: inline-block;
845 width: 40px;
846 height: 24px;
847 margin-top: 0;
848 }
849 .easy-toggle-switch input,
850 .easyel-toggle-switch-extension input,
851 .easyel-toggle-switch-widget input{
852 opacity: 0;
853 width: 0;
854 height: 0;
855 }
856 .easy-toggle-switch .slider{
857 position: absolute;
858 cursor: pointer;
859 top: 0;
860 left: 0;
861 right: 0;
862 bottom: 0;
863 background-color: #e9e9e9;
864 transition: .4s;
865 border-radius: 24px;
866 }
867 .easy-toggle-switch .slider:before,
868 .easyel-toggle-switch-widget .slider:before,
869 .easyel-toggle-switch-extension .slider:before,
870 .easyel-toggle-switch-widget .slider:before {
871 position: absolute;
872 content: "";
873 height: 16px;
874 width: 16px;
875 left: 4px;
876 top: 4px;
877 background-color: var(--easy-white-color);
878 transition: all .3s ease;
879 border-radius: 50%;
880 }
881 .easy-toggle-switch input:checked + .slider,
882 .easyel-toggle-switch-extension input:checked ~ .slider,
883 .easyel-toggle-switch-widget input:checked ~ .slider {
884 background-color: #22C55E;
885 }
886
887 .easy-toggle-switch input:checked + .slider:before {
888 transform: translateX(16px);
889 }
890
891 /****************************/
892 /* End Widget Area */
893 /****************************/
894
895 /****************************/
896 /* Start Extention Area */
897 /****************************/
898
899 .easyel-toggle-switch-extension,
900 .easyel-toggle-switch-widget {
901 display: inline-flex;
902 align-items: center;
903 cursor: pointer;
904 position: relative;
905 user-select: none;
906 gap: 10px;
907 }
908 .easyel-toggle-switch-extension .easyel-enable-all,
909 .easyel-toggle-switch-widget .easyel-enable-all-widget {
910 font-size: 14px;
911 font-weight: 500;
912 color: var(--easy-title-color);
913 line-height: 1;
914 white-space: nowrap;
915 }
916 .easyel-toggle-switch-extension input,
917 .easyel-toggle-switch-widget input
918 {
919 position: absolute;
920 }
921 .easyel-toggle-switch-extension .slider,
922 .easyel-toggle-switch-widget .slider
923 {
924 position: relative;
925 width: 44px;
926 height: 24px;
927 background-color: #E5E7EB;
928 border-radius: 24px;
929 transition: all 0.3s ease;
930 }
931 .easyel-toggle-switch-extension .slider:before,
932 .easyel-toggle-switch-widget .slider:before
933 {
934 background-color: #fff;
935 box-shadow: 0 2px 4px rgba(0,0,0,0.2);
936 }
937
938 .easyel-toggle-switch-extension input:checked ~ .slider:before,
939 .easyel-toggle-switch-widget input:checked ~ .slider:before
940 {
941 transform: translateX(20px);
942 }
943
944 #toplevel_page_easy-elements-dashboard .wp-menu-image {
945 background: url('../../img/easy-dashicon.svg') no-repeat center center !important;
946 background-size: 20px 20px !important;
947 }
948 /* Remove default dashicon */
949 #toplevel_page_easy-elements-dashboard .wp-menu-image:before {
950 content: none !important;
951 }
952
953 .easyel-extension-main-wrapper .easyel-widget-icon img {
954 width: 28px;
955 height: 28px;
956 max-width: 100%;
957 }
958
959 .easyel-video-section {
960 display: none;
961 }
962
963 /*black friday sale notice*/
964
965 .easyel-promo-notice {
966 padding: 0;
967 border: none !important;
968 background: #0d0c24;
969 color: #fff;
970 margin-top: 20px;
971 position: relative;
972 overflow: hidden;
973 border-radius: 6px;
974 margin-bottom: 30px;
975 }
976 .easyel-promo-content {
977 display: flex;
978 justify-content: space-between;
979 align-items: center;
980 padding: 18px 25px;
981 background: linear-gradient(90deg, #062e87, #0d0c24);
982 }
983 .easyel-promo-left {
984 font-size: 20px;
985 font-weight: 600;
986 display: flex;
987 align-items: center;
988 gap: 10px;
989 }
990 .easyel-promo-left span.orange {
991 color: #ff7a00;
992 }
993 .easyel-promo-right {
994 font-size: 18px;
995 font-weight: 700;
996 }
997 .easyel-promo-btn {
998 background: #fff;
999 padding: 10px 18px;
1000 border-radius: 5px;
1001 font-weight: 600;
1002 text-decoration: none;
1003 color: #000;
1004 margin-left: 20px;
1005 display: inline-flex;
1006 align-items: center;
1007 gap: 5px;
1008 font-size: 16px;
1009 }
1010 .easyel-promo-dismiss {
1011 position: absolute;
1012 right: 10px;
1013 top: 10px;
1014 color: #fff;
1015 cursor: pointer;
1016 text-decoration: none;
1017 font-size: 16px;
1018 }
1019
1020 .easyel-promo-notice .notice-dismiss::before {
1021 font-size: 30px;
1022 }
1023
1024 .easyel-promo-notice .notice-dismiss {
1025 top: 10px;
1026 right: 10px;
1027 }
1028
1029
1030 /****************************/
1031 /* End Extention Area */
1032 /****************************/
1033
1034 /****************************/
1035 /* Start Settings Area */
1036 /****************************/
1037 .easyel-settings-topbar {
1038 display: flex;
1039 justify-content: space-between;
1040 }
1041 .easyel-settings-topbar button {
1042 background: var(--easy-primary-color);
1043 color: var(--easy-white-color);
1044 font-weight: 500;
1045 padding: 12px 24px;
1046 font-size: 16px;
1047 line-height: 150%;
1048 border: none;
1049 box-shadow: none;
1050 border-radius: 8px;
1051 cursor: pointer;
1052 transition: all 0.3s ease;
1053 }
1054 .easyel-settings-wrapper .w-100 {
1055 width: 100% !important;
1056 }
1057 .easyel-settings-wrapper .easyel-settings-field {
1058 display: flex;
1059 margin-bottom: 20px;
1060 }
1061 .easyel-settings-field-label {
1062 min-width: 200px;
1063 }
1064 .easyel-settings-field-inputs {
1065 display: flex;
1066 gap: 10px;
1067 flex-direction: column;
1068 width: 100%;
1069 }
1070 .easyel-settings-field .easyel-settings-field-input {
1071 padding: 10px 20px;
1072 border-radius: 4px;
1073 border: 1px solid #ededed;
1074 width: min-content;
1075 }
1076 .easyel-settings-field-group {
1077 display: flex;
1078 gap: 10px;
1079 flex-direction: column;
1080 }
1081 .easyel-toast {
1082 position: fixed;
1083 top: 100px;
1084 right: 20px;
1085 background: #2271b1;
1086 color: #fff;
1087 padding: 10px 20px;
1088 border-radius: 5px;
1089 font-size: 14px;
1090 box-shadow: 0 4px 8px rgba(0,0,0,0.2);
1091 z-index: 99999;
1092 opacity: 0;
1093 transform: translateY(-20px);
1094 transition: all 0.3s ease;
1095 }
1096 .easyel-toast.show {
1097 opacity: 1;
1098 transform: translateY(0);
1099 }
1100 .easyel-toast.success { background: #46b450; }
1101 .easyel-toast.error { background: #d63638; }
1102 .easyel-toast.info { background: #1e73be; }
1103
1104 .easyel-export-settings .button-primary,
1105 .easyel-import-settings .button-primary
1106 {
1107 background: var(--easy-primary-color);
1108 color: var(--easy-white-color);
1109 font-weight: 500;
1110 padding: 4px 15px;
1111 outline: none;
1112 border-radius: 6px;
1113 border: none;
1114 }
1115
1116 .easyel-export-settings .button-primary:focus,
1117 .easyel-import-settings .button-primary:focus,
1118 .easyel-export-settings .button-primary:hover,
1119 .easyel-import-settings .button-primary:hover
1120 {
1121 background: var(--easy-primary-color);
1122 color: var(--easy-white-color);
1123 border: none;
1124 }
1125
1126
1127 /*scroll smoother popup settings*/
1128
1129 .easyel-scroll-smoother-popup-setting {
1130 cursor: pointer;
1131 }
1132
1133 .easyel-smooth-scroll-settings-main-wrapper {
1134 display: flex;
1135 flex-direction: column;
1136 gap: 30px;
1137 max-height: 280px;
1138 overflow-y: auto;
1139 }
1140 .easyel-smooth-scroll-heading {
1141 margin-bottom: 40px;
1142 }
1143
1144 .easyel-smooth-scroll-popup {
1145 position: fixed;
1146 top: 100px;
1147 left: 0;
1148 right: 0;
1149 width: 100%;
1150 max-width: 967px;
1151 margin: 0 auto;
1152 background: white;
1153 border-top: 1px solid #f1f0f3;
1154 box-shadow: 0px 10px 30px 5px rgba(19, 65, 98, 0.10);
1155 z-index: 104;
1156 visibility: hidden;
1157 opacity: 0;
1158 padding: 30px 20px;
1159 transition: opacity 0.3s linear, clip 0.6s linear, visibility 0s 0.2s;
1160 transform: translateZ(0);
1161 border-radius: 12px;
1162 opacity: 0;
1163 z-index: 1010;
1164 }
1165
1166 .easyel-smooth-scroll-popup .wrapper {
1167 font-weight: 400;
1168 }
1169
1170 .easyel-smooth-scroll-popup.active {
1171 visibility: visible;
1172 opacity: 1;
1173 transition: clip 0.6s linear, opacity 0.2s linear;
1174 }
1175
1176 .easyel-smooth-scroll-popup {
1177 overflow-x: hidden;
1178 overflow: hidden!important;
1179 }
1180
1181 .easyel-smooth-scroll-popup.active {
1182 overflow-x: hidden;
1183 overflow: visible!important;
1184 }
1185
1186 .easyel-smooth-scroll-popup-close-icon i.feather-search::before {
1187 content: "\ea02";
1188 }
1189
1190 .ajax-search-close-icon {
1191 position: relative;
1192 }
1193
1194 .easyel-smooth-scroll-popup .easyel-smooth-scroll-popup-close-icon {
1195 position: absolute;
1196 right: -23px;
1197 top: -25px;
1198 width: 40px;
1199 height: 40px;
1200 z-index: 1020;
1201 border-radius: 50%;
1202 border: 1px solid #E3E0F5;
1203 display: flex;
1204 align-items: center;
1205 justify-content: center;
1206 background-color: #fff;
1207 cursor: pointer;
1208 }
1209 .easyel-smooth-scroll-popup .easyel-smooth-scroll-popup-close-icon i {
1210 color: #04122B;
1211 text-align: center;
1212 font-family: "Font Awesome 6 Pro";
1213 font-size: 22px;
1214 font-style: normal;
1215 font-weight: 400;
1216 line-height: 22px;
1217 cursor: pointer;
1218 }
1219
1220 .easyel-smooth-scroll-popup {
1221 position: fixed;
1222 top: 100px;
1223 left: 0;
1224 right: 0;
1225 width: 100%;
1226 max-width: 700px;
1227 margin: 0 auto;
1228 background: white;
1229 border-top: 1px solid #f1f0f3;
1230 box-shadow: 0px 10px 30px 5px rgba(19, 65, 98, 0.1);
1231 z-index: 104;
1232 visibility: hidden;
1233 opacity: 0;
1234 transition: opacity 0.3s linear, clip 0.6s linear, visibility 0s 0.2s;
1235 transform: translateZ(0);
1236 border-radius: 12px;
1237 opacity: 0;
1238 z-index: 1010;
1239 }
1240
1241 .easyel-smooth-scroll-popup.active {
1242 visibility: visible;
1243 opacity: 1;
1244 transition: clip 0.6s linear, opacity 0.2s linear;
1245 }
1246
1247 .easyel-smooth-scroll-popup {
1248 overflow-x: hidden;
1249 overflow: hidden !important;
1250 }
1251
1252 .easyel-smooth-scroll-popup.active {
1253 overflow-x: hidden;
1254 overflow: visible !important;
1255 }
1256
1257 .easyel-smooth-scroll-popup-close-icon i.feather-search::before {
1258 content: "\ea02";
1259 }
1260
1261 .ajax-search-close-icon {
1262 position: relative;
1263 }
1264
1265 .easyel-smooth-scroll-popup .easyel-smooth-scroll-popup-close-icon {
1266 position: absolute;
1267 right: -38px;
1268 top: -50px;
1269 width: 35px;
1270 height: 35px;
1271 z-index: 1020;
1272 border-radius: 50%;
1273 border: 1px solid #E3E0F5;
1274 display: flex;
1275 align-items: center;
1276 justify-content: center;
1277 background-color: #fff;
1278 cursor: pointer;
1279 }
1280
1281 .easyel-smooth-scroll-popup .easyel-smooth-scroll-popup-close-icon i {
1282 color: #04122B;
1283 text-align: center;
1284 font-family: "Font Awesome 6 Pro";
1285 font-size: 22px;
1286 font-style: normal;
1287 font-weight: 400;
1288 line-height: 22px;
1289 cursor: pointer;
1290 }
1291
1292 .easyel-smooth-scroll-popup.active .rbt-search-all-product {
1293 overflow-y: auto !important;
1294 max-height: calc(100vh - 180px);
1295 }
1296
1297 .easyel-smooth-scroll-popup .rbt-search-all-product {
1298 overflow-x: hidden;
1299 }
1300
1301 .popup-opened #wpbody-content::before {
1302 content: " ";
1303 position: absolute;
1304 top: 0;
1305 left: 0;
1306 width: 100%;
1307 height: 100%;
1308 background-color: rgb(0 0 0 / 52%);
1309 z-index: 1002;
1310 transition: all 0.7s;
1311 }
1312
1313 .easyel-smooth-scroll-popup .easyel-smooth-scroll-popup-close-icon:focus {
1314 outline: none;
1315 border: none;
1316 box-shadow: unset!important;
1317 }
1318
1319 .easyel-smooth-scroll-popup .easyel-smooth-scroll-popup-close-icon:hover {
1320 background: var(--easy-primary-color);
1321 color: var(--easy-white-color);
1322 }
1323
1324 .easyel-smooth-scroll-popup .easyel-smooth-scroll-popup-close-icon:hover svg path {
1325 fill: #fff!important;
1326 }
1327
1328 .smooth-scroll-popup-item-save {
1329 display: flex;
1330 align-items: center;
1331 justify-content: flex-end;
1332 }
1333
1334 .smooth_scroll_popup_item_save {
1335 font-size: 14px;
1336 font-weight: bold;
1337 line-height: 30px;
1338 padding: 2px 15px;
1339 background: var(--easy-primary-color);
1340 color: var(--easy-white-color);
1341 border: 1px solid #0074e0;
1342 border-radius: 5px;
1343 margin-top: 30px;
1344 cursor: pointer;
1345 }
1346
1347
1348 .easyel-smooth-scroll-item {
1349 display: flex;
1350 align-items: center;
1351 gap: 15px;
1352 }
1353
1354 .easyel-smooth-scroll-item .easy-field-label {
1355 flex: 0 0 35%;
1356 }
1357
1358 .easyel-smooth-scroll-item .easy-field-item input[type="number"] {
1359 width: 150px;
1360 }
1361
1362 #easyel-message-box {
1363 position: fixed;
1364 top: 60px;
1365 right: 20px;
1366 background-color: #0074E0;
1367 border: 1px solid #0074E0;
1368 padding: 10px 15px;
1369 z-index: 9999;
1370 box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
1371 border-radius: 5px;
1372 display: none;
1373 width: 200px;
1374 text-transform: capitalize;
1375 text-align: center;
1376 font-size: 18px;
1377 color: #fff;
1378 }
1379
1380 #easyel-message-box p {
1381 margin: 0;
1382 font-size: 14px;
1383 text-align: center;
1384 color: #fff;
1385 }
1386
1387 /****************************/
1388 /* End Settings Area */
1389 /****************************/
1390
1391 /****************************/
1392 /* Start Responsive Area */
1393 /****************************/
1394 @media only screen and (min-width: 1600px) and (max-width: 1700px) {
1395 .easyel-banner-section .easyel-shape-3 {
1396 width: 45%;
1397 height: 100%;
1398 }
1399 }
1400
1401 @media only screen and (min-width: 1367px) and (max-width: 1599px) {
1402 .easyel-banner-section .easyel-shape-3 {
1403 width: 40%;
1404 height: 100%;
1405 }
1406 }
1407
1408
1409 @media only screen and (max-width: 1400px) {
1410 .easyel-nav-tab-item {
1411 width: 25%;
1412 }
1413 .easyel-plugin-settings-wrapper{
1414 gap: 20px;
1415 }
1416 .easyel-section-gap {
1417 padding: 80px 10px;
1418 }
1419 }
1420
1421 @media only screen and (max-width: 1366px) {
1422 .easyel-banner-section .easyel-shape-3 {
1423 display: none;
1424 }
1425 }
1426 @media only screen and (max-width: 1250px) {
1427 .easyel-section-heading .easyel-title{
1428 font-size: 28px;
1429 }
1430 .easyel-section-heading .easyel-desc{
1431 font-size: 16px;
1432 }
1433 }