PluginProbe
Page Builder: Pagelayer – Drag and Drop website builder / 2.2.2
Page Builder: Pagelayer – Drag and Drop website builder v2.2.2
2.2.2 2.2.1 2.2.0 2.1.9 2.1.8 2.1.7 2.1.6 2.1.5 2.1.4 2.1.3 trunk 0.9.0 0.9.1 0.9.2 0.9.3 0.9.4 0.9.5 0.9.6 0.9.7 0.9.8 0.9.9 1.0.0 1.0.2 1.0.3 1.0.4 All 130 releases
← All changes | css/pagelayer-editor.css +5785 -269 0.9.2 → 2.2.2 View file →
@@ -8,12 +8,14 @@
8 8
9 9 html {
10 10 line-height: 1.15; /* 1 */
11 11 -webkit-text-size-adjust: 100%; /* 2 */
12 + overflow: hidden !important;
12 13 }
13 14
14 15 body {
15 16 margin: 0;
17 + overflow: hidden !important;
16 18 }
17 19
18 20 main {
19 21 display: block;
@@ -191,9 +193,9 @@
191 193
192 194 /* An overwrite to show the row irrespective in the editor */
193 195
194 196 body {
195 -font-family: Arial;
197 +font-family: Roboto, 'Open Sans', Arial, Helvetica, sans-serif;
196 198 font-size:12px;
197 199 }
198 200
199 201 .pagelayer-normalize{
@@ -205,10 +207,11 @@
205 207 }
206 208
207 209 /* Pagelayer Top Bar */
208 210 .pagelayer-bottombar-holder{
209 -background: #f69c55;
211 +background: #4f4f4f;
210 212 position:relative;
213 +padding: 5px;
211 214 }
212 215
213 216 .pagelayer-bottombar{
214 217 padding: auto;
@@ -214,28 +217,65 @@
214 217 padding: auto;
215 218 }
216 219
217 220 .pagelayer-bottombar-rightbuttons button{
218 -font-size: 14px;
221 +font-size: 13px;
219 222 font-weight: bold;
220 223 cursor: pointer;
221 224 border-radius: 2px;
222 225 padding: 4px 8px;
223 226 margin: auto 5px;
227 +outline:none;
224 228 }
225 229
226 -.pagelayer-update-button{
230 +.pagelayer-bottombar-rightbuttons .pli{
231 +color:#fff;
232 +cursor: pointer;
233 +}
234 +
235 +.pagelayer-success-btn{
227 236 border: #398439 1px solid;
228 237 color: #fff;
229 238 background: #449d44;
230 239 }
231 240
241 +.pagelayer-success-btn:hover{
242 +background: #3a733a;
243 +border-color: #3a733a;
244 +}
245 +
246 +.pagelayer-primary-btn{
247 +border: #2e6da4 1px solid;
248 +color: #fff;
249 +background: #337ab7;
250 +}
251 +
252 +.pagelayer-primary-btn:hover{
253 +background: #286090;
254 +border-color: #204d74;
255 +}
256 +
232 257 .pagelayer-close-button{
233 -border: #CDCDCD 1px solid;
258 +border: #ef4d4d 1px solid;
234 259 color: #fff;
235 -background: #CDCDCD;
260 +background: #ef4d4d;
236 261 }
237 262
263 +.pagelayer-close-button:hover{
264 +background: #c13030;
265 +border-color: #c13030;
266 +}
267 +
268 +.pagelayer-bottombar-rightbuttons i{
269 +padding: 4px;
270 +margin: auto 3px;
271 +}
272 +
273 +.pagelayer-mode-wrapper i{
274 +padding: 8px;
275 +margin: auto 5px;
276 +}
277 +
238 278 .pagelayer-mode-wrapper{
239 279 display:inline-block;
240 280 text-align:center;
241 281 }
@@ -240,9 +280,8 @@
240 280 text-align:center;
241 281 }
242 282
243 283 .pagelayer-mode-wrapper i{
244 -cursor: pointer;
245 284 padding: 8px;
246 285 margin: auto 5px;
247 286 }
248 287
@@ -251,8 +290,9 @@
251 290 bottom:100%;
252 291 color:#fff;
253 292 background-color: #3e8ef7;
254 293 display:none;
294 +z-index:1;
255 295 }
256 296
257 297 .pagelayer-leftbar-toggle-h{
258 298 width:0px;
@@ -257,8 +297,20 @@
257 297 .pagelayer-leftbar-toggle-h{
258 298 width:0px;
259 299 }
260 300
301 +.pagelayer-leftbar-table{
302 +position:relative;
303 +}
304 +
305 +.pagelayer-leftbar-hidden{
306 +width:0px;
307 +}
308 +
309 +.pagelayer-leftbar-hidden table{
310 +display:none;
311 +}
312 +
261 313 .pagelayer-leftbar-toggle{
262 314 position: absolute;
263 315 width:12px;
264 316 background: #E3E3E3;
@@ -264,10 +316,22 @@
264 316 background: #E3E3E3;
265 317 cursor: pointer;
266 318 text-align:center;
267 319 line-height:300%;
320 +top: 50%;
321 +left: 100%;
322 +transform: translateY(-50%);
268 323 }
269 324
325 +.pagelayer-rightbar .pagelayer-leftbar-toggle{
326 +left: -12px;
327 +}
328 +
329 +.pagelayer-rightbar:not(.pagelayer-leftbar-hidden) .pagelayer-leftbar-toggle,
330 +.pagelayer-leftbar-hidden:not(.pagelayer-rightbar) .pagelayer-leftbar-toggle{
331 +direction: rtl;
332 +}
333 +
270 334 .pagelayer-leftbar-toggle:hover{
271 335 background-color: #3e8ef7;
272 336 color: #ffffff;
273 337 }
@@ -278,30 +342,63 @@
278 342 top: 0;
279 343 bottom: 0;
280 344 left: 0;
281 345 right: 0;
346 +border-right: 1px solid #c9d0d9;
282 347 }
283 348
284 -.pagelayer-iframe{
285 -}
349 +/*.pagelayer-body-table{
350 +max-height: 100vh !important;
351 +}*/
286 352
353 +.pagelayer-iframe {}
354 +
287 355 .pagelayer-iframe-holder{
288 -max-height:100vh !important;
356 +max-height: 100vh !important;
289 357 height: 100%;
290 358 overflow: auto;
291 359 text-align:center;
292 360 }
293 361
362 +.pagelayer-iframe-holder.pagelayer-iframe-holder-with-bar{
363 +max-height: calc(100vh - 45px) !important;
364 +height: calc(100vh - 45px) !important;
365 +}
366 +
367 +.pagelayer-iframe-top-bar{
368 +height:45px;
369 +background-color: #3e8ef7;
370 +display:none;
371 +color: #fff;
372 +}
373 +
294 374 .pagelayer-body{
295 375 transition:0.5s;
296 376 }
297 377
298 -.pagelayer-screen-desktop{
378 +.pagelayer-pro-req{
379 +font-size: 10px;
380 +padding: 2px 4px;
381 +display: inline-block;
382 +background-color: #e63131;
383 +color: #fff;
384 +margin-left: 4px;
385 +border-radius: 2px;
386 +cursor: pointer;
387 +}
299 388
389 +.pagelayer-pro-req > .pagelayer-tlite{
390 +background: #fff;
391 +color: #000;
392 +width: 220px !important;
393 +white-space: inherit !important;
394 +top: 22px !important;
395 +left: 0px !important;
300 396 }
301 397
398 +.pagelayer-screen-desktop {}
399 +
302 400 .pagelayer-screen-tablet{
303 -width:768px;
304 401 height:900px;
305 402 margin:20px auto;
306 403 border: solid #444;
307 404 border-width: 30px 10px;
@@ -308,9 +405,8 @@
308 405 border-radius: 10px;
309 406 }
310 407
311 408 .pagelayer-screen-mobile{
312 -width:360px;
313 409 height:540px;
314 410 margin:20px auto;
315 411 border: solid #444;
316 412 border-width: 30px 10px;
@@ -318,26 +414,28 @@
318 414 }
319 415
320 416 /* Element Properties Dialog classes */
321 417 [class^="pagelayer-elp"]{
322 -font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
418 +font-family: Roboto, 'Open Sans', Arial, Helvetica, sans-serif !important;
323 419 color: #313439;
324 420 background-color: transparent;
325 421 }
326 422
327 423 #pagelayer-elpd {
328 -background-color: #f1f1f1;
329 424 display:none;
330 425 color:#444;
331 426 border: 1px solid #d3d3d3;
332 427 }
333 428
429 +.pagelayer-dark #pagelayer-elpd {
430 +border: 1px solid #252529;
431 +}
432 +
334 433 #pagelayer-elpd .slimScrollDiv{
335 434 height: calc(100% - 50px) !important;
336 435 }
337 436
338 437 .pagelayer-elpd-header {
339 -background-color: #3e8ef7;
340 438 border: none;
341 439 color:#fff;
342 440 }
343 441
@@ -346,19 +444,20 @@
346 444 padding:0px;
347 445 cursor: move;
348 446 color: #fff;
349 447 font-weight: 600;
448 +width:76%;
350 449 }
351 450
352 451 .pagelayer-elpd-close {
353 -float:right;
354 452 padding-right:10px;
355 453 cursor: pointer;
356 454 margin: 0px;
357 -position: relative;
455 +position: absolute;
358 456 right: 5px;
359 457 color: #fff;
360 -font-weight: 600;
458 +top: 50%;
459 +transform: translateY(-50%);
361 460 }
362 461
363 462 .pagelayer-elpd-body{
364 463 border: none;
@@ -365,36 +464,70 @@
365 464 }
366 465
367 466 .pagelayer-elpd-section-rows{
368 467 background-color: #FFF;
468 +border-top: 1px solid #d3d3d3;
369 469 }
370 470
471 +.pagelayer-dark .pagelayer-elpd-section-rows{
472 +background-color: #1c1c1f;
473 +border-top: 1px solid #1c1c1f;
474 +}
475 +
371 476 .pagelayer-elpd-section-name{
372 477 margin-top: 10px;
373 478 padding: 11px 10px;
374 -border-bottom: 1px solid #d3d3d3;
375 479 background-color: #FFF;
376 -font-size: 12px;
480 +font-size: 13px;
377 481 font-weight: bold;
378 -color: #666;
482 +color: #555;
379 483 cursor: pointer;
484 +transition: all 0.3s;
380 485 }
381 486
382 -.pagelayer-elpd-section-name:not(.pagelayer-elpd-section-open) .fa:before{
487 +.pagelayer-dark .pagelayer-elpd-section-name{
488 +background-color: #252529;
489 +font-family: Roboto;
490 +font-size: 12px;
491 +font-weight: 400;
492 +color: #ffffff;
493 +}
494 +
495 +.pagelayer-elpd-section-name:hover,
496 +.pagelayer-elpd-section-open{
497 +color:#1a7fb0;
498 +}
499 +
500 +.pagelayer-dark .pagelayer-elpd-section-open{
501 +background-color: #0d47a1;
502 +}
503 +
504 +.pagelayer-dark .pagelayer-elpd-section-name:hover{
505 +color:#ffffff;
506 +}
507 +
508 +.pagelayer-elpd-section-name:not(.pagelayer-elpd-section-open) .pli:before,
509 +.pagelayer-navigator-toggle .pagalayer-arrow:before{
383 510 content: "\f0da";
511 +font-family: pagelayer;
384 512 }
385 -.pagelayer-elpd-section-name.pagelayer-elpd-section-open .fa:before{
513 +.pagelayer-elpd-section-name.pagelayer-elpd-section-open .pli:before,
514 +.pagelayer-navigator-open > .pagelayer-navigator-toggle .pagalayer-arrow:before{
386 515 content: "\f0d7";
516 +font-family: pagelayer;
387 517 }
388 518
389 -.pagelayer-elpd-section-name .fa{
519 +.pagelayer-elpd-section-name .pli{
390 520 width:15px;
391 521 float:right;
522 +font-style: normal;
392 523 }
393 524
394 525 /* Pagelayer editor panel tabs*/
395 526
396 -.pagelayer-elpd-tab{
527 +.pagelayer-elpd-tab,
528 +.pagelayer-history-tab,
529 +.pagelayer-widget-tab{
397 530 display: inline-block;
398 531 font-size: 13px;
399 532 cursor: pointer;
400 533 padding: 10px 6px;
@@ -400,8 +533,23 @@
400 533 padding: 10px 6px;
401 534 margin: 0px 5px 0px 0px;
402 535 }
403 536
537 +.pagelayer-elpd-tab:hover,
538 +.pagelayer-history-tab:hover,
539 +.pagelayer-widget-tab:hover{
540 +color: #3e8ef7;
541 +}
542 +
543 +.pagelayer-dark .pagelayer-elpd-tab,
544 +.pagelayer-dark .pagelayer-history-tab,
545 +.pagelayer-dark .pagelayer-widget-tab{
546 +font-family: Roboto !important;
547 +color:#777777;
548 +font-size: 14px;
549 +font-weight: 400;
550 +}
551 +
404 552 .pagelayer-elpd-settings-body{
405 553 display: none;
406 554 }
407 555
@@ -416,17 +564,68 @@
416 564 .pagelayer-elpd-style-body.active{
417 565 display: block;
418 566 }
419 567
420 -[pagelayer-elpd-active-tab="1"] {
421 -color: #3e8ef7;
568 +.pagelayer-history-section{
569 +display:none;
422 570 }
423 571
424 -.pagelayer-elpd-tabs {
572 +.pagelayer-history-body{
573 +margin:10px 0px;
574 +padding:10px;
575 +background-color:#ffffff;
576 +}
577 +
578 +.pagelayer-history-section.active{
579 +display:block;
580 +}
581 +
582 +.pagelayer-history-section.active[pagelayer-show-tab="actions"]{
583 +display:flex;
584 +flex-direction:column-reverse;
585 +}
586 +
587 +[pagelayer-elpd-active-tab="1"],
588 +[pagelayer-history-active-tab="1"] {
589 +color: #2563eb;
590 +border-bottom: 2px solid #2563eb;
591 +}
592 +
593 +.pagelayer-dark [pagelayer-elpd-active-tab="1"],
594 +.pagelayer-dark [pagelayer-history-active-tab="1"]{
595 +color: #ffffff;
596 +}
597 +
598 +.pagelayer-elpd-tabs,
599 +.pagelayer-history-tabs,
600 +.pagelayer-widget-tabs {
425 601 background-color: #fff;
426 602 border-bottom: 1px solid #d3d3d3;
427 603 }
428 604
605 +.pagelayer-dark .pagelayer-elpd-tabs,
606 +.pagelayer-dark .pagelayer-history-tabs,
607 +.pagelayer-dark .pagelayer-widget-tabs{
608 +background-color: #1c1c1f;
609 +border-bottom: 1px solid #1c1c1f;
610 +}
611 +
612 +
613 +.pagelayer-elpd-tabs{
614 +display: flex;
615 +align-items: center;
616 +}
617 +
618 +.pagelayer-widget-tabs{
619 +display: flex;
620 +text-align: center;
621 +margin-left: -17px;
622 +}
623 +
624 +.pagelayer-widget-tab{
625 +flex:1;
626 +}
627 +
429 628 .pagelayer-elpd-options{
430 629 text-align:right;
431 630 display:inline-block;
432 631 margin-right:10px;
@@ -436,8 +635,16 @@
436 635 padding:4px 5px;
437 636 cursor:pointer;
438 637 }
439 638
639 +.pagelayer-dark .pagelayer-elpd-options i{
640 +color:#777777;
641 +}
642 +
643 +.pagelayer-dark .pagelayer-elpd-options i:hover{
644 +color: #ffffff;
645 +}
646 +
440 647 .pagelayer-form-item {
441 648 border-bottom: 1px dashed #e6e6e6;
442 649 padding: 10px 8px 10px 6px;
443 650 margin-bottom: 0px;
@@ -443,14 +650,39 @@
443 650 margin-bottom: 0px;
444 651 position: relative;
445 652 }
446 653
447 -.pagelayer-elp-label-div{
654 +[pagelayer-access-item]{
655 +position: absolute;
656 +z-index: -100;
657 +top: 0px;
658 +visibility: hidden;
659 +}
660 +
661 +.pagelayer-access-item-visible{
662 +position: relative !important;
663 +z-index: unset !important;
664 +visibility: visible !important;
665 +}
666 +
667 +.pagelayer-dark .pagelayer-form-item{
668 +border-bottom: 1px dashed #686870;
669 +}
670 +
671 +.pagelayer-form-item:hover .pagelayer-elp-default[data_show=true]{
672 +display:initial;
673 +}
674 +
675 +.pagelayer-elp-label-div, .pagelayer-elp-link-label-div{
448 676 padding:4px 0px 4px 0px;
449 677 position:relative;
450 678 }
451 679
452 -.pagelayer-elp-label{
680 +.pagelayer-elp-label-div[type=select]{
681 +width:50%;
682 +}
683 +
684 +.pagelayer-elp-label, .pagelayer-elp-link-label{
453 685 display: inline-block;
454 686 color: #555;
455 687 font-size: 12px;
456 688 line-height: 150%;
@@ -455,33 +687,114 @@
455 687 font-size: 12px;
456 688 line-height: 150%;
457 689 }
458 690
691 +.pagelayer-dark .pagelayer-elp-label,
692 +.pagelayer-dark .pagelayer-elp-link-label,
693 +.pagelayer-dark .pagelayer-post-category,
694 +.pagelayer-dark .pagelayer-elp-postCategory,
695 +.pagelayer-dark .pagelayer-elp-postdate::-webkit-datetime-edit-second-field{
696 +color:#bdbdbd;
697 +}
698 +
699 +.pagelayer-elp-heading{
700 +font-size: 13px;
701 +font-weight:600;
702 +line-height: 150%;
703 +}
704 +
459 705 .pagelayer-elp-screen{
460 706 display: inline-block;
707 +text-align: center;
708 +z-index: 1;
709 +vertical-align: middle;
710 +position: relative;
461 711 }
462 712
463 -.pagelayer-elp-screen .fa{
464 -padding:1px 6px;
713 +.pagelayer-elp-screen .pli{
714 +padding: 0;
465 715 cursor: pointer;
716 +box-shadow: 0 0 0.5rem #babbbc;
717 +height: 30px;
718 +width: 30px;
719 +border-radius: 50%;
720 +line-height: 30px;
721 +transition-duration: 0.1s;
466 722 }
467 723
468 -.pagelayer-elp-screen .fa:hover{
469 -color: #07a;
724 +.pagelayer-dark .pagelayer-elp-screen .pli{
725 +color:#bdbdbd;
470 726 }
471 727
472 -.pagelayer-elp-screen .fa-tablet{
473 -font-size:1.2em;
728 +
729 +.pagelayer-elp-screen .pli-desktop:not(.pagelayer-prop-screen),
730 +.pagelayer-elp-screen .pli-tablet:not(.pagelayer-prop-screen),
731 +.pagelayer-elp-screen .pli-mobile:not(.pagelayer-prop-screen){
732 +position: absolute;
733 +transform: none;
734 +left: 0;
735 +display:none;
736 +opacity:0;
737 +background:#aaaaaa;
738 +color:#ffffff;
474 739 }
475 740
476 -.pagelayer-elp-screen .fa-mobile{
477 -font-size:1.3em;
741 +.pagelayer-dark .pagelayer-elp-screen .pli-desktop:not(.pagelayer-prop-screen),
742 +.pagelayer-dark .pagelayer-elp-screen .pli-tablet:not(.pagelayer-prop-screen),
743 +.pagelayer-dark .pagelayer-elp-screen .pli-mobile:not(.pagelayer-prop-screen){
744 +background:#0d47a1;
478 745 }
479 746
480 -.pagelayer-elp-screen{
481 -display: inline-block;
747 +.pagelayer-elp-screen .pli-desktop.open{
748 +transform: rotate(-90deg) translate(30px, -27px) rotate(90deg);
749 +transition-delay: 0s;
750 +top:-5px;
751 +left: 40px;
752 +opacity:1;
753 +display:block;
482 754 }
483 755
756 +.pagelayer-elp-screen .pli-tablet.open{
757 +transform: rotate(-90deg) translate(0px, -6px) rotate(90deg);
758 +transition-delay: 0.1s;
759 +top:0px;
760 +left: 40px;
761 +opacity:1;
762 +display:block;
763 +}
764 +
765 +.pagelayer-elp-screen .pli-mobile.open{
766 +transform: rotate(-90deg) translate(-30px, -27px) rotate(90deg);
767 +transition-delay: 0.2s;
768 +top:5px;
769 +left: 40px;
770 +opacity:1;
771 +display:block;
772 +}
773 +
774 +.pagelayer-elp-screen .pagelayer-prop-screen{
775 +box-shadow: none;
776 +z-index: 2;
777 +font-size: 12px;
778 +height: 20px;
779 +width: 20px;
780 +line-height: 20px;
781 +}
782 +
783 +.pagelayer-elp-screen .pli:not(.pagelayer-prop-screen):hover{
784 +background-color: #2563eb;
785 +}
786 +
787 +.pagelayer-dark .pagelayer-elp-screen .pli:not(.pagelayer-prop-screen):hover{
788 +background-color: #2563eb;
789 +}
790 +
791 +.pagelayer-elp-screen .pagelayer-prop-screen:hover,
792 +.pagelayer-typo-default:hover i,
793 +.pagelayer-elp-default:hover i{
794 +color: #2563eb;
795 +}
796 +
484 797 .pagelayer-elp-units{
485 798 display: inline-block;
486 799 float:right;
487 800 padding-top:4px;
@@ -492,70 +805,290 @@
492 805 font-size:12px;
493 806 cursor: pointer;
494 807 }
495 808
809 +.pagelayer-dark .pagelayer-elp-units span{
810 +color:#bdbdbd;
811 +}
812 +
496 813 .pagelayer-elp-units span[selected] {
497 814 color: #3e8ef7;
498 815 }
499 816
500 -.pagelayer-elp-desc{
501 -color: rgba(49, 52, 57, 0.8);
817 +/* Default button css start */
818 +.pagelayer-elp-default{
819 +display:none;
820 +width: 20px;
821 +height: 20px;
822 +cursor: pointer;
823 +margin-left: 4px;
824 +position: absolute;
825 +top: 9px;
826 +}
827 +
828 +.pagelayer-elp-default:focus{
829 +outline:none;
830 +}
831 +
832 +.pagelayer-elp-default i{
833 +font-size: 10px;
834 +color: black;
835 +}
836 +
837 +/* Default button css ends */
838 +
839 +.pagelayer-elp-desc, .pagelayer-elp-permalink-a, .pagelayer-elp-link-desc{
840 +color:#757575;
502 841 font-size: 12px;
503 842 line-height: 20px;
504 843 font-style: italic;
505 844 margin-top: 5px;
845 +display:block;
846 +word-break: break-word;
506 847 }
507 848
508 849 .pagelayer-elpd-body input,
509 850 .pagelayer-elpd-body textarea,
510 851 .pagelayer-elpd-body select,
511 -.pagelayer-elpd-body option{
852 +.pagelayer-elpd-body option,
853 +.pagelayer-elp-multiselect{
512 854 font-size: 13px !important;
513 855 color: #666;
514 856 border-radius: unset;
515 857 border:1px solid #CCC;
516 -line-height: 26px;
517 858 width: 100%;
518 859 }
519 860
861 +.pagelayer-elp-textarea{
862 +border-radius: 3px !important;
863 +resize:vertical;
864 +}
865 +
866 +.pagelayer-dark .pagelayer-elpd-body input,
867 +.pagelayer-dark .pagelayer-elpd-body textarea,
868 +.pagelayer-dark .pagelayer-elpd-body select,
869 +.pagelayer-dark .pagelayer-elpd-body option,
870 +.pagelayer-dark .pagelayer-add-cat-btn input,
871 +.pagelayer-dark .pagelayer-elp-multiselect{
872 + border:1px solid #6e6d6d;
873 +}
874 +
875 +.pagelayer-dark .pagelayer-elpd-body input,
876 +.pagelayer-dark .pagelayer-elpd-body textarea,
877 +.pagelayer-dark .pagelayer-elpd-body select,
878 +.pagelayer-dark .pagelayer-elpd-body option,
879 +.pagelayer-dark .pagelayer-add-cat-btn input,
880 +.pagelayer-dark .pagelayer-elp-multiselect{
881 +color:#bdbdbd;
882 +}
883 +
520 884 .pagelayer-elpd-body input:focus,
521 885 .pagelayer-elpd-body textarea:focus,
522 886 .pagelayer-elpd-body select:focus{
523 -border-color: #00A0D2;
524 -box-shadow: 0 0 1px #00A0D2 inset;
887 +border-color: #2563eb;
888 +box-shadow: 0 0 1px #2563eb inset;
525 889 }
526 890
527 891 .pagelayer-elp-button{
528 -text-transform: unset;
529 -border: 1px solid #00A0D2;
530 -font-weight: unset;
531 -font-size: 12px;
532 -padding: 12px 10px;
533 -min-height: unset;
534 -background-color: #3e8ef7;
535 -color: #fff;
536 -transition: all 0.3s;
537 -border-radius: unset;
538 -border-radius: 2px;
539 -padding: 10px 15px;
540 -cursor:pointer;
892 +text-transform: unset !important;
893 +border: 1px solid #2563eb !important;
894 +font-weight: 500 !important;
895 +font-size: 13px !important;
896 +margin: 15px auto !important;
897 +min-height: unset !important;
898 +background-color: #2563eb !important;
899 +color: #ffffff !important;
900 +transition: all 0.2s ease !important;
901 +border-radius: 6px !important;
902 +padding: 8px 18px !important;
903 +cursor: pointer !important;
904 +display: block !important;
541 905 }
542 906
543 907 .pagelayer-elp-button:hover{
544 -background-color: #3e8ef7bf;
545 -border-color: #00A0D2;
908 +background-color: #1d4ed8 !important;
909 +border-color: #1d4ed8 !important;
546 910 }
547 911
548 -.pagelayer-elp-image-div{
912 +.pagelayer-dark .pagelayer-elp-button{
913 +background-color: #2563eb !important;
914 +border-color: #2563eb !important;
915 +}
916 +
917 +.pagelayer-dark .pagelayer-elp-button:hover{
918 +background-color: #3b82f6 !important;
919 +border-color: #3b82f6 !important;
920 +}
921 +
922 +.pagelayer-elp-group-item .pagelayer-form-item{
923 +padding: 8px 12px !important;
924 +}
925 +
926 +.pagelayer-elp-image-div,
927 +.pagelayer-elp-retina-image-div,
928 +.pagelayer-elp-retina-mobile-image-div{
549 929 padding:7px;
550 930 width:90%;
551 931 margin:5px auto;
552 932 height:150px;
553 -border: 1px solid #d5dadf;
554 933 position:relative;
555 -border: 1px solid #3e8ef7;
934 +border: 1px solid #2563eb;
556 935 }
557 936
937 +/* image drop zone css start */
938 +.pagelayer-elp-drop-zone{
939 +position:absolute;
940 +text-align:center;
941 +width:100%;
942 +height:100%;
943 +top:0;
944 +left:0;
945 +z-index:3;
946 +background-color: rgba(37, 99, 235, 0.94);
947 +display:none;
948 +}
949 +
950 +.pagelayer-elp-drop-zone *{
951 +pointer-events: none;
952 +}
953 +
954 +.pagelayer-elp-drop-zone > div{
955 +position: relative;
956 +top: 50%;
957 +-webkit-transform: translateY(-50%);
958 +-ms-transform: translateY(-50%);
959 +transform: translateY(-50%);
960 +text-align:center;
961 +}
962 +
963 +.pagelayer-elp-drop-zone div *{
964 +color:white;
965 +}
966 +
967 +.pagelayer-elp-drop-zone div i{
968 +font-size:20px;
969 +}
970 +
971 +.pagelayer-elp-drop-zone div h4{
972 +margin: 12px;
973 +}
974 +
975 +.pagelayer-elp-img-up-progress {
976 +width: 50%;
977 +margin-left: auto;
978 +margin-right: auto;
979 +background-color: transparent;
980 +border: 2px solid white;
981 +border-radius: 20px;
982 +padding: 4px;
983 +}
984 +
985 +.pagelayer-elp-img-up-bar {
986 +width: 3%;
987 +height: 5px;
988 +background-color: white;
989 +line-height: 5px;
990 +text-align: center;
991 +border-radius: 20px;
992 +}
993 +/* image drop zone css start */
994 +
995 +.pagelayer-elp-modal,
996 +.pagelayer-elp-access{
997 +cursor: pointer;
998 +padding: 10px;
999 +display: block;
1000 +margin: 0 auto;
1001 +position: absolute;
1002 +font-size:1.5rem;
1003 +top: 0px;
1004 +right: 12px;
1005 +color: #333;
1006 +vertical-align: middle;
1007 +}
1008 +
1009 +.pagelayer-elp-access .pli-caret-right{
1010 +font-size: 18px;
1011 +line-height: 1.5;
1012 +}
1013 +
1014 +.pagelayer-elp-access .pli-caret-right:hover{
1015 +color: #3e8ef7;
1016 +}
1017 +
1018 +.pagelayer-elp-access .pli-caret-open:before{
1019 +content: "\f0d7" !important;
1020 +}
1021 +
1022 +.pagelayer-pro-notice,
1023 +.pagelayer-confirm-box-holder {
1024 +position: fixed;
1025 +top: 0px;
1026 +z-index: 10000;
1027 +width: 100%;
1028 +display: none;
1029 +left: 0px;
1030 +height: 100vh;
1031 +}
1032 +
1033 +.pagelayer-pro-div,
1034 +.pagelayer-confirm-box{
1035 +margin: 25vh auto;
1036 +max-width: 500px;
1037 +padding: 20px;
1038 +background-color: #fff;
1039 +box-shadow: 0 0 15px -5px;
1040 +}
1041 +
1042 +.pagelayer-pro-x{
1043 +float:right;
1044 +font-size: 13px;
1045 +cursor: pointer;
1046 +}
1047 +
1048 +.pagelayer-pro-head{
1049 +text-align: center;
1050 +}
1051 +
1052 +.pagelayer-pro-message,
1053 +.pagelayer-confirmation-msg{
1054 +margin: 25px auto;
1055 +font-size: 15px;
1056 +padding: 2px 25px;
1057 +text-align: center;
1058 +line-height: 1.8;
1059 +}
1060 +
1061 +.button-pagelayer{
1062 +padding: 12px 25px !important;
1063 +font-size: 15px !important;
1064 +font-weight: bold;
1065 +background: #7444fd !important;
1066 +color: #fff !important;
1067 +border: 1px solid #7444fd !important;
1068 +transition: all .3s linear;
1069 +cursor: pointer;
1070 +text-decoration: none;
1071 +display: inline-block;
1072 +}
1073 +
1074 +.button-pagelayer:hover{
1075 +background: #fff !important;
1076 +color: #7444fd !important;
1077 +}
1078 +
1079 +.pagelayer-elp-access-holder{
1080 +position: absolute;
1081 +border: 1px solid #ccc;
1082 +top: 42px;
1083 +background: #fff;
1084 +z-index: 100;
1085 +right: 8px;
1086 +width: 95%;
1087 +box-shadow: 0 0 15px -5px;
1088 +display: none;
1089 +}
1090 +
558 1091 .pagelayer-elp-image{
559 1092 height: 100%;
560 1093 -webkit-background-size: cover;
561 1094 background-size: cover;
@@ -562,15 +1095,18 @@
562 1095 background-position: 50%;
563 1096 cursor:pointer;
564 1097 }
565 1098
566 -.pagelayer-elp-image-delete{
1099 +.pagelayer-elp-image-delete,
1100 +.pagelayer-elp-retina-delete,
1101 +.pagelayer-elp-retina-mobile-delete,
1102 +.pagelayer-elp-image-retina{
567 1103 cursor: pointer;
568 1104 position: absolute;
569 1105 top: 4px;
570 1106 right: 4px;
571 -background-color: #3e8ef7;
572 -padding: 5px 9px;
1107 +background-color: #2563eb;
1108 +padding: 5px 9px;
573 1109 max-width: 28px;
574 1110 max-height: 28px;
575 1111 -webkit-box-sizing: content-box;
576 1112 -moz-box-sizing: content-box;
@@ -577,9 +1113,27 @@
577 1113 box-sizing: content-box;
578 1114 border-radius: 2px;
579 1115 }
580 1116
581 -.pagelayer-elp-image-delete .fa{
1117 +.pagelayer-elp-image-retina{
1118 +right:50px;
1119 +}
1120 +
1121 +.pagelayer-elp-image-ai{
1122 +position: absolute;
1123 +top: -5px;
1124 +left: -5px;
1125 +}
1126 +
1127 +.pagelayer-elp-image-ai input{
1128 +width: 18px;
1129 +height: 18px;
1130 +}
1131 +
1132 +.pagelayer-elp-image-delete .pli,
1133 +.pagelayer-elp-retina-delete .pli,
1134 +.pagelayer-elp-retina-mobile-delete .pli,
1135 +.pagelayer-elp-image-retina .pli{
582 1136 color: #fff;
583 1137 }
584 1138
585 1139 .pagelayer-hidden{
@@ -589,54 +1143,229 @@
589 1143 .pagelayer-elp-radio-div{
590 1144 display:flex;
591 1145 }
592 1146
1147 +.pagelayer-elp-radio:first-child{
1148 +border-radius: 4px 0px 0px 4px;
1149 +-moz-outline-radius: 7px 0px 0px 7px;
1150 +}
1151 +
1152 +.pagelayer-elp-radio:last-child{
1153 +border-radius: 0px 4px 4px 0px;
1154 +-moz-outline-radius: 0px 7px 7px 0px;
1155 +}
1156 +
593 1157 .pagelayer-elp-radio{
594 1158 display: inline-block;
595 1159 vertical-align: middle;
596 -padding: 6px 8px;
1160 +padding: 6px;
597 1161 cursor: pointer;
598 1162 font-size:12px;
599 1163 color: #666 !important;
600 1164 text-decoration: none;
601 1165 background: #eee;
602 -margin: 5px 2px;
603 1166 flex:1;
604 1167 text-align:center;
605 1168 }
606 1169
607 1170 .pagelayer-elp-radio:hover{
608 -background-color:#3e8ef7bf !important;
1171 +background-color: #4CB5E8 !important;
609 1172 color:#fff !important;
610 -transition: all 0.6s;
1173 +transition: all 0.3s;
611 1174 }
612 1175
1176 +.pagelayer-dark .pagelayer-elp-radio{
1177 +background-color: #fafafa;
1178 +}
1179 +
1180 +.pagelayer-dark .pagelayer-elp-radio:hover,
1181 +.pagelayer-dark .pagelayer-elp-radio-active{
1182 +background-color:#0d47a1 !important;
1183 +}
1184 +
613 1185 .pagelayer-elp-radio-active{
614 -background-color: #3e8ef7 !important;
615 -color:#ffffff !important;
1186 +background-color: #1A9CDB !important;
1187 +color:#ffffff !important;
616 1188 }
617 1189
618 -.pagelayer-elp-color-div{
1190 +.pagelayer-elp-typo-edit-div,
1191 +.pagelayer-elp-color-div-holder{
619 1192 cursor: pointer;
620 -padding: 4px;
621 -width: 50px;
622 -height: 25px;
623 -display: block;
624 -border-radius: 2px;
1193 +width: 70px;
1194 +height: 30px;
1195 +border-radius: 3px;
625 1196 margin: 0 auto;
626 1197 position: absolute;
627 1198 top: 5px;
1199 +right: 11px;
1200 +border: solid 1px #999;
1201 +color: #333;
1202 +display: flex;
1203 +}
1204 +
1205 +.pagelayer-elp-typo-edit-div{
1206 +width: 34px;
1207 +}
1208 +
1209 +.pagelayer-elp-color-div{
1210 +cursor: pointer;
1211 +padding: 3px;
1212 +width: 28px;
1213 +height: 23px;
1214 +display: block;
1215 +border-radius: 2px;
1216 +margin: 0 auto;
1217 +position: absolute;
1218 +top: 5px;
628 1219 right: 7px;
629 -border: solid 1px #d1d1d1;
1220 +border: solid 1px #999;
630 1221 color: #333;
631 1222 vertical-align: middle;
632 1223 }
633 1224
1225 +.pagelayer-elp-color-div-holder .pagelayer-elp-color-div{
1226 +position: relative;
1227 +border: 0px;
1228 +height: calc(100% - 6px);
1229 +top: 0;
1230 +left: 0;
1231 +}
1232 +
634 1233 .pagelayer-elp-color-preview{
635 -height: 93%;
636 -border: solid 1px #d1d1d1;
1234 +height: 100%;
1235 +background-size: cover !important;
1236 +border-radius: 2px;
1237 +flex: 1;
637 1238 }
638 1239
1240 +.pagelayer-elp-color-global{
1241 +width: 50%;
1242 +border-right: 1px solid #999;
1243 +display: flex;
1244 +align-items: center;
1245 +justify-content: center;
1246 +}
1247 +
1248 +.pagelayer-elp-global-icon:hover,
1249 +.pagelayer-elp-color-global:hover{
1250 +color: #137dc5;
1251 +}
1252 +
1253 +.pagelayer-elp-typo-edit-div .pli-pencil{
1254 +display: flex;
1255 +align-items: center;
1256 +justify-content: center;
1257 +flex: 1;
1258 +}
1259 +
1260 +.pagelayer-elp-global-icon:before,
1261 +.pagelayer-elp-color-global:before{
1262 +content: "\e9c9";
1263 +font-family: 'pagelayer', "Font Awesome 5 Free" !important;
1264 +}
1265 +
1266 +.pagelayer-white-border{
1267 +outline: 1px solid #dfdfdf;
1268 +}
1269 +
1270 +.pagelayer-global-selected,
1271 +.pagelayer-global-font-list-item:hover,
1272 +.pagelayer-global-color-list-item:hover{
1273 +background: #f9f9f9;
1274 +}
1275 +
1276 +.pagelayer-global-selected:after{
1277 +content: "\ea10";
1278 +font-family: 'pagelayer', "Font Awesome 5 Free" !important;
1279 +color: #137dc5;
1280 +}
1281 +
1282 +.pagelayer-global-font-list,
1283 +.pagelayer-global-color-list{
1284 +position: absolute;
1285 +background: #fff;
1286 +padding: 10px 0;
1287 +z-index: 9999;
1288 +border-radius: 4px;
1289 +right: 0;
1290 +top: 35px;
1291 +width: 250px;
1292 +display: none;
1293 +max-height: 350px;
1294 +overflow-y: auto;
1295 +font-size: 12px;
1296 +box-shadow: 0px 0px 13px rgb(0 0 0 / 30%);
1297 +}
1298 +
1299 +.pagelayer-global-font-list-item,
1300 +.pagelayer-global-color-list-item{
1301 +display: flex;
1302 +padding: 10px 20px;
1303 +cursor: pointer;
1304 +}
1305 +
1306 +.pagelayer-global-font-list-item .pagelayer-global-font-title,
1307 +.pagelayer-global-color-list-item .pagelayer-global-color-title{
1308 +flex: 1;
1309 +}
1310 +
1311 +.pagelayer-global-color-list-item .pagelayer-global-color-pre{
1312 +position: relative;
1313 +border: 1px solid #f1f1f1;
1314 +margin-right: 7px;
1315 +padding: 1px;
1316 +background-clip: content-box;
1317 +}
1318 +
1319 +.pagelayer-global-color-list-item .pagelayer-global-color-pre:before{
1320 +content: '';
1321 +padding: 0px 10px;
1322 +background-color: #ff000000;
1323 +background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=);
1324 +-webkit-background-size: 12px 12px;
1325 +background-size: 6px 6px;
1326 +position: relative;
1327 +z-index: -1;
1328 +}
1329 +
1330 +.pagelayer-global-setting-color{
1331 +position: relative;
1332 +box-shadow: 0 1px 2px #d2cfcf;
1333 +padding: 10px 4px;
1334 +margin-bottom: 5px;
1335 +margin-top: -10px;
1336 +cursor: default;
1337 +}
1338 +
1339 +.pagelayer-global-setting-color b{
1340 +margin-left: 11px;
1341 +}
1342 +
1343 +.pagelayer-global-setting-color .pli{
1344 +right: 15px;
1345 +position: absolute;
1346 +cursor: pointer;
1347 +}
1348 +
1349 +.pagelayer-elp-typo-icons .pli-service{
1350 +cursor: pointer;
1351 +}
1352 +
1353 +.pagelayer-elp-global-typo .pli:hover,
1354 +.pagelayer-global-setting-color .pli:hover{
1355 +color: #137dc5;
1356 +}
1357 +
1358 +.pagelayer-active-global{
1359 +color: #137dc5;
1360 +}
1361 +
1362 +.pagelayer-blank-preview{
1363 +background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgBAMAAAB54XoeAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAC1QTFRFAAAAAQEBBQUFDAwM9PT0+vr6/////v7+BAQE+/v7AgIC/f39AwMDDQ0N8/Pzb6ggJQAAAZ5JREFUeJztlr1twzAQhU+tK7ELDDdBNsgO2SAznAr3JAJXWSJp49YLuPAW2cJbhEdSQZBCEMRHgMVj5U80HnkSfz4Ra06eXjSoTvr6HKGGU94o8vBpqPr2LjLUcAr8ikNEnLx6jT93VZxneBn1Zg9uOlxsxO0suTkXfJywTsG5Ok5x9hK0NKM6bhEosh+nq+HJD+c6TmvG2r8RtrMb9g4aOKY3CA0ElyyHcbAHIXNw5Q9bWeLG2aUH80ItU97K8ihlhmmIUFb+dpZvOceNE7fOnz/UsNztHAMEzSwf6idEqTOLHv0R8THc7/o72Qzrl8vMwAVdmreDFhloLxQcCC65QSC45AYfBV0yfGGjtx78cLjrVaHHF/yAhV8B8EsKfo3CL/pRHFZFnIBlCa5z9EP6If1wBdMPe5QleMkNAumHuZ9+SD9cYPphjzpHP6Qf0g9XMP2wR1mCl9wgkH6Y++mH9MMFph/2qHP0Q/oh/XAF0w97lCV4yQ0C6Ye5n35IP1xg+mGPOkc/pB/SD1cw/bBHWYKX3CCQfpj76Yfr+QfwnsxmcLvdhQAAAABJRU5ErkJggg==') !important;
1364 +background-size: cover !important;
1365 +opacity: 70%;
1366 +}
1367 +
639 1368 .picker_arrow {
640 1369 display:none;
641 1370 }
642 1371
@@ -642,10 +1371,28 @@
642 1371
643 1372 .picker_wrapper {
644 1373 top: 13px !important;
645 1374 right: -15px !important;
1375 +font-family: Roboto !important;
1376 +font-size: 12px;
1377 +border-radius: 4px;
1378 +background:#f7f7f7;
646 1379 }
647 1380
1381 +.picker_done button{
1382 +border: #318088 1px solid;
1383 +color: #fff;
1384 +background: #248a4c;
1385 +border-radius: 2px;
1386 +font-size: 14px;
1387 +line-height: 1.5;
1388 +}
1389 +
1390 +.picker_editor input{
1391 +font-family: Roboto !important;
1392 +font-size: 12px;
1393 +}
1394 +
648 1395 .pagelayer-elp-color-span{
649 1396 padding: 2px 0;
650 1397 height: 28px;
651 1398 line-height: 28px;
@@ -659,8 +1406,46 @@
659 1406 background: #fff !important;
660 1407 box-shadow: 0 3px 5px rgba(0,0,0,0.2) !important;
661 1408 }
662 1409
1410 +.pagelayer-dark .pagelayer-elp-color-div .picker_wrapper{
1411 +border: 1px solid #0277bd !important;
1412 +background: #252529 !important;
1413 +box-shadow: 0 0.5rem 1rem #00000026 !important;
1414 +}
1415 +
1416 +.picker_wrapper{
1417 +z-index:12 !important;
1418 +}
1419 +
1420 +.pagelayer-dark .picker_done button {
1421 +border: none;
1422 +font-family: roboto;
1423 +color: #777;
1424 +background-color: #ffffff;
1425 +}
1426 +
1427 +.pagelayer-dark .picker_editor input{
1428 +color: #bdbdbd;
1429 +background-color: #1c1c1f;
1430 +}
1431 +
1432 +.pagelayer-elp-remove-color{
1433 +background-color:#616161;
1434 +position: absolute;
1435 +top: 0;
1436 +right: 0;
1437 +z-index:1;
1438 +box-shadow: 0 0 3px #333;
1439 +padding: 3px;
1440 +border-top-right-radius: 2px;
1441 +}
1442 +
1443 +.pagelayer-elp-remove-color .pli:before{
1444 +color: #fff;
1445 +font-size: 7px;
1446 +}
1447 +
663 1448 .pagelayer-elp-icon-div{
664 1449 cursor: pointer;
665 1450 padding: 6px;
666 1451 border: solid 1px #d1d1d1;
@@ -676,14 +1461,20 @@
676 1461 top: 7px;
677 1462 right: 10px;
678 1463 }
679 1464
1465 +.pagelayer-dark .pagelayer-elp-icon-div{
1466 +background-color: #1c1c1f;
1467 +color: #bdbdbd;
1468 +border: 1px solid #6e6d6d;
1469 +}
1470 +
680 1471 .pagelayer-elp-icon-preview{
681 1472 position: relative;
682 1473 display: block;
683 1474 margin-right: 5px;
684 1475 float: left;
685 -width: 83%;
1476 +width: 75%;
686 1477 height: auto;
687 1478 border: none;
688 1479 overflow: hidden;
689 1480 white-space: nowrap;
@@ -696,13 +1487,19 @@
696 1487 color: #666;
697 1488 vertical-align: middle;
698 1489 }
699 1490
1491 +.pagelayer-dark .pagelayer-elp-icon-preview i,
1492 +.pagelayer-dark .pagelayer-elp-icon-name{
1493 +color:#bdbdbd;
1494 +}
1495 +
700 1496 .pagelayer-elp-icon-name{
701 1497 font-size: 13px;
702 1498 }
703 1499
704 -.pagelayer-elp-icon-open{
1500 +.pagelayer-elp-icon-open,
1501 +.pagelayer-elp-icon-close{
705 1502 float: right;
706 1503 font-size: 10px;
707 1504 padding: 0px;
708 1505 line-height: 20px;
@@ -707,8 +1504,18 @@
707 1504 padding: 0px;
708 1505 line-height: 20px;
709 1506 }
710 1507
1508 +.pagelayer-dark .pagelayer-elp-icon-open,
1509 +.pagelayer-dark .pagelayer-elp-icon-close{
1510 +color:#bdbdbd;
1511 +}
1512 +
1513 +.pagelayer-elp-icon-close{
1514 +padding-right: 5px;
1515 +font-size: 12px;
1516 +}
1517 +
711 1518 .pagelayer-elp-icon-remove{
712 1519 position: absolute;
713 1520 right: 20px;
714 1521 font-size: 11px;
@@ -715,9 +1522,10 @@
715 1522 top: 10px;
716 1523 z-index: 10;
717 1524 }
718 1525
719 -.pagelayer-elp-icon-selector{
1526 +.pagelayer-elp-icon-selector,
1527 +.pagelayer-elp-link-list{
720 1528 position: absolute;
721 1529 z-index: 1000;
722 1530 border: 1px solid rgba(0,0,0,0.2) !important;
723 1531 background: #fff !important;
@@ -727,9 +1535,9 @@
727 1535 padding: 5px;
728 1536 height: auto;
729 1537 box-sizing: border-box;
730 1538 display: none;
731 -width: 70%;
1539 +width: 80%;
732 1540 border-radius: 2px;
733 1541 margin: 0 0 0 auto;
734 1542 top: 40px;
735 1543 right: 10px;
@@ -734,8 +1542,13 @@
734 1542 top: 40px;
735 1543 right: 10px;
736 1544 }
737 1545
1546 +.pagelayer-dark .pagelayer-elp-icon-selector{
1547 +background: #252529 !important;
1548 +border: 1px solid #ffffff73 !important;
1549 +}
1550 +
738 1551 .pagelayer-elp-search-icon{
739 1552 margin-bottom: 5px !important;
740 1553 padding: 2px 6px;
741 1554 line-height: 20px !important;
@@ -751,8 +1564,27 @@
751 1564 max-height: 183px;
752 1565 overflow-y: auto;
753 1566 }
754 1567
1568 +.pagelayer-elp-icon-list::-webkit-scrollbar {
1569 +-webkit-appearance: none;
1570 +}
1571 +
1572 +.pagelayer-elp-icon-list::-webkit-scrollbar:vertical {
1573 +width: 10px;
1574 +}
1575 +
1576 +.pagelayer-elp-icon-list::-webkit-scrollbar-thumb {
1577 +border-radius: 8px;
1578 +border: 2px solid white;
1579 +background-color: rgba(0, 0, 0, .5);
1580 +}
1581 +
1582 +.pagelayer-elp-icon-list::-webkit-scrollbar-track {
1583 +background-color: #fff;
1584 +border-radius: 8px;
1585 +}
1586 +
755 1587 .pagelayer-elp-icon-span{
756 1588 display: block;
757 1589 margin: 2px;
758 1590 cursor: pointer;
@@ -762,10 +1594,15 @@
762 1594 font-size: 13px;
763 1595 padding: 3px;
764 1596 }
765 1597
1598 +.pagelayer-dark .pagelayer-elp-icon-span,
1599 +.pagelayer-dark .pagelayer-elp-icon-span i{
1600 +color:#bdbdbd;
1601 +}
1602 +
766 1603 .pagelayer-elp-icon-span:hover{
767 -border-color: #00A0D2;
1604 +border-color: #2563eb;
768 1605 background-color: #3e8ef7;
769 1606 color: #ffffff;
770 1607 box-shadow: 0px 1px 1px #3e8ef7bf;
771 1608 }
@@ -782,9 +1619,40 @@
782 1619 .pagelayer-elp-icon-span:hover i{
783 1620 color: #ffffff;
784 1621 }
785 1622
1623 +.pagelayer-elp-icon-type{
1624 +display:flex;
1625 +flex-grow:1;
1626 +text-align:center;
1627 +}
786 1628
1629 +.pagelayer-elp-icon-type p{
1630 +flex-grow: 1;
1631 +padding: 5px 0;
1632 +margin: 0 0 3px;
1633 +cursor: pointer;
1634 +font-size: 12px;
1635 +background: #999;
1636 +color: #ffffff;
1637 +border: 1px solid #777;
1638 +}
1639 +
1640 +.pagelayer-elp-icon-type p.active{
1641 +background-color:#666666;
1642 +}
1643 +
1644 +.pagelayer-dark .pagelayer-elp-icon-type p.active{
1645 +background: #0277bd;
1646 +}
1647 +
1648 +.pagelayer-elp-icon-sets{
1649 +line-height: 27px;
1650 +height: 27px;
1651 +border-radius: 4px;
1652 +margin: 5px 0;
1653 +}
1654 +
787 1655 .pagelayer-video{
788 1656 width: 100% !important;
789 1657 /* background: #ccc; */
790 1658 position: relative;
@@ -799,26 +1667,33 @@
799 1667 left: 8px;
800 1668 }
801 1669
802 1670 .pagelayer-elp-slider-div{
803 -display: flex;
804 -padding: 7px 0 0;
1671 +display: flex !important;
1672 +align-items: center !important;
1673 +width: 100% !important;
1674 +padding: 6px 0 !important;
1675 +box-sizing: border-box !important;
805 1676 }
806 1677
807 1678 input.pagelayer-elp-slider{
808 --webkit-appearance: none;
809 -width: 75%;
810 -height: 10px;
811 -border-radius: 5px;
812 -background: #d3d3d3 !important;
813 -outline: none;
814 -opacity: 0.7;
815 --webkit-transition: .2s;
816 -transition: opacity .2s;
817 -font-size: 0px !important;
818 -padding: 0;
1679 +-webkit-appearance: none !important;
1680 +flex: 1 1 auto !important;
1681 +width: 0 !important;
1682 +height: 6px !important;
1683 +border-radius: 3px !important;
1684 +background-color: #e2e8f0 !important;
1685 +outline: none !important;
1686 +opacity: 0.8 !important;
1687 +transition: opacity 0.2s !important;
1688 +padding: 0 !important;
1689 +margin: 0 !important;
819 1690 }
820 1691
1692 +.pagelayer-dark input.pagelayer-elp-slider {
1693 +background-color: #334155 !important;
1694 +}
1695 +
821 1696 .pagelayer-elp-slider:focus{
822 1697 border-color: transparent;
823 1698 box-shadow: 0 0 1px transparent;
824 1699 }
@@ -836,27 +1711,110 @@
836 1711 background: #4CAF50;
837 1712 cursor: pointer;
838 1713 }
839 1714
1715 +.pagelayer-dark .pagelayer-elp-slider::-webkit-slider-thumb{
1716 +background: #3e8ef7;
1717 +}
1718 +
840 1719 .pagelayer-elp-slider::-moz-range-thumb{
841 1720 width: 15px;
842 1721 height: 15px;
843 1722 border-radius: 50%;
844 -background: #00A0D2;
1723 +background: #2563eb;
845 1724 cursor: pointer;
846 1725 }
847 1726
848 -.pagelayer-elp-slider-value{
849 -width: 23% !important;
850 -margin-left: 2%;
851 -margin-top: -10px;
852 -border-radius: 4px;
1727 +.pagelayer-leftbar-holder input.pagelayer-elp-slider-value {
1728 +flex: 0 0 55px !important;
1729 +width: 55px !important;
1730 +height: 28px !important;
1731 +border: 1px solid #cbd5e1 !important;
1732 +border-radius: 6px !important;
1733 +padding: 4px 6px !important;
1734 +margin: 0 0 0 12px !important;
1735 +font-size: 13px !important;
1736 +text-align: center !important;
1737 +background-color: #ffffff !important;
1738 +color: #0f172a !important;
1739 +box-sizing: border-box !important;
853 1740 }
854 1741
1742 +.pagelayer-dark .pagelayer-leftbar-holder input.pagelayer-elp-slider-value {
1743 +border-color: #334155 !important;
1744 +background-color: #131926 !important;
1745 +color: #f8fafc !important;
1746 +}
1747 +
855 1748 .pagelayer-elp-datetime-div{
856 1749 position: relative;
1750 +width: 100% !important;
857 1751 }
858 1752
1753 +.pagelayer-elp-datetime{
1754 +width: 100% !important;
1755 +box-sizing: border-box !important;
1756 +}
1757 +
1758 +.pagelayer-elp-postdate-div{
1759 +display: flex !important;
1760 +border: 1px solid #cbd5e1 !important;
1761 +border-radius: 6px !important;
1762 +background-color: #ffffff !important;
1763 +height: 32px !important;
1764 +align-items: center !important;
1765 +overflow: hidden !important;
1766 +box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
1767 +transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
1768 +width: 100% !important;
1769 +box-sizing: border-box !important;
1770 +}
1771 +
1772 +.pagelayer-elp-postdate-div:focus-within {
1773 +border-color: #2563eb !important;
1774 +box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
1775 +}
1776 +
1777 +.pagelayer-elp-postdate{
1778 +flex: 1 !important;
1779 +height: 100% !important;
1780 +border: none !important;
1781 +background: transparent !important;
1782 +padding: 6px 10px !important;
1783 +font-size: 13px !important;
1784 +color: #0f172a !important;
1785 +outline: none !important;
1786 +box-sizing: border-box !important;
1787 +min-width: 0 !important;
1788 +}
1789 +
1790 +.pagelayer-elp-postdate:first-child {
1791 +border-right: 1px solid #cbd5e1 !important;
1792 +}
1793 +
1794 +.pagelayer-elp-postdate::-webkit-calendar-picker-indicator {
1795 +cursor: pointer !important;
1796 +margin-left: 4px !important;
1797 +}
1798 +
1799 +.pagelayer-dark .pagelayer-elp-postdate-div {
1800 +border-color: #334155 !important;
1801 +background-color: #131926 !important;
1802 +}
1803 +
1804 +.pagelayer-dark .pagelayer-elp-postdate-div:focus-within {
1805 +border-color: #2563eb !important;
1806 +box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
1807 +}
1808 +
1809 +.pagelayer-dark .pagelayer-elp-postdate {
1810 +color: #f8fafc !important;
1811 +}
1812 +
1813 +.pagelayer-dark .pagelayer-elp-postdate:first-child {
1814 +border-right: 1px solid #334155 !important;
1815 +}
1816 +
859 1817 .pagelayer-elp-fa-calendar{
860 1818 position: absolute;
861 1819 height: 40px;
862 1820 width: 40px;
@@ -887,11 +1845,16 @@
887 1845 transition: all .2s ease-in-out;
888 1846 }
889 1847
890 1848 input[type="checkbox"].pagelayer-elp-checkbox:checked{
891 -background-color: #3e8ef7;
1849 +background-color: #1A9CDB;
1850 +border-color: #1A9CDB;
892 1851 }
893 1852
1853 +.pagelayer-dark input[type="checkbox"].pagelayer-elp-checkbox:checked{
1854 +background-color: #0d47a1;
1855 +}
1856 +
894 1857 input[type="checkbox"].pagelayer-elp-checkbox:after{
895 1858 position: absolute;
896 1859 content: "";
897 1860 width: 1.5em;
@@ -915,48 +1878,236 @@
915 1878 .pagelayer-elp-pos-rel{
916 1879 position: relative;
917 1880 }
918 1881
1882 +.pagelayer-elp-link-no-addons > .pagelayer-elp-link{
1883 +width:100% !important;
1884 +}
1885 +
1886 +.pagelayer-elp-link-no-addons > .pagelayer-elp-link-icon{
1887 +display:none !important;
1888 +}
1889 +
919 1890 .pagelayer-elp-input-icon input{
920 -width: 83%;
1891 +width: 85%;
921 1892 }
922 1893
923 -.pagelayer-elp-input-icon i.fa {
924 -padding: 6px 10px;
925 -position: relative;
926 -top: 2px;
1894 +.pagelayer-elp-input-icon i.pli{
1895 +padding:1px 10px;
1896 +position:relative;
1897 +top:0px;
927 1898 border: 1px solid #d1d1d1;
928 1899 border-left:0px;
929 1900 cursor: pointer;
930 1901 background:#FFF;
1902 +line-height:26px !important;
1903 +font-size: 13px;
931 1904 }
932 1905
933 -.pagelayer-elp-padding-div i.fa{
934 -padding:6px 11px;
1906 +.pagelayer-dark .pagelayer-elp-input-icon i.pli{
1907 +background: #e0e0e0;
1908 +}
1909 +
1910 +.pagelayer-elp-padding-div i.pli{
1911 +padding:8px 11px;
935 1912 border: 1px solid #d1d1d1;
936 -border-left:0px;
1913 +border-left:0px !important;
937 1914 cursor: pointer;
938 1915 background: #FFF;
939 1916 vertical-align:top;
1917 +font-size: 12px;
1918 +border-top-right-radius: 3px;
1919 +border-bottom-right-radius: 3px;
940 1920 }
941 1921
942 1922 .pagelayer-elp-padding-linked{
943 -background: #CCC !important;
1923 +background: #1a7fb0 !important;
1924 +color: #fff !important;
1925 +border: 1px solid #1a7fb0 !important;
944 1926 }
945 1927
946 -.pagelayer-elp-dimension-div i.fa{
947 -padding:6px 11px;
948 -border: 1px solid #d1d1d1;
949 -border-left:0px;
1928 +.pagelayer-elp-padding:first-child{
1929 +border-top-left-radius: 3px;
1930 +border-bottom-left-radius: 3px;
1931 +}
1932 +
1933 +.pagelayer-dark .pagelayer-elp-padding-linked{
1934 +background: #e0e0e0 !important;
1935 +}
1936 +
1937 +.pagelayer-elp-dimension-div {
1938 +display: flex !important;
1939 +align-items: stretch !important;
1940 +width: 100% !important;
1941 +position: relative !important;
1942 +box-sizing: border-box !important;
1943 +}
1944 +
1945 +.pagelayer-elp-dimension-div input.pagelayer-elp-dimension {
1946 +flex: 1 1 auto !important;
1947 +width: 0 !important;
1948 +height: 32px !important;
1949 +border: 1px solid #cbd5e1 !important;
1950 +border-right: none !important;
1951 +border-radius: 0 !important;
1952 +box-sizing: border-box !important;
1953 +padding: 6px 10px !important;
1954 +font-size: 13px !important;
1955 +background-color: #ffffff !important;
1956 +margin: 0 !important;
1957 +}
1958 +
1959 +.pagelayer-elp-dimension-div input.pagelayer-elp-dimension:first-child {
1960 +border-radius: 6px 0 0 6px !important;
1961 +}
1962 +
1963 +.pagelayer-elp-dimension-div i.pli{
1964 +flex: 0 0 auto !important;
1965 +width: 36px !important;
1966 +height: 32px !important;
1967 +border: 1px solid #cbd5e1 !important;
1968 +border-radius: 0 6px 6px 0 !important;
1969 +box-sizing: border-box !important;
1970 +background-color: #f8fafc !important;
1971 +color: #64748b !important;
1972 +cursor: pointer !important;
1973 +display: flex !important;
1974 +align-items: center !important;
1975 +justify-content: center !important;
1976 +margin: 0 !important;
1977 +position: static !important;
1978 +font-size: 14px !important;
1979 +line-height: normal !important;
1980 +transition: background-color 0.15s ease, color 0.15s ease !important;
1981 +}
1982 +
1983 +.pagelayer-elp-dimension-div i.pli:hover {
1984 +background-color: #f1f5f9 !important;
1985 +color: #2563eb !important;
1986 +}
1987 +
1988 +.pagelayer-elp-dimension-div i.pli.pagelayer-elp-dimension-linked,
1989 +.pagelayer-elp-dimension-linked{
1990 +background-color: #2563eb !important;
1991 +border-color: #2563eb !important;
1992 +color: #ffffff !important;
1993 +}
1994 +
1995 +/* Focus states */
1996 +.pagelayer-elp-dimension-div:focus-within input {
1997 +border-color: #2563eb !important;
1998 +}
1999 +
2000 +.pagelayer-elp-dimension-div:focus-within i.pli:not(.pagelayer-elp-dimension-linked) {
2001 +border-color: #2563eb !important;
2002 +}
2003 +
2004 +/* Dark Mode Overrides */
2005 +.pagelayer-dark .pagelayer-elp-dimension-div input.pagelayer-elp-dimension {
2006 +border-color: #334155 !important;
2007 +background-color: #131926 !important;
2008 +color: #f8fafc !important;
2009 +}
2010 +
2011 +.pagelayer-dark .pagelayer-elp-dimension-div i.pli {
2012 +border-color: #334155 !important;
2013 +background-color: #1e1e24 !important;
2014 +color: #94a3b8 !important;
2015 +}
2016 +
2017 +.pagelayer-dark .pagelayer-elp-dimension-div i.pli:hover:not(.pagelayer-elp-dimension-linked) {
2018 +background-color: #2d2d34 !important;
2019 +color: #3b82f6 !important;
2020 +}
2021 +
2022 +.pagelayer-dark .pagelayer-elp-dimension-div i.pli.pagelayer-elp-dimension-linked,
2023 +.pagelayer-dark .pagelayer-elp-dimension-linked {
2024 +background-color: #2563eb !important;
2025 +border-color: #2563eb !important;
2026 +color: #ffffff !important;
2027 +}
2028 +
2029 +.pagelayer-dark .pagelayer-elp-dimension-div:focus-within input,
2030 +.pagelayer-dark .pagelayer-elp-dimension-div:focus-within i.pli:not(.pagelayer-elp-dimension-linked) {
2031 +border-color: #2563eb !important;
2032 +}
2033 +
2034 +/* Pagelayer Multi Select Property */
2035 +.pagelayer-elp-multiselect{
2036 +min-height: 25px;
2037 +width:95%;
2038 +}
2039 +
2040 +.pagelayer-elp-multiselect-ul{
2041 +list-style:none;
2042 +padding:0;
2043 +margin:0;
2044 +display:none;
2045 +border: 1px solid #CCC;
2046 +border-radius: 0 0 5px 5px;
2047 +border-top:none;
2048 +position:absolute;
2049 +background:rgb(255, 255, 255);
2050 +z-index:1;
2051 +width:99%;
2052 +}
2053 +
2054 +.pagelayer-dark .pagelayer-elp-multiselect-ul{
2055 +background: #1c1c1f;
2056 +border: 1px solid #6e6d6d;
2057 +border-top: none;
2058 +box-shadow: 0 0.5rem 1rem #00000026;
2059 +}
2060 +
2061 +.pagelayer-elp-multiselect-option{
2062 +font-size:13px;
2063 +padding:4px 8px;
2064 +cursor:pointer;
2065 +}
2066 +
2067 +.pagelayer-dark .pagelayer-elp-multiselect-option{
2068 +color: #777;
2069 +}
2070 +
2071 +.pagelayer-elp-multiselect-option[selected="selected"]{
2072 +background: #f2f2f2;
2073 +}
2074 +
2075 +.pagelayer-elp-multiselect-remove{
2076 +color: #f2f2f2;
2077 +padding-left: 2px;
950 2078 cursor: pointer;
951 -background: #FFF;
952 -vertical-align:top;
953 2079 }
954 2080
955 -.pagelayer-elp-dimension-linked{
956 -background: #CCC !important;
2081 +.pagelayer-dark .pagelayer-elp-multiselect-option[selected="selected"]{
2082 +background: #0277bd;
2083 +color: #fff;
957 2084 }
958 2085
2086 +.pagelayer-elp-multiselect-selected{
2087 +padding: 3px 5px;
2088 +border-radius: 5px;
2089 +margin: 2px;
2090 +background: #44a9db;
2091 +line-height: 13px;
2092 +font-size: 13px;
2093 +color: #fff;
2094 +}
2095 +
2096 +.pagelayer-dark .pagelayer-elp-multiselect-selected{
2097 +color: #777;
2098 +background: #ffffff;
2099 +}
2100 +
2101 +.pagelayer-elp-multiselect{
2102 +display: flex;
2103 +flex-wrap: wrap;
2104 +padding: 5px;
2105 +border-radius: 3px;
2106 +}
2107 +
2108 +/* Pagelayer Multi Select Property end*/
2109 +
959 2110 .pagelayer-elp-multi_image{
960 2111 padding: 3px;
961 2112 width: 60%;
962 2113 margin: 5px auto;
@@ -1034,17 +2185,108 @@
1034 2185 float: left;
1035 2186 }
1036 2187
1037 2188 .pagelayer-elp-audio-div,
1038 -.pagelayer-elp-media-div{
1039 -position: relative;
2189 +.pagelayer-elp-media-div,
2190 +.pagelayer-elp-video-div {
2191 +display: flex !important;
2192 +align-items: stretch !important;
2193 +width: 100% !important;
2194 +position: relative !important;
2195 +box-sizing: border-box !important;
1040 2196 }
1041 2197
1042 -.pagelayer-elp-audio,
1043 -.pagelayer-elp-media{
1044 -width: calc(100% - 40px);
2198 +.pagelayer-elp-audio-div input.pagelayer-elp-audio,
2199 +.pagelayer-elp-media-div input.pagelayer-elp-media,
2200 +.pagelayer-elp-video-div input.pagelayer-elp-video {
2201 +flex: 1 1 auto !important;
2202 +width: 0 !important;
2203 +height: 32px !important;
2204 +border: 1px solid #cbd5e1 !important;
2205 +border-right: none !important;
2206 +border-radius: 6px 0 0 6px !important;
2207 +box-sizing: border-box !important;
2208 +padding: 6px 10px !important;
2209 +font-size: 13px !important;
2210 +background-color: #ffffff !important;
2211 +margin: 0 !important;
1045 2212 }
1046 2213
2214 +.pagelayer-elp-audio-div i.pli,
2215 +.pagelayer-elp-media-div i.pli,
2216 +.pagelayer-elp-video-div i.pli {
2217 +flex: 0 0 auto !important;
2218 +width: 36px !important;
2219 +height: 32px !important;
2220 +border: 1px solid #cbd5e1 !important;
2221 +border-radius: 0 6px 6px 0 !important;
2222 +box-sizing: border-box !important;
2223 +background-color: #f8fafc !important;
2224 +color: #64748b !important;
2225 +cursor: pointer !important;
2226 +display: flex !important;
2227 +align-items: center !important;
2228 +justify-content: center !important;
2229 +margin: 0 !important;
2230 +position: static !important;
2231 +font-size: 14px !important;
2232 +line-height: normal !important;
2233 +transition: background-color 0.15s ease, color 0.15s ease !important;
2234 +}
2235 +
2236 +.pagelayer-elp-audio-div i.pli:hover,
2237 +.pagelayer-elp-media-div i.pli:hover,
2238 +.pagelayer-elp-video-div i.pli:hover {
2239 +background-color: #f1f5f9 !important;
2240 +color: #2563eb !important;
2241 +}
2242 +
2243 +/* Focus states */
2244 +.pagelayer-elp-audio-div:focus-within input,
2245 +.pagelayer-elp-media-div:focus-within input,
2246 +.pagelayer-elp-video-div:focus-within input {
2247 +border-color: #2563eb !important;
2248 +}
2249 +
2250 +.pagelayer-elp-audio-div:focus-within i.pli,
2251 +.pagelayer-elp-media-div:focus-within i.pli,
2252 +.pagelayer-elp-video-div:focus-within i.pli {
2253 +border-color: #2563eb !important;
2254 +}
2255 +
2256 +/* Dark Mode*/
2257 +.pagelayer-dark .pagelayer-elp-audio-div input.pagelayer-elp-audio,
2258 +.pagelayer-dark .pagelayer-elp-media-div input.pagelayer-elp-media,
2259 +.pagelayer-dark .pagelayer-elp-video-div input.pagelayer-elp-video {
2260 +border-color: #334155 !important;
2261 +background-color: #131926 !important;
2262 +color: #f8fafc !important;
2263 +}
2264 +
2265 +.pagelayer-dark .pagelayer-elp-audio-div i.pli,
2266 +.pagelayer-dark .pagelayer-elp-media-div i.pli,
2267 +.pagelayer-dark .pagelayer-elp-video-div i.pli {
2268 +border-color: #334155 !important;
2269 +background-color: #1e1e24 !important;
2270 +color: #94a3b8 !important;
2271 +}
2272 +
2273 +.pagelayer-dark .pagelayer-elp-audio-div i.pli:hover,
2274 +.pagelayer-dark .pagelayer-elp-media-div i.pli:hover,
2275 +.pagelayer-dark .pagelayer-elp-video-div i.pli:hover {
2276 +background-color: #2d2d34 !important;
2277 +color: #3b82f6 !important;
2278 +}
2279 +
2280 +.pagelayer-dark .pagelayer-elp-audio-div:focus-within input,
2281 +.pagelayer-dark .pagelayer-elp-media-div:focus-within input,
2282 +.pagelayer-dark .pagelayer-elp-video-div:focus-within input,
2283 +.pagelayer-dark .pagelayer-elp-audio-div:focus-within i.pli,
2284 +.pagelayer-dark .pagelayer-elp-media-div:focus-within i.pli,
2285 +.pagelayer-dark .pagelayer-elp-video-div:focus-within i.pli {
2286 +border-color: #2563eb !important;
2287 +}
2288 +
1047 2289 .pagelayer-elp-audio-insert,
1048 2290 .pagelayer-elp-media-select{
1049 2291 position: absolute;
1050 2292 top: 0;
@@ -1056,20 +2298,13 @@
1056 2298 -moz-box-sizing: content-box;
1057 2299 box-sizing: content-box;
1058 2300 }
1059 2301
1060 -.pagelayer-elp-select-div .fa{
1061 -position: absolute;
1062 -right: 12px;
1063 -top: 0;
1064 -line-height: 40px;
1065 -}
1066 -
1067 2302 .pagelayer-elp-shadow-div,
1068 2303 .pagelayer-elp-typo-div,
1069 2304 .pagelayer-elp-filter-div{
1070 -padding: 10px 10px 0px;
1071 -box-shadow: 0px 0px 2px rgba(0,0,0,.2);
2305 +padding: 0px 10px;
2306 +box-shadow: 0px 0px 13px rgba(0,0,0,.3);
1072 2307 position: relative;
1073 2308 margin-top: 8px;
1074 2309 border: 1px solid #ddd;
1075 2310 display: none;
@@ -1075,18 +2310,37 @@
1075 2310 display: none;
1076 2311 position: absolute;
1077 2312 background-color: #fff;
1078 2313 width: 86%;
1079 -z-index: 1;
2314 +z-index: 12;
1080 2315 }
1081 2316
2317 +.pagelayer-typo-default{
2318 +display:none;
2319 +width: 20px;
2320 +height: 20px;
2321 +cursor: pointer;
2322 +margin-left: 4px;
2323 +}
2324 +
2325 +.pagelayer-global-on .pagelayer-elp-typo:not([pagelayer-set-global]):hover .pagelayer-typo-default{
2326 +display: inline-block;
2327 +}
2328 +
2329 +.pagelayer-dark .pagelayer-elp-shadow-div,
2330 +.pagelayer-dark .pagelayer-elp-typo-div,
2331 +.pagelayer-dark .pagelayer-elp-filter-div{
2332 +background-color:#252529;
2333 +}
2334 +
2335 +
1082 2336 .pagelayer-prop-edit{
1083 2337 padding: 7px;
1084 -border: 1px solid #ccc;
1085 -width: 44px;
2338 +border: 1px solid #3e8ca4;
2339 +width: 20px;
1086 2340 position: absolute;
1087 2341 top: 7px;
1088 -right: 8px;
2342 +right: 11px;
1089 2343 text-align: center;
1090 2344 cursor: pointer;
1091 2345 border-radius: 3px;
1092 2346 }
@@ -1091,43 +2345,67 @@
1091 2345 border-radius: 3px;
1092 2346 }
1093 2347
1094 2348 .pagelayer-prop-edit i{
1095 -font-size: 20px;
2349 +font-size: 14px;
2350 +color: #484848;
1096 2351 }
1097 2352
2353 +.pagelayer-dark .pagelayer-prop-edit i{
2354 +color:#bdbdbd;
2355 +}
2356 +
1098 2357 .pagelayer-prop-show{
1099 2358 display: block;
1100 2359 }
1101 2360
1102 2361 .pagelayer-elp-shadow-color{
1103 -position: relative;
1104 -height: 35px;
2362 +padding: 15px 0px !important;
1105 2363 }
1106 2364
1107 2365 .pagelayer-elp-shadow-color .pagelayer-elp-color-div{
1108 -top:0;
2366 +top:7px;
1109 2367 }
1110 2368
1111 -.pagelayer-elp-typo:not(:first-child),
2369 +.pagelayer-elp-typo,
1112 2370 .pagelayer-elp-prop-grp{
1113 -margin: 3px 0;
1114 -padding: 5px 0;
2371 +margin: 0px;
2372 +padding: 10px 0;
2373 +position: relative;
2374 +border-bottom: 1px dashed #ccc;
2375 +display: flex;
2376 +align-items: center;
1115 2377 }
1116 2378
2379 +.pagelayer-elp-typo-fonts{
2380 +padding: 10px 0;
2381 +}
2382 +
1117 2383 .pagelayer-elp-gradient-div .pagelayer-elp-prop-grp{
1118 2384 padding: 5px 0;
2385 +display: flex;
2386 +align-items: center;
2387 +justify-content: space-between;
1119 2388 }
1120 2389
1121 -.pagelayer-elp-prop-grp{
1122 -position: relative;
2390 +.pagelayer-elp-gradient-div .pagelayer-elp-label{
2391 +width: auto !important;
1123 2392 }
1124 2393
2394 +.pagelayer-elp-gradient-input{
2395 +width: 65px !important;
2396 +text-align: center;
2397 +}
2398 +
2399 +.pagelayer-elp-gradient-color{
2400 +padding: 15px 0px !important;
2401 +}
2402 +
1125 2403 .pagelayer-elp-prop-grp .pagelayer-elp-color-div{
1126 -top: -3px;
1127 2404 right: 0;
1128 2405 }
1129 2406
2407 +.pagelayer-elp-typo-fonts .pagelayer-elp-label,
1130 2408 .pagelayer-elp-typo .pagelayer-elp-label,
1131 2409 .pagelayer-elp-typo .pagelayer-elp-typo-input,
1132 2410 .pagelayer-elp-shadow-div .pagelayer-elp-shadow-input,
1133 2411 .pagelayer-elp-shadow-div .pagelayer-elp-label,
@@ -1146,8 +2424,43 @@
1146 2424 font-size:13px;
1147 2425 text-align: right;
1148 2426 }
1149 2427
2428 +.pagelayer-elp-filter-input{
2429 +background-position: center center !important;
2430 +background-size: cover !important;
2431 +width: 50% !important;
2432 +}
2433 +
2434 +.pagelayer-elp-filter-blur .pagelayer-elp-filter-input{
2435 +background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAAAKCAIAAAC2Wq7lAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAABq9JREFUeJyVlmtvHGcZhnfOszs7u+s9ENtrI9eqHbWJKSSIlBz4QD/mFxQpUvlSviTKb4nyC4qI/0HkCCgijapQQJBDUe04uPEh69re887OeXa43l2wjNsK+toejd/Dc7if+7nfUTMnhiRJGxsbS0tLk3/TNL1+/fra2hrzvPO8c+fOzZs3eZlsuHv37u3btydL5XL5xo0bv/rwwzeXl9Ikff16b+3Bg3v3fvPs6bMwiqbPTF/92ZX33//FpUvvFoulfq/7ycOHH/36o4d//MRxBpZlrays/PKDD35y6d36XN31gid//9tvf/+7x59+2mg0dF1fXlq6cuXylWvXzp07Z1mFXrfz4MHaxx//YfPFJsZnpqdXfnD+xxcvnHv7fC6fazVbX6x/8fTpsxebm439fU2RL1648NPLl996620rb3W73a1/bj198qTf7w+HQ1mWK5XqwsLC4uIbc3PzZGGYpnoSFNI7hdHJ+cnzePLUkpSRcCBl+M2MmMiMt6X8iCOSzIIcR3E6GmVGYrBDVbSJH1lRVE1jb5ImSRJHYRDFIYYUVcWmooi/NMPxxHN9TdWTUYJFlaEpo1Ey9ithM0wiY5TESYJ5JnVVsy0rCAMiGKWjGMsRxiN84F04HdtniLNh6HpD3cV4pE7yPAXHdx0AJSsydoAjEYOcE/AAJwInYk3TFUmJRUj8BmEYEAd14xSR6brBIALf87udnuP0Qz9UJNk09FwuB1N0zQBkTkErUPA8V1Uk3dBY5bhh6rgOwngwcMjQ9704jgEym8vaUUHxXFCnHr7rEtbQdclfkSRN1UamqcgCGvY7w2Gn3QY2w/hvpvzP8Y3YaZqmKEo2m6V6QeA3j5ps6/UHVCyXs6q1ipRK5UpFMwzHcZuHRy7+3SGh66o+NTWVy+aKpSIjDMJWu+UMnTiISF5RlalyGWRVTS8UberW7fb2Gw3o7flelMRWLletVuM4sW2bzFzPPTo88L3hYIBxn5DsQkFVVDvOg6rn+c1WS9XUoQMsrgLfMikuqCTPKI4H/T5wD5wh7FOXl5dPpkoPZ/7TI8yXSiUkZqIazERRtLm5ebwK5Kx+f34eOArFAqX7/PN/sEYvhUHgDoeLiwv1+kwmIxMWiR8eHv75r3+hG8DLGQyKUyWEAmJTq0ql0h/0Xmxs0gppOgr8APq8sbBQn63Td1SPIn/1VaPdbkEB2if0Pdsu6JrOvGgjVe11up7r8g5RAUXT1XKplNgFyKtrGgoSBPRRZiTaM6JzsZOKSDOQKwrDbg+GOmO+y+r6+vpJFM6ePUvaxxjdv39/dXX1mCbIKiAer966dQthfvnyJe8k/OjRo9XVewHM1xTKuLi4ePXqtWKhQBsBEHB/+erVZ5/9icY2dL1aq62snH/vvZ+riuIF/u727s7Oq3bnS/BCROx8ng1z9Xo2myNJ+gISbW/vuq4DNci8YNsz0zPWzKysSHgE4k67gyiQHt1ocz6fL+RtpIoeBqz2mIMoGq2IzaxpGYomKRJZoTXoTuQQVyhUD5RPCufXxeXU6td7h0nIIgTCsh4/fry9s7O7vaPq2vSZM3VIMjMDymw6OjwcOA6RPX/+nILYBfvijy5C/nfe+aGZNTutdhxGGxvrW1tbFBnI5ufnZ2frXAe1ahV67uy9braahwcHjf0GG/JWntU3l5bn6rOarnGh+J4HF/YPGv3+oFCwOVgqTnHNWfm8Zuh7O7ugtvd6j7zptVqtlsvm6XpVVwGFvsNFr99z+gPXE3r03TTl24agnCbwTeKYhleiwPeLIGUY+qThCRo+kw+hkwMt44d+LitqZuWsJIooLPVAjziezZrgpQpRsCu1KlrT6XSoFaU+ah6hCHE5LpWn2MbT0HTuG2jv+m6r2ez1+3RfrfY9lAKbpakSXg729yFjt9MlAHhB37GHypkml1WC7KOvQ8dpddqD3iCMwtOgfCMd/g9QRGdK8r9Pi9tnNLm/meTuU4SkISVQfzxgKfCNnbEuIaW6afDmieEyzU6eKJGhm7xABzkViuaLdS/MR5mxwIML9xo/7EEsh8gpIwjxgDvDFIhTDFzgjoWh5xqmkaRxmqGPVNM0Y24iWVznrDoDB0wxoPK/NB6Zb7lcjsfxd8rJbccaLGUmZmTesUnSkw8YMS+WBGbEmo4H6bFH3Nniw0boP1o4/npJyI1bQHzfjIGGAjIfInQ/oScjUBWWU1IyIKAi8YcEKSIqnEZjGyPxoYJZ7hGuv3gUTeJEnpMoGX8riY8n4skqemRIqixAoAxQBtCHvvcv+qJRH7fzah8AAAAASUVORK5CYII=') !important;
2436 +}
2437 +
2438 +.pagelayer-elp-filter-contrast input{
2439 +background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAKCAMAAAAU2ikOAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAklQTFRFAAAAAgICAwMDBAQEBgYGCAgICwsLAQEBISEhJSUlKioqLy8vNDQ0WFhYXl5eZWVla2trcXFxmpqaoKCgpqamra2ts7OzJiYm1dXV2dnZ3t7e4uLi5ubm2tra+/v7/Pz8/f39/v7+////BQUFBwcHGhoaHh4eIyMjJycnLCwsTk5OVFRUWlpaYWFhaGhoj4+PlpaWnZ2do6Ojqqqqzc3N0tLS19fX3Nzc4ODg9/f3+vr6FBQUGBgYHBwcICAgRUVFS0tLUVFRV1dXhYWFjIyMkpKSmZmZn5+fxMTEysrKz8/P1NTU9PT09vb2+fn5Dw8PEhISFhYWPDw8QUFBSEhIe3t7goKCiIiIu7u7wcHBx8fHzMzM0dHR7+/v8vLy9fX1CgoKDQ0NEBAQFxcXOTk5Pj4+SkpKd3d3fn5+i4uLsrKyuLi4vr6+ycnJ6urq7e3t8PDw8/PzBQYHBQUGBAQFAwMEAgMDFRUVGRkZHR0dIiIiR0dHTU1NYGBglZWVm5uboqKixsbG1tbW29vbBgcIBAUGAwQFExMTGxsbHx8fREREUFBQVlZWhISEkZGRmJiYvb29w8PDzs7O09PT+Pj4AAABDAwMDg4OERERNTU1Ozs7RkZGTExMdHR0enp6gICAjo6OJCQktLS0urq6wMDAy8vL6+vr7u7uAQECLS0tMjIyODg4Q0NDaWlpcHBwdnZ2fX19q6ursbGxt7e35eXl6enpCQkJKysrMDAwX19fbGxsc3NzeXl5oaGhqKiorq6u39/f4+Pj5+fnrIREkAAAAeZJREFUeJxd0Pk/FHEcx/Hv7OLblrvD1S675cjKolJLOVJSIVKtctOKStaQIyKZEuWqJEI50h0lkXT5yzLvT4N2fpnnYx6Pz+vxmQ9jK4+gUjs4OgmMM2GDZuMmZ8jF1c3dQyXLc/OWrdu8ZHn7+Ppth7Q6/wA9yWAwQBxieLig2rGTywgMCg7ZBYUaw3aHQ6aIyKg9Gll790XvPwBpzTG6AJKcWRP7V+QqNRB78FCcBopPSDzsCiUdOZp8DB9Tjp846QNpU9PSY0j2Qa4sidepjMzAIOh01plQI3T2nMUUgeHs8xdycimTl19gXg0a1sQEzinKUS4sKo4tgZwvWuNLIY9LZUnlGLl85WpKBQ1fq7RV/b8hiYnVNddr+eolobr6hhshUGOTMewmZDE1t9zCXGtO7u02KhSY03V2VSaJ4p27TDkl/Xdxe8m9DsjaWXr/AVTWVd7dg5HevoqHjyhjq0p7bPffTJIksRrqZ8pBnww8rauHBoeyng1DI6PPLS/GZI1PTLa+hNqmXuWnkuTgmBKUROg1VxZ1XLlkO/Tm7Tvre+jDx+mZLuzw6fNsbx/t9WWu0kbSr99QkpCqFXg/BdUOX50G8M1rfmFwCPrmtvh9CSM/fv4an6DM7z/LUyR/vZ5u+BdDtnhZvafUoAAAAABJRU5ErkJggg==') !important;
2440 +}
2441 +
2442 +.pagelayer-elp-filter-brightness input{
2443 +background-image: linear-gradient(90deg,#000,#fff);
2444 +}
2445 +
2446 +.pagelayer-elp-filter-grayscale input{
2447 +background-image: linear-gradient(90deg, rgba(203,20,106,1) 0%, rgba(88,88,88,1) 56%);
2448 +}
2449 +
2450 +.pagelayer-elp-filter-hue input{
2451 +background-image: linear-gradient(90deg,red,orange,#ff0,#adff2f,#32cd32,#00bfff,blue,#9400d3 95%);
2452 +}
2453 +
2454 +.pagelayer-elp-filter-saturate input{
2455 +background-image: linear-gradient(90deg,gray,red);
2456 +}
2457 +
2458 +.pagelayer-elp-filter-opacity input{
2459 +background-image: linear-gradient(90deg,#fff,#000);
2460 +}
2461 +
2462 +.pagelayer-elp-typo-fonts .pagelayer-elp-label,
1150 2463 .pagelayer-elp-typo .pagelayer-elp-label{
1151 2464 font-weight: 600;
1152 2465 font-size: 11px;
1153 2466 color: #555;
@@ -1152,16 +2465,51 @@
1152 2465 font-size: 11px;
1153 2466 color: #555;
1154 2467 }
1155 2468
2469 +.pagelayer-elp-global-typo{
2470 +box-shadow: 0 2px 2px -1px #d2cfce;
2471 +margin: -10px -10px 0 -10px;
2472 +padding: 8px 10px;
2473 +display: flex;
2474 +}
2475 +
2476 +[pagelayer-screen-mode="desktop"] [pagelayer-show-device]:not([pagelayer-show-device="desktop"]),
2477 +[pagelayer-screen-mode="tablet"] [pagelayer-show-device]:not([pagelayer-show-device="tablet"]),
2478 +[pagelayer-screen-mode="mobile"] [pagelayer-show-device]:not([pagelayer-show-device="mobile"]){
2479 +display:none;
2480 +}
2481 +
2482 +.pagelayer-elp-global-typo .pagelayer-elp-typo-icons{
2483 +text-align: right;
2484 +width: 50%;
2485 +}
2486 +
2487 +.pagelayer-elp-global-typo .pagelayer-global-font-list{
2488 +width: 100%;
2489 +}
2490 +
2491 +.pagelayer-elp-typo-icons .pagelayer-elp-global-icon{
2492 +margin-right: 10px;
2493 +cursor: pointer;
2494 +}
2495 +
2496 +.pagelayer-dark .pagelayer-elp-typo .pagelayer-elp-label{
2497 +color:#bdbdbd;
2498 +}
2499 +
1156 2500 .pagelayer-elp-typo select.pagelayer-elp-typo-input,
1157 2501 .pagelayer-elp-typo-input,
1158 2502 .pagelayer-elp-shadow-input{
1159 2503 padding: 3px;
1160 2504 border-radius: 4px !important;
1161 -line-height: 18px !important;
2505 +line-height: 23px !important;
1162 2506 }
1163 2507
2508 +.pagelayer-dark .pagelayer-elp-typo select.pagelayer-elp-typo-input{
2509 +background-color: #252529;
2510 +}
2511 +
1164 2512 .pagelayer-elp-grad-color{
1165 2513 position:relative;
1166 2514 }
1167 2515
@@ -1172,11 +2520,19 @@
1172 2520 .pagelayer-elp-tinymce {
1173 2521 border-radius: 2px !important;
1174 2522 }
1175 2523
2524 +.pagelayer-post-type{
2525 +text-transform: capitalize;
2526 +}
2527 +
2528 +.pagelayer-elp-text{
2529 +padding-left:5px;
2530 +}
2531 +
1176 2532 .pagelayer-elp-select-div,
1177 2533 .pagelayer-elp-spinner-div{
1178 -width: 140px;
2534 +width: 50%;
1179 2535 right: 10px;
1180 2536 position: absolute;
1181 2537 top: 7px;
1182 2538 }
@@ -1189,13 +2545,52 @@
1189 2545 padding: 2px 0 2px 6px;
1190 2546 border-radius: 4px !important;
1191 2547 }
1192 2548
1193 -.pagelayer-elp-select-div .pagelayer-elp-select {
1194 -border-radius: 4px;
1195 -padding: 6px;
2549 +.pagelayer-elp-select {
2550 +font-size: 16px;
2551 +font-weight: 700;
2552 +color: #444;
2553 +line-height: 1.3;
2554 +padding: 2px 2px 2px 6px;
2555 +width: 100%;
2556 +max-width: 100%;
2557 +margin: 0;
2558 +border: 1px solid #aaa;
2559 +border-radius: 3px !important;
2560 +box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
2561 +-moz-appearance: none;
2562 +-webkit-appearance: none;
2563 +appearance: none;
2564 +background-image: linear-gradient(45deg, transparent 50%, #1A9CDB 50%), linear-gradient(135deg, #1A9CDB 50%, transparent 50%);
2565 +background-position: right .9em top 50%, right .55em top 50%;
2566 +background-size: 5px 5px, 5px 5px;
2567 +background-repeat: no-repeat;
1196 2568 }
2569 +.pagelayer-elp-select::-ms-expand {
2570 +display: none;
2571 +}
2572 +.pagelayer-elp-select:hover {
2573 + border-color: #888;
2574 +}
2575 +.pagelayer-elp-select:focus {
2576 +border-color: #aaa;
2577 +box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
2578 +box-shadow: 0 0 0 3px -moz-mac-focusring;
2579 +color: #222;
2580 +outline: none;
2581 +}
2582 +.pagelayer-elp-select option{
2583 +font-weight:normal;
2584 +}
1197 2585
2586 +.pagelayer-dark .pagelayer-elp-select-div .pagelayer-elp-select,
2587 +.pagelayer-dark .pagelayer-elp-typo-input .pagelayer-elp-select,
2588 +.pagelayer-dark .pagelayer-parent-category .pagelayer-add-cat{
2589 +background-color: #252529;
2590 +color:#bdbdbd;
2591 +}
2592 +
1198 2593 .pagelayer-elpd-body input:focus,
1199 2594 .pagelayer-elpd-body textarea:focus,
1200 2595 .pagelayer-elpd-body select:focus {
1201 2596 border-color: #3e8ef7;
@@ -1207,13 +2602,60 @@
1207 2602 font-size: 13px;
1208 2603 margin-bottom: 10px;
1209 2604 }
1210 2605
2606 +.pagelayer-elp-group-item .pagelayer-form-item{
2607 +padding: 10px 0px 10px 0px;
2608 +}
2609 +
2610 +.pagelayer-elp-group-item .pagelayer-elp-spinner-div,
2611 +.pagelayer-elp-group-item .pagelayer-elp-color-div,
2612 +.pagelayer-elp-group-item .pagelayer-elp-color-div-holder{
2613 +right: 0px !important;
2614 +}
2615 +
2616 +.pagelayer-elp-group-item .pagelayer-elp-select-div{
2617 +position: relative !important;
2618 +width: 100% !important;
2619 +right: auto !important;
2620 +left: auto !important;
2621 +top: auto !important;
2622 +display: block !important;
2623 +margin-top: 6px !important;
2624 +box-sizing: border-box !important;
2625 +}
2626 +
2627 +.pagelayer-elp-group-item .pagelayer-elp-select {
2628 +width: 100% !important;
2629 +}
2630 +
2631 +.pagelayer-elp-group-item .pagelayer-elp-label-div[type=select] {
2632 +width: 100% !important;
2633 +}
2634 +
2635 +.pagelayer-elp-group-item .pagelayer-elp-label-div {
2636 +display: flex !important;
2637 +width: 100% !important;
2638 +align-items: center !important;
2639 +justify-content: space-between !important;
2640 +flex-wrap: nowrap !important;
2641 +}
2642 +
2643 +.pagelayer-elp-group-item .pagelayer-elp-label-div .pagelayer-elp-units {
2644 +margin-left: auto !important;
2645 +}
2646 +
2647 +
2648 +
1211 2649 .pagelayer-elp-group-item-head{
1212 2650 display:flex;
1213 2651 background: #F8F8F8;
1214 2652 }
1215 2653
2654 +.pagelayer-dark .pagelayer-elp-group-item-head{
2655 +background:#252529;
2656 +}
2657 +
1216 2658 .pagelayer-elp-group-item-head span{
1217 2659 cursor: pointer;
1218 2660 padding: 9px;
1219 2661 display:inline-block;
@@ -1218,10 +2660,21 @@
1218 2660 padding: 9px;
1219 2661 display:inline-block;
1220 2662 }
1221 2663
2664 +.pagelayer-dark .pagelayer-elp-group-item-head span{
2665 +color:#bdbdbd;
2666 +}
2667 +
2668 +.pagelayer-elp-group-item-head .pagelayer-elp-group-item-drag:hover {
2669 +cursor:all-scroll;
2670 +}
2671 +
1222 2672 .pagelayer-elp-group-item-title{
1223 2673 flex-grow: 100;
2674 +white-space: nowrap;
2675 +overflow: hidden;
2676 +text-overflow: ellipsis;
1224 2677 }
1225 2678
1226 2679 .pagelayer-elp-group-item-del{
1227 2680 float: right;
@@ -1231,8 +2684,12 @@
1231 2684 display: none;
1232 2685 padding: 7px 10px;
1233 2686 }
1234 2687
2688 +.pagelayer-elp-group-item-clone{
2689 +padding-right:0px !important;
2690 +}
2691 +
1235 2692 .pagelayer-elp-padding{
1236 2693 width:21% !important;
1237 2694 }
1238 2695
@@ -1261,11 +2718,31 @@
1261 2718 padding:5px;
1262 2719 }
1263 2720
1264 2721 .pagelayer-widgets-form input[type="checkbox"]{
1265 -width: auto;
2722 +width: auto !important;
2723 +height: auto !important;
2724 +display: inline-block !important;
2725 +float: left !important;
2726 +clear: left !important;
2727 +margin: 4px 8px 12px 0 !important;
2728 +vertical-align: middle !important;
1266 2729 }
1267 2730
2731 +.pagelayer-widgets-form input[type="checkbox"] + label {
2732 +display: inline-block !important;
2733 +float: left !important;
2734 +width: calc(100% - 35px) !important;
2735 +margin-bottom: 12px !important;
2736 +vertical-align: middle !important;
2737 +cursor: pointer !important;
2738 +}
2739 +
2740 +.pagelayer-widgets-form p,
2741 +.pagelayer-widgets-form li {
2742 +display: flow-root !important;
2743 +}
2744 +
1268 2745 .pagelayer-widgets-form{
1269 2746 line-height:150%;
1270 2747 border-top: none;
1271 2748 padding: 8px;
@@ -1270,8 +2747,20 @@
1270 2747 border-top: none;
1271 2748 padding: 8px;
1272 2749 }
1273 2750
2751 +.pagelayer-dark .pagelayer-widgets-form label{
2752 +color:#bdbdbd;
2753 +}
2754 +
2755 +.pagelayer-dark .pagelayer-widgets-form input,
2756 +.pagelayer-dark .pagelayer-widgets-form select,
2757 +.pagelayer-dark .pagelayer-widgets-form textarea {
2758 +color:#bdbdbd;
2759 +background-color:#1c1c1f;
2760 +border:1px solid #6e6d6d;
2761 +}
2762 +
1274 2763 /* End Widget Parameters */
1275 2764
1276 2765 .trumbowyg-box{
1277 2766 margin-top:0px !important;
@@ -1284,19 +2773,46 @@
1284 2773
1285 2774 /* Pagelayer Left bar */
1286 2775
1287 2776 .pagelayer-topbar-holder{
1288 -background-color: #3e8ef7;
2777 +background-color: #4CB5E8;
2778 +position:relative;
2779 +animation: colorchange 30s infinite alternate;
2780 +-webkit-animation: colorchange 30s infinite alternate;
1289 2781 }
1290 2782
2783 +@keyframes colorchange{
2784 +0% {background: #3e0772;}
2785 +25% {background: #209ce2;}
2786 +50% {background: #00838c;}
2787 +75% {background: #088dce;}
2788 +100% {background: #3d5afe;}
2789 +}
2790 +
2791 +.pagelayer-topbar-mover{
2792 +cursor: all-scroll;
2793 +}
2794 +
2795 +/* Sidebar top header bar */
2796 +td.pagelayer-topbar-holder {
2797 +background: #26292c !important;
2798 +border-bottom: 1px solid #1f2124 !important;
2799 +height: 50px !important;
2800 +display: flex !important;
2801 +align-items: center !important;
2802 +justify-content: space-between !important;
2803 +padding: 0 15px !important;
2804 +box-sizing: border-box !important;
2805 +}
2806 +
1291 2807 .pagelayer-logo{
1292 -font-size:20px;
2808 +font-size:18px;
1293 2809 font-weight: bold;
1294 -display: table-cell;
2810 +display: block;
1295 2811 text-align:center;
1296 2812 vertical-align:middle;
1297 2813 color:#fff;
1298 -background-color: #3e8ef7;
2814 +width:76%;
1299 2815 }
1300 2816
1301 2817 .pagelayer-logo-text{
1302 2818 font-weight: bold;
@@ -1304,30 +2820,82 @@
1304 2820 line-height: normal;
1305 2821 vertical-align: super;
1306 2822 }
1307 2823
2824 +.pagelayer-settings-icon{
2825 +padding-right:10px;
2826 +cursor: pointer;
2827 +position: absolute;
2828 +right: 5px;
2829 +top: 50%;
2830 +transform: translateY(-50%);
2831 +}
2832 +
2833 +.pagelayer-options-icon{
2834 +padding-left:10px;
2835 +cursor: pointer;
2836 +position: absolute;
2837 +left: 5px;
2838 +top: 50%;
2839 +transform: translateY(-50%);
2840 +font-size: 18px !important;
2841 +color: #ffffff;
2842 +}
2843 +
1308 2844 .pagelayer-leftbar{
1309 2845 width:270px !important;
1310 2846 padding-top:0;
1311 -background: #E3E3E3 !important;
2847 +background-color: #E3E3E3;
1312 2848 overflow: hidden;
2849 +background: -moz-linear-gradient(224deg, rgba(222,222,222,1) 0%, rgba(191,202,214,1) 100%); /* ff3.6+ */
2850 +background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(191,202,214,1)), color-stop(100%, rgba(222,222,222,1))); /* safari4+,chrome */
2851 +background: -webkit-linear-gradient(224deg, rgba(222,222,222,1) 0%, rgba(191,202,214,1) 100%); /* safari5.1+,chrome10+ */
2852 +background: -o-linear-gradient(224deg, rgba(222,222,222,1) 0%, rgba(191,202,214,1) 100%); /* opera 11.10+ */
2853 +background: -ms-linear-gradient(224deg, rgba(222,222,222,1) 0%, rgba(191,202,214,1) 100%); /* ie10+ */
2854 +background: linear-gradient(226deg, rgba(222,222,222,1) 0%, rgba(191,202,214,1) 100%); /* w3c */
2855 +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#BFCAD6', endColorstr='#DEDEDE',GradientType=1 ); /* ie6-9 */
1313 2856 }
1314 2857
2858 +.pagelayer-dark .pagelayer-leftbar{
2859 +background: unset !important;
2860 +background-color: #1c1c1f !important;
2861 +}
2862 +
1315 2863 .pagelayer-leftbar-search{
1316 2864 text-align:center;
1317 -padding: 10px 40px 10px 25px;
2865 +margin: 20px 40px 10px 25px;
2866 +position:relative;
1318 2867 }
1319 2868
1320 2869 .pagelayer-search-field{
1321 2870 width:100%;
1322 2871 line-height:120%;
1323 -padding:2px;
2872 +padding: 5px 20px 5px 30px;
2873 +border-radius: 5px;
2874 +border: none;
2875 +font-size: 14px;
2876 +height:30px;
1324 2877 }
1325 2878
1326 -.pagelayer-shortcodes{
1327 -margin-left:17px;
2879 +.pagelayer-widget-search .pli,
2880 +.pagelayer-leftbar-search .pli{
2881 +position: absolute;
2882 +top: 0;
2883 +height: 30px;
2884 +padding: 0 7px;
2885 +color: #666;
2886 +line-height: 30px;
1328 2887 }
1329 2888
2889 +.pagelayer-widget-search .pagelayer-sf-empty,
2890 +.pagelayer-leftbar-search .pagelayer-sf-empty{
2891 +right:0;
2892 +left:auto;
2893 +font-weight:bolder;
2894 +cursor:pointer;
2895 +}
2896 +
2897 +.pagelayer-widget-group,
1330 2898 .pagelayer-leftbar-group{
1331 2899 width: 100%;
1332 2900 background-repeat: no-repeat;
1333 2901 background-position: center;
@@ -1334,12 +2902,13 @@
1334 2902 font-size: 11px !important;
1335 2903 color: #442E2E;
1336 2904 clear: both;
1337 2905 text-align: center;
1338 -font-family: "Open Sans",arial,sans-serif !important;
2906 +font-family: Roboto, 'Open Sans', Arial, sans-serif !important;
1339 2907 margin-bottom: 2px;
1340 2908 }
1341 2909
2910 +.pagelayer-widget-group h5,
1342 2911 .pagelayer-leftbar-group h5{
1343 2912 font-size: 11px;
1344 2913 line-height: 20px;
1345 2914 text-transform: uppercase;
@@ -1347,23 +2916,41 @@
1347 2916 padding: 5px 0 3px;
1348 2917 margin: 5px;
1349 2918 }
1350 2919
1351 -.pagelayer-shortcode-drag, .pagelayer-shortcode-drag:hover{
2920 +.pagelayer-widget-group h5:only-child,
2921 +.pagelayer-leftbar-group h5:only-child{
2922 +display: none;
2923 +}
2924 +
2925 +.pagelayer-global-widget-pro{
2926 +text-align: center;
2927 +margin-right: 10px;
2928 +padding-top: 20px;
2929 +font-size: 14px;
2930 +}
2931 +
2932 +.pagelayer-shortcode-holder,
2933 +.pagelayer-shortcode-drag{
1352 2934 width: 100px !important;
1353 2935 height:67px !important;
1354 -margin-bottom:6px;
2936 +margin-bottom:12px;
1355 2937 margin-left:12px;
1356 -background-color:#FFFFFF;
2938 +background-color: #FFFFFF;
1357 2939 border-radius: 4px;
1358 2940 float: left;
1359 -transition: all 0.3s;
1360 -border: 1px solid #ccc;
2941 +transition: all 0.1s;
1361 2942 }
1362 2943
2944 +.pagelayer-dark .pagelayer-shortcode-drag,
2945 +.pagelayer-dark .pagelayer-shortcode-drag:hover{
2946 +background-color:#252529;
2947 +box-shadow:0 0.5rem 1rem #00000026;
2948 +}
2949 +
2950 +.pagelayer-shortcode-holder:hover,
1363 2951 .pagelayer-shortcode-drag:hover{
1364 -box-shadow: 2px 2px 2px #c6c6c6;
1365 -border-color: #00A0D2;
2952 +transform: scale(1.06);
1366 2953 }
1367 2954
1368 2955 .pagelayer-sc{
1369 2956 padding: 4px !important;
@@ -1370,28 +2957,8 @@
1370 2957 margin: 4px auto 0 auto !important;
1371 2958 cursor: move;
1372 2959 }
1373 2960
1374 -.pagelayer-shortcode,.pagelayer-shortcode:before{
1375 -display:inline-block;
1376 -width:22px;
1377 -height:22px;
1378 -font-size:22px;
1379 -line-height:1;
1380 -font-family:pagelayer,fontawesome;
1381 -text-decoration:inherit;
1382 -font-weight:400;
1383 -font-style:normal;
1384 -vertical-align:top;
1385 -text-align:center;
1386 --webkit-transition:color .1s ease-in 0;
1387 -transition:color .1s ease-in 0;
1388 --webkit-font-smoothing:antialiased;
1389 --moz-osx-font-smoothing:grayscale;
1390 -color: #777;
1391 -transition: all 0.3s;
1392 -}
1393 -
1394 2961 .pagelayer-shortcode-inner{
1395 2962 height: 25px;
1396 2963 padding: 0px !important;
1397 2964 }
@@ -1396,10 +2963,12 @@
1396 2963 padding: 0px !important;
1397 2964 }
1398 2965
1399 2966 .pagelayer-shortcode-text{
1400 -display: block;
1401 -font-family: "Open Sans", Arial,Helvetica,sans-serif;
2967 +display: -webkit-box;
2968 +-webkit-box-orient: vertical;
2969 +-webkit-line-clamp: 3;
2970 +font-family: Roboto, 'Open Sans', Arial, Helvetica, sans-serif;
1402 2971 font-size: 11px !important;
1403 2972 font-style: normal;
1404 2973 line-height: 125%;
1405 2974 margin: 0;
@@ -1413,82 +2982,38 @@
1413 2982 transition: all 0.3s;
1414 2983 padding:1px;
1415 2984 }
1416 2985
2986 +.pagelayer-leftbar-search-empty{
2987 +display: none;
2988 +padding: 40px;
2989 +text-align: center;
2990 +color: #777;
2991 +font-family: 'Roboto';
2992 +}
2993 +
2994 +.pagelayer-leftbar-search-empty p{
2995 +margin: 8px;
2996 +}
2997 +
2998 +.pagelayer-leftbar-search-empty .fa-sad-tear{
2999 +font-size: 24px;
3000 +}
3001 +
3002 +.pagelayer-dark .pagelayer-shortcode-text{
3003 +color: #bdbdbd;
3004 +}
3005 +
1417 3006 .pagelayer-shortcode-drag:hover .pagelayer-shortcode:before,
1418 3007 .pagelayer-shortcode-drag:hover .pagelayer-shortcode-text{
1419 - color: #00A0D2;
3008 +color: #2563eb;
1420 3009 }
1421 3010
1422 -/* Pagelayer Editor Icons */
1423 -@font-face{font-family:pagelayer;src:url(../fonts/pagelayer.eot)}
1424 -@font-face{font-family:pagelayer;src:url(../fonts/pagelayer.woff) format('woff'),url(../fonts/pagelayer.ttf) format("truetype"),url(../fonts/pagelayer.svg#pagelayer) format("svg");font-weight:400;font-style:normal}
3011 +.pagelayer-dark .pagelayer-shortcode-drag:hover .pagelayer-shortcode:before,
3012 +.pagelayer-dark .pagelayer-shortcode-drag:hover .pagelayer-shortcode-text{
3013 +color: #2563eb;
3014 +}
1425 3015
1426 -.pagelayer-pl_row:before{content:"\f0c9"} /* e916 */
1427 -.pagelayer-pl_col:before{content:"\f0db"}
1428 -.pagelayer-pl_heading:before{content:"\e90f";font-size:18px;}
1429 -.pagelayer-pl_text:before{content:"\f036"}
1430 -.pagelayer-pl_code:before{content:"\f044"}
1431 -.pagelayer-pl_quote:before{content:"\e906"}
1432 -.pagelayer-pl_list:before{content:"\e908";font-size:20px;}
1433 -.pagelayer-pl_icon:before{content:"\f006"}
1434 -.pagelayer-pl_image:before{content:"\f03e"}
1435 -.pagelayer-pl_image_slider:before{content:"\e939";margin-left:-5px;}
1436 -.pagelayer-pl_grid_gallery:before{content:"\f00a"}
1437 -.pagelayer-pl_image_hotspot:before{content:"\e91c"}
1438 -.pagelayer-pl_btn:before{content:"\e90b"}
1439 -.pagelayer-pl_btn_grp:before{content:"\f24d"}
1440 -.pagelayer-pl_download:before{content:"\e909"}
1441 -.pagelayer-pl_social:before{content:"\e938"}
1442 -.pagelayer-pl_share:before{content:"\e952"}
1443 -.pagelayer-pl_video:before{content:"\f03d"}
1444 -.pagelayer-pl_audio:before{content:"\f028"}
1445 -.pagelayer-pl_video_lightbox:before{content:"\e910"}
1446 -.pagelayer-pl_video_slider:before{content:"\e944"}
1447 -.pagelayer-pl_service:before{content:"\e937"}
1448 -.pagelayer-pl_tabs:before{content:"\e93c"}
1449 -.pagelayer-pl_accordion:before{content:"\e946"}
1450 -.pagelayer-pl_table:before{content:"\f0ce"}
1451 -.pagelayer-pl_call:before{content:"\e916"}
1452 -.pagelayer-pl_modal:before{content:"\e90e"}
1453 -.pagelayer-pl_splash:before{content:"\e90c"}
1454 -.pagelayer-pl_space:before{content:"\e93a"}
1455 -.pagelayer-pl_embed:before{content:"\f121"}
1456 -.pagelayer-pl_chart:before{content:"\e94d"}
1457 -.pagelayer-pl_google_maps:before{content:"\e924"}
1458 -.pagelayer-pl_countdown:before{content:"\e941"}
1459 -.pagelayer-pl_pricing:before{content:"\e933"}
1460 -.pagelayer-pl_contact:before{content:"\f298"}
1461 -.pagelayer-pl_testimonial:before{content:"\e906"}
1462 -.pagelayer-pl_alert:before{content:"\f06a"}
1463 -.pagelayer-pl_anchor:before{content:"\f13d"}
1464 -.pagelayer-pl_progress:before{content:"\f0ae"}
1465 -.pagelayer-pl_social_grp:before{content:"\f029"}
1466 -.pagelayer-pl_counter:before{content:"\f162"}
1467 -.pagelayer-pl_shortcodes:before{content:"\f141"}
1468 -.pagelayer-pl_divider:before{content:"\f2d1"}
1469 -.pagelayer-pl_stars:before{content:"\f123"}
1470 -.pagelayer-pl_block:before{content:"\f0c8"}
1471 -.pagelayer-pl_collapse:before{content:"\f233"}
1472 -.pagelayer-pl_iconbox:before{content:"\e912"}
1473 -.pagelayer-pl_tooltip:before{content:"\f18d"}
1474 -.pagelayer-pl_badge:before{content:"\f2c1"}
1475 -.pagelayer-pl_wp_widgets:before{content:"\e945"}
1476 -.pagelayer-pl_wp_custom_menu:before{content:"\e92a"}
1477 -.pagelayer-pl_wp_posts_grid:before{content:"\e92f"}
1478 -.pagelayer-pl_wp_posts_slider:before{content:"\e951"}
1479 -.pagelayer-pl_wp_comments:before{content:"\e970"}
1480 -.pagelayer-pl_wp_pages:before{content:"\e92e"}
1481 -.pagelayer-pl_wp_posts:before{content:"\e912"}
1482 -.pagelayer-pl_wp_calendar:before{content:"\f073"}
1483 -.pagelayer-pl_wp_categories:before{content:"\e949"}
1484 -.pagelayer-pl_wp_archives:before{content:"\f271"}
1485 -.pagelayer-pl_wp_tags:before{content:"\e913"}
1486 -.pagelayer-pl_wp_title:before{content:"\e90f";font-size:18px;}
1487 -.pagelayer-pl_wp_menu:before{content:"\e900";font-size:28px; margin:-3px;}
1488 -.pagelayer-pl_arrow_down:before{content:"\e900";font-size:28px; margin:-3px;}
1489 -.pagelayer-shortcode[class*="pagelayer-pl_wp_"]:before{content:"\f19a"}
1490 -
1491 3016 /* Trumbowyg color widget style */
1492 3017 .trumbowyg-dropdown-foreColor,
1493 3018 .trumbowyg-dropdown-backColor {
1494 3019 width: 100% !important;
@@ -1534,5 +3059,3996 @@
1534 3059 box-shadow: #000 0 0 2px;
1535 3060 z-index: 10;
1536 3061 }
1537 3062
1538 -/* Trumbowyg color widget style end */
3063 +.trumbowyg-dropdown-fontsize,
3064 +.trumbowyg-dropdown-lineheight,
3065 +.trumbowyg-dropdown-fontfamily{
3066 +height: 200px;
3067 +overflow: auto;
3068 +}
3069 +
3070 +/* Trumbowyg color widget style end */
3071 +
3072 +/* Pagelayer history style*/
3073 +
3074 +.pagelayer-revision-holder,
3075 +.pagelayer-history-holder{
3076 +border: 1px solid #b7b5b5fa;
3077 +margin-bottom: 10px;
3078 +padding: 10px;
3079 +display: -webkit-box;
3080 +display: -webkit-flex;
3081 +display: -ms-flexbox;
3082 +display: flex;
3083 +-webkit-box-align: center;
3084 +-webkit-align-items: center;
3085 +-ms-flex-align: center;
3086 +align-items: center;
3087 +font-size: 12px;
3088 +color:#505050;
3089 +}
3090 +
3091 +.pagelayer-leftbar-tab,
3092 +.pagelayer-history,
3093 +.pagelayer-history-hidden{
3094 +display:none;
3095 +}
3096 +
3097 +.pagelayer-revision-holder:hover,
3098 +.pagelayer-history-holder:hover,
3099 +.pagelayer-history-holder.current_active_item{
3100 +background-color:#efefef;
3101 +}
3102 +
3103 +.pagelayer-revision-img-holder{
3104 +border-radius: 50%;
3105 +overflow: hidden;
3106 +margin-right:10px;
3107 +}
3108 +
3109 +.pagelayer-revision-detail-holder,
3110 +.pagelayer-history-detail-holder{
3111 +flex:1;
3112 +}
3113 +
3114 +.pagelayer-revision-holder .pagelayer-revision-delete,
3115 +.pagelayer-history-holder .pagelayer-history-check{
3116 +display:none;
3117 +}
3118 +
3119 +.pagelayer-revision-holder:hover .pagelayer-revision-delete,
3120 +.pagelayer-history-holder.current_active_item .pagelayer-history-check{
3121 +display:block;
3122 +}
3123 +
3124 +.pagelayer-revision-delete:hover{
3125 +cursor:pointer;
3126 +}
3127 +
3128 +.pagelayer-revision-img-holder img{
3129 +max-width: 100%;
3130 +width: 20px;
3131 +height: 20px;
3132 +}
3133 +
3134 +.pagelayer-history-holder span{
3135 +margin-right:5px;
3136 +}
3137 +
3138 +/* Pagelayer history end*/
3139 +
3140 +/* Pagelayer General options*/
3141 +.pagelayer-general-options{
3142 +color: #777;
3143 +background-color: #FFFFFF;
3144 +font-size: 14px;
3145 +}
3146 +
3147 +.pagelayer-general-options .pagelayer-option-holder{
3148 +display: flex !important;
3149 +align-items: center !important;
3150 +padding: 10px;
3151 +border-radius: 4px;
3152 +transition: all 0.1s;
3153 +margin-bottom:4px;
3154 +cursor: pointer;
3155 +}
3156 +
3157 +.pagelayer-general-options .pagelayer-option-holder i{
3158 +margin: 0 10px;
3159 +}
3160 +
3161 +.pagelayer-general-options .pagelayer-option-holder:hover{
3162 +color: #3b82f6;
3163 +background: #f1f5f9;
3164 +}
3165 +
3166 +.pagelayer-dark .pagelayer-general-options .pagelayer-option-holder:hover {
3167 +color: #60a5fa !important;
3168 +background: #1e293b !important;
3169 +}
3170 +
3171 +.pagelayer-general-options .pagelayer-option-holder:active{
3172 +transform: scale(0.97);
3173 +cursor: progress;
3174 +}
3175 +
3176 +.pagelayer-general-options .pagelayer-options-sections{
3177 +padding: 10px;
3178 +}
3179 +
3180 +.pagelayer-general-options .pagelayer-options-sections:not(:last-child){
3181 +border-bottom: 1px solid #ebebeb;
3182 +}
3183 +
3184 +.pagelayer-general-options h5{
3185 +font-size: 11px;
3186 +text-transform: uppercase;
3187 +color: #777;
3188 +margin: 15px 5px;
3189 +}
3190 +
3191 +/* Pagelayer General options end*/
3192 +
3193 +/* Pagelayer settings*/
3194 +
3195 +.pagelayer-post-settings-holder{
3196 +border:1px solid #d3d3d3;
3197 +font-size: 14px;
3198 +line-height: 150%;
3199 +}
3200 +
3201 +.pagelayer-post-settings-acc{
3202 +background-color:#fff;
3203 +}
3204 +
3205 +.pagelayer-post-settings-apply{
3206 +font-size: 14px;
3207 +font-weight: bold;
3208 +cursor: pointer;
3209 +border-radius: 2px;
3210 +padding: 4px 8px;
3211 +margin: auto 5px;
3212 +}
3213 +
3214 +.pagelayer-post-settings-apply[disabled]{
3215 +opacity:0.5;
3216 +}
3217 +
3218 +.pagelayer-post-settings-acc{
3219 +margin-top:7px;
3220 +}
3221 +
3222 +.pagelayer-post-settings-fields{
3223 +padding:10px;
3224 +display:none;
3225 +}
3226 +
3227 +.pagelayer-post-settings-lable{
3228 +border:1px solid #d3d3d3;
3229 +padding:10px;
3230 +cursor:pointer;
3231 +}
3232 +
3233 +.pagelayer-toggle{
3234 +float:right;
3235 +}
3236 +
3237 +.pagelayer-toggle:not(.pagelayer-open):before{
3238 +content: "\f0da";
3239 +}
3240 +
3241 +.pagelayer-toggle.pagelayer-open:before{
3242 +content: "\f0d7";
3243 +}
3244 +
3245 +.pagelayer-post-settings-fields label{
3246 +display:block;
3247 +margin:7px 0;
3248 +}
3249 +
3250 +/* Pagelayer settings end*/
3251 +
3252 +/*Tooltip TLITE CSS : https://github.com/chrisdavies/tlite */
3253 +.pagelayer-tlite {
3254 +background: #111;
3255 +color: white;
3256 +font-family: sans-serif;
3257 +font-size: 0.8rem;
3258 +font-weight: normal;
3259 +text-decoration: none;
3260 +text-align: left;
3261 +padding: 0.6em 0.75rem;
3262 +border-radius: 4px;
3263 +position: absolute;
3264 +opacity: 0;
3265 +visibility: hidden;
3266 +transition: opacity 0.4s;
3267 +white-space: nowrap;
3268 +box-shadow: 0 0.5rem 1rem -0.5rem black;
3269 +z-index: 1000;
3270 +-webkit-backface-visibility: hidden;
3271 +}
3272 +
3273 +.pagelayer-tlite-table td,
3274 +.pagelayer-tlite-table th {
3275 +position: relative;
3276 +}
3277 +
3278 +.pagelayer-tlite-visible {
3279 +visibility: visible;
3280 +opacity: 0.9;
3281 +}
3282 +
3283 +.pagelayer-tlite::before {
3284 +content: ' ';
3285 +display: block;
3286 +background: inherit;
3287 +width: 10px;
3288 +height: 10px;
3289 +position: absolute;
3290 +transform: rotate(45deg);
3291 +}
3292 +
3293 +.pagelayer-tlite-n::before {
3294 +top: -3px;
3295 +left: 50%;
3296 +margin-left: -5px;
3297 +}
3298 +
3299 +.pagelayer-tlite-nw::before {
3300 +top: -3px;
3301 +left: 10px;
3302 +}
3303 +
3304 +.pagelayer-tlite-ne::before {
3305 +top: -3px;
3306 +right: 10px;
3307 +}
3308 +
3309 +.pagelayer-tlite-s::before {
3310 +bottom: -3px;
3311 +left: 50%;
3312 +margin-left: -5px;
3313 +}
3314 +
3315 +.pagelayer-tlite-se::before {
3316 +bottom: -3px;
3317 +right: 10px;
3318 +}
3319 +
3320 +.pagelayer-tlite-sw::before {
3321 +bottom: -3px;
3322 +left: 10px;
3323 +}
3324 +
3325 +.pagelayer-tlite-w::before {
3326 +left: -3px;
3327 +top: 50%;
3328 +margin-top: -5px;
3329 +}
3330 +
3331 +.pagelayer-tlite-e::before {
3332 +right: -3px;
3333 +top: 50%;
3334 +margin-top: -5px;
3335 +}
3336 +/*Tooltip end*/
3337 +
3338 +/* Add section modal*/
3339 +.pagelayer-add-section-modal-container{
3340 +position: fixed;
3341 +top: 0;
3342 +left: 0;
3343 +width: 100%;
3344 +height: 100%;
3345 +background-color: #00000069;
3346 +z-index:9999;
3347 +display:none;
3348 +font-family: Roboto, 'Open Sans', Arial, Helvetica, sans-serif;
3349 +}
3350 +
3351 +.pagelayer-add-section-modal-close{
3352 +font-size: 30px;
3353 +float: right;
3354 +cursor:pointer;
3355 +line-height: 100%;
3356 +}
3357 +
3358 +.pagelayer-add-section-modal-holder{
3359 +position: relative;
3360 +font-size: 18px;
3361 +height: 100vh;
3362 +}
3363 +
3364 +.pagelayer-add-section-modal{
3365 +background-color: #ffffff;
3366 +width: 100%;
3367 +margin: auto;
3368 +position: relative;
3369 +}
3370 +
3371 +/* Add modal for editor*/
3372 +.pagelayer-editor-modal{
3373 +position:fixed;
3374 +display:none;
3375 +justify-content:center;
3376 +align-items:center;
3377 +top:0;
3378 +left:0;
3379 +width:100%;
3380 +height:100%;
3381 +z-index:9999;
3382 +background-color:rgba(0, 0, 0, 0.3);
3383 +}
3384 +
3385 +.pagelayer-editor-modal *{
3386 +box-sizing:border-box;
3387 +padding:0;
3388 +margin:0;
3389 +}
3390 +
3391 +.pagelayer-editor-modal-wrap{
3392 +background-color: #FFF;
3393 +border-radius:2px;
3394 +width: 40%;
3395 +box-shadow: 0 10px 10px rgb(0 0 0 / 25%);
3396 +}
3397 +
3398 +.pagelayer-editor-modal-header{
3399 +display:flex;
3400 +justify-content:space-between;
3401 +align-items: center;
3402 +padding: 20px 30px;
3403 +border-bottom: 1px solid #ccc;
3404 +}
3405 +
3406 +.pagelayer-editor-modal-header i{
3407 +font-size: 1.3em;
3408 +cursor:pointer;
3409 +}
3410 +
3411 +.pagelayer-editor-modal-header i:hover{
3412 +color: #3e8ef7;
3413 +}
3414 +
3415 +.pagelayer-editor-modal-body{
3416 +padding: 0 25px;
3417 +}
3418 +
3419 +.pagelayer-edt-modal-block{
3420 +margin: 10px;
3421 +}
3422 +
3423 +.pagelayer-edt-modal-block ul{
3424 +padding:0;
3425 +margin-bottom:10px;
3426 +}
3427 +
3428 +.pagelayer-edt-modal-block li{
3429 +list-style-type:none;
3430 +display:flex;
3431 +flex-direction:row;
3432 +justify-content:space-between;
3433 +font-size:1.1em;
3434 +padding: 10px 0;
3435 +border-bottom: 1px solid #ccc;
3436 +color: #282828;
3437 +}
3438 +
3439 +.pagelayer-keyboard-shortcut-keys{
3440 +font-weight: bold;
3441 +}
3442 +
3443 +.pagelayer-keyboard-shortcut-keys > span{
3444 +margin: 0 4px;
3445 +background-color: #e8e8e8;
3446 +padding: 5px 7px;
3447 +border-radius: 3px;
3448 +}
3449 +
3450 +/* width */
3451 +.pagelayer-add-section-modal::-webkit-scrollbar {
3452 +width: 7px;
3453 +}
3454 +
3455 +/* Track */
3456 +.pagelayer-add-section-modal::-webkit-scrollbar-track {
3457 +background: #f1f1f1;
3458 +border-radius:5px;
3459 +}
3460 +
3461 +/* Handle */
3462 +.pagelayer-add-section-modal::-webkit-scrollbar-thumb {
3463 +background: #c1c1c1;
3464 +border-radius:5px;
3465 +}
3466 +
3467 +/* Handle on hover */
3468 +.pagelayer-add-section-modal::-webkit-scrollbar-thumb:hover {
3469 + background: #555;
3470 +}
3471 +
3472 +.pagelayer-add-section-modal-header{
3473 +padding: 15px;
3474 +position: sticky;
3475 +background: #5e5e5e;
3476 +top: 0;
3477 +z-index: 999;
3478 +color: #fff;
3479 +}
3480 +
3481 +.pagelayer-add-section-modal-header>div{
3482 +display: inline-block;
3483 +}
3484 +
3485 +.pagelayer-section-type-div{
3486 +width: 85%;
3487 +text-align: center;
3488 +}
3489 +
3490 +.pagelayer-add-section-modal-row{
3491 +display: flex;
3492 +flex-direction: row;
3493 +}
3494 +
3495 +.pagelayer-add-section-modal-left{
3496 +min-width: 250px;
3497 +width: 250px;
3498 +background-color: #ccc;
3499 +}
3500 +
3501 +.pagelayer-section-search-div{
3502 +text-align:center;
3503 +margin: 20px;
3504 +position:relative;
3505 +}
3506 +
3507 +.pagelayer-section-search{
3508 +width:100%;
3509 +line-height:120%;
3510 +padding: 5px 20px 5px 30px;
3511 +border-radius: 5px;
3512 +border: none;
3513 +font-size: 14px;
3514 +height:30px;
3515 +}
3516 +
3517 +.pagelayer-section-search-div .pli{
3518 +position: absolute;
3519 +top: 0;
3520 +height: 30px;
3521 +padding: 0 7px;
3522 +color: #666;
3523 +line-height: 30px;
3524 +}
3525 +
3526 +.pagelayer-section-search-div .pagelayer-sf-empty{
3527 +right:0;
3528 +left:auto;
3529 +font-weight:bolder;
3530 +cursor:pointer;
3531 +}
3532 +
3533 +.pagelayer-section-tags-holder{
3534 +padding: 0px 10px;
3535 +height: calc(100vh - 150px);
3536 +overflow: auto;
3537 +}
3538 +
3539 +.pagelayer-section-tags{
3540 +background: #1A9CDB;
3541 +cursor: pointer;
3542 +padding: 5px;
3543 +color: #fff;
3544 +font-size: 13px;
3545 +display: inline-block;
3546 +margin: 3px;
3547 +}
3548 +
3549 +.pagelayer-section-tags[on="1"]{
3550 +background: #326fa6;
3551 +}
3552 +
3553 +.pagelayer-section-modal-body-holder{
3554 +overflow:auto;
3555 +height: calc(100vh - 50px);
3556 +width: calc(100vw - 250px);
3557 +background: #efefef;
3558 +}
3559 +
3560 +.pagelayer-add-section-modal-body{
3561 +margin: 0;
3562 +background: #efefef;
3563 +height: 100%;
3564 +display: flex;
3565 +flex-wrap: wrap;
3566 +}
3567 +
3568 +.pagelayer-add-section-modal-footer{
3569 +padding: 15px;
3570 +border-top: 1px solid #e5e5e5;
3571 +}
3572 +
3573 +.pagelayer-section-is-visible{
3574 +height: 50px;
3575 +flex-basis: 100%;
3576 +}
3577 +
3578 +.pagelayer-section-holder{
3579 +vertical-align: top;
3580 +background: #efefef;
3581 +flex: 1;
3582 +}
3583 +
3584 +.pagelayer-section-item{
3585 +min-height: 50px;
3586 +margin:15px;
3587 +z-index: 9;
3588 +transition-duration: 0.2s;
3589 +background-color:#fff;
3590 +border: 3px solid #fff;
3591 +border-radius: 4px;
3592 +cursor: pointer;
3593 +position: relative;
3594 +}
3595 +
3596 +.pagelayer-section-item:hover{
3597 +z-index: 99;
3598 +transform: scale(1.01);
3599 +border: 3px solid #1A9CDB;
3600 +}
3601 +
3602 +.pagelayer-section-item img{
3603 +width:100%;
3604 +}
3605 +
3606 +.pagelayer-section-item[pagelayer-section-type=page]{
3607 +max-height: 350px;
3608 +overflow: auto;
3609 +}
3610 +
3611 +.pagelayer-section-pro-req{
3612 +position: absolute;
3613 +top: 15px;
3614 +right: 0px;
3615 +font-size: 14px;
3616 +padding: 10px;
3617 +background-color: #e63131;
3618 +color: #fff;
3619 +margin-left: 4px;
3620 +border-radius: 2px;
3621 +cursor: pointer;
3622 +}
3623 +
3624 +.pagelayer-section-pro-txt{
3625 +position: absolute;
3626 +top: 45%;
3627 +left: 0px;
3628 +font-size: 14px;
3629 +padding: 10px;
3630 +color: #fff;
3631 +line-height: 120%;
3632 +background: #111;
3633 +opacity: 0;
3634 +transition: all 0.3s;
3635 +}
3636 +
3637 +.pagelayer-section-item:hover > .pagelayer-section-pro-txt{
3638 +opacity: 0.8;
3639 +}
3640 +
3641 +.pagelayer-section-pro-txt a{
3642 +color: #1A9CDB;
3643 +}
3644 +
3645 +.pagelayer-add-section-modal-overlay{
3646 +position: absolute;
3647 +top:0;
3648 +bottom:0;
3649 +height:100%;
3650 +width:100%;
3651 +z-index:999999;
3652 +align-items: center;
3653 +justify-content: center;
3654 +text-align:center;
3655 +display:flex;
3656 +background-color:#f7f7f7fa;
3657 +}
3658 +
3659 +.pagelayer-section-wait .fa-spin{
3660 +font-size:50px;
3661 +}
3662 +
3663 +/* Add section modal end */
3664 +
3665 +/* Navigator start */
3666 +.pagelayer-leftbar-prop-body{
3667 +margin:10px 0px;
3668 +background-color:#ffffff;
3669 +border: 1px solid #d3d3d3;
3670 +font-size:12px;
3671 +}
3672 +
3673 +.pagelayer-ele-name{
3674 +padding: 10px;
3675 +border-bottom:1px solid #d3d3d3;
3676 +color: #000000;
3677 +}
3678 +
3679 +.pagelayer-ele-name:hover{
3680 +background-color:#f5f5f5;
3681 +cursor:pointer;
3682 +}
3683 +
3684 +.pagelayer-navigetor-ele > .pagelayer-navigetor-ele{
3685 +display:none;
3686 +}
3687 +
3688 +.pagelayer-navigator-open > .pagelayer-navigetor-ele{
3689 +display:block;
3690 +}
3691 +
3692 +.pagelayer-ele-name .fa:before{
3693 +margin-right:8px;
3694 +font-family:pagelayer,fontawesome;
3695 +font-size:14px !important;
3696 +}
3697 +
3698 +.pagelayer-navi-active{
3699 +background-color: #d5e4f7
3700 +}
3701 +
3702 +.pagelayer-navigator-options{
3703 +float: right;
3704 +}
3705 +
3706 +.pagelayer-navigator-options .pli{
3707 +padding: 0 4px;
3708 +}
3709 +/* Navigator end */
3710 +
3711 +/* Left bar move start */
3712 +.pagelayer-leftbar-moving{
3713 +position:absolute;
3714 +height:80vh;
3715 +z-index:999;
3716 +box-shadow:0 0 5px #e1e1e1;
3717 +}
3718 +
3719 +.pagelayer-overflow-hidden{
3720 +overflow:hidden !important;
3721 +}
3722 +
3723 +.pagelayer-leftbar-move{
3724 +width:30px;
3725 +height:100%;
3726 +background-color:#00BCD4;
3727 +position:absolute;
3728 +opacity: 0.33;
3729 +}
3730 +
3731 +.pagelayer-moveto-left{
3732 +left:0;
3733 +right:auto;
3734 +}
3735 +
3736 +.pagelayer-moveto-right{
3737 +right:0;
3738 +left:auto;
3739 +}
3740 +
3741 +.pagelayer-close-bar{
3742 +background-color: #000;
3743 +color: #ffffff;
3744 +height:15px;
3745 +}
3746 +
3747 +.pagelayer-leftbar-table:not(.pagelayer-leftbar-moving) .pagelayer-close-bar{
3748 +display:none;
3749 +}
3750 +
3751 +.pagelayer-leftbar-minimize{
3752 +height:auto;
3753 +}
3754 +
3755 +.pagelayer-close-bar-icons{
3756 +float:right;
3757 +}
3758 +
3759 +.pagelayer-close-bar-icons i{
3760 +padding:5px 10px;
3761 +font-size: 10px;
3762 +}
3763 +
3764 +.pagelayer-close-bar-icons i:hover{
3765 +background-color: #E3E3E3;
3766 +color: #000;
3767 +}
3768 +
3769 +.pagelayer-leftbar-moving.pagelayer-leftbar-minimize .pagelayer-leftbar-holder,
3770 +.pagelayer-leftbar-moving.pagelayer-leftbar-minimize .pagelayer-bottombar-row{
3771 +display:none;
3772 +}
3773 +
3774 +/* Left bar move end*/
3775 +
3776 +/* Pre-Loading animaiton classes */
3777 +#pagelayer-loader-wrapper {
3778 +background-color:white;
3779 +-webkit-box-align: center;
3780 +-ms-flex-align: center;
3781 +align-items: center;
3782 +display: -webkit-box;
3783 +display: -ms-flexbox;
3784 +display: flex;
3785 +height: 100%;
3786 +-webkit-box-pack: center;
3787 +-ms-flex-pack: center;
3788 +justify-content: center;
3789 +position: fixed;
3790 +left: 0;
3791 +top: 0;
3792 +width: 100%;
3793 +z-index: 9000;
3794 +}
3795 +
3796 +
3797 +#pagelayer-loader-wrapper .pagelayer-animation-section {
3798 +position: absolute;
3799 +z-index: 1000;
3800 +}
3801 +
3802 +.pagelayer-loader {
3803 +position:relative;
3804 +width: 150px;
3805 +height: 150px;
3806 +margin: 0 auto 50px auto;
3807 +z-index: 1001;
3808 +}
3809 +
3810 +.pagelayer-loader:before {
3811 +content: "";
3812 +position: absolute;
3813 +top: 0;
3814 +left: 0;
3815 +right: 0;
3816 +bottom: 0;
3817 +border-radius: 50%;
3818 +border: 3px solid transparent;
3819 +border-top-color: #3498db;
3820 +-webkit-animation: spin 3s linear infinite;
3821 +animation: spin 3s linear infinite;
3822 +}
3823 +
3824 +.pagelayer-loader:after {
3825 +content: "";
3826 +position: absolute;
3827 +top: 10px;
3828 +left: 10px;
3829 +right: 10px;
3830 +bottom: 10px;
3831 +border-radius: 50%;
3832 +border: 3px solid transparent;
3833 +border-top-color: #e74c3c;
3834 +-webkit-animation: spin 2s linear infinite;
3835 +animation: spin 2s linear infinite;
3836 +}
3837 +
3838 +.pagelayer-loader .pagelayer-percent-parent{
3839 +width:100%;
3840 +height:100%;
3841 +margin:auto;
3842 +display: flex;
3843 +align-items: center;
3844 +justify-content: center;
3845 +text-align:center;
3846 +}
3847 +
3848 +.pagelayer-loader .pagelayer-percent-parent:before{
3849 +content: "";
3850 +position: absolute;
3851 +top: 20px;
3852 +left: 20px;
3853 +right: 20px;
3854 +bottom: 20px;
3855 +border-radius: 50%;
3856 +border: 3px solid transparent;
3857 +border-top-color: #f9c922;
3858 +-webkit-animation: spin 1.5s linear infinite;
3859 +animation: spin 1.5s linear infinite;
3860 +}
3861 +
3862 +.pagelayer-loader .pagelayer-percent-parent .pagelayer-percent{
3863 +font-size:30px;
3864 +}
3865 +
3866 +@-webkit-keyframes spin {
3867 +0%{
3868 + -webkit-transform: rotate(0deg);
3869 + -ms-transform: rotate(0deg);
3870 + transform: rotate(0deg);
3871 +}
3872 +100%{
3873 + -webkit-transform: rotate(360deg);
3874 + -ms-transform: rotate(360deg);
3875 + transform: rotate(360deg);
3876 +}
3877 +}
3878 +
3879 +@keyframes spin {
3880 +0% {
3881 + -webkit-transform: rotate(0deg);
3882 + -ms-transform: rotate(0deg);
3883 + transform: rotate(0deg);
3884 +}
3885 +100% {
3886 + -webkit-transform: rotate(360deg);
3887 + -ms-transform: rotate(360deg);
3888 + transform: rotate(360deg);
3889 +}
3890 +}
3891 +
3892 +#pagelayer-loader-wrapper .pagelayer-animation-section .pagelayer-txt-loading {
3893 +font: bold 7em Poppins,sans-serif;
3894 +text-align: center;
3895 +-webkit-user-select: none;
3896 +-moz-user-select: none;
3897 +-ms-user-select: none;
3898 +user-select: none;
3899 +}
3900 +
3901 +.pagelayer-txt-loading .letters-loading {
3902 +color: rgba(0,0,0,0.2);
3903 +position: relative;
3904 +}
3905 +
3906 +.pagelayer-txt-loading .letters-loading:before {
3907 +-webkit-animation: letters-loading 4s infinite;
3908 +animation: letters-loading 4s infinite;
3909 +color: #000;
3910 +content: attr(data-text-preloader);
3911 +left: 0;
3912 +opacity: 0;
3913 +font-family: "Poppins",sans-serif;
3914 +position: absolute;
3915 +-webkit-transform: rotateY(-90deg);
3916 +transform: rotateY(-90deg);
3917 +}
3918 +
3919 +.pagelayer-txt-loading .letters-loading:nth-child(2):before {
3920 +-webkit-animation-delay: .2s;
3921 +animation-delay: .2s
3922 +}
3923 +.pagelayer-txt-loading .letters-loading:nth-child(3):before {
3924 +-webkit-animation-delay: .4s;
3925 +animation-delay: .4s
3926 +}
3927 +.pagelayer-txt-loading .letters-loading:nth-child(4):before {
3928 +-webkit-animation-delay: .6s;
3929 +animation-delay: .6s
3930 +}
3931 +.pagelayer-txt-loading .letters-loading:nth-child(5):before {
3932 +-webkit-animation-delay: .8s;
3933 +animation-delay: .8s
3934 +}
3935 +.pagelayer-txt-loading .letters-loading:nth-child(6):before {
3936 +-webkit-animation-delay: 1s;
3937 +animation-delay: 1s
3938 +}
3939 +.pagelayer-txt-loading .letters-loading:nth-child(7):before {
3940 +-webkit-animation-delay: 1.2s;
3941 +animation-delay: 1.2s
3942 +}
3943 +.pagelayer-txt-loading .letters-loading:nth-child(8):before {
3944 +-webkit-animation-delay: 1.4s;
3945 +animation-delay: 1.4s
3946 +}
3947 +.pagelayer-txt-loading .letters-loading:nth-child(9):before {
3948 +-webkit-animation-delay: 1.6s;
3949 +animation-delay: 1.6s
3950 +}
3951 +.pagelayer-txt-loading .letters-loading:nth-child(10):before {
3952 +-webkit-animation-delay: 1.8s;
3953 +animation-delay: 1.8s
3954 +}
3955 +.pagelayer-txt-loading .letters-loading:nth-child(11):before {
3956 +-webkit-animation-delay: 2s;
3957 +animation-delay: 2s
3958 +}
3959 +
3960 +.pagelayer-loaded .pagelayer-animation-section .pagelayer-loader,
3961 +.pagelayer-loaded .pagelayer-animation-section .pagelayer-txt-loading {
3962 +opacity: 0;
3963 +-webkit-transition: all 0.3s ease-out;
3964 +transition: all 0.3s ease-out;
3965 +}
3966 +
3967 +@-webkit-keyframes letters-loading {
3968 +0%, 75%, 100% {
3969 +opacity: 0;
3970 +-webkit-transform: rotateY(-90deg);
3971 +transform: rotateY(-90deg)
3972 +}
3973 +25%, 50% {
3974 +opacity: 1;
3975 +-webkit-transform: rotateY(0deg);
3976 +transform: rotateY(0deg)
3977 +}
3978 +}
3979 +@keyframes letters-loading {
3980 +0%, 75%, 100% {
3981 +opacity: 0;
3982 +-webkit-transform: rotateY(-90deg);
3983 +transform: rotateY(-90deg)
3984 +}
3985 +25%, 50% {
3986 +opacity: 1;
3987 +-webkit-transform: rotateY(0deg);
3988 +transform: rotateY(0deg)
3989 +}
3990 +}
3991 +
3992 +@media screen and (max-width: 767px) {
3993 +#pagelayer-loader-wrapper .pagelayer-animation-section .pagelayer-loader {
3994 +height: 8em;
3995 +width: 8em
3996 +}
3997 +#pagelayer-loader-wrapper .pagelayer-animation-section .pagelayer-txt-loading {
3998 +font: bold 3.5em Poppins, sans-serif
3999 +}
4000 +.pagelayer-loader .pagelayer-percent-parent .pagelayer-percent{
4001 +font-size:20px;
4002 +}
4003 +}
4004 +@media screen and (max-width: 500px) {
4005 +#pagelayer-loader-wrapper .pagelayer-animation-section .pagelayer-loader {
4006 +height: 7em;
4007 +width: 7em
4008 +}
4009 +#pagelayer-loader-wrapper .pagelayer-animation-section .pagelayer-txt-loading {
4010 +font: bold 2em Poppins, sans-serif
4011 +}
4012 +.pagelayer-loader .pagelayer-percent-parent .pagelayer-percent{
4013 +font-size:15px;
4014 +}
4015 +}
4016 +
4017 +/* Pre-Loading animaiton classes end*/
4018 +
4019 +/* Update Loading animation class start */
4020 +
4021 +.pagelayer-update-button{
4022 +width:58px;
4023 +height:24px;
4024 +}
4025 +
4026 +.pagelayer-update-loader{
4027 +display:none;
4028 +padding:2px;
4029 +white-space: nowrap;
4030 +}
4031 +
4032 +.pagelayer-update-loader span{
4033 +width:8px;
4034 +height:8px;
4035 +margin: 0 2px;
4036 +background-color: #ededede0;
4037 +border-radius: 50%;
4038 +display:inline-block;
4039 +animation: dots 0.9s ease-in-out infinite;
4040 +}
4041 +
4042 +.pagelayer-update-loader span:nth-child(2){
4043 +animation-delay: 0.3s;
4044 +}
4045 +
4046 +.pagelayer-update-loader span:nth-child(3){
4047 +animation-delay: 0.6s;
4048 +}
4049 +
4050 +@keyframes dots{
4051 +50%{
4052 +opacity:0;
4053 +}
4054 +}
4055 +
4056 +/* Update Loading animation class end */
4057 +
4058 +/* Error box css starts */
4059 +
4060 +.pagelayer-errorBox{
4061 +position:absolute;
4062 +top:10px;
4063 +left: 0;
4064 +right: 0;
4065 +margin-left: auto;
4066 +margin-right: auto;
4067 +width:70%;
4068 +height:234;
4069 +border-radius:20px;
4070 +background-color:#fffafa;
4071 +box-shadow: 1px 1px 8px #ffc7c7;
4072 +z-index:9999;
4073 +display:none;
4074 +}
4075 +
4076 +.pagelayer-errorBox-close{
4077 +position:absolute;
4078 +right:10;
4079 +top:10;
4080 +font-size:20px;
4081 +padding:5px;
4082 +color:lightgrey;
4083 +cursor:pointer;
4084 +}
4085 +
4086 +.pagelayer-errorBox-main{
4087 +height:180px;
4088 +margin:2px 10px;
4089 +}
4090 +
4091 +.pagelayer-errorBox-main h2{
4092 +color:red;
4093 +font-size:20px;
4094 +margin:0;
4095 +}
4096 +
4097 +.pagelayer-errorBox-main h2 i{
4098 +font-size:30px;
4099 +margin:10px;
4100 +vertical-align:middle;
4101 +}
4102 +
4103 +.pagelayer-errorBox-content{
4104 +margin-left:90px;
4105 +font-size:13px;
4106 +overflow:auto;
4107 +height:130px;
4108 +border-bottom:1px solid lightgrey;
4109 +}
4110 +
4111 +.pagelayer-errorBox-resolve{
4112 +text-align:right;
4113 +padding:10px;
4114 +}
4115 +.pagelayer-errorBox-resolve p{
4116 +display:inline;
4117 +margin:10px;
4118 +}
4119 +
4120 +.pagelayer-errorBox-resolve .pagelayer-errorBox-support, .pagelayer-errorBox-resolve .pagelayer-errorBox-copy{
4121 +cursor:pointer;
4122 +padding: 5px;
4123 +border-radius: 5px;
4124 +color: white;
4125 +}
4126 +
4127 +.pagelayer-errorBox-resolve .pagelayer-errorBox-copy{
4128 +background-color: #616cf3;
4129 +border: 1px solid blue;
4130 +}
4131 +
4132 +.pagelayer-errorBox-resolve .pagelayer-errorBox-support{
4133 +background-color: #56b45d;
4134 +border: 1px solid green;
4135 +}
4136 +
4137 +/* Error box css ends */
4138 +
4139 +/* Property modal start*/
4140 +.pagelayer-elp-modal-wrapper{
4141 +position: fixed;
4142 +top: 0;
4143 +bottom: 0;
4144 +left: 0;
4145 +right: 0;
4146 +overflow-y: auto;
4147 +background: #0000009c;
4148 +z-index: 999;
4149 +color: #fff;
4150 +display:none;
4151 +}
4152 +
4153 +.pagelayer-elp-modal-wrap{
4154 +width: 500px;
4155 +background-color: #fff;
4156 +position: relative;
4157 +margin: 20px auto;
4158 +border-radius: 5px;
4159 +box-shadow: 0px 0px 7px 0px #fff;
4160 +}
4161 +
4162 +.pagelayer-elp-modal-close{
4163 +float:right;
4164 +padding: 5px;
4165 +cursor:pointer
4166 +}
4167 +
4168 +.pagelayer-elp-modal-header{
4169 +padding:15px 20px 10px;
4170 +margin-top: 10px;
4171 +font-size: 13px;
4172 +font-weight: bold;
4173 +color: #555;
4174 +}
4175 +
4176 +.pagelayer-elp-modal-holder{
4177 +padding: 5px 20px 10px;
4178 +}
4179 +
4180 +/* Property modal end*/
4181 +/* Property link start*/
4182 +
4183 +.pagelayer-elp-link-list{
4184 +max-height:250px;
4185 +overflow:auto;
4186 +width: 99%;
4187 +top: 35px;
4188 +right: 4px;
4189 +}
4190 +
4191 +.pagelayer-elp-link-list .pagelayer-elp-link-search{
4192 +width:100%;
4193 +}
4194 +
4195 +.pagelayer-elp-link-item{
4196 +display: flex;
4197 +font-size: 13px;
4198 +padding: 7px 2px;
4199 +margin: 2px 0;
4200 +cursor: pointer;
4201 +align-items:center;
4202 +}
4203 +
4204 +.pagelayer-elp-link-item:hover{
4205 +box-shadow: inset 0 0 0 1px #555d66, inset 0 0 0 2px #fff;
4206 +border-radius: 4px;
4207 +}
4208 +
4209 +.pagelayer-elp-link-item span{
4210 +text-overflow: ellipsis;
4211 +display: inline-block;
4212 +overflow: hidden;
4213 +white-space: nowrap;
4214 +width: 100%;
4215 +padding:3px;
4216 +}
4217 +
4218 +.pagelayer-elp-link-item-title{
4219 +font-weight:bold;
4220 +}
4221 +
4222 +.pagelayer-elp-link-item-perma{
4223 +color:#999;
4224 +}
4225 +
4226 +.pagelayer-elp-link-title{
4227 +width: 73%;
4228 +margin-right:2%;
4229 +}
4230 +
4231 +.pagelayer-elp-link-info{
4232 +width: 20%;
4233 +background-color: #ededed;
4234 +padding: 2px;
4235 +font-size:11px;
4236 +}
4237 +
4238 +.pagelayer-elp-link-id{
4239 +background-color: #ededed;
4240 +padding: 2px 6px;
4241 +font-size:12px;
4242 +margin-left:5px;
4243 +}
4244 +
4245 +.pagelayer-elp-link-info span{
4246 +padding: 4px;
4247 +}
4248 +
4249 +.pagelayer-elp-link-div .pagelayer-elp-link-addons{
4250 +margin-right: 30px;
4251 +display: none;
4252 +}
4253 +
4254 +.pagelayer-elp-link-div .pagelayer-elp-link-cb-div{
4255 +display: flex;
4256 +justify-content: space-between;
4257 +align-items: center;
4258 +padding-top: 5px;
4259 +}
4260 +
4261 +.pagelayer-elp-link-div .pagelayer-elp-link-cb-div:first-child{
4262 +margin-top: 10px;
4263 +}
4264 +
4265 +.pagelayer-elp-link-div .pagelayer-elp-link-ca{
4266 +margin: 5px 0px;
4267 +}
4268 +
4269 +.pagelayer-elp-link-ca input{
4270 +width: 100%;
4271 +}
4272 +
4273 +/* Property link end*/
4274 +/* Editor notice start*/
4275 +.pagelayer-editor-notice{
4276 +position: fixed;
4277 +right: 10px;
4278 +top: 10px;
4279 +padding-right: 16px;
4280 +transition: all 5s ease-out;
4281 +pointer-events: none;
4282 +}
4283 +
4284 +.sitepad-body .pagelayer-editor-notice{
4285 +top:50px;
4286 +}
4287 +
4288 +.pagelayer-editor-msg{
4289 +position:relative;
4290 +font-size: 13px;
4291 +background-color: rgba(0,0,0,.8);
4292 +border-radius: 4px;
4293 +box-shadow: 0 2px 4px rgba(0,0,0,.3);
4294 +color: #fff;
4295 +padding: 16px 30px 16px 15px;
4296 +margin-bottom:7px;
4297 +transition: opacity 800ms ease-out;
4298 +pointer-events: all;
4299 +width:fit-content;
4300 +margin-left:auto;
4301 +}
4302 +
4303 +.pagelayer-editor-msg.pagelayer-editor-msg-state-success{
4304 +background-color: #449d44;
4305 +}
4306 +
4307 +.pagelayer-editor-msg.pagelayer-editor-msg-state-error{
4308 +background-color: #ef4d4d;
4309 +}
4310 +
4311 +.pagelayer-editor-msg.pagelayer-editor-msg-state-warning{
4312 +background-color: #cd8500;
4313 +}
4314 +
4315 +.pagelayer-notice-x{
4316 +position: absolute;
4317 +top: 50%;
4318 +right: 10px;
4319 +transform: translateY(-50%);
4320 +cursor:pointer;
4321 +}
4322 +
4323 +/* Editor notice end*/
4324 +/* Pagelayer post setting modal start*/
4325 +.pagelayer-props-modal{
4326 +position: fixed;
4327 +left: 0;
4328 +top: 0;
4329 +right: 0;
4330 +bottom: 0;
4331 +z-index: 1100;
4332 +background-color:#2d2d2d8c;
4333 +display:none;
4334 +}
4335 +
4336 +.pagelayer-props-holder{
4337 +position:relative;
4338 +height: 100%;
4339 +overflow: auto;
4340 +display: flex;
4341 +justify-content: center;
4342 +align-items: center;
4343 +width: 100%;
4344 +margin:auto;
4345 +max-height: 967px;
4346 +}
4347 +
4348 +.pagelayer-props-wrap{
4349 +position:relative;
4350 +height: 90%;
4351 +width: 90%;
4352 +margin:auto;
4353 +overflow: auto;
4354 +display: flex;
4355 +justify-content: center;
4356 +align-items: center;
4357 +border-radius: 10px
4358 +}
4359 +
4360 +.pagelayer-props-loading-screen{
4361 +position:absolute;
4362 +border: 8px solid transparent;
4363 +border-radius: 50%;
4364 +border-top: 8px solid #ebebeb;
4365 +width: 80px;
4366 +height: 80px;
4367 +-webkit-animation: propsLoading 0.5s ease-in-out infinite; /* Safari */
4368 +animation: propsLoading 0.5s ease-in-out infinite;
4369 +}
4370 +
4371 +/* Safari */
4372 +@-webkit-keyframes propsLoading {
4373 +0% { -webkit-transform: rotate(0deg); }
4374 +100% { -webkit-transform: rotate(360deg); }
4375 +}
4376 +
4377 +@keyframes propsLoading {
4378 +0% { transform: rotate(0deg); }
4379 +100% { transform: rotate(360deg); }
4380 +}
4381 +
4382 +.pagelayer-props-wrap .pagelayer-meta-iframe{
4383 +position: relative;
4384 +width: 100%;
4385 +height: 100%;
4386 +border: 0px;
4387 +}
4388 +
4389 +.pagelayer-props-modal-close{
4390 +position: absolute;
4391 +top: 20px;
4392 +right: 25px;
4393 +z-index: 999;
4394 +cursor:pointer;
4395 +visibility:hidden;
4396 +}
4397 +
4398 +@keyframes highlight {
4399 +0% {
4400 + background: #dfdfdf;
4401 +}
4402 +100% {
4403 + background: #fff;
4404 +}
4405 +}
4406 +
4407 +.highlight {
4408 + animation: highlight 1s;
4409 + animation-iteration-count: 5;
4410 +}
4411 +/* Pagelayer post setting modal end */
4412 +
4413 +/* Pagelayer post props(category) start */
4414 +.pagelayer-post-cat-div{
4415 +max-height:300px;
4416 +overflow:auto;
4417 +}
4418 +
4419 +.pagelayer-post-category, .pagelayer-post-category ul{
4420 +list-style:none;
4421 +padding:0;
4422 +margin:0;
4423 +margin-left:16px;
4424 +}
4425 +
4426 +.pagelayer-post-category li{
4427 +margin:8px 0px;
4428 +}
4429 +
4430 +.pagelayer-post-category label, .pagelayer-elp-postCategory *{
4431 +font-size:small;
4432 +}
4433 +
4434 +.pagelayer-post-category input[type=checkbox]{
4435 +margin-right:5px;
4436 +background-color:#007cba;
4437 +width:16px;
4438 +height:16px;
4439 +}
4440 +
4441 +.pagelayer-add-cat-btn{
4442 +color:#0073aa;
4443 +cursor:pointer;
4444 +line-height:3;
4445 +}
4446 +
4447 +.pagelayer-add-cat-btn:hover {
4448 +color: #2563eb;
4449 +}
4450 +
4451 +.pagelayer-elp-postCategory input, .pagelayer-parent-category > select{
4452 +margin-top:5px;
4453 +margin-bottom:12px;
4454 +}
4455 +
4456 +.pagelayer-parent-category{
4457 +margin-top:5px;
4458 +}
4459 +
4460 +.pagelayer-parent-category > select{
4461 +height:32px;
4462 +outline:none;
4463 +}
4464 +
4465 +.pagelayer-cat-submit{
4466 +color: #007cba;
4467 +border: 1px solid #007cba;
4468 +padding: 10px;
4469 +background-color: white;
4470 +cursor: pointer;
4471 +}
4472 +
4473 +.pagelayer-cat-submit:hover{
4474 +color: #006ba1;
4475 +border: 1px solid #006ba1;
4476 +}
4477 +
4478 +.pagelayer-dark .pagelayer-cat-submit,
4479 +.pagelayer-elp-postCategory input{
4480 +background-color:transparent;
4481 +}
4482 +
4483 +.pagelayer-dark .pagelayer-cat-submit:hover{
4484 +color:white;
4485 +background-color:#007cba;
4486 +}
4487 +
4488 +/* Pagelayer post props(category) end */
4489 +/* Pagelayer post props(tags) start */
4490 +
4491 +.pagelayer-elp-postTags{
4492 +border: 1px solid #757575;
4493 +border-radius: 2px;
4494 +display: flex;
4495 +flex-wrap: wrap;
4496 +padding:2px;
4497 +}
4498 +
4499 +.pagelayer-post-tags{
4500 +display: flex;
4501 +flex-wrap: wrap;
4502 +align-items: flex-start;
4503 +}
4504 +
4505 +.pagelayer-elp-tags-ele{
4506 +display: flex;
4507 +margin: 2px 4px 2px 0;
4508 +max-width: 100%;
4509 +background-color: #ddd;
4510 +border-radius: 2px;
4511 +font-size: 13px;
4512 +padding: 5px;
4513 +}
4514 +
4515 +.pagelayer-elp-tags-ele .pagelayer-tags-label{
4516 +padding: 2px;
4517 +}
4518 +
4519 +.pagelayer-elp-tags-ele .pagelayer-elp-tags-remove{
4520 +cursor:pointer;
4521 +padding: 3px 5px;
4522 +}
4523 +
4524 +.pagelayer-elp-postTags-inp{
4525 +width:auto;
4526 +display: inline-block;
4527 +flex: 1;
4528 +padding: 5px;
4529 +height: 26px;
4530 +border: none !important;
4531 +outline: none !important;
4532 +max-width: 100%;
4533 +min-height: 24px;
4534 +min-width: 50px;
4535 +background: inherit;
4536 +color: #1e1e1e;
4537 +box-shadow: none;
4538 +margin-top:3px;
4539 +}
4540 +
4541 +.pagelayer-post-tags .pagelayer-postTags-list{
4542 +flex: 1 0 100%;
4543 +min-width: 100%;
4544 +max-height: 9em;
4545 +overflow-y: auto;
4546 +transition: all .15s ease-in-out;
4547 +list-style: none;
4548 +border-top: 1px solid #757575;
4549 +outline: none;
4550 +border: none;
4551 +margin: 0;
4552 +margin-top:4px;
4553 +padding:0;
4554 +}
4555 +
4556 +
4557 +.pagelayer-post-tags .pagelayer-postTags-list li{
4558 +color: #757575;
4559 +display: block;
4560 +font-size: 13px;
4561 +padding: 4px 8px;
4562 +margin: 0;
4563 +cursor: pointer;
4564 +border-top: 1px solid #757575;
4565 +}
4566 +
4567 +.pagelayer-post-tags .pagelayer-postTags-list li:hover{
4568 +color:white;
4569 +background-color:#007cba;
4570 +}
4571 +
4572 +.pagelayer-elp-trash-button-div{
4573 +text-align: center !important;
4574 +margin-top: 8px !important;
4575 +}
4576 +
4577 +.pagelayer-elp-trash-button{
4578 +color: #dc2626 !important;
4579 +padding: 6px 14px !important;
4580 +white-space: nowrap !important;
4581 +background: transparent !important;
4582 +text-decoration: none !important;
4583 +font-size: 12px !important;
4584 +font-weight: 500 !important;
4585 +cursor: pointer !important;
4586 +border: 1px solid #dc2626 !important;
4587 +border-radius: 6px !important;
4588 +line-height: 1.2 !important;
4589 +display: inline-block !important;
4590 +transition: all 0.2s ease !important;
4591 +}
4592 +
4593 +.pagelayer-elp-trash-button:hover{
4594 +background-color: #fee2e2 !important;
4595 +color: #b91c1c !important;
4596 +border-color: #b91c1c !important;
4597 +box-shadow: none !important;
4598 +}
4599 +
4600 +.pagelayer-dark .pagelayer-elp-trash-button:hover{
4601 +color: #ffffff !important;
4602 +background-color: #dc2626 !important;
4603 +border-color: #dc2626 !important;
4604 +}
4605 +
4606 +
4607 +.pagelayer-dark .pagelayer-elp-postdate-div .pagelayer-elp-postdate::-webkit-calendar-picker-indicator{
4608 +filter: invert(70%);
4609 +}
4610 +/* Pagelayer post props(tags) end */
4611 +/* Pagelayer widget list tooltip start*/
4612 +
4613 +.pagelayer-widget-tooltip{
4614 +position: fixed;
4615 +top: 0;
4616 +left: 0;
4617 +background: #fff;
4618 +width: 300px;
4619 +max-height: 350px;
4620 +min-height: 125px;
4621 +height: auto;
4622 +overflow-y: auto;
4623 +box-shadow: 0 2px 6px rgb(0 0 0 / 5%);
4624 +border-radius: 2px;
4625 +display: none;
4626 +z-index: 999;
4627 +}
4628 +
4629 +.pagelayer-widget-search-holder{
4630 +position: sticky;
4631 +top: 0;
4632 +padding: 10px 10%;
4633 +z-index: 1;
4634 +background: #fff;
4635 +}
4636 +
4637 +.pagelayer-widget-search{
4638 +position: relative;
4639 +}
4640 +
4641 +.pagelayer-pointer.pagelayer-shortcode-text,
4642 +.pagelayer-pointer.pagelayer-sc{
4643 +cursor: pointer !important;
4644 +}
4645 +
4646 +.pagelayer-widget-tooltip .pagelayer-search-field{
4647 +border: 2px solid;
4648 +}
4649 +
4650 +.pagelayer-widget-tooltip .pagelayer-shortcode-holder{
4651 +width: 70px !important;
4652 +border: 1px solid transparent;
4653 +}
4654 +
4655 +.pagelayer-widget-list-tooltip{
4656 +width: 200px !important;
4657 +padding: 6px !important;
4658 +border-radius: 6px !important;
4659 +box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
4660 +border: 1px solid #e2e8f0 !important;
4661 +box-sizing: border-box !important;
4662 +}
4663 +
4664 +.pagelayer-dark .pagelayer-widget-list-tooltip {
4665 +background-color: #1e1e24 !important;
4666 +border-color: #2d2d34 !important;
4667 +box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
4668 +}
4669 +
4670 +.pagelayer-shortcode-holder[pagelayer-tag="pl_row"],
4671 +.pagelayer-shortcode-holder[pagelayer-tag="pl_col"],
4672 +.pagelayer-widget-list-tooltip .pagelayer-widget-group h5,
4673 +.pagelayer-widget-list-tooltip .pagelayer-widget-search-holder{
4674 +display:none !important;
4675 +}
4676 +
4677 +.pagelayer-widget-list-tooltip .pagelayer-shortcode{
4678 +width: 20px !important;
4679 +height: 20px !important;
4680 +font-size: 16px !important;
4681 +text-align: center !important;
4682 +display: flex !important;
4683 +align-items: center !important;
4684 +justify-content: center !important;
4685 +}
4686 +
4687 +.pagelayer-widget-list-tooltip .pagelayer-shortcode-holder{
4688 +width: 100% !important;
4689 +height: auto !important;
4690 +float: unset !important;
4691 +margin: 2px 0px !important;
4692 +border: 1px solid transparent !important;
4693 +border-radius: 4px !important;
4694 +background-color: transparent !important;
4695 +box-sizing: border-box !important;
4696 +transition: background-color 0.15s ease, border-color 0.15s ease !important;
4697 +}
4698 +
4699 +.pagelayer-widget-list-tooltip .pagelayer-shortcode-holder:hover {
4700 +transform: none !important;
4701 +background-color: #f1f5f9 !important;
4702 +}
4703 +
4704 +.pagelayer-dark .pagelayer-widget-list-tooltip .pagelayer-shortcode-holder:hover {
4705 +background-color: #2d2d34 !important;
4706 +}
4707 +
4708 +.pagelayer-widget-list-tooltip .pagelayer-sc{
4709 +display: flex !important;
4710 +flex-direction: row !important;
4711 +align-items: center !important;
4712 +justify-content: flex-start !important;
4713 +padding: 6px 8px !important;
4714 +margin: 0 !important;
4715 +height: auto !important;
4716 +width: 100% !important;
4717 +box-sizing: border-box !important;
4718 +}
4719 +
4720 +.pagelayer-widget-list-tooltip .pagelayer-shortcode-text{
4721 +text-align: left !important;
4722 +white-space: nowrap !important;
4723 +overflow: hidden !important;
4724 +text-overflow: ellipsis !important;
4725 +max-width: none !important;
4726 +font-size: 12px !important;
4727 +font-weight: 500 !important;
4728 +color: #334155 !important;
4729 +}
4730 +
4731 +.pagelayer-dark .pagelayer-widget-list-tooltip .pagelayer-shortcode-text {
4732 +color: #cbd5e1 !important;
4733 +}
4734 +
4735 +.pagelayer-widget-list-tooltip .pagelayer-shortcode-inner{
4736 +height: auto !important;
4737 +width: auto !important;
4738 +margin-bottom: 0px !important;
4739 +margin-right: 10px !important;
4740 +display: flex !important;
4741 +align-items: center !important;
4742 +justify-content: center !important;
4743 +}
4744 +
4745 +.pagelayer-widget-list-tooltip .pagelayer-shortcode-holder.pagelayer-list-widget-active{
4746 +border: 1px solid #3b82f6 !important;
4747 +background-color: #eff6ff !important;
4748 +}
4749 +
4750 +.pagelayer-dark .pagelayer-widget-list-tooltip .pagelayer-shortcode-holder.pagelayer-list-widget-active {
4751 +border: 1px solid #3b82f6 !important;
4752 +background-color: #1e293b !important;
4753 +}
4754 +
4755 +/* Pagelayer widget list tooltip end*/
4756 +/* Menu start */
4757 +.pagelayer-elp-menu-items-holder{
4758 +padding-top: 15px;
4759 +}
4760 +
4761 +.pagelayer-drag-highlight{
4762 +margin-top: 0;
4763 +margin-bottom: 10px;
4764 +max-width: calc(100% - 2px);
4765 +border: 1px dashed #a7aaad;
4766 +height: 33px !important;
4767 +}
4768 +
4769 +.pagelayer-menu-depth-1{
4770 +margin-left: 10px;
4771 +width: calc(100% - 10px) !important;
4772 +}
4773 +
4774 +.pagelayer-menu-depth-2{
4775 +margin-left: 20px;
4776 +width: calc(100% - 20px) !important;
4777 +}
4778 +
4779 +.pagelayer-menu-depth-3{
4780 +margin-left: 30px;
4781 +width: calc(100% - 30px) !important;
4782 +}
4783 +
4784 +.pagelayer-menu-depth-4{
4785 +margin-left: 40px;
4786 +width: calc(100% - 40px) !important;
4787 +}
4788 +
4789 +.pagelayer-menu-depth-5{
4790 +margin-left: 50px;
4791 +width: calc(100% - 50px) !important;
4792 +}
4793 +
4794 +.pagelayer-menu-depth-6{
4795 +margin-left: 60px;
4796 +width: calc(100% - 60px) !important;
4797 +}
4798 +
4799 +.pagelayer-menu-depth-7{
4800 +margin-left: 70px;
4801 +width: calc(100% - 70px) !important;
4802 +}
4803 +
4804 +.pagelayer-menu-depth-8{
4805 +margin-left: 80px;
4806 +width: calc(100% - 80px) !important;
4807 +}
4808 +
4809 +.pagelayer-menu-depth-9{
4810 +margin-left: 90px;
4811 +width: calc(100% - 90px) !important;
4812 +}
4813 +
4814 +.pagelayer-menu-depth-10{
4815 +margin-left: 100px;
4816 +width: calc(100% - 100px) !important;
4817 +}
4818 +
4819 +.pagelayer-menu-depth-11{
4820 +margin-left: 110px;
4821 +width: calc(100% - 110px) !important;
4822 +}
4823 +
4824 +.pagelayer-menu-depth-12{
4825 +margin-left: 120px;
4826 +width: calc(100% - 120px) !important;
4827 +}
4828 +
4829 +.pagelayer-menu-depth-13{
4830 +margin-left: 130px;
4831 +width: calc(100% - 130px) !important;
4832 +}
4833 +
4834 +.pagelayer-menu-depth-14{
4835 +margin-left: 140px;
4836 +width: calc(100% - 140px) !important;
4837 +}
4838 +
4839 +.pagelayer-menu-depth-15{
4840 +margin-left: 150px;
4841 +width: calc(100% - 150px) !important;
4842 +}
4843 +
4844 +.pagelayer-menu-item-transport:empty{
4845 +display: none;
4846 +}
4847 +
4848 +.pagelayer-menu-item-transport{
4849 +padding-top: 10px;
4850 +}
4851 +
4852 +/* Menu end */
4853 +
4854 +/* ==========================================================================
4855 +MODERN UI REDESIGN
4856 +========================================================================== */
4857 +/* Apply Font Family Everywhere */
4858 +.pagelayer-normalize,
4859 +.pagelayer-body,
4860 +.pagelayer-leftbar-table,
4861 +.pagelayer-leftbar,
4862 +.pagelayer-shortcode-text,
4863 +.pagelayer-elpd-tab,
4864 +.pagelayer-widget-tab,
4865 +.pagelayer-history-tab,
4866 +.pagelayer-leftbar-group h5,
4867 +.pagelayer-history-title,
4868 +.pagelayer-history-subtitle,
4869 +.pagelayer-history-action,
4870 +.pagelayer-general-options,
4871 +.pagelayer-general-options h5,
4872 +.pagelayer-widgets-form label,
4873 +.pagelayer-post-settings-holder,
4874 +.pagelayer-elpd-title,
4875 +.pagelayer-elp-label {
4876 +font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
4877 +}
4878 +
4879 +
4880 +
4881 +/* 2. Pill Segmented Tab Navigation */
4882 +.pagelayer-widget-tabs,
4883 +.pagelayer-elpd-tabs,
4884 +.pagelayer-history-tabs {
4885 +background-color: #f8fafc !important;
4886 +border-bottom: 1px solid #e2e8f0 !important;
4887 +padding: 6px 12px !important;
4888 +margin: 0 !important;
4889 +display: flex !important;
4890 +gap: 6px !important;
4891 +}
4892 +
4893 +.pagelayer-dark .pagelayer-widget-tabs,
4894 +.pagelayer-dark .pagelayer-elpd-tabs,
4895 +.pagelayer-dark .pagelayer-history-tabs {
4896 +background-color: #0b0f19 !important;
4897 +border-bottom: 1px solid #1e293b !important;
4898 +}
4899 +
4900 +.pagelayer-widget-tab,
4901 +.pagelayer-elpd-tab,
4902 +.pagelayer-history-tab {
4903 +flex: 1 !important;
4904 +text-align: center !important;
4905 +padding: 6px 10px !important;
4906 +margin: 0 !important;
4907 +font-size: 12px !important;
4908 +font-weight: 600 !important;
4909 +color: #64748b !important;
4910 +border-radius: 6px !important;
4911 +border-bottom: none !important;
4912 +transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
4913 +}
4914 +
4915 +.pagelayer-dark .pagelayer-widget-tab,
4916 +.pagelayer-dark .pagelayer-elpd-tab,
4917 +.pagelayer-dark .pagelayer-history-tab {
4918 +color: #94a3b8 !important;
4919 +}
4920 +
4921 +/* Active tab style overlaying standard borders */
4922 +[pagelayer-elpd-active-tab="1"],
4923 +[pagelayer-history-active-tab="1"],
4924 +.pagelayer-widget-tab[pagelayer-elpd-active-tab="1"] {
4925 +color: #2563eb !important;
4926 +border-bottom: none !important;
4927 +box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
4928 +}
4929 +
4930 +.pagelayer-dark [pagelayer-elpd-active-tab="1"],
4931 +.pagelayer-dark [pagelayer-history-active-tab="1"],
4932 +.pagelayer-dark .pagelayer-widget-tab[pagelayer-elpd-active-tab="1"] {
4933 +color: #ffffff !important;
4934 +box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
4935 +}
4936 +
4937 +.pagelayer-widget-tab:hover,
4938 +.pagelayer-elpd-tab:hover,
4939 +.pagelayer-history-tab:hover {
4940 +color: #0f172a !important;
4941 +background-color: rgba(0, 0, 0, 0.02) !important;
4942 +}
4943 +
4944 +.pagelayer-dark .pagelayer-widget-tab:hover,
4945 +.pagelayer-dark .pagelayer-elpd-tab:hover,
4946 +.pagelayer-dark .pagelayer-history-tab:hover {
4947 +color: #ffffff !important;
4948 +background-color: rgba(255, 255, 255, 0.04) !important;
4949 +}
4950 +
4951 +/* 3. Leftbar Shell & Search Area */
4952 +.pagelayer-leftbar-table {
4953 +border-right: 1px solid #e2e8f0 !important;
4954 +}
4955 +
4956 +.pagelayer-leftbar {
4957 +background: #f8fafc !important;
4958 +border-right: none !important;
4959 +}
4960 +
4961 +.pagelayer-dark .pagelayer-leftbar-table {
4962 +border-right: 1px solid #1e293b !important;
4963 +}
4964 +
4965 +.pagelayer-dark .pagelayer-leftbar {
4966 +background: #0b0f19 !important;
4967 +}
4968 +
4969 +.pagelayer-leftbar-search {
4970 +margin: 16px 12px 12px 12px !important;
4971 +position: relative !important;
4972 +}
4973 +
4974 +.pagelayer-search-field {
4975 +background-color: #ffffff !important;
4976 +border: 1px solid #cbd5e1 !important;
4977 +border-radius: 8px !important;
4978 +padding: 8px 12px 8px 32px !important;
4979 +font-size: 13px !important;
4980 +color: #0f172a !important;
4981 +height: 36px !important;
4982 +width: 100% !important;
4983 +transition: all 0.2s ease !important;
4984 +box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.02) !important;
4985 +}
4986 +
4987 +.pagelayer-dark .pagelayer-search-field {
4988 +background-color: #1e293b !important;
4989 +border: 1px solid #334155 !important;
4990 +color: #f8fafc !important;
4991 +}
4992 +
4993 +.pagelayer-search-field:focus {
4994 +border-color: #3b82f6 !important;
4995 +box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
4996 +outline: none !important;
4997 +}
4998 +
4999 +.pagelayer-dark .pagelayer-search-field:focus {
5000 +border-color: #60a5fa !important;
5001 +box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
5002 +}
5003 +
5004 +.pagelayer-leftbar-search .pli-search {
5005 +left: 10px !important;
5006 +line-height: 36px !important;
5007 +height: 36px !important;
5008 +color: #94a3b8 !important;
5009 +font-size: 14px !important;
5010 +}
5011 +
5012 +.pagelayer-leftbar-search .pagelayer-sf-empty {
5013 +right: 8px !important;
5014 +line-height: 36px !important;
5015 +height: 36px !important;
5016 +color: #94a3b8 !important;
5017 +font-size: 14px !important;
5018 +}
5019 +
5020 +/* 4. Group Headings */
5021 +.pagelayer-leftbar-group {
5022 +margin-bottom: 8px !important;
5023 +padding: 0 12px !important;
5024 +}
5025 +
5026 +.pagelayer-leftbar-group h5 {
5027 +font-size: 11px !important;
5028 +font-weight: 700 !important;
5029 +letter-spacing: 0.05em !important;
5030 +text-transform: uppercase !important;
5031 +color: #94a3b8 !important;
5032 +margin: 16px 0 8px 0 !important;
5033 +text-align: left !important;
5034 +border-bottom: 1px solid rgba(0, 0, 0, 0.03);
5035 +padding-bottom: 4px;
5036 +}
5037 +
5038 +.pagelayer-dark .pagelayer-leftbar-group h5 {
5039 +color: #cbd5e1 !important;
5040 +background: #0b0f19 !important;
5041 +border-top: 1px solid #1e293b !important;
5042 +border-bottom: 1px solid #1e293b !important;
5043 +}
5044 +
5045 +/* 5. Draggable Widget Cards */
5046 +.pagelayer-shortcodes-widget {
5047 +padding: 0 4px !important;
5048 +}
5049 +
5050 +.pagelayer-shortcode-drag {
5051 +width: 112px !important;
5052 +height: 58px !important;
5053 +margin: 6px !important;
5054 +background-color: #ffffff !important;
5055 +border: 1px solid #e2e8f0 !important;
5056 +border-radius: 10px !important;
5057 +float: left !important;
5058 +display: flex !important;
5059 +flex-direction: column !important;
5060 +align-items: center !important;
5061 +justify-content: center !important;
5062 +transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
5063 +box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.02) !important;
5064 +box-sizing: border-box !important;
5065 +}
5066 +
5067 +.pagelayer-dark .pagelayer-shortcode-drag {
5068 +background-color: #131926 !important;
5069 +border: 1px solid #1e293b !important;
5070 +box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) !important;
5071 +}
5072 +
5073 +.pagelayer-shortcode-drag:hover {
5074 +transform: translateY(-3px) scale(1.02) !important;
5075 +border-color: #2563eb !important;
5076 +box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.08), 0 4px 6px -4px rgba(37, 99, 235, 0.08) !important;
5077 +}
5078 +
5079 +.pagelayer-dark .pagelayer-shortcode-drag:hover {
5080 +border-color: #2563eb !important;
5081 +box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3) !important;
5082 +}
5083 +
5084 +.pagelayer-sc {
5085 +padding: 0 !important;
5086 +margin: 0 !important;
5087 +display: flex !important;
5088 +flex-direction: column !important;
5089 +align-items: center !important;
5090 +justify-content: center !important;
5091 +width: 100% !important;
5092 +height: 100% !important;
5093 +}
5094 +
5095 +.pagelayer-shortcode-inner {
5096 +height: auto !important;
5097 +margin-bottom: 6px !important;
5098 +display: flex !important;
5099 +align-items: center !important;
5100 +justify-content: center !important;
5101 +}
5102 +
5103 +.pagelayer-shortcode {
5104 +font-size: 20px !important;
5105 +color: #2563eb !important;
5106 +/* Indigo accent */
5107 +transition: color 0.2s ease !important;
5108 +}
5109 +
5110 +.pagelayer-dark .pagelayer-shortcode {
5111 +color: #818cf8 !important;
5112 +}
5113 +
5114 +.pagelayer-shortcode-text {
5115 +font-size: 11px !important;
5116 +font-weight: 500 !important;
5117 +color: #475569 !important;
5118 +margin: 0 !important;
5119 +text-align: center !important;
5120 +transition: color 0.2s ease !important;
5121 +white-space: nowrap !important;
5122 +overflow: hidden !important;
5123 +text-overflow: ellipsis !important;
5124 +max-width: 90% !important;
5125 +}
5126 +
5127 +.pagelayer-dark .pagelayer-shortcode-text {
5128 +color: #cbd5e1 !important;
5129 +}
5130 +
5131 +.pagelayer-shortcode-drag:hover .pagelayer-shortcode {
5132 +color: #2563eb !important;
5133 +}
5134 +
5135 +.pagelayer-dark .pagelayer-shortcode-drag:hover .pagelayer-shortcode {
5136 +color: #2563eb !important;
5137 +}
5138 +
5139 +.pagelayer-shortcode-drag:hover .pagelayer-shortcode-text {
5140 +color: #2563eb !important;
5141 +}
5142 +
5143 +.pagelayer-dark .pagelayer-shortcode-drag:hover .pagelayer-shortcode-text {
5144 +color: #2563eb !important;
5145 +}
5146 +
5147 +/* 6. Settings Panels & Accordions */
5148 +.pagelayer-elpd,
5149 +.pagelayer-post-settings,
5150 +.pagelayer-general-options {
5151 +background: #ffffff !important;
5152 +}
5153 +
5154 +.pagelayer-dark .pagelayer-elpd,
5155 +.pagelayer-dark .pagelayer-post-settings,
5156 +.pagelayer-dark .pagelayer-general-options {
5157 +background: #0b0f19 !important;
5158 +}
5159 +
5160 +.pagelayer-elpd-header {
5161 +border-bottom: 1px solid #e2e8f0 !important;
5162 +background-color: #ffffff !important;
5163 +}
5164 +
5165 +.pagelayer-dark .pagelayer-elpd-header {
5166 +border-bottom: 1px solid #1e293b !important;
5167 +background-color: #0b0f19 !important;
5168 +}
5169 +
5170 +.pagelayer-elpd-title {
5171 +font-weight: 600 !important;
5172 +color: #0f172a !important;
5173 +}
5174 +
5175 +.pagelayer-dark .pagelayer-elpd-title {
5176 +color: #f8fafc !important;
5177 +}
5178 +
5179 +.pagelayer-form-item {
5180 +margin-bottom: 14px !important;
5181 +position: relative !important;
5182 +border-bottom: none !important;
5183 +padding: 8px 0 !important;
5184 +}
5185 +
5186 +.pagelayer-elp-label,
5187 +.pagelayer-widgets-form label {
5188 +font-size: 12px !important;
5189 +font-weight: 600 !important;
5190 +color: #475569 !important;
5191 +margin-bottom: 6px !important;
5192 +display: block !important;
5193 +}
5194 +
5195 +.pagelayer-dark .pagelayer-elp-label,
5196 +.pagelayer-dark .pagelayer-widgets-form label {
5197 +color: #94a3b8 !important;
5198 +}
5199 +
5200 +/* Rounded Inputs */
5201 +.pagelayer-elp-text,
5202 +.pagelayer-elp-spinner,
5203 +.pagelayer-elp-textarea,
5204 +.pagelayer-elp-gradient-input,
5205 +.pagelayer-elp-datetime,
5206 +.pagelayer-elpd-body input[type="text"],
5207 +.pagelayer-widgets-form input[type="text"],
5208 +.pagelayer-widgets-form textarea {
5209 +background-color: #ffffff !important;
5210 +border: 1px solid #cbd5e1 !important;
5211 +border-radius: 8px !important;
5212 +padding: 8px 10px !important;
5213 +font-size: 13px !important;
5214 +color: #0f172a !important;
5215 +transition: all 0.2s ease !important;
5216 +box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
5217 +box-sizing: border-box !important;
5218 +}
5219 +
5220 +.pagelayer-elp-text,
5221 +.pagelayer-elp-spinner,
5222 +.pagelayer-elp-gradient-input,
5223 +.pagelayer-elp-datetime,
5224 +.pagelayer-elpd-body input[type="text"],
5225 +.pagelayer-widgets-form input[type="text"] {
5226 +height: auto !important;
5227 +}
5228 +
5229 +.pagelayer-dark .pagelayer-elp-text,
5230 +.pagelayer-dark .pagelayer-elp-spinner,
5231 +.pagelayer-dark .pagelayer-elp-textarea,
5232 +.pagelayer-dark .pagelayer-elp-gradient-input,
5233 +.pagelayer-dark .pagelayer-elp-datetime,
5234 +.pagelayer-dark .pagelayer-elpd-body input[type="text"],
5235 +.pagelayer-dark .pagelayer-widgets-form input[type="text"],
5236 +.pagelayer-dark .pagelayer-widgets-form textarea {
5237 +background-color: #131926 !important;
5238 +border: 1px solid #1e293b !important;
5239 +color: #f8fafc !important;
5240 +}
5241 +
5242 +.pagelayer-elp-text:focus,
5243 +.pagelayer-elp-spinner:focus,
5244 +.pagelayer-elp-gradient-input:focus,
5245 +.pagelayer-elpd-body input:focus,
5246 +.pagelayer-widgets-form input:focus,
5247 +.pagelayer-widgets-form textarea:focus {
5248 +border-color: #3b82f6 !important;
5249 +box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
5250 +outline: none !important;
5251 +}
5252 +
5253 +.pagelayer-dark .pagelayer-elp-text:focus,
5254 +.pagelayer-dark .pagelayer-elp-spinner:focus,
5255 +.pagelayer-dark .pagelayer-elp-gradient-input:focus,
5256 +.pagelayer-dark .pagelayer-elpd-body input:focus,
5257 +.pagelayer-dark .pagelayer-widgets-form input:focus,
5258 +.pagelayer-dark .pagelayer-widgets-form textarea:focus {
5259 +border-color: #2563eb !important;
5260 +box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
5261 +}
5262 +
5263 +/* Custom Dropdown Select styling */
5264 +.pagelayer-elp-select,
5265 +.pagelayer-widgets-form select {
5266 +background-color: #ffffff !important;
5267 +border: 1px solid #cbd5e1 !important;
5268 +border-radius: 8px !important;
5269 +padding: 6px 30px 6px 10px !important;
5270 +font-size: 13px !important;
5271 +color: #0f172a !important;
5272 +height: 34px !important;
5273 +transition: all 0.2s ease !important;
5274 +box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
5275 +-webkit-appearance: none !important;
5276 +-moz-appearance: none !important;
5277 +appearance: none !important;
5278 +background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E") !important;
5279 +background-position: right 8px center !important;
5280 +background-size: 18px 18px !important;
5281 +background-repeat: no-repeat !important;
5282 +}
5283 +
5284 +.pagelayer-dark .pagelayer-elp-select,
5285 +.pagelayer-dark .pagelayer-widgets-form select {
5286 +background-color: #131926 !important;
5287 +border: 1px solid #1e293b !important;
5288 +color: #f8fafc !important;
5289 +background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E") !important;
5290 +}
5291 +
5292 +.pagelayer-elp-select:focus,
5293 +.pagelayer-widgets-form select:focus {
5294 +border-color: #2563eb !important;
5295 +box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
5296 +outline: none !important;
5297 +}
5298 +
5299 +/* Accordion sections styling */
5300 +.pagelayer-post-settings-lable{
5301 +border: 1px solid #e2e8f0 !important;
5302 +background: #f8fafc !important;
5303 +border-radius: 8px !important;
5304 +padding: 10px 14px !important;
5305 +font-weight: 600 !important;
5306 +color: #334155 !important;
5307 +margin-bottom: 6px !important;
5308 +transition: all 0.2s ease !important;
5309 +}
5310 +
5311 +.pagelayer-dark .pagelayer-post-settings-lable{
5312 +border: 1px solid #1e293b !important;
5313 +background: #131926 !important;
5314 +color: #cbd5e1 !important;
5315 +}
5316 +
5317 +.pagelayer-post-settings-lable:hover{
5318 +border-color: #cbd5e1 !important;
5319 +background-color: #f1f5f9 !important;
5320 +}
5321 +
5322 +.pagelayer-dark .pagelayer-post-settings-lable:hover{
5323 +border-color: #334155 !important;
5324 +background-color: #1e293b !important;
5325 +}
5326 +
5327 +.pagelayer-elp-group-item-head {
5328 +background: #f8fafc !important;
5329 +border: none !important;
5330 +border-bottom: 1px solid #e2e8f0 !important;
5331 +padding: 10px 14px !important;
5332 +font-weight: 600 !important;
5333 +color: #334155 !important;
5334 +margin-bottom: 0 !important;
5335 +transition: all 0.2s ease !important;
5336 +display: flex !important;
5337 +align-items: center !important;
5338 +justify-content: space-between !important;
5339 +cursor: pointer !important;
5340 +}
5341 +
5342 +.pagelayer-dark .pagelayer-elp-group-item-head {
5343 +background: #131926 !important;
5344 +border-bottom: 1px solid #1e293b !important;
5345 +color: #cbd5e1 !important;
5346 +}
5347 +
5348 +.pagelayer-elp-group-item-head:hover {
5349 +background-color: #f1f5f9 !important;
5350 +}
5351 +
5352 +.pagelayer-dark .pagelayer-elp-group-item-head:hover {
5353 +background-color: #1e293b !important;
5354 +}
5355 +
5356 +.pagelayer-elp-group-item-head span {
5357 +padding: 4px 8px !important;
5358 +display: inline-flex !important;
5359 +align-items: center !important;
5360 +}
5361 +
5362 +.pagelayer-elp-group-item-clone:hover i {
5363 +color: #2563eb !important;
5364 +}
5365 +
5366 +.pagelayer-elp-group-item-del:hover i {
5367 +color: #dc2626 !important;
5368 +}
5369 +
5370 +.pagelayer-dark .pagelayer-elp-group-item-clone:hover i {
5371 +color: #60a5fa !important;
5372 +}
5373 +
5374 +.pagelayer-dark .pagelayer-elp-group-item-del:hover i {
5375 +color: #f87171 !important;
5376 +}
5377 +
5378 +.pagelayer-elp-group-item {
5379 +border: 1px solid #e2e8f0 !important;
5380 +border-radius: 10px !important;
5381 +overflow: hidden !important;
5382 +background: #ffffff !important;
5383 +margin-bottom: 12px !important;
5384 +}
5385 +
5386 +.pagelayer-dark .pagelayer-elp-group-item {
5387 +border: 1px solid #1e293b !important;
5388 +background: #0b0f19 !important;
5389 +}
5390 +
5391 +/* Prevent popup clipping inside list group items */
5392 +.pagelayer-elp-group-item:has(.pagelayer-elp-icon-selector:not([style*="display: none"])),
5393 +.pagelayer-elp-group-item:has(.pagelayer-elp-link-list:not([style*="display: none"])) {
5394 +overflow: visible !important;
5395 +}
5396 +
5397 +/* Ranges Sliders Modernization */
5398 +.pagelayer-elp-slider-input[type="range"] {
5399 + -webkit-appearance: none !important;
5400 + width: 100% !important;
5401 + height: 6px !important;
5402 + border-radius: 3px !important;
5403 + background: #e2e8f0 !important;
5404 + outline: none !important;
5405 +}
5406 +
5407 +.pagelayer-dark .pagelayer-elp-slider-input[type="range"] {
5408 + background: #1e293b !important;
5409 +}
5410 +
5411 +.pagelayer-elp-slider-input[type="range"]::-webkit-slider-thumb {
5412 + -webkit-appearance: none !important;
5413 + appearance: none !important;
5414 + width: 16px !important;
5415 + height: 16px !important;
5416 + border-radius: 50% !important;
5417 + background: #3b82f6 !important;
5418 + cursor: pointer !important;
5419 + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
5420 + transition: transform 0.1s ease !important;
5421 +}
5422 +
5423 +.pagelayer-dark .pagelayer-elp-slider-input[type="range"]::-webkit-slider-thumb {
5424 + background: #60a5fa !important;
5425 +}
5426 +
5427 +.pagelayer-elp-slider-input[type="range"]::-webkit-slider-thumb:hover {
5428 + transform: scale(1.2) !important;
5429 +}
5430 +
5431 +/* 7. Revisions & History Panel */
5432 +.pagelayer-revision-holder,
5433 +.pagelayer-history-holder {
5434 + border: 1px solid #e2e8f0 !important;
5435 + border-radius: 8px !important;
5436 + margin-bottom: 8px !important;
5437 + padding: 12px !important;
5438 + background-color: #ffffff !important;
5439 + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.02) !important;
5440 + transition: all 0.2s ease !important;
5441 +}
5442 +
5443 +.pagelayer-dark .pagelayer-revision-holder,
5444 +.pagelayer-dark .pagelayer-history-holder {
5445 + border: 1px solid #1e293b !important;
5446 + background-color: #131926 !important;
5447 +}
5448 +
5449 +.pagelayer-revision-holder:hover,
5450 +.pagelayer-history-holder:hover,
5451 +.pagelayer-history-holder.current_active_item {
5452 + background-color: #f8fafc !important;
5453 + border-color: #cbd5e1 !important;
5454 +}
5455 +
5456 +.pagelayer-dark .pagelayer-revision-holder:hover,
5457 +.pagelayer-dark .pagelayer-history-holder:hover,
5458 +.pagelayer-dark .pagelayer-history-holder.current_active_item {
5459 + background-color: #1e293b !important;
5460 + border-color: #334155 !important;
5461 +}
5462 +
5463 +.pagelayer-revision-img-holder {
5464 + border-radius: 50% !important;
5465 + width: 24px !important;
5466 + height: 24px !important;
5467 + box-shadow: 0 0 0 2px #e2e8f0 !important;
5468 + overflow: hidden !important;
5469 +}
5470 +
5471 +.pagelayer-dark .pagelayer-revision-img-holder {
5472 + box-shadow: 0 0 0 2px #1e293b !important;
5473 +}
5474 +
5475 +.pagelayer-revision-img-holder img {
5476 + width: 100% !important;
5477 + height: 100% !important;
5478 + object-fit: cover !important;
5479 +}
5480 +
5481 +.pagelayer-history-title {
5482 + font-weight: 600 !important;
5483 + color: #334155 !important;
5484 +}
5485 +
5486 +.pagelayer-dark .pagelayer-history-title {
5487 + color: #f8fafc !important;
5488 +}
5489 +
5490 +.pagelayer-history-subtitle {
5491 + color: #64748b !important;
5492 +}
5493 +
5494 +.pagelayer-dark .pagelayer-history-subtitle {
5495 + color: #94a3b8 !important;
5496 +}
5497 +
5498 +/* 8. Loader overlay & Custom scrollbars */
5499 +.pagelayer-leftbar-scroll::-webkit-scrollbar,
5500 +.pagelayer-leftbar::-webkit-scrollbar,
5501 +.slimScrollDiv::-webkit-scrollbar,
5502 +#pagelayer-history::-webkit-scrollbar,
5503 +#pagelayer-elpd::-webkit-scrollbar {
5504 + width: 6px !important;
5505 + height: 6px !important;
5506 +}
5507 +
5508 +.pagelayer-leftbar-scroll::-webkit-scrollbar-track,
5509 +.pagelayer-leftbar::-webkit-scrollbar-track,
5510 +#pagelayer-history::-webkit-scrollbar-track,
5511 +#pagelayer-elpd::-webkit-scrollbar-track {
5512 + background: transparent !important;
5513 +}
5514 +
5515 +.pagelayer-leftbar-scroll::-webkit-scrollbar-thumb,
5516 +.pagelayer-leftbar::-webkit-scrollbar-thumb,
5517 +#pagelayer-history::-webkit-scrollbar-thumb,
5518 +#pagelayer-elpd::-webkit-scrollbar-thumb {
5519 + background: #cbd5e1 !important;
5520 + border-radius: 3px !important;
5521 +}
5522 +
5523 +.pagelayer-dark .pagelayer-leftbar-scroll::-webkit-scrollbar-thumb,
5524 +.pagelayer-dark .pagelayer-leftbar::-webkit-scrollbar-thumb,
5525 +.pagelayer-dark #pagelayer-history::-webkit-scrollbar-thumb,
5526 +.pagelayer-dark #pagelayer-elpd::-webkit-scrollbar-thumb {
5527 + background: #334155 !important;
5528 +}
5529 +
5530 +
5531 +/* ==========================================================================
5532 +HEADER BAR AND ACTIVE SUB-TABS OVERRIDES
5533 +========================================================================== */
5534 +
5535 +/* 1. Show and Redesign Iframe Top Bar */
5536 +.pagelayer-iframe-top-bar {
5537 + display: block !important;
5538 + height: 48px !important;
5539 + background-color: #ffffff !important;
5540 + border-bottom: 1px solid #e2e8f0 !important;
5541 + box-sizing: border-box !important;
5542 +}
5543 +
5544 +.pagelayer-dark .pagelayer-iframe-top-bar {
5545 + background-color: #0f172a !important;
5546 + border-bottom: 1px solid #1e293b !important;
5547 +}
5548 +
5549 +.pagelayer-iframe-holder {
5550 + max-height: calc(100vh - 48px) !important;
5551 + height: calc(100vh - 48px) !important;
5552 +}
5553 +
5554 +.pagelayer-iframe-holder-with-bar {
5555 + max-height: calc(100vh - 48px) !important;
5556 + height: calc(100vh - 48px) !important;
5557 +}
5558 +
5559 +/* Header bar inside top container */
5560 +.pagelayer-top-header-bar {
5561 + display: flex !important;
5562 + align-items: center !important;
5563 + justify-content: space-between !important;
5564 + height: 100% !important;
5565 + padding: 0 16px !important;
5566 + color: #475569 !important;
5567 +}
5568 +
5569 +.pagelayer-dark .pagelayer-top-header-bar {
5570 + color: #cbd5e1 !important;
5571 +}
5572 +
5573 +/* Hide legacy bottom button switcher */
5574 +.pagelayer-bottombar-holder,
5575 +.pagelayer-bottombar-row {
5576 + display: none !important;
5577 +}
5578 +
5579 +
5580 +/* 2. Style Opened settings sub-tabs (accordions) */
5581 +.pagelayer-elpd-section-name.pagelayer-elpd-section-open {
5582 + background-color: #eff6ff !important;
5583 + color: #2563eb !important;
5584 + border-left: 4px solid #3b82f6 !important;
5585 + border-radius: 8px 8px 0 0 !important;
5586 + font-weight: 700 !important;
5587 + box-shadow: 0 1px 3px rgba(59, 130, 246, 0.05) !important;
5588 +}
5589 +
5590 +.pagelayer-dark .pagelayer-elpd-section-name.pagelayer-elpd-section-open {
5591 + background-color: #1e293b !important;
5592 + color: #60a5fa !important;
5593 + border-left: 4px solid #2563eb !important;
5594 +}
5595 +
5596 +/* Sibling rows container for opened tab */
5597 +.pagelayer-elpd-section-open+.pagelayer-elpd-section-rows {
5598 + background-color: #ffffff !important;
5599 + border-left: 4px solid #3b82f6 !important;
5600 + border-right: 1px solid #e2e8f0 !important;
5601 + border-bottom: 1px solid #e2e8f0 !important;
5602 + border-radius: 0 0 8px 8px !important;
5603 + padding: 16px 12px !important;
5604 + margin-bottom: 12px !important;
5605 +}
5606 +
5607 +.pagelayer-dark .pagelayer-elpd-section-open+.pagelayer-elpd-section-rows {
5608 + background-color: #0b0f19 !important;
5609 + border-left: 4px solid #2563eb !important;
5610 + border-right: 1px solid #1e293b !important;
5611 + border-bottom: 1px solid #1e293b !important;
5612 +}
5613 +
5614 +/* WordPress postbox (post settings tabs inside iframe) active state */
5615 +.postbox:not(.closed) {
5616 + border: 1px solid #3b82f6 !important;
5617 + border-radius: 10px !important;
5618 + overflow: hidden !important;
5619 + margin-bottom: 16px !important;
5620 + box-shadow: 0 4px 12px rgba(59, 130, 246, 0.05) !important;
5621 +}
5622 +
5623 +.pagelayer-dark .postbox:not(.closed) {
5624 + border: 1px solid #334155 !important;
5625 +}
5626 +
5627 +.postbox:not(.closed) .postbox-header,
5628 +.postbox:not(.closed) h2.hndle {
5629 + background-color: #eff6ff !important;
5630 + color: #1e40af !important;
5631 + border-bottom: 1px solid #bfdbfe !important;
5632 +}
5633 +
5634 +.pagelayer-dark .postbox:not(.closed) .postbox-header,
5635 +.pagelayer-dark .postbox:not(.closed) h2.hndle {
5636 + background-color: #1e293b !important;
5637 + color: #60a5fa !important;
5638 + border-bottom: 1px solid #334155 !important;
5639 +}
5640 +
5641 +.postbox:not(.closed) .inside {
5642 + padding: 16px 12px !important;
5643 + background-color: #ffffff !important;
5644 +}
5645 +
5646 +.pagelayer-dark .postbox:not(.closed) .inside {
5647 + background-color: #0b0f19 !important;
5648 +}
5649 +
5650 +/* ==========================================================================
5651 +STYLE SKIN
5652 +========================================================================== */
5653 +
5654 +/* Parent topbar Dark Theme */
5655 +.pagelayer-iframe-top-bar {
5656 +background: #26292c !important;
5657 +border-bottom: 1px solid #1f2124 !important;
5658 +height: 50px !important;
5659 +box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
5660 +display: block !important;
5661 +}
5662 +
5663 +.pagelayer-top-header-bar {
5664 +color: #ffffff !important;
5665 +height: 100% !important;
5666 +}
5667 +
5668 +
5669 +
5670 +/* Header right icons & buttons */
5671 +.pagelayer-header-icon-wrap {
5672 +cursor: pointer !important;
5673 +display: inline-flex !important;
5674 +align-items: center !important;
5675 +justify-content: center !important;
5676 +color: #a4afb7 !important;
5677 +border-radius: 6px !important;
5678 +width: 34px !important;
5679 +height: 34px !important;
5680 +transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
5681 +}
5682 +
5683 +.pagelayer-header-icon-wrap:hover {
5684 +background-color: rgba(255, 255, 255, 0.08) !important;
5685 +color: #ffffff !important;
5686 +transform: translateY(-1px) !important;
5687 +}
5688 +
5689 +.pagelayer-header-right .pagelayer-ai-topbar-btn {
5690 +cursor: pointer !important;
5691 +display: inline-flex !important;
5692 +align-items: center !important;
5693 +justify-content: center !important;
5694 +width: 34px !important;
5695 +height: 34px !important;
5696 +border-radius: 6px !important;
5697 +color: #c084fc !important;
5698 +background: rgba(168, 85, 247, 0.15) !important;
5699 +border: 1px solid rgba(168, 85, 247, 0.3) !important;
5700 +transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
5701 +position: relative !important;
5702 +margin-right: 4px !important;
5703 +box-sizing: border-box !important;
5704 +font-size: 14px !important;
5705 +line-height: 1 !important;
5706 +}
5707 +
5708 +.pagelayer-header-right .pagelayer-ai-topbar-btn:hover,
5709 +.pagelayer-header-right .pagelayer-ai-topbar-btn.active {
5710 +background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
5711 +color: #ffffff !important;
5712 +border-color: transparent !important;
5713 +box-shadow: 0 0 12px rgba(124, 58, 237, 0.5) !important;
5714 +transform: translateY(-1px) !important;
5715 +}
5716 +
5717 +.pagelayer-header-right .pagelayer-ai-topbar-btn i {
5718 +font-size: 14px !important;
5719 +line-height: 1 !important;
5720 +pointer-events: none !important;
5721 +color: inherit !important;
5722 +}
5723 +
5724 +.pagelayer-header-divider {
5725 +width: 1px !important;
5726 +height: 20px !important;
5727 +background-color: rgba(255, 255, 255, 0.1) !important;
5728 +margin: 0 4px !important;
5729 +}
5730 +
5731 +.pagelayer-header-right .pagelayer-update-button {
5732 +width: 76px !important;
5733 +background-color: #2563eb !important;
5734 +color: #ffffff !important;
5735 +border-radius: 6px !important;
5736 +padding: 0 !important;
5737 +font-weight: 600 !important;
5738 +box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2) !important;
5739 +height: 34px !important;
5740 +display: inline-flex !important;
5741 +align-items: center !important;
5742 +justify-content: center !important;
5743 +border: none !important;
5744 +font-size: 13px !important;
5745 +line-height: normal !important;
5746 +transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
5747 +}
5748 +
5749 +.pagelayer-header-right .pagelayer-update-button:hover {
5750 +background-color: #1d4ed8 !important;
5751 +box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
5752 +transform: translateY(-1px) !important;
5753 +}
5754 +
5755 +.pagelayer-header-right .pagelayer-close-button {
5756 +background-color: rgba(255, 255, 255, 0.08) !important;
5757 +color: #a4afb7 !important;
5758 +border: none !important;
5759 +border-radius: 6px !important;
5760 +width: 34px !important;
5761 +height: 34px !important;
5762 +display: inline-flex !important;
5763 +align-items: center !important;
5764 +justify-content: center !important;
5765 +padding: 0 !important;
5766 +cursor: pointer !important;
5767 +transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
5768 +box-sizing: border-box !important;
5769 +}
5770 +
5771 +.pagelayer-header-right .pagelayer-close-button:hover {
5772 +background-color: #ef4444 !important;
5773 +color: #ffffff !important;
5774 +transform: translateY(-1px) !important;
5775 +}
5776 +
5777 +.pagelayer-header-right .pagelayer-close-button i {
5778 +font-size: 14px !important;
5779 +display: block !important;
5780 +margin: 0 !important;
5781 +padding: 0 !important;
5782 +}
5783 +
5784 +
5785 +
5786 +/* Edit Element properties header */
5787 +.pagelayer-elpd-header {
5788 +background: transparent !important;
5789 +border-bottom: none !important;
5790 +height: 100% !important;
5791 +color: #ffffff !important;
5792 +display: flex;
5793 +align-items: center !important;
5794 +justify-content: space-between !important;
5795 +flex: 1 !important;
5796 +margin-left: 25px !important;
5797 +}
5798 +
5799 +.pagelayer-elpd-title {
5800 +color: #ffffff !important;
5801 +font-weight: 700 !important;
5802 +font-size: 14px !important;
5803 +order: 1 !important;
5804 +margin-right: auto !important;
5805 +}
5806 +
5807 +.pagelayer-elpd-close {
5808 +color: #a4afb7 !important;
5809 +cursor: pointer !important;
5810 +font-size: 16px !important;
5811 +order: 2 !important;
5812 +position: static !important;
5813 +transform: none !important;
5814 +transition: color 0.2s !important;
5815 +}
5816 +
5817 +.pagelayer-elpd-close:hover {
5818 +color: #ffffff !important;
5819 +}
5820 +
5821 +/* Segmented Tab Switchers - Flat light grey theme */
5822 +.pagelayer-widget-tabs,
5823 +.pagelayer-elpd-tabs {
5824 +background-color: #f4f5f7 !important;
5825 +border-bottom: 1px solid #eaeaea !important;
5826 +padding: 0 !important;
5827 +gap: 0 !important;
5828 +display: flex !important;
5829 +width: 100% !important;
5830 +}
5831 +
5832 +.pagelayer-elpd-tabs {
5833 +margin-bottom: 12px !important;
5834 +}
5835 +
5836 +.pagelayer-widget-tab,
5837 +.pagelayer-elpd-tab {
5838 +flex: 1 !important;
5839 +text-align: center !important;
5840 +padding: 12px 6px !important;
5841 +font-size: 12px !important;
5842 +font-weight: 600 !important;
5843 +color: #8c9298 !important;
5844 +border-radius: 0 !important;
5845 +border: none !important;
5846 +background: transparent !important;
5847 +box-shadow: none !important;
5848 +cursor: pointer !important;
5849 +border-bottom: 3px solid transparent !important;
5850 +}
5851 +
5852 +.pagelayer-widget-tab:hover,
5853 +.pagelayer-elpd-tab:hover {
5854 +color: #23282d !important;
5855 +background: transparent !important;
5856 +}
5857 +
5858 +/* Active tab style */
5859 +[pagelayer-elpd-active-tab="1"],
5860 +.pagelayer-widget-tab[pagelayer-elpd-active-tab="1"] {
5861 +color: #23282d !important;
5862 +border-bottom: 3px solid #2563eb !important;
5863 +/* Brand indigo line */
5864 +font-weight: 700 !important;
5865 +box-shadow: none !important;
5866 +}
5867 +
5868 +/* Sidebar lists backgrounds */
5869 +.pagelayer-leftbar {
5870 +background: #ffffff !important;
5871 +}
5872 +
5873 +/* Search Area */
5874 +.pagelayer-leftbar-search {
5875 +margin: 15px 15px 5px 15px !important;
5876 +}
5877 +
5878 +.pagelayer-search-field {
5879 +border: 1px solid #d5dadf !important;
5880 +border-radius: 3px !important;
5881 +height: 32px !important;
5882 +font-size: 12px !important;
5883 +padding-left: 28px !important;
5884 +box-shadow: none !important;
5885 +background: #ffffff !important;
5886 +}
5887 +
5888 +.pagelayer-search-field:focus {
5889 +border-color: #2563eb !important;
5890 +box-shadow: none !important;
5891 +}
5892 +
5893 +/* Group headings list */
5894 +.pagelayer-leftbar-group {
5895 +display: grid !important;
5896 +grid-template-columns: repeat(3, 1fr) !important;
5897 +gap: 8px !important;
5898 +padding: 0 15px 15px 15px !important;
5899 +box-sizing: border-box !important;
5900 +clear: both !important;
5901 +}
5902 +
5903 +.pagelayer-leftbar-group h5 {
5904 +grid-column: span 3 !important;
5905 +font-size: 11px !important;
5906 +font-weight: 700 !important;
5907 +letter-spacing: 0.5px !important;
5908 +text-transform: uppercase !important;
5909 +color: #495157 !important;
5910 +background: #f4f5f7 !important;
5911 +margin: 15px -15px 10px -15px !important;
5912 +padding: 8px 15px !important;
5913 +border-top: 1px solid #eaeaea !important;
5914 +border-bottom: 1px solid #eaeaea !important;
5915 +text-align: left !important;
5916 +}
5917 +
5918 +/* Draggable widgets cards - style (3 Columns & Compact) */
5919 +.pagelayer-shortcode-drag {
5920 +width: 100% !important;
5921 +min-width: 0 !important;
5922 +/* Prevents text-nowrap children from expanding grid column width */
5923 +height: 58px !important;
5924 +margin: 0 !important;
5925 +background-color: #ffffff !important;
5926 +border: 1px solid #d5dadf !important;
5927 +border-radius: 4px !important;
5928 +display: flex !important;
5929 +flex-direction: column !important;
5930 +align-items: center !important;
5931 +justify-content: center !important;
5932 +gap: 4px !important;
5933 +box-shadow: none !important;
5934 +box-sizing: border-box !important;
5935 +float: none !important;
5936 +transition: all 0.2s ease !important;
5937 +cursor: grab !important;
5938 +}
5939 +
5940 +.pagelayer-shortcode-drag:hover {
5941 +transform: none !important;
5942 +border-color: #2563eb !important;
5943 +box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
5944 +}
5945 +
5946 +.pagelayer-shortcode {
5947 +font-size: 18px !important;
5948 +color: #a4afb7 !important;
5949 +}
5950 +
5951 +.pagelayer-shortcode-drag:hover .pagelayer-shortcode {
5952 +color: #2563eb !important;
5953 +}
5954 +
5955 +.pagelayer-shortcode-inner {
5956 +margin-bottom: 2px !important;
5957 +}
5958 +
5959 +.pagelayer-shortcode-text {
5960 +font-size: 10px !important;
5961 +color: #556068 !important;
5962 +font-weight: 400 !important;
5963 +white-space: nowrap !important;
5964 +overflow: hidden !important;
5965 +text-overflow: ellipsis !important;
5966 +max-width: 95% !important;
5967 +display: block !important;
5968 +}
5969 +
5970 +.pagelayer-shortcode-drag:hover .pagelayer-shortcode-text {
5971 +color: #2563eb !important;
5972 +}
5973 +
5974 +/* Properties forms, sections and inputs */
5975 +.pagelayer-elpd-section {
5976 +border-bottom: 1px solid #eaeaea !important;
5977 +background: #ffffff !important;
5978 +}
5979 +
5980 +.pagelayer-elpd-section-name {
5981 +background-color: #ffffff !important;
5982 +color: #495157 !important;
5983 +font-weight: 700 !important;
5984 +font-size: 12px !important;
5985 +padding: 12px 15px !important;
5986 +border-bottom: none !important;
5987 +border-radius: 0 !important;
5988 +border-left: none !important;
5989 +box-shadow: none !important;
5990 +transition: background 0.2s !important;
5991 +}
5992 +
5993 +.pagelayer-elpd-section-name:hover {
5994 +background-color: #f7f8f9 !important;
5995 +color: #23282d !important;
5996 +}
5997 +
5998 +.pagelayer-elpd-section-name.pagelayer-elpd-section-open {
5999 +background-color: #f7f8f9 !important;
6000 +color: #23282d !important;
6001 +border-left: none !important;
6002 +border-radius: 0 !important;
6003 +font-weight: 700 !important;
6004 +box-shadow: none !important;
6005 +}
6006 +
6007 +.pagelayer-elpd-section-open+.pagelayer-elpd-section-rows {
6008 +background-color: #ffffff !important;
6009 +border-left: none !important;
6010 +border-right: none !important;
6011 +border-bottom: none !important;
6012 +border-radius: 0 !important;
6013 +padding: 15px 0 !important;
6014 +margin-bottom: 0 !important;
6015 +}
6016 +
6017 +.pagelayer-form-item {
6018 +padding: 6px 16px !important;
6019 +margin-bottom: 10px !important;
6020 +border-bottom: none !important;
6021 +}
6022 +
6023 +.pagelayer-elp-label,
6024 +.pagelayer-widgets-form label {
6025 +font-size: 11px !important;
6026 +color: #6d7882 !important;
6027 +text-transform: uppercase !important;
6028 +font-weight: 700 !important;
6029 +letter-spacing: 0.5px !important;
6030 +margin-bottom: 5px !important;
6031 +}
6032 +
6033 +/* Fields & inputs */
6034 +.pagelayer-elp-text,
6035 +.pagelayer-elp-spinner,
6036 +.pagelayer-elp-textarea,
6037 +.pagelayer-elp-datetime,
6038 +.pagelayer-elpd-body input[type="text"],
6039 +.pagelayer-widgets-form input[type="text"],
6040 +.pagelayer-widgets-form textarea {
6041 +background-color: #ffffff !important;
6042 +border: 1px solid #d5dadf !important;
6043 +border-radius: 3px !important;
6044 +padding: 6px 8px !important;
6045 +font-size: 12px !important;
6046 +color: #23282d !important;
6047 +box-shadow: none !important;
6048 +}
6049 +
6050 +.pagelayer-elp-text,
6051 +.pagelayer-elp-spinner,
6052 +.pagelayer-elp-datetime,
6053 +.pagelayer-elpd-body input[type="text"],
6054 +.pagelayer-widgets-form input[type="text"] {
6055 +height: 30px !important;
6056 +}
6057 +
6058 +.pagelayer-elp-select,
6059 +.pagelayer-widgets-form select {
6060 +background-color: #ffffff !important;
6061 +border: 1px solid #d5dadf !important;
6062 +border-radius: 3px !important;
6063 +padding: 6px 28px 6px 10px !important;
6064 +/* Fixed padding to allow text to show fully with select arrow */
6065 +font-size: 12px !important;
6066 +color: #23282d !important;
6067 +height: 30px !important;
6068 +box-shadow: none !important;
6069 +-webkit-appearance: none !important;
6070 +-moz-appearance: none !important;
6071 +appearance: none !important;
6072 +}
6073 +
6074 +.pagelayer-elp-text:focus,
6075 +.pagelayer-elp-spinner:focus,
6076 +.pagelayer-elpd-body input:focus,
6077 +.pagelayer-widgets-form input:focus,
6078 +.pagelayer-widgets-form textarea:focus,
6079 +.pagelayer-elp-select:focus,
6080 +.pagelayer-widgets-form select:focus {
6081 +border-color: #2563eb !important;
6082 +box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
6083 +outline: none !important;
6084 +}
6085 +
6086 +/* Custom dropdown arrow for select */
6087 +.pagelayer-elp-select,
6088 +.pagelayer-widgets-form select {
6089 +background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236d7882' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E") !important;
6090 +background-position: right 6px center !important;
6091 +background-size: 14px 14px !important;
6092 +}
6093 +
6094 +/* 4-column Spacing/Padding styles */
6095 +.pagelayer-elp-padding-div {
6096 +display: flex !important;
6097 +align-items: center !important;
6098 +gap: 6px !important;
6099 +background: transparent !important;
6100 +}
6101 +
6102 +.pagelayer-elp-padding-inner {
6103 +display: flex !important;
6104 +flex-direction: column !important;
6105 +align-items: center !important;
6106 +flex: 1 !important;
6107 +}
6108 +
6109 +.pagelayer-elp-padding-inner input {
6110 +width: 100% !important;
6111 +text-align: center !important;
6112 +padding: 6px !important;
6113 +border: 1px solid #d5dadf !important;
6114 +border-radius: 3px !important;
6115 +font-size: 12px !important;
6116 +box-sizing: border-box !important;
6117 +height: 28px !important;
6118 +background: #ffffff !important;
6119 +}
6120 +
6121 +.pagelayer-elp-padding-inner input:focus {
6122 +border-color: #2563eb !important;
6123 +outline: none !important;
6124 +}
6125 +
6126 +.pagelayer-elp-padding-lbl {
6127 +font-size: 9px !important;
6128 +text-transform: uppercase !important;
6129 +color: #a4afb7 !important;
6130 +margin-top: 4px !important;
6131 +font-weight: 600 !important;
6132 +}
6133 +
6134 +.pagelayer-elp-padding-div i.pli-link {
6135 +cursor: pointer !important;
6136 +font-size: 13px !important;
6137 +color: #a4afb7 !important;
6138 +padding: 4px !important;
6139 +border: 1px solid #d5dadf !important;
6140 +border-radius: 3px !important;
6141 +background: #ffffff !important;
6142 +display: flex !important;
6143 +align-items: center !important;
6144 +justify-content: center !important;
6145 +height: 28px !important;
6146 +width: 28px !important;
6147 +box-sizing: border-box !important;
6148 +align-self: flex-start !important;
6149 +}
6150 +
6151 +.pagelayer-elp-padding-div i.pagelayer-elp-padding-linked {
6152 +color: #ffffff !important;
6153 +background: #2563eb !important;
6154 +border-color: #2563eb !important;
6155 +}
6156 +
6157 +/* Close bar & toggle tab styling */
6158 +.pagelayer-leftbar-toggle {
6159 +background: #eaeaea !important;
6160 +border: 1px solid #d5dadf !important;
6161 +border-left: none !important;
6162 +border-radius: 0 4px 4px 0 !important;
6163 +color: #556068 !important;
6164 +width: 12px !important;
6165 +font-size: 14px !important;
6166 +line-height: 40px !important;
6167 +top: 50% !important;
6168 +height: 40px !important;
6169 +display: flex !important;
6170 +align-items: center !important;
6171 +justify-content: center !important;
6172 +box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05) !important;
6173 +}
6174 +
6175 +.pagelayer-leftbar-toggle:hover {
6176 +background: #d5dadf !important;
6177 +color: #23282d !important;
6178 +}
6179 +
6180 +/* Radio selectors (Normal/Hover, None/Color/Gradient/Image) */
6181 +.pagelayer-elp-radio-div {
6182 +border: 1px solid #d5dadf !important;
6183 +border-radius: 3px !important;
6184 +overflow: hidden !important;
6185 +background: #ffffff !important;
6186 +display: flex !important;
6187 +}
6188 +
6189 +.pagelayer-elp-radio {
6190 +background: #ffffff !important;
6191 +color: #6d7882 !important;
6192 +border: none !important;
6193 +border-right: 1px solid #d5dadf !important;
6194 +font-size: 11px !important;
6195 +padding: 6px 10px !important;
6196 +font-weight: 500 !important;
6197 +transition: all 0.2s ease !important;
6198 +text-align: center !important;
6199 +flex: 1 !important;
6200 +}
6201 +
6202 +.pagelayer-elp-radio:last-child {
6203 +border-right: none !important;
6204 +}
6205 +
6206 +.pagelayer-elp-radio:hover {
6207 +background-color: #f7f8f9 !important;
6208 +color: #23282d !important;
6209 +}
6210 +
6211 +.pagelayer-elp-radio-active {
6212 +background-color: #556068 !important;
6213 +color: #ffffff !important;
6214 +}
6215 +
6216 +.pagelayer-elp-radio-active:hover {
6217 +background-color: #556068 !important;
6218 +}
6219 +
6220 +/* Sidebar bottom control bar */
6221 +.pagelayer-bottombar-holder {
6222 +background: #26292c !important;
6223 +border-top: 1px solid #1f2124 !important;
6224 +padding: 5px 10px !important;
6225 +height: 35px !important;
6226 +display: flex !important;
6227 +align-items: center !important;
6228 +justify-content: space-between !important;
6229 +box-sizing: border-box !important;
6230 +}
6231 +
6232 +.pagelayer-bottombar-row {
6233 +background: #26292c !important;
6234 +height: 35px !important;
6235 +}
6236 +
6237 +.pagelayer-bottombar-holder button {
6238 +border: none !important;
6239 +padding: 4px 8px !important;
6240 +font-size: 11px !important;
6241 +font-weight: 600 !important;
6242 +border-radius: 3px !important;
6243 +cursor: pointer !important;
6244 +transition: background 0.2s !important;
6245 +}
6246 +
6247 +.pagelayer-bottombar-holder .pagelayer-success-btn {
6248 +background-color: #2563eb !important;
6249 +/* Indigo update button */
6250 +color: #ffffff !important;
6251 +}
6252 +
6253 +.pagelayer-bottombar-holder .pagelayer-success-btn:hover {
6254 +background-color: #1d4ed8 !important;
6255 +}
6256 +
6257 +.pagelayer-bottombar-holder .pagelayer-close-button {
6258 +background-color: transparent !important;
6259 +color: #a4afb7 !important;
6260 +border: 1px solid #495157 !important;
6261 +}
6262 +
6263 +.pagelayer-bottombar-holder .pagelayer-close-button:hover {
6264 +background-color: #373a3c !important;
6265 +color: #ffffff !important;
6266 +}
6267 +
6268 +.pagelayer-bottombar-holder i {
6269 +color: #a4afb7 !important;
6270 +font-size: 13px !important;
6271 +cursor: pointer !important;
6272 +transition: color 0.2s !important;
6273 +}
6274 +
6275 +.pagelayer-bottombar-holder i:hover {
6276 +color: #ffffff !important;
6277 +}
6278 +
6279 +/* ==========================================================================
6280 +STYLE SIDEBAR WIDTH & RESPONSIVE DEVICERS OVERRIDES
6281 +========================================================================== */
6282 +
6283 +/* Custom Sidebar Width (Style: 300px) */
6284 +.pagelayer-leftbar-table {
6285 +width: 300px !important;
6286 +min-width: 300px !important;
6287 +max-width: 300px !important;
6288 +}
6289 +
6290 +.pagelayer-leftbar-table.pagelayer-leftbar-hidden {
6291 +width: 0px !important;
6292 +min-width: 0px !important;
6293 +max-width: 0px !important;
6294 +}
6295 +
6296 +.pagelayer-leftbar-holder {
6297 +width: 300px !important;
6298 +}
6299 +
6300 +.pagelayer-leftbar {
6301 +width: 300px !important;
6302 +max-width: 300px !important;
6303 +}
6304 +
6305 +.pagelayer-leftbar-scroll,
6306 +.pagelayer-leftbar-tab,
6307 +.pagelayer-leftbar-holder .slimScrollDiv {
6308 +width: 100% !important;
6309 +max-width: 100% !important;
6310 +box-sizing: border-box !important;
6311 +}
6312 +
6313 +/* absolute center 3-column topbar alignment */
6314 +.pagelayer-header-left {
6315 +flex: 1 !important;
6316 +display: flex !important;
6317 +align-items: center !important;
6318 +justify-content: flex-end !important;
6319 +padding-right: 24px !important;
6320 +}
6321 +
6322 +.pagelayer-header-center {
6323 +color: #ffffff !important;
6324 +font-size: 14px !important;
6325 +font-weight: 500 !important;
6326 +flex: 1 !important;
6327 +display: flex !important;
6328 +align-items: center !important;
6329 +justify-content: center !important;
6330 +}
6331 +
6332 +.pagelayer-header-right {
6333 +flex: 1 !important;
6334 +display: flex !important;
6335 +align-items: center !important;
6336 +justify-content: flex-end !important;
6337 +gap: 12px !important;
6338 +}
6339 +.pagelayer-header-document-title {
6340 +font-size: 13px !important;
6341 +font-weight: 500 !important;
6342 +color: #94a3b8 !important;
6343 +display: inline-flex !important;
6344 +align-items: center !important;
6345 +}
6346 +
6347 +.pagelayer-header-post-name {
6348 +color: #f8fafc !important;
6349 +font-weight: 600 !important;
6350 +background-color: rgba(255, 255, 255, 0.06) !important;
6351 +border: 1px solid rgba(255, 255, 255, 0.12) !important;
6352 +padding: 4px 10px !important;
6353 +border-radius: 6px !important;
6354 +margin-left: 8px !important;
6355 +font-size: 12.5px !important;
6356 +transition: all 0.2s ease !important;
6357 +}
6358 +
6359 +.pagelayer-header-post-name:hover {
6360 +background-color: rgba(255, 255, 255, 0.12) !important;
6361 +border-color: rgba(255, 255, 255, 0.2) !important;
6362 +}
6363 +
6364 +/* Device Selector Modernization (Style) */
6365 +.pagelayer-device-selectors {
6366 +background-color: transparent !important;
6367 +border: none !important;
6368 +padding: 0 !important;
6369 +border-radius: 0 !important;
6370 +display: flex !important;
6371 +gap: 16px !important;
6372 +align-items: center !important;
6373 +}
6374 +
6375 +.pagelayer-device-selectors .screen-mode {
6376 +font-size: 18px !important;
6377 +padding: 6px !important;
6378 +color: #a4afb7 !important;
6379 +cursor: pointer !important;
6380 +border-radius: 4px !important;
6381 +background-color: transparent !important;
6382 +box-shadow: none !important;
6383 +transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
6384 +position: relative !important;
6385 +display: inline-flex !important;
6386 +align-items: center !important;
6387 +justify-content: center !important;
6388 +}
6389 +
6390 +.pagelayer-device-selectors .screen-mode:hover {
6391 +color: #ffffff !important;
6392 +background-color: transparent !important;
6393 +transform: translateY(-1px) !important;
6394 +}
6395 +
6396 +.pagelayer-device-selectors .screen-mode.active {
6397 +color: #2563eb !important;
6398 +/* Premium Brand Indigo */
6399 +background-color: transparent !important;
6400 +box-shadow: none !important;
6401 +transform: scale(1.15) !important;
6402 +}
6403 +
6404 +/* Accent bottom indicator dot for active screen mode */
6405 +.pagelayer-device-selectors .screen-mode.active::after {
6406 +content: '' !important;
6407 +position: absolute !important;
6408 +bottom: -4px !important;
6409 +left: calc(50% - 2px) !important;
6410 +width: 4px !important;
6411 +height: 4px !important;
6412 +background-color: #2563eb !important;
6413 +border-radius: 50% !important;
6414 +box-shadow: 0 0 4px #2563eb !important;
6415 +}
6416 +
6417 +/* Consistent Checkbox and Radio styling (Brand Indigo) */
6418 +input[type="checkbox"],
6419 +input[type="radio"] {
6420 +accent-color: #2563eb !important;
6421 +}
6422 +
6423 +input[type="checkbox"]:checked,
6424 +input[type="radio"]:checked,
6425 +.pagelayer-post-category input[type="checkbox"]:checked,
6426 +.pagelayer-widgets-form input[type="checkbox"]:checked,
6427 +.pagelayer-elpd-body input[type="checkbox"]:checked {
6428 +background-color: #2563eb !important;
6429 +border-color: #2563eb !important;
6430 +}
6431 +
6432 +/* Consistent Toggle switch checked color (Brand Indigo) */
6433 +input[type="checkbox"].pagelayer-elp-checkbox:checked {
6434 +background-color: #2563eb !important;
6435 +border-color: #2563eb !important;
6436 +}
6437 +
6438 +.pagelayer-dark input[type="checkbox"].pagelayer-elp-checkbox:checked {
6439 +background-color: #2563eb !important;
6440 +border-color: #2563eb !important;
6441 +}
6442 +
6443 +/* Segmented selector active state color override (Brand Indigo) */
6444 +.pagelayer-elp-radio-active,
6445 +.pagelayer-elp-radio-active:hover,
6446 +.pagelayer-dark .pagelayer-elp-radio-active,
6447 +.pagelayer-dark .pagelayer-elp-radio-active:hover {
6448 +background-color: #2563eb !important;
6449 +color: #ffffff !important;
6450 +}
6451 +
6452 +/* ==========================================================================
6453 +DARK MODE
6454 +========================================================================== */
6455 +
6456 +/* Accordion sections and headings */
6457 +.pagelayer-dark .pagelayer-elpd-section {
6458 +border-bottom: 1px solid #1e293b !important;
6459 +background: #0b0f19 !important;
6460 +}
6461 +
6462 +.pagelayer-dark .pagelayer-elpd-section-name {
6463 +background-color: #0b0f19 !important;
6464 +color: #cbd5e1 !important;
6465 +}
6466 +
6467 +.pagelayer-dark .pagelayer-elpd-section-name:hover {
6468 +background-color: #1e293b !important;
6469 +color: #ffffff !important;
6470 +}
6471 +
6472 +.pagelayer-dark .pagelayer-elpd-section-name.pagelayer-elpd-section-open {
6473 +background-color: #1e293b !important;
6474 +color: #ffffff !important;
6475 +}
6476 +
6477 +.pagelayer-dark .pagelayer-elpd-section-open+.pagelayer-elpd-section-rows {
6478 +background-color: #0b0f19 !important;
6479 +}
6480 +
6481 +/* Input elements, Selects, Textareas, and Link buttons */
6482 +.pagelayer-dark .pagelayer-elp-text,
6483 +.pagelayer-dark .pagelayer-elp-spinner,
6484 +.pagelayer-dark .pagelayer-elp-textarea,
6485 +.pagelayer-dark .pagelayer-elpd-body input[type="text"],
6486 +.pagelayer-dark .pagelayer-widgets-form input[type="text"],
6487 +.pagelayer-dark .pagelayer-widgets-form textarea,
6488 +.pagelayer-dark .pagelayer-elp-select,
6489 +.pagelayer-dark .pagelayer-widgets-form select,
6490 +.pagelayer-dark .pagelayer-elp-padding-inner input,
6491 +.pagelayer-dark .pagelayer-elp-padding-div i.pli-link {
6492 +color: #f8fafc !important;
6493 +}
6494 +
6495 +/* Form labels text color */
6496 +.pagelayer-dark .pagelayer-elp-label,
6497 +.pagelayer-dark .pagelayer-widgets-form label {
6498 +color: #94a3b8 !important;
6499 +}
6500 +
6501 +/* Segmented selectors container & inactive buttons */
6502 +.pagelayer-dark .pagelayer-elp-radio-div {
6503 +border: 1px solid #334155 !important;
6504 +background: #131926 !important;
6505 +}
6506 +
6507 +.pagelayer-dark .pagelayer-elp-radio {
6508 +border-right: 1px solid #334155 !important;
6509 +}
6510 +
6511 +.pagelayer-dark .pagelayer-elp-radio:last-child {
6512 +border-right: none !important;
6513 +}
6514 +
6515 +.pagelayer-dark .pagelayer-elp-radio:hover {
6516 +background-color: #1e293b !important;
6517 +color: #ffffff !important;
6518 +}
6519 +
6520 +/* Active tab text color */
6521 +.pagelayer-dark [pagelayer-elpd-active-tab="1"],
6522 +.pagelayer-dark .pagelayer-widget-tab[pagelayer-elpd-active-tab="1"] {
6523 +color: #ffffff !important;
6524 +}
6525 +
6526 +/* Force hidden elements to be display none even if stylesheet has display important */
6527 +.pagelayer-leftbar-group[style*="display: none"],
6528 +.pagelayer-leftbar-group[style*="display:none"],
6529 +.pagelayer-shortcode-drag[style*="display: none"],
6530 +.pagelayer-shortcode-drag[style*="display:none"] {
6531 +display: none !important;
6532 +}
6533 +
6534 +/* Fix desktop screen selector position to sit inline with label */
6535 +.pagelayer-elp-label-div,
6536 +.pagelayer-elp-link-label-div {
6537 +display: flex !important;
6538 +align-items: center !important;
6539 +gap: 6px !important;
6540 +}
6541 +
6542 +.pagelayer-elp-label-div .pagelayer-elp-label,
6543 +.pagelayer-elp-link-label-div .pagelayer-elp-link-label {
6544 +display: inline-block !important;
6545 +width: auto !important;
6546 +vertical-align: middle !important;
6547 +margin-bottom: 0 !important;
6548 +}
6549 +
6550 +.pagelayer-elp-label-div .pagelayer-elp-units,
6551 +.pagelayer-elp-link-label-div .pagelayer-elp-units {
6552 +margin-left: auto !important;
6553 +}
6554 +
6555 +/* Fix textarea height in sidebar */
6556 +.pagelayer-elp-textarea,
6557 +.pagelayer-widgets-form textarea {
6558 +height: 100px;
6559 +min-height: 50px;
6560 +resize: vertical;
6561 +}
6562 +
6563 +/* Fix restore/revert default icon position to sit inline next to the label text */
6564 +.pagelayer-elp-label-div,
6565 +.pagelayer-elp-link-label-div {
6566 +position: relative !important;
6567 +display: flex !important;
6568 +width: 100% !important;
6569 +align-items: center !important;
6570 +flex-wrap: nowrap !important;
6571 +gap: 6px !important;
6572 +}
6573 +
6574 +.pagelayer-elp-typo .pagelayer-elp-label {
6575 +position: relative !important;
6576 +display: inline-flex !important;
6577 +align-items: center !important;
6578 +flex-wrap: wrap !important;
6579 +gap: 6px !important;
6580 +}
6581 +
6582 +.pagelayer-elp-default,
6583 +.pagelayer-typo-default {
6584 +position: relative !important;
6585 +display: none !important;
6586 +align-items: center !important;
6587 +justify-content: center !important;
6588 +margin: 0 !important;
6589 +cursor: pointer !important;
6590 +top: 0 !important;
6591 +left: 0 !important;
6592 +right: 0 !important;
6593 +width: auto !important;
6594 +height: auto !important;
6595 +z-index: 5 !important;
6596 +}
6597 +
6598 +.pagelayer-form-item:hover .pagelayer-elp-default[data_show=true],
6599 +.pagelayer-base-control:hover .pagelayer-elp-default[data_show=true] {
6600 +display: inline-flex !important;
6601 +}
6602 +
6603 +.pagelayer-elp-default i,
6604 +.pagelayer-typo-default i {
6605 +font-size: 11px !important;
6606 +color: #64748b !important;
6607 +transition: color 0.15s ease !important;
6608 +}
6609 +
6610 +.pagelayer-elp-default:hover i,
6611 +.pagelayer-typo-default:hover i {
6612 +color: #2563eb !important;
6613 +}
6614 +
6615 +/* Dark mode colors for restore/revert default icons */
6616 +.pagelayer-dark .pagelayer-elp-default i,
6617 +.pagelayer-dark .pagelayer-typo-default i {
6618 +color: #94a3b8 !important;
6619 +}
6620 +
6621 +.pagelayer-dark .pagelayer-elp-default:hover i,
6622 +.pagelayer-dark .pagelayer-typo-default:hover i {
6623 +color: #3b82f6 !important;
6624 +}
6625 +
6626 +/* Active state for topbar header icon wraps */
6627 +.pagelayer-header-icon-wrap.active {
6628 +background-color: rgba(59, 130, 246, 0.2) !important;
6629 +color: #3b82f6 !important;
6630 +}
6631 +
6632 +.pagelayer-dark .pagelayer-header-icon-wrap.active {
6633 +background-color: rgba(96, 165, 250, 0.2) !important;
6634 +color: #60a5fa !important;
6635 +}
6636 +
6637 +/* Right sidebar panel for Navigator and History */
6638 +.pagelayer-right-sidebar {
6639 +position: fixed !important;
6640 +right: -300px;
6641 +top: 0px !important;
6642 +bottom: 0;
6643 +width: 300px;
6644 +background: #ffffff !important;
6645 +border-left: 1px solid #cbd5e1 !important;
6646 +box-shadow: -4px 0 15px rgba(0, 0, 0, 0.08) !important;
6647 +z-index: 9999 !important;
6648 +display: flex !important;
6649 +flex-direction: column !important;
6650 +transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
6651 +font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
6652 +}
6653 +
6654 +.pagelayer-right-sidebar-header {
6655 +display: flex !important;
6656 +align-items: center !important;
6657 +justify-content: space-between !important;
6658 +padding: 0 15px !important;
6659 +border-bottom: 1px solid #1f2124 !important;
6660 +background: #26292c !important; /* matches left sidebar header topbar background */
6661 +height: 50px !important; /* matches left sidebar header topbar height */
6662 +box-sizing: border-box !important;
6663 +}
6664 +
6665 +.pagelayer-right-sidebar-title {
6666 +margin: 0 !important;
6667 +font-size: 14px !important;
6668 +font-weight: 600 !important;
6669 +color: #ffffff !important;
6670 +}
6671 +
6672 +.pagelayer-right-sidebar-close {
6673 +background: transparent !important;
6674 +border: none !important;
6675 +font-size: 16px !important;
6676 +cursor: pointer !important;
6677 +color: #a4afb7 !important;
6678 +padding: 4px !important;
6679 +line-height: 1 !important;
6680 +display: flex !important;
6681 +align-items: center !important;
6682 +justify-content: center !important;
6683 +outline: none !important;
6684 +}
6685 +
6686 +.pagelayer-right-sidebar-close:hover {
6687 +color: #ffffff !important;
6688 +}
6689 +
6690 +.pagelayer-right-sidebar-content {
6691 +flex: 1 !important;
6692 +overflow-y: auto !important;
6693 +padding: 0 !important;
6694 +position: relative !important;
6695 +}
6696 +
6697 +/* Ensure inside containers are correctly displayed */
6698 +.pagelayer-right-sidebar #pagelayer-navigator,
6699 +.pagelayer-right-sidebar #pagelayer-history {
6700 +position: static !important;
6701 +height: 100% !important;
6702 +background: transparent !important;
6703 +}
6704 +
6705 +.pagelayer-right-sidebar .pagelayer-leftbar-prop-body {
6706 +padding: 12px !important;
6707 +}
6708 +
6709 +.pagelayer-right-sidebar .pagelayer-history-body {
6710 +height: calc(100% - 40px) !important;
6711 +overflow-y: auto !important;
6712 +}
6713 +
6714 +/* Dark mode overrides */
6715 +.pagelayer-dark.pagelayer-right-sidebar {
6716 +background: #1c1c1f !important;
6717 +border-left-color: #1c1c1f !important;
6718 +color: #ffffff !important;
6719 +}
6720 +
6721 +.pagelayer-dark.pagelayer-right-sidebar .pagelayer-right-sidebar-header {
6722 +background: #0b0f19 !important;
6723 +border-bottom-color: #1e293b !important;
6724 +}
6725 +
6726 +.pagelayer-dark.pagelayer-right-sidebar .pagelayer-right-sidebar-title {
6727 +color: #ffffff !important;
6728 +}
6729 +
6730 +.pagelayer-dark.pagelayer-right-sidebar .pagelayer-right-sidebar-close {
6731 +color: #94a3b8 !important;
6732 +}
6733 +
6734 +.pagelayer-dark.pagelayer-right-sidebar .pagelayer-right-sidebar-close:hover {
6735 +color: #ffffff !important;
6736 +}
6737 +
6738 +/* Adjust Editor section when Right Sidebar is active */
6739 +.pagelayer-iframe {
6740 +transition: padding-right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
6741 +}
6742 +
6743 +.pagelayer-right-sidebar-open .pagelayer-iframe {
6744 +padding-right: 300px !important;
6745 +}
6746 +/* Custom premium input/select/textarea styling inside Sidebar tabs (including Post Settings, Properties, etc.) */
6747 +.pagelayer-leftbar-holder textarea,
6748 +.pagelayer-leftbar-holder select,
6749 +.pagelayer-leftbar-holder input[type="text"],
6750 +.pagelayer-leftbar-holder input[type="search"],
6751 +.pagelayer-leftbar-holder input[type="email"],
6752 +.pagelayer-leftbar-holder input[type="tel"],
6753 +.pagelayer-leftbar-holder input[type="url"],
6754 +.pagelayer-leftbar-holder input:not([type]) {
6755 +border: 1px solid #cbd5e1 !important;
6756 +border-radius: 6px !important;
6757 +background-color: #ffffff !important;
6758 +color: #0f172a !important;
6759 +font-size: 13px !important;
6760 +transition: all 0.2s ease !important;
6761 +box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
6762 +width: 100% !important;
6763 +box-sizing: border-box !important;
6764 +outline: none !important;
6765 +}
6766 +
6767 +.pagelayer-leftbar-holder textarea:focus,
6768 +.pagelayer-leftbar-holder select:focus,
6769 +.pagelayer-leftbar-holder input[type="text"]:focus,
6770 +.pagelayer-leftbar-holder input[type="search"]:focus,
6771 +.pagelayer-leftbar-holder input[type="number"]:focus,
6772 +.pagelayer-leftbar-holder input[type="email"]:focus,
6773 +.pagelayer-leftbar-holder input[type="tel"]:focus,
6774 +.pagelayer-leftbar-holder input[type="url"]:focus,
6775 +.pagelayer-leftbar-holder input:not([type]):focus {
6776 +border-color: #2563eb !important;
6777 +box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
6778 +}
6779 +
6780 +.pagelayer-dark .pagelayer-leftbar-holder textarea,
6781 +.pagelayer-dark .pagelayer-leftbar-holder select,
6782 +.pagelayer-dark .pagelayer-leftbar-holder input[type="text"],
6783 +.pagelayer-dark .pagelayer-leftbar-holder input[type="search"],
6784 +.pagelayer-dark .pagelayer-leftbar-holder input[type="number"],
6785 +.pagelayer-dark .pagelayer-leftbar-holder input[type="email"],
6786 +.pagelayer-dark .pagelayer-leftbar-holder input[type="tel"],
6787 +.pagelayer-dark .pagelayer-leftbar-holder input[type="url"],
6788 +.pagelayer-dark .pagelayer-leftbar-holder input:not([type]) {
6789 +border-color: #334155 !important;
6790 +background-color: #131926 !important;
6791 +color: #f8fafc !important;
6792 +}
6793 +
6794 +.pagelayer-dark .pagelayer-leftbar-holder textarea:focus,
6795 +.pagelayer-dark .pagelayer-leftbar-holder select:focus,
6796 +.pagelayer-dark .pagelayer-leftbar-holder input[type="text"]:focus,
6797 +.pagelayer-dark .pagelayer-leftbar-holder input[type="search"]:focus,
6798 +.pagelayer-dark .pagelayer-leftbar-holder input[type="number"]:focus,
6799 +.pagelayer-dark .pagelayer-leftbar-holder input[type="email"]:focus,
6800 +.pagelayer-dark .pagelayer-leftbar-holder input[type="tel"]:focus,
6801 +.pagelayer-dark .pagelayer-leftbar-holder input[type="url"]:focus,
6802 +.pagelayer-dark .pagelayer-leftbar-holder input:not([type]):focus {
6803 +border-color: #2563eb !important;
6804 +box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
6805 +}
6806 +
6807 +/* Search field padding and icon alignment fixes */
6808 +.pagelayer-leftbar-holder input.pagelayer-search-field {
6809 +padding: 6px 28px 6px 32px !important;
6810 +height: 32px !important;
6811 +border: 1px solid #cbd5e1 !important;
6812 +border-radius: 6px !important;
6813 +background-color: #ffffff !important;
6814 +color: #0f172a !important;
6815 +font-size: 13px !important;
6816 +box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
6817 +width: 100% !important;
6818 +box-sizing: border-box !important;
6819 +outline: none !important;
6820 +}
6821 +
6822 +.pagelayer-dark .pagelayer-leftbar-holder input.pagelayer-search-field {
6823 +border-color: #334155 !important;
6824 +background-color: #1e293b !important;
6825 +color: #f8fafc !important;
6826 +}
6827 +
6828 +.pagelayer-leftbar-search .pli-search {
6829 +left: 10px !important;
6830 +line-height: 32px !important;
6831 +height: 32px !important;
6832 +color: #94a3b8 !important;
6833 +font-size: 14px !important;
6834 +position: absolute !important;
6835 +top: 0 !important;
6836 +display: flex !important;
6837 +align-items: center !important;
6838 +}
6839 +
6840 +.pagelayer-leftbar-search .pagelayer-sf-empty {
6841 +right: 10px !important;
6842 +line-height: 32px !important;
6843 +height: 32px !important;
6844 +color: #94a3b8 !important;
6845 +font-size: 14px !important;
6846 +position: absolute !important;
6847 +top: 0 !important;
6848 +display: flex !important;
6849 +align-items: center !important;
6850 +cursor: pointer !important;
6851 +transition: color 0.15s ease !important;
6852 +}
6853 +
6854 +.pagelayer-leftbar-search .pagelayer-sf-empty:hover {
6855 +color: #2563eb !important;
6856 +}
6857 +
6858 +/* Fix device icon overlapping/showing on top of select and input fields */
6859 +.pagelayer-elp-screen {
6860 +flex-shrink: 0 !important;
6861 +}
6862 +
6863 +.pagelayer-form-item:has(.pagelayer-elp-select-div) .pagelayer-elp-label-div,
6864 +.pagelayer-form-item:has(.pagelayer-elp-spinner-div) .pagelayer-elp-label-div,
6865 +.pagelayer-form-item:has(.pagelayer-elp-color-div-holder) .pagelayer-elp-label-div,
6866 +.pagelayer-form-item:has(.pagelayer-elp-color-div) .pagelayer-elp-label-div,
6867 +.pagelayer-base-control:has(.pagelayer-elp-select-div) .pagelayer-elp-label-div,
6868 +.pagelayer-base-control:has(.pagelayer-elp-spinner-div) .pagelayer-elp-label-div,
6869 +.pagelayer-base-control:has(.pagelayer-elp-color-div-holder) .pagelayer-elp-label-div,
6870 +.pagelayer-base-control:has(.pagelayer-elp-color-div) .pagelayer-elp-label-div {
6871 +max-width: 45% !important;
6872 +flex-wrap: wrap !important;
6873 +padding-right: 10px !important;
6874 +box-sizing: border-box !important;
6875 +}
6876 +
6877 +/* Fix: undo icon overlapping the icon picker select box */
6878 +.pagelayer-form-item:has(.pagelayer-elp-icon-div) .pagelayer-elp-label-div,
6879 +.pagelayer-base-control:has(.pagelayer-elp-icon-div) .pagelayer-elp-label-div{
6880 +max-width: 45% !important;
6881 +flex-wrap: wrap !important;
6882 +padding-right: 20px !important;
6883 +box-sizing: border-box !important;
6884 +}
6885 +
6886 +.pagelayer-elp-typo {
6887 +display: flex !important;
6888 +align-items: center !important;
6889 +justify-content: space-between !important;
6890 +flex-wrap: wrap !important;
6891 +}
6892 +
6893 +.pagelayer-elp-typo .pagelayer-elp-label {
6894 +width: 48% !important;
6895 +max-width: 48% !important;
6896 +display: flex !important;
6897 +align-items: center !important;
6898 +flex-wrap: wrap !important;
6899 +gap: 6px !important;
6900 +margin-bottom: 0 !important;
6901 +padding-right: 8px !important;
6902 +box-sizing: border-box !important;
6903 +}
6904 +
6905 +.pagelayer-elp-typo .pagelayer-elp-typo-input {
6906 +width: 48% !important;
6907 +max-width: 48% !important;
6908 +}
6909 +
6910 +/* Fix link input field and gear icon alignment to form a unified input group */
6911 +.pagelayer-elp-link-div {
6912 +display: flex !important;
6913 +align-items: stretch !important;
6914 +flex-wrap: wrap !important;
6915 +width: 100% !important;
6916 +}
6917 +
6918 +.pagelayer-elp-link-div input.pagelayer-elp-link {
6919 +flex: 1 1 auto !important;
6920 +width: 0 !important;
6921 +height: 32px !important;
6922 +border: 1px solid #cbd5e1 !important;
6923 +border-right: none !important;
6924 +border-radius: 4px 0 0 4px !important;
6925 +box-sizing: border-box !important;
6926 +padding: 6px 10px !important;
6927 +font-size: 13px !important;
6928 +background-color: #fff !important;
6929 +margin: 0 !important;
6930 +}
6931 +
6932 +.pagelayer-dark .pagelayer-elp-link-div input.pagelayer-elp-link {
6933 +background-color: #252529 !important;
6934 +border-color: #475569 !important;
6935 +color: #cbd5e1 !important;
6936 +}
6937 +
6938 +.pagelayer-elp-link-div i.pagelayer-elp-link-icon {
6939 +flex: 0 0 auto !important;
6940 +width: 36px !important;
6941 +height: 32px !important;
6942 +border: 1px solid #cbd5e1 !important;
6943 +border-radius: 0 4px 4px 0 !important;
6944 +box-sizing: border-box !important;
6945 +background-color: #f8fafc !important;
6946 +color: #64748b !important;
6947 +cursor: pointer !important;
6948 +display: flex !important;
6949 +align-items: center !important;
6950 +justify-content: center !important;
6951 +margin: 0 !important;
6952 +position: static !important;
6953 +font-size: 14px !important;
6954 +line-height: normal !important;
6955 +transition: background-color 0.15s ease, color 0.15s ease !important;
6956 +}
6957 +
6958 +.pagelayer-elp-link-div i.pagelayer-elp-link-icon:hover {
6959 +background-color: #f1f5f9 !important;
6960 +color: #2563eb !important;
6961 +}
6962 +
6963 +.pagelayer-dark .pagelayer-elp-link-div i.pagelayer-elp-link-icon {
6964 +background-color: #1e1e24 !important;
6965 +border-color: #475569 !important;
6966 +color: #94a3b8 !important;
6967 +}
6968 +
6969 +.pagelayer-dark .pagelayer-elp-link-div i.pagelayer-elp-link-icon:hover {
6970 +background-color: #2d2d34 !important;
6971 +color: #3b82f6 !important;
6972 +}
6973 +
6974 +.pagelayer-elp-link-no-addons > .pagelayer-elp-link {
6975 +border-radius: 4px !important;
6976 +border-right: 1px solid #cbd5e1 !important;
6977 +}
6978 +
6979 +.pagelayer-dark .pagelayer-elp-link-no-addons > .pagelayer-elp-link {
6980 +border-right-color: #475569 !important;
6981 +}
6982 +
6983 +.pagelayer-elp-link-div .pagelayer-elp-link-addons {
6984 +width: 100% !important;
6985 +margin-right: 0 !important;
6986 +}
6987 +
6988 +.pagelayer-elp-link-div .pagelayer-elp-link-list {
6989 +width: 100% !important;
6990 +}
6991 +
6992 +/* Match sidebar top header section and bottombar section background in dark mode */
6993 +.pagelayer-dark td.pagelayer-topbar-holder,
6994 +.pagelayer-dark .pagelayer-bottombar-row {
6995 +background: #0b0f19 !important;
6996 +}
6997 +
6998 +.pagelayer-dark td.pagelayer-topbar-holder {
6999 +border-bottom: 1px solid #1e293b !important;
7000 +}
7001 +
7002 +.pagelayer-dark .pagelayer-bottombar-holder {
7003 +border-top: 1px solid #1e293b !important;
7004 +background: #0b0f19 !important;
7005 +}
7006 +
7007 +/* Sidebar fields alignment and symmetric padding */
7008 +.pagelayer-elpd-section-open+.pagelayer-elpd-section-rows {
7009 +padding: 16px 0 !important;
7010 +box-sizing: border-box !important;
7011 +}
7012 +
7013 +.pagelayer-elpd-section-rows .pagelayer-form-item {
7014 +padding: 8px 16px 8px 12px !important;
7015 +box-sizing: border-box !important;
7016 +width: 100% !important;
7017 +}
7018 +
7019 +.pagelayer-elpd-section-rows .pagelayer-elp-select-div,
7020 +.pagelayer-elpd-section-rows .pagelayer-elp-spinner-div,
7021 +.pagelayer-elpd-section-rows .pagelayer-elp-checkbox-div,
7022 +.pagelayer-elpd-section-rows .pagelayer-elp-color-div-holder,
7023 +.pagelayer-elpd-section-rows .pagelayer-elp-color-div {
7024 +right: 16px !important;
7025 +}
7026 +
7027 +.pagelayer-elpd-section-name {
7028 +margin-top: 0 !important;
7029 +}
7030 +
7031 +/* Global Tab widgets list - styled to match standard widgets tab (3 columns, same box size) */
7032 +#pagelayer-global-widget {
7033 +display: grid !important;
7034 +grid-template-columns: repeat(3, 1fr) !important;
7035 +gap: 8px !important;
7036 +padding: 0 15px 15px 15px !important;
7037 +box-sizing: border-box !important;
7038 +}
7039 +
7040 +#pagelayer-global-widget > .pagelayer-global-widget-shortcodes{
7041 +grid-column: span 3 !important;
7042 +margin-left: -15px !important;
7043 +margin-right: -15px !important;
7044 +}
7045 +
7046 +#pagelayer-global-widget > .pagelayer-leftbar-group{
7047 +grid-column: span 3 !important;
7048 +margin-left: -15px !important;
7049 +margin-right: -15px !important;
7050 +}
7051 +
7052 +#pagelayer-global-widget > .pagelayer-global-widget-pro{
7053 +grid-column: span 3 !important;
7054 +}