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 +4934 -250 1.0.4 → 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{
@@ -288,8 +290,9 @@
288 290 bottom:100%;
289 291 color:#fff;
290 292 background-color: #3e8ef7;
291 293 display:none;
294 +z-index:1;
292 295 }
293 296
294 297 .pagelayer-leftbar-toggle-h{
295 298 width:0px;
@@ -320,8 +323,12 @@
320 323 }
321 324
322 325 .pagelayer-rightbar .pagelayer-leftbar-toggle{
323 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{
324 331 direction: rtl;
325 332 }
326 333
327 334 .pagelayer-leftbar-toggle:hover{
@@ -335,8 +342,9 @@
335 342 top: 0;
336 343 bottom: 0;
337 344 left: 0;
338 345 right: 0;
346 +border-right: 1px solid #c9d0d9;
339 347 }
340 348
341 349 /*.pagelayer-body-table{
342 350 max-height: 100vh !important;
@@ -341,10 +349,9 @@
341 349 /*.pagelayer-body-table{
342 350 max-height: 100vh !important;
343 351 }*/
344 352
345 -.pagelayer-iframe{
346 -}
353 +.pagelayer-iframe {}
347 354
348 355 .pagelayer-iframe-holder{
349 356 max-height: 100vh !important;
350 357 height: 100%;
@@ -387,14 +394,11 @@
387 394 top: 22px !important;
388 395 left: 0px !important;
389 396 }
390 397
391 -.pagelayer-screen-desktop{
398 +.pagelayer-screen-desktop {}
392 399
393 -}
394 -
395 400 .pagelayer-screen-tablet{
396 -width:768px;
397 401 height:900px;
398 402 margin:20px auto;
399 403 border: solid #444;
400 404 border-width: 30px 10px;
@@ -401,9 +405,8 @@
401 405 border-radius: 10px;
402 406 }
403 407
404 408 .pagelayer-screen-mobile{
405 -width:360px;
406 409 height:540px;
407 410 margin:20px auto;
408 411 border: solid #444;
409 412 border-width: 30px 10px;
@@ -411,9 +414,9 @@
411 414 }
412 415
413 416 /* Element Properties Dialog classes */
414 417 [class^="pagelayer-elp"]{
415 -font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
418 +font-family: Roboto, 'Open Sans', Arial, Helvetica, sans-serif !important;
416 419 color: #313439;
417 420 background-color: transparent;
418 421 }
419 422
@@ -422,8 +425,12 @@
422 425 color:#444;
423 426 border: 1px solid #d3d3d3;
424 427 }
425 428
429 +.pagelayer-dark #pagelayer-elpd {
430 +border: 1px solid #252529;
431 +}
432 +
426 433 #pagelayer-elpd .slimScrollDiv{
427 434 height: calc(100% - 50px) !important;
428 435 }
429 436
@@ -437,19 +444,20 @@
437 444 padding:0px;
438 445 cursor: move;
439 446 color: #fff;
440 447 font-weight: 600;
448 +width:76%;
441 449 }
442 450
443 451 .pagelayer-elpd-close {
444 -float:right;
445 452 padding-right:10px;
446 453 cursor: pointer;
447 454 margin: 0px;
448 -position: relative;
455 +position: absolute;
449 456 right: 5px;
450 457 color: #fff;
451 -font-weight: 600;
458 +top: 50%;
459 +transform: translateY(-50%);
452 460 }
453 461
454 462 .pagelayer-elpd-body{
455 463 border: none;
@@ -459,24 +467,45 @@
459 467 background-color: #FFF;
460 468 border-top: 1px solid #d3d3d3;
461 469 }
462 470
471 +.pagelayer-dark .pagelayer-elpd-section-rows{
472 +background-color: #1c1c1f;
473 +border-top: 1px solid #1c1c1f;
474 +}
475 +
463 476 .pagelayer-elpd-section-name{
464 477 margin-top: 10px;
465 478 padding: 11px 10px;
466 479 background-color: #FFF;
467 -font-size: 12px;
480 +font-size: 13px;
468 481 font-weight: bold;
469 -color: #666;
482 +color: #555;
470 483 cursor: pointer;
471 484 transition: all 0.3s;
472 485 }
473 486
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 +
474 495 .pagelayer-elpd-section-name:hover,
475 496 .pagelayer-elpd-section-open{
476 -color:#000000;
497 +color:#1a7fb0;
477 498 }
478 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 +
479 508 .pagelayer-elpd-section-name:not(.pagelayer-elpd-section-open) .pli:before,
480 509 .pagelayer-navigator-toggle .pagalayer-arrow:before{
481 510 content: "\f0da";
482 511 font-family: pagelayer;
@@ -495,9 +524,10 @@
495 524
496 525 /* Pagelayer editor panel tabs*/
497 526
498 527 .pagelayer-elpd-tab,
499 -.pagelayer-history-tab{
528 +.pagelayer-history-tab,
529 +.pagelayer-widget-tab{
500 530 display: inline-block;
501 531 font-size: 13px;
502 532 cursor: pointer;
503 533 padding: 10px 6px;
@@ -503,8 +533,23 @@
503 533 padding: 10px 6px;
504 534 margin: 0px 5px 0px 0px;
505 535 }
506 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 +
507 552 .pagelayer-elpd-settings-body{
508 553 display: none;
509 554 }
510 555
@@ -540,22 +585,47 @@
540 585 }
541 586
542 587 [pagelayer-elpd-active-tab="1"],
543 588 [pagelayer-history-active-tab="1"] {
544 -color: #3e8ef7;
589 +color: #2563eb;
590 +border-bottom: 2px solid #2563eb;
545 591 }
546 592
593 +.pagelayer-dark [pagelayer-elpd-active-tab="1"],
594 +.pagelayer-dark [pagelayer-history-active-tab="1"]{
595 +color: #ffffff;
596 +}
597 +
547 598 .pagelayer-elpd-tabs,
548 -.pagelayer-history-tabs {
599 +.pagelayer-history-tabs,
600 +.pagelayer-widget-tabs {
549 601 background-color: #fff;
550 602 border-bottom: 1px solid #d3d3d3;
551 603 }
552 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 +
553 613 .pagelayer-elpd-tabs{
554 614 display: flex;
555 615 align-items: center;
556 616 }
557 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 +
558 628 .pagelayer-elpd-options{
559 629 text-align:right;
560 630 display:inline-block;
561 631 margin-right:10px;
@@ -565,8 +635,16 @@
565 635 padding:4px 5px;
566 636 cursor:pointer;
567 637 }
568 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 +
569 647 .pagelayer-form-item {
570 648 border-bottom: 1px dashed #e6e6e6;
571 649 padding: 10px 8px 10px 6px;
572 650 margin-bottom: 0px;
@@ -572,14 +650,39 @@
572 650 margin-bottom: 0px;
573 651 position: relative;
574 652 }
575 653
576 -.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{
577 676 padding:4px 0px 4px 0px;
578 677 position:relative;
579 678 }
580 679
581 -.pagelayer-elp-label{
680 +.pagelayer-elp-label-div[type=select]{
681 +width:50%;
682 +}
683 +
684 +.pagelayer-elp-label, .pagelayer-elp-link-label{
582 685 display: inline-block;
583 686 color: #555;
584 687 font-size: 12px;
585 688 line-height: 150%;
@@ -584,8 +687,16 @@
584 687 font-size: 12px;
585 688 line-height: 150%;
586 689 }
587 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 +
588 699 .pagelayer-elp-heading{
589 700 font-size: 13px;
590 701 font-weight:600;
591 702 line-height: 150%;
@@ -609,8 +720,13 @@
609 720 line-height: 30px;
610 721 transition-duration: 0.1s;
611 722 }
612 723
724 +.pagelayer-dark .pagelayer-elp-screen .pli{
725 +color:#bdbdbd;
726 +}
727 +
728 +
613 729 .pagelayer-elp-screen .pli-desktop:not(.pagelayer-prop-screen),
614 730 .pagelayer-elp-screen .pli-tablet:not(.pagelayer-prop-screen),
615 731 .pagelayer-elp-screen .pli-mobile:not(.pagelayer-prop-screen){
616 732 position: absolute;
@@ -621,8 +737,14 @@
621 737 background:#aaaaaa;
622 738 color:#ffffff;
623 739 }
624 740
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;
745 +}
746 +
625 747 .pagelayer-elp-screen .pli-desktop.open{
626 748 transform: rotate(-90deg) translate(30px, -27px) rotate(90deg);
627 749 transition-delay: 0s;
628 750 top:-5px;
@@ -658,15 +780,21 @@
658 780 line-height: 20px;
659 781 }
660 782
661 783 .pagelayer-elp-screen .pli:not(.pagelayer-prop-screen):hover{
662 -background-color: #3E8EF7;
784 +background-color: #2563eb;
663 785 }
664 786
665 -.pagelayer-elp-screen .pagelayer-prop-screen:hover{
666 -color: #3E8EF7;
787 +.pagelayer-dark .pagelayer-elp-screen .pli:not(.pagelayer-prop-screen):hover{
788 +background-color: #2563eb;
667 789 }
668 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 +
669 797 .pagelayer-elp-units{
670 798 display: inline-block;
671 799 float:right;
672 800 padding-top:4px;
@@ -677,18 +805,46 @@
677 805 font-size:12px;
678 806 cursor: pointer;
679 807 }
680 808
809 +.pagelayer-dark .pagelayer-elp-units span{
810 +color:#bdbdbd;
811 +}
812 +
681 813 .pagelayer-elp-units span[selected] {
682 814 color: #3e8ef7;
683 815 }
684 816
685 -.pagelayer-elp-desc{
686 -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;
687 841 font-size: 12px;
688 842 line-height: 20px;
689 843 font-style: italic;
690 844 margin-top: 5px;
845 +display:block;
846 +word-break: break-word;
691 847 }
692 848
693 849 .pagelayer-elpd-body input,
694 850 .pagelayer-elpd-body textarea,
@@ -698,50 +854,241 @@
698 854 font-size: 13px !important;
699 855 color: #666;
700 856 border-radius: unset;
701 857 border:1px solid #CCC;
702 -line-height: 26px;
703 858 width: 100%;
704 859 }
705 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 +
706 884 .pagelayer-elpd-body input:focus,
707 885 .pagelayer-elpd-body textarea:focus,
708 886 .pagelayer-elpd-body select:focus{
709 -border-color: #00A0D2;
710 -box-shadow: 0 0 1px #00A0D2 inset;
887 +border-color: #2563eb;
888 +box-shadow: 0 0 1px #2563eb inset;
711 889 }
712 890
713 891 .pagelayer-elp-button{
714 -text-transform: unset;
715 -border: 1px solid #00A0D2;
716 -font-weight: unset;
717 -font-size: 12px;
718 -padding: 12px 10px;
719 -min-height: unset;
720 -background-color: #3e8ef7;
721 -color: #fff;
722 -transition: all 0.3s;
723 -border-radius: unset;
724 -border-radius: 2px;
725 -padding: 10px 15px;
726 -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;
727 905 }
728 906
729 907 .pagelayer-elp-button:hover{
730 -background-color: #3e8ef7bf;
731 -border-color: #00A0D2;
908 +background-color: #1d4ed8 !important;
909 +border-color: #1d4ed8 !important;
732 910 }
733 911
734 -.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{
735 929 padding:7px;
736 930 width:90%;
737 931 margin:5px auto;
738 932 height:150px;
739 -border: 1px solid #d5dadf;
740 933 position:relative;
741 -border: 1px solid #3e8ef7;
934 +border: 1px solid #2563eb;
742 935 }
743 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 +
744 1091 .pagelayer-elp-image{
745 1092 height: 100%;
746 1093 -webkit-background-size: cover;
747 1094 background-size: cover;
@@ -748,15 +1095,18 @@
748 1095 background-position: 50%;
749 1096 cursor:pointer;
750 1097 }
751 1098
752 -.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{
753 1103 cursor: pointer;
754 1104 position: absolute;
755 1105 top: 4px;
756 1106 right: 4px;
757 -background-color: #3e8ef7;
758 -padding: 5px 9px;
1107 +background-color: #2563eb;
1108 +padding: 5px 9px;
759 1109 max-width: 28px;
760 1110 max-height: 28px;
761 1111 -webkit-box-sizing: content-box;
762 1112 -moz-box-sizing: content-box;
@@ -763,9 +1113,27 @@
763 1113 box-sizing: content-box;
764 1114 border-radius: 2px;
765 1115 }
766 1116
767 -.pagelayer-elp-image-delete .pli{
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{
768 1136 color: #fff;
769 1137 }
770 1138
771 1139 .pagelayer-hidden{
@@ -775,58 +1143,227 @@
775 1143 .pagelayer-elp-radio-div{
776 1144 display:flex;
777 1145 }
778 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 +
779 1157 .pagelayer-elp-radio{
780 1158 display: inline-block;
781 1159 vertical-align: middle;
782 -padding: 6px 8px;
1160 +padding: 6px;
783 1161 cursor: pointer;
784 1162 font-size:12px;
785 1163 color: #666 !important;
786 1164 text-decoration: none;
787 1165 background: #eee;
788 -margin: 5px 2px;
789 1166 flex:1;
790 1167 text-align:center;
791 1168 }
792 1169
793 1170 .pagelayer-elp-radio:hover{
794 -background-color:#3e8ef7bf !important;
1171 +background-color: #4CB5E8 !important;
795 1172 color:#fff !important;
796 -transition: all 0.6s;
1173 +transition: all 0.3s;
797 1174 }
798 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 +
799 1185 .pagelayer-elp-radio-active{
800 -background-color: #3e8ef7 !important;
801 -color:#ffffff !important;
1186 +background-color: #1A9CDB !important;
1187 +color:#ffffff !important;
802 1188 }
803 1189
804 -.pagelayer-elp-color-div{
1190 +.pagelayer-elp-typo-edit-div,
1191 +.pagelayer-elp-color-div-holder{
805 1192 cursor: pointer;
806 -padding: 4px;
807 -width: 50px;
808 -height: 25px;
809 -display: block;
810 -border-radius: 2px;
1193 +width: 70px;
1194 +height: 30px;
1195 +border-radius: 3px;
811 1196 margin: 0 auto;
812 1197 position: absolute;
813 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;
814 1219 right: 7px;
815 -border: solid 1px #d1d1d1;
1220 +border: solid 1px #999;
816 1221 color: #333;
817 1222 vertical-align: middle;
818 1223 }
819 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 +
820 1233 .pagelayer-elp-color-preview{
821 -height: 93%;
822 -border: solid 1px #d1d1d1;
1234 +height: 100%;
823 1235 background-size: cover !important;
1236 +border-radius: 2px;
1237 +flex: 1;
824 1238 }
825 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 +
826 1362 .pagelayer-blank-preview{
827 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;
828 1364 background-size: cover !important;
1365 +opacity: 70%;
829 1366 }
830 1367
831 1368 .picker_arrow {
832 1369 display:none;
@@ -834,10 +1371,28 @@
834 1371
835 1372 .picker_wrapper {
836 1373 top: 13px !important;
837 1374 right: -15px !important;
1375 +font-family: Roboto !important;
1376 +font-size: 12px;
1377 +border-radius: 4px;
1378 +background:#f7f7f7;
838 1379 }
839 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 +
840 1395 .pagelayer-elp-color-span{
841 1396 padding: 2px 0;
842 1397 height: 28px;
843 1398 line-height: 28px;
@@ -851,12 +1406,30 @@
851 1406 background: #fff !important;
852 1407 box-shadow: 0 3px 5px rgba(0,0,0,0.2) !important;
853 1408 }
854 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 +
855 1416 .picker_wrapper{
856 1417 z-index:12 !important;
857 1418 }
858 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 +
859 1432 .pagelayer-elp-remove-color{
860 1433 background-color:#616161;
861 1434 position: absolute;
862 1435 top: 0;
@@ -863,8 +1436,9 @@
863 1436 right: 0;
864 1437 z-index:1;
865 1438 box-shadow: 0 0 3px #333;
866 1439 padding: 3px;
1440 +border-top-right-radius: 2px;
867 1441 }
868 1442
869 1443 .pagelayer-elp-remove-color .pli:before{
870 1444 color: #fff;
@@ -887,14 +1461,20 @@
887 1461 top: 7px;
888 1462 right: 10px;
889 1463 }
890 1464
1465 +.pagelayer-dark .pagelayer-elp-icon-div{
1466 +background-color: #1c1c1f;
1467 +color: #bdbdbd;
1468 +border: 1px solid #6e6d6d;
1469 +}
1470 +
891 1471 .pagelayer-elp-icon-preview{
892 1472 position: relative;
893 1473 display: block;
894 1474 margin-right: 5px;
895 1475 float: left;
896 -width: 83%;
1476 +width: 75%;
897 1477 height: auto;
898 1478 border: none;
899 1479 overflow: hidden;
900 1480 white-space: nowrap;
@@ -907,13 +1487,19 @@
907 1487 color: #666;
908 1488 vertical-align: middle;
909 1489 }
910 1490
1491 +.pagelayer-dark .pagelayer-elp-icon-preview i,
1492 +.pagelayer-dark .pagelayer-elp-icon-name{
1493 +color:#bdbdbd;
1494 +}
1495 +
911 1496 .pagelayer-elp-icon-name{
912 1497 font-size: 13px;
913 1498 }
914 1499
915 -.pagelayer-elp-icon-open{
1500 +.pagelayer-elp-icon-open,
1501 +.pagelayer-elp-icon-close{
916 1502 float: right;
917 1503 font-size: 10px;
918 1504 padding: 0px;
919 1505 line-height: 20px;
@@ -918,8 +1504,18 @@
918 1504 padding: 0px;
919 1505 line-height: 20px;
920 1506 }
921 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 +
922 1518 .pagelayer-elp-icon-remove{
923 1519 position: absolute;
924 1520 right: 20px;
925 1521 font-size: 11px;
@@ -927,9 +1523,9 @@
927 1523 z-index: 10;
928 1524 }
929 1525
930 1526 .pagelayer-elp-icon-selector,
931 -.pagelayer-ele-type-sec{
1527 +.pagelayer-elp-link-list{
932 1528 position: absolute;
933 1529 z-index: 1000;
934 1530 border: 1px solid rgba(0,0,0,0.2) !important;
935 1531 background: #fff !important;
@@ -939,9 +1535,9 @@
939 1535 padding: 5px;
940 1536 height: auto;
941 1537 box-sizing: border-box;
942 1538 display: none;
943 -width: 70%;
1539 +width: 80%;
944 1540 border-radius: 2px;
945 1541 margin: 0 0 0 auto;
946 1542 top: 40px;
947 1543 right: 10px;
@@ -946,8 +1542,13 @@
946 1542 top: 40px;
947 1543 right: 10px;
948 1544 }
949 1545
1546 +.pagelayer-dark .pagelayer-elp-icon-selector{
1547 +background: #252529 !important;
1548 +border: 1px solid #ffffff73 !important;
1549 +}
1550 +
950 1551 .pagelayer-elp-search-icon{
951 1552 margin-bottom: 5px !important;
952 1553 padding: 2px 6px;
953 1554 line-height: 20px !important;
@@ -963,8 +1564,27 @@
963 1564 max-height: 183px;
964 1565 overflow-y: auto;
965 1566 }
966 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 +
967 1587 .pagelayer-elp-icon-span{
968 1588 display: block;
969 1589 margin: 2px;
970 1590 cursor: pointer;
@@ -974,10 +1594,15 @@
974 1594 font-size: 13px;
975 1595 padding: 3px;
976 1596 }
977 1597
1598 +.pagelayer-dark .pagelayer-elp-icon-span,
1599 +.pagelayer-dark .pagelayer-elp-icon-span i{
1600 +color:#bdbdbd;
1601 +}
1602 +
978 1603 .pagelayer-elp-icon-span:hover{
979 -border-color: #00A0D2;
1604 +border-color: #2563eb;
980 1605 background-color: #3e8ef7;
981 1606 color: #ffffff;
982 1607 box-shadow: 0px 1px 1px #3e8ef7bf;
983 1608 }
@@ -1015,8 +1640,12 @@
1015 1640 .pagelayer-elp-icon-type p.active{
1016 1641 background-color:#666666;
1017 1642 }
1018 1643
1644 +.pagelayer-dark .pagelayer-elp-icon-type p.active{
1645 +background: #0277bd;
1646 +}
1647 +
1019 1648 .pagelayer-elp-icon-sets{
1020 1649 line-height: 27px;
1021 1650 height: 27px;
1022 1651 border-radius: 4px;
@@ -1038,26 +1667,33 @@
1038 1667 left: 8px;
1039 1668 }
1040 1669
1041 1670 .pagelayer-elp-slider-div{
1042 -display: flex;
1043 -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;
1044 1676 }
1045 1677
1046 1678 input.pagelayer-elp-slider{
1047 --webkit-appearance: none;
1048 -width: 75%;
1049 -height: 10px;
1050 -border-radius: 5px;
1051 -background-color: #d3d3d3 !important;
1052 -outline: none;
1053 -opacity: 0.7;
1054 --webkit-transition: .2s;
1055 -transition: opacity .2s;
1056 -font-size: 0px !important;
1057 -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;
1058 1690 }
1059 1691
1692 +.pagelayer-dark input.pagelayer-elp-slider {
1693 +background-color: #334155 !important;
1694 +}
1695 +
1060 1696 .pagelayer-elp-slider:focus{
1061 1697 border-color: transparent;
1062 1698 box-shadow: 0 0 1px transparent;
1063 1699 }
@@ -1075,27 +1711,110 @@
1075 1711 background: #4CAF50;
1076 1712 cursor: pointer;
1077 1713 }
1078 1714
1715 +.pagelayer-dark .pagelayer-elp-slider::-webkit-slider-thumb{
1716 +background: #3e8ef7;
1717 +}
1718 +
1079 1719 .pagelayer-elp-slider::-moz-range-thumb{
1080 1720 width: 15px;
1081 1721 height: 15px;
1082 1722 border-radius: 50%;
1083 -background: #00A0D2;
1723 +background: #2563eb;
1084 1724 cursor: pointer;
1085 1725 }
1086 1726
1087 -.pagelayer-elp-slider-value{
1088 -width: 23% !important;
1089 -margin-left: 2%;
1090 -margin-top: -10px;
1091 -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;
1092 1740 }
1093 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 +
1094 1748 .pagelayer-elp-datetime-div{
1095 1749 position: relative;
1750 +width: 100% !important;
1096 1751 }
1097 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 +
1098 1817 .pagelayer-elp-fa-calendar{
1099 1818 position: absolute;
1100 1819 height: 40px;
1101 1820 width: 40px;
@@ -1126,11 +1845,16 @@
1126 1845 transition: all .2s ease-in-out;
1127 1846 }
1128 1847
1129 1848 input[type="checkbox"].pagelayer-elp-checkbox:checked{
1130 -background-color: #3e8ef7;
1849 +background-color: #1A9CDB;
1850 +border-color: #1A9CDB;
1131 1851 }
1132 1852
1853 +.pagelayer-dark input[type="checkbox"].pagelayer-elp-checkbox:checked{
1854 +background-color: #0d47a1;
1855 +}
1856 +
1133 1857 input[type="checkbox"].pagelayer-elp-checkbox:after{
1134 1858 position: absolute;
1135 1859 content: "";
1136 1860 width: 1.5em;
@@ -1154,10 +1878,18 @@
1154 1878 .pagelayer-elp-pos-rel{
1155 1879 position: relative;
1156 1880 }
1157 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 +
1158 1890 .pagelayer-elp-input-icon input{
1159 -width: 83%;
1891 +width: 85%;
1160 1892 }
1161 1893
1162 1894 .pagelayer-elp-input-icon i.pli{
1163 1895 padding:1px 10px;
@@ -1167,40 +1899,143 @@
1167 1899 border-left:0px;
1168 1900 cursor: pointer;
1169 1901 background:#FFF;
1170 1902 line-height:26px !important;
1903 +font-size: 13px;
1171 1904 }
1172 1905
1906 +.pagelayer-dark .pagelayer-elp-input-icon i.pli{
1907 +background: #e0e0e0;
1908 +}
1909 +
1173 1910 .pagelayer-elp-padding-div i.pli{
1174 -padding:6px 11px;
1911 +padding:8px 11px;
1175 1912 border: 1px solid #d1d1d1;
1176 -border-left:0px;
1913 +border-left:0px !important;
1177 1914 cursor: pointer;
1178 1915 background: #FFF;
1179 1916 vertical-align:top;
1917 +font-size: 12px;
1918 +border-top-right-radius: 3px;
1919 +border-bottom-right-radius: 3px;
1180 1920 }
1181 1921
1182 1922 .pagelayer-elp-padding-linked{
1183 -background: #CCC !important;
1923 +background: #1a7fb0 !important;
1924 +color: #fff !important;
1925 +border: 1px solid #1a7fb0 !important;
1184 1926 }
1185 1927
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 +
1186 1963 .pagelayer-elp-dimension-div i.pli{
1187 -padding:6px 11px;
1188 -border: 1px solid #d1d1d1;
1189 -border-left:0px;
1190 -cursor: pointer;
1191 -background: #FFF;
1192 -vertical-align:top;
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;
1193 1981 }
1194 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,
1195 1989 .pagelayer-elp-dimension-linked{
1196 -background: #CCC !important;
1990 +background-color: #2563eb !important;
1991 +border-color: #2563eb !important;
1992 +color: #ffffff !important;
1197 1993 }
1198 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 +
1199 2034 /* Pagelayer Multi Select Property */
1200 2035 .pagelayer-elp-multiselect{
1201 2036 min-height: 25px;
1202 -width:96%;
2037 +width:95%;
1203 2038 }
1204 2039
1205 2040 .pagelayer-elp-multiselect-ul{
1206 2041 list-style:none;
@@ -1212,34 +2047,63 @@
1212 2047 border-top:none;
1213 2048 position:absolute;
1214 2049 background:rgb(255, 255, 255);
1215 2050 z-index:1;
1216 -width:100%;
2051 +width:99%;
1217 2052 }
1218 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 +
1219 2061 .pagelayer-elp-multiselect-option{
1220 2062 font-size:13px;
1221 -padding:3px 8px;
2063 +padding:4px 8px;
1222 2064 cursor:pointer;
1223 2065 }
1224 2066
2067 +.pagelayer-dark .pagelayer-elp-multiselect-option{
2068 +color: #777;
2069 +}
2070 +
1225 2071 .pagelayer-elp-multiselect-option[selected="selected"]{
1226 -background: #cccccc;
2072 +background: #f2f2f2;
1227 2073 }
1228 2074
2075 +.pagelayer-elp-multiselect-remove{
2076 +color: #f2f2f2;
2077 +padding-left: 2px;
2078 +cursor: pointer;
2079 +}
2080 +
2081 +.pagelayer-dark .pagelayer-elp-multiselect-option[selected="selected"]{
2082 +background: #0277bd;
2083 +color: #fff;
2084 +}
2085 +
1229 2086 .pagelayer-elp-multiselect-selected{
1230 2087 padding: 3px 5px;
1231 2088 border-radius: 5px;
1232 2089 margin: 2px;
1233 -background: #cccccc;
2090 +background: #44a9db;
1234 2091 line-height: 13px;
1235 2092 font-size: 13px;
2093 +color: #fff;
1236 2094 }
1237 2095
2096 +.pagelayer-dark .pagelayer-elp-multiselect-selected{
2097 +color: #777;
2098 +background: #ffffff;
2099 +}
2100 +
1238 2101 .pagelayer-elp-multiselect{
1239 2102 display: flex;
1240 2103 flex-wrap: wrap;
1241 2104 padding: 5px;
2105 +border-radius: 3px;
1242 2106 }
1243 2107
1244 2108 /* Pagelayer Multi Select Property end*/
1245 2109
@@ -1321,17 +2185,108 @@
1321 2185 float: left;
1322 2186 }
1323 2187
1324 2188 .pagelayer-elp-audio-div,
1325 -.pagelayer-elp-media-div{
1326 -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;
1327 2196 }
1328 2197
1329 -.pagelayer-elp-audio,
1330 -.pagelayer-elp-media{
1331 -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;
1332 2212 }
1333 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 +
1334 2289 .pagelayer-elp-audio-insert,
1335 2290 .pagelayer-elp-media-select{
1336 2291 position: absolute;
1337 2292 top: 0;
@@ -1343,20 +2298,13 @@
1343 2298 -moz-box-sizing: content-box;
1344 2299 box-sizing: content-box;
1345 2300 }
1346 2301
1347 -.pagelayer-elp-select-div .pli{
1348 -position: absolute;
1349 -right: 12px;
1350 -top: 0;
1351 -line-height: 40px;
1352 -}
1353 -
1354 2302 .pagelayer-elp-shadow-div,
1355 2303 .pagelayer-elp-typo-div,
1356 2304 .pagelayer-elp-filter-div{
1357 -padding: 10px 10px 0px;
1358 -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);
1359 2307 position: relative;
1360 2308 margin-top: 8px;
1361 2309 border: 1px solid #ddd;
1362 2310 display: none;
@@ -1362,57 +2310,37 @@
1362 2310 display: none;
1363 2311 position: absolute;
1364 2312 background-color: #fff;
1365 2313 width: 86%;
1366 -z-index: 2;
2314 +z-index: 12;
1367 2315 }
1368 2316
1369 -.pagelayer-elp-typo-container{
1370 -max-height:250px;
1371 -overflow: auto;
2317 +.pagelayer-typo-default{
2318 +display:none;
2319 +width: 20px;
2320 +height: 20px;
2321 +cursor: pointer;
2322 +margin-left: 4px;
1372 2323 }
1373 2324
1374 -.pagelayer-elp-typo-sele{
1375 -width: 50%;
1376 -height: 24px;
2325 +.pagelayer-global-on .pagelayer-elp-typo:not([pagelayer-set-global]):hover .pagelayer-typo-default{
1377 2326 display: inline-block;
1378 -vertical-align: middle;
1379 -border: 1px solid #ccc;
1380 -font-size: 12px;
1381 -padding: 0 2px;
1382 -box-sizing: border-box;
1383 -line-height: 24px;
1384 -border-radius: 4px;
1385 -cursor: pointer;
1386 2327 }
1387 2328
1388 -.pagelayer-elp-typo-container span {
1389 -display: block;
1390 -font-size: 13px;
1391 -padding: 3px 2px;
1392 -border: 1px solid #ccc;
1393 -margin: 2px 0;
1394 -cursor: pointer;
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;
1395 2333 }
1396 2334
1397 -.pagelayer-elp-typo-search{
1398 -padding: 0 2px;
1399 -height: 24px;
1400 -line-height: 24px;
1401 -}
1402 2335
1403 -.pagelayer-elp-typo-container span:hover{
1404 -background-color:#3E8EF7;
1405 -color:#ffffff;
1406 -}
1407 -
1408 2336 .pagelayer-prop-edit{
1409 2337 padding: 7px;
1410 -border: 1px solid #ccc;
1411 -width: 44px;
2338 +border: 1px solid #3e8ca4;
2339 +width: 20px;
1412 2340 position: absolute;
1413 2341 top: 7px;
1414 -right: 8px;
2342 +right: 11px;
1415 2343 text-align: center;
1416 2344 cursor: pointer;
1417 2345 border-radius: 3px;
1418 2346 }
@@ -1417,43 +2345,67 @@
1417 2345 border-radius: 3px;
1418 2346 }
1419 2347
1420 2348 .pagelayer-prop-edit i{
1421 -font-size: 20px;
2349 +font-size: 14px;
2350 +color: #484848;
1422 2351 }
1423 2352
2353 +.pagelayer-dark .pagelayer-prop-edit i{
2354 +color:#bdbdbd;
2355 +}
2356 +
1424 2357 .pagelayer-prop-show{
1425 2358 display: block;
1426 2359 }
1427 2360
1428 2361 .pagelayer-elp-shadow-color{
1429 -position: relative;
1430 -height: 35px;
2362 +padding: 15px 0px !important;
1431 2363 }
1432 2364
1433 2365 .pagelayer-elp-shadow-color .pagelayer-elp-color-div{
1434 -top:0;
2366 +top:7px;
1435 2367 }
1436 2368
1437 -.pagelayer-elp-typo:not(:first-child),
2369 +.pagelayer-elp-typo,
1438 2370 .pagelayer-elp-prop-grp{
1439 -margin: 3px 0;
1440 -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;
1441 2377 }
1442 2378
2379 +.pagelayer-elp-typo-fonts{
2380 +padding: 10px 0;
2381 +}
2382 +
1443 2383 .pagelayer-elp-gradient-div .pagelayer-elp-prop-grp{
1444 2384 padding: 5px 0;
2385 +display: flex;
2386 +align-items: center;
2387 +justify-content: space-between;
1445 2388 }
1446 2389
1447 -.pagelayer-elp-prop-grp{
1448 -position: relative;
2390 +.pagelayer-elp-gradient-div .pagelayer-elp-label{
2391 +width: auto !important;
1449 2392 }
1450 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 +
1451 2403 .pagelayer-elp-prop-grp .pagelayer-elp-color-div{
1452 -top: -3px;
1453 2404 right: 0;
1454 2405 }
1455 2406
2407 +.pagelayer-elp-typo-fonts .pagelayer-elp-label,
1456 2408 .pagelayer-elp-typo .pagelayer-elp-label,
1457 2409 .pagelayer-elp-typo .pagelayer-elp-typo-input,
1458 2410 .pagelayer-elp-shadow-div .pagelayer-elp-shadow-input,
1459 2411 .pagelayer-elp-shadow-div .pagelayer-elp-label,
@@ -1475,8 +2427,9 @@
1475 2427
1476 2428 .pagelayer-elp-filter-input{
1477 2429 background-position: center center !important;
1478 2430 background-size: cover !important;
2431 +width: 50% !important;
1479 2432 }
1480 2433
1481 2434 .pagelayer-elp-filter-blur .pagelayer-elp-filter-input{
1482 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;
@@ -1505,8 +2458,9 @@
1505 2458 .pagelayer-elp-filter-opacity input{
1506 2459 background-image: linear-gradient(90deg,#fff,#000);
1507 2460 }
1508 2461
2462 +.pagelayer-elp-typo-fonts .pagelayer-elp-label,
1509 2463 .pagelayer-elp-typo .pagelayer-elp-label{
1510 2464 font-weight: 600;
1511 2465 font-size: 11px;
1512 2466 color: #555;
@@ -1511,16 +2465,51 @@
1511 2465 font-size: 11px;
1512 2466 color: #555;
1513 2467 }
1514 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 +
1515 2500 .pagelayer-elp-typo select.pagelayer-elp-typo-input,
1516 2501 .pagelayer-elp-typo-input,
1517 2502 .pagelayer-elp-shadow-input{
1518 2503 padding: 3px;
1519 2504 border-radius: 4px !important;
1520 -line-height: 18px !important;
2505 +line-height: 23px !important;
1521 2506 }
1522 2507
2508 +.pagelayer-dark .pagelayer-elp-typo select.pagelayer-elp-typo-input{
2509 +background-color: #252529;
2510 +}
2511 +
1523 2512 .pagelayer-elp-grad-color{
1524 2513 position:relative;
1525 2514 }
1526 2515
@@ -1531,11 +2520,19 @@
1531 2520 .pagelayer-elp-tinymce {
1532 2521 border-radius: 2px !important;
1533 2522 }
1534 2523
2524 +.pagelayer-post-type{
2525 +text-transform: capitalize;
2526 +}
2527 +
2528 +.pagelayer-elp-text{
2529 +padding-left:5px;
2530 +}
2531 +
1535 2532 .pagelayer-elp-select-div,
1536 2533 .pagelayer-elp-spinner-div{
1537 -width: 140px;
2534 +width: 50%;
1538 2535 right: 10px;
1539 2536 position: absolute;
1540 2537 top: 7px;
1541 2538 }
@@ -1548,13 +2545,52 @@
1548 2545 padding: 2px 0 2px 6px;
1549 2546 border-radius: 4px !important;
1550 2547 }
1551 2548
1552 -.pagelayer-elp-select-div .pagelayer-elp-select {
1553 -border-radius: 4px;
1554 -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;
1555 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 +}
1556 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 +
1557 2593 .pagelayer-elpd-body input:focus,
1558 2594 .pagelayer-elpd-body textarea:focus,
1559 2595 .pagelayer-elpd-body select:focus {
1560 2596 border-color: #3e8ef7;
@@ -1570,19 +2606,56 @@
1570 2606 .pagelayer-elp-group-item .pagelayer-form-item{
1571 2607 padding: 10px 0px 10px 0px;
1572 2608 }
1573 2609
1574 -.pagelayer-elp-group-item .pagelayer-elp-select-div,
1575 2610 .pagelayer-elp-group-item .pagelayer-elp-spinner-div,
1576 -.pagelayer-elp-group-item .pagelayer-elp-color-div{
1577 -right:0px;
2611 +.pagelayer-elp-group-item .pagelayer-elp-color-div,
2612 +.pagelayer-elp-group-item .pagelayer-elp-color-div-holder{
2613 +right: 0px !important;
1578 2614 }
1579 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 +
1580 2649 .pagelayer-elp-group-item-head{
1581 2650 display:flex;
1582 2651 background: #F8F8F8;
1583 2652 }
1584 2653
2654 +.pagelayer-dark .pagelayer-elp-group-item-head{
2655 +background:#252529;
2656 +}
2657 +
1585 2658 .pagelayer-elp-group-item-head span{
1586 2659 cursor: pointer;
1587 2660 padding: 9px;
1588 2661 display:inline-block;
@@ -1587,10 +2660,21 @@
1587 2660 padding: 9px;
1588 2661 display:inline-block;
1589 2662 }
1590 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 +
1591 2672 .pagelayer-elp-group-item-title{
1592 2673 flex-grow: 100;
2674 +white-space: nowrap;
2675 +overflow: hidden;
2676 +text-overflow: ellipsis;
1593 2677 }
1594 2678
1595 2679 .pagelayer-elp-group-item-del{
1596 2680 float: right;
@@ -1634,11 +2718,31 @@
1634 2718 padding:5px;
1635 2719 }
1636 2720
1637 2721 .pagelayer-widgets-form input[type="checkbox"]{
1638 -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;
1639 2729 }
1640 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 +
1641 2745 .pagelayer-widgets-form{
1642 2746 line-height:150%;
1643 2747 border-top: none;
1644 2748 padding: 8px;
@@ -1643,8 +2747,20 @@
1643 2747 border-top: none;
1644 2748 padding: 8px;
1645 2749 }
1646 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 +
1647 2763 /* End Widget Parameters */
1648 2764
1649 2765 .trumbowyg-box{
1650 2766 margin-top:0px !important;
@@ -1657,20 +2773,46 @@
1657 2773
1658 2774 /* Pagelayer Left bar */
1659 2775
1660 2776 .pagelayer-topbar-holder{
1661 -background-color: #3e8ef7;
2777 +background-color: #4CB5E8;
1662 2778 position:relative;
2779 +animation: colorchange 30s infinite alternate;
2780 +-webkit-animation: colorchange 30s infinite alternate;
2781 +}
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{
1663 2792 cursor: all-scroll;
1664 2793 }
1665 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 +
1666 2807 .pagelayer-logo{
1667 -font-size:20px;
2808 +font-size:18px;
1668 2809 font-weight: bold;
1669 2810 display: block;
1670 2811 text-align:center;
1671 2812 vertical-align:middle;
1672 2813 color:#fff;
2814 +width:76%;
1673 2815 }
1674 2816
1675 2817 .pagelayer-logo-text{
1676 2818 font-weight: bold;
@@ -1679,9 +2821,8 @@
1679 2821 vertical-align: super;
1680 2822 }
1681 2823
1682 2824 .pagelayer-settings-icon{
1683 -float:right;
1684 2825 padding-right:10px;
1685 2826 cursor: pointer;
1686 2827 position: absolute;
1687 2828 right: 5px;
@@ -1695,9 +2836,10 @@
1695 2836 position: absolute;
1696 2837 left: 5px;
1697 2838 top: 50%;
1698 2839 transform: translateY(-50%);
1699 -font-size:25px !important;
2840 +font-size: 18px !important;
2841 +color: #ffffff;
1700 2842 }
1701 2843
1702 2844 .pagelayer-leftbar{
1703 2845 width:270px !important;
@@ -1703,9 +2845,9 @@
1703 2845 width:270px !important;
1704 2846 padding-top:0;
1705 2847 background-color: #E3E3E3;
1706 2848 overflow: hidden;
1707 -background: -moz-linear-gradient(224deg, rgba(222,222,222,1) 0%, rgba(191,202,214,1) 100%); /* ff3.6+ */
2849 +background: -moz-linear-gradient(224deg, rgba(222,222,222,1) 0%, rgba(191,202,214,1) 100%); /* ff3.6+ */
1708 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 */
1709 2851 background: -webkit-linear-gradient(224deg, rgba(222,222,222,1) 0%, rgba(191,202,214,1) 100%); /* safari5.1+,chrome10+ */
1710 2852 background: -o-linear-gradient(224deg, rgba(222,222,222,1) 0%, rgba(191,202,214,1) 100%); /* opera 11.10+ */
1711 2853 background: -ms-linear-gradient(224deg, rgba(222,222,222,1) 0%, rgba(191,202,214,1) 100%); /* ie10+ */
@@ -1712,8 +2854,13 @@
1712 2854 background: linear-gradient(226deg, rgba(222,222,222,1) 0%, rgba(191,202,214,1) 100%); /* w3c */
1713 2855 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#BFCAD6', endColorstr='#DEDEDE',GradientType=1 ); /* ie6-9 */
1714 2856 }
1715 2857
2858 +.pagelayer-dark .pagelayer-leftbar{
2859 +background: unset !important;
2860 +background-color: #1c1c1f !important;
2861 +}
2862 +
1716 2863 .pagelayer-leftbar-search{
1717 2864 text-align:center;
1718 2865 margin: 20px 40px 10px 25px;
1719 2866 position:relative;
@@ -1728,8 +2875,9 @@
1728 2875 font-size: 14px;
1729 2876 height:30px;
1730 2877 }
1731 2878
2879 +.pagelayer-widget-search .pli,
1732 2880 .pagelayer-leftbar-search .pli{
1733 2881 position: absolute;
1734 2882 top: 0;
1735 2883 height: 30px;
@@ -1737,8 +2885,9 @@
1737 2885 color: #666;
1738 2886 line-height: 30px;
1739 2887 }
1740 2888
2889 +.pagelayer-widget-search .pagelayer-sf-empty,
1741 2890 .pagelayer-leftbar-search .pagelayer-sf-empty{
1742 2891 right:0;
1743 2892 left:auto;
1744 2893 font-weight:bolder;
@@ -1744,12 +2893,9 @@
1744 2893 font-weight:bolder;
1745 2894 cursor:pointer;
1746 2895 }
1747 2896
1748 -.pagelayer-shortcodes{
1749 -margin-left:17px;
1750 -}
1751 -
2897 +.pagelayer-widget-group,
1752 2898 .pagelayer-leftbar-group{
1753 2899 width: 100%;
1754 2900 background-repeat: no-repeat;
1755 2901 background-position: center;
@@ -1756,12 +2902,13 @@
1756 2902 font-size: 11px !important;
1757 2903 color: #442E2E;
1758 2904 clear: both;
1759 2905 text-align: center;
1760 -font-family: "Open Sans",arial,sans-serif !important;
2906 +font-family: Roboto, 'Open Sans', Arial, sans-serif !important;
1761 2907 margin-bottom: 2px;
1762 2908 }
1763 2909
2910 +.pagelayer-widget-group h5,
1764 2911 .pagelayer-leftbar-group h5{
1765 2912 font-size: 11px;
1766 2913 line-height: 20px;
1767 2914 text-transform: uppercase;
@@ -1769,19 +2916,39 @@
1769 2916 padding: 5px 0 3px;
1770 2917 margin: 5px;
1771 2918 }
1772 2919
1773 -.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{
1774 2934 width: 100px !important;
1775 2935 height:67px !important;
1776 2936 margin-bottom:12px;
1777 2937 margin-left:12px;
1778 -background-color:#FFFFFF;
2938 +background-color: #FFFFFF;
1779 2939 border-radius: 4px;
1780 2940 float: left;
1781 2941 transition: all 0.1s;
1782 2942 }
1783 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,
1784 2951 .pagelayer-shortcode-drag:hover{
1785 2952 transform: scale(1.06);
1786 2953 }
1787 2954
@@ -1796,10 +2963,12 @@
1796 2963 padding: 0px !important;
1797 2964 }
1798 2965
1799 2966 .pagelayer-shortcode-text{
1800 -display: block;
1801 -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;
1802 2971 font-size: 11px !important;
1803 2972 font-style: normal;
1804 2973 line-height: 125%;
1805 2974 margin: 0;
@@ -1813,13 +2982,38 @@
1813 2982 transition: all 0.3s;
1814 2983 padding:1px;
1815 2984 }
1816 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 +
1817 3006 .pagelayer-shortcode-drag:hover .pagelayer-shortcode:before,
1818 3007 .pagelayer-shortcode-drag:hover .pagelayer-shortcode-text{
1819 -color: #00A0D2;
3008 +color: #2563eb;
1820 3009 }
1821 3010
3011 +.pagelayer-dark .pagelayer-shortcode-drag:hover .pagelayer-shortcode:before,
3012 +.pagelayer-dark .pagelayer-shortcode-drag:hover .pagelayer-shortcode-text{
3013 +color: #2563eb;
3014 +}
3015 +
1822 3016 /* Trumbowyg color widget style */
1823 3017 .trumbowyg-dropdown-foreColor,
1824 3018 .trumbowyg-dropdown-backColor {
1825 3019 width: 100% !important;
@@ -1942,8 +3136,61 @@
1942 3136 }
1943 3137
1944 3138 /* Pagelayer history end*/
1945 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 +
1946 3193 /* Pagelayer settings*/
1947 3194
1948 3195 .pagelayer-post-settings-holder{
1949 3196 border:1px solid #d3d3d3;
@@ -2087,9 +3334,8 @@
2087 3334 margin-top: -5px;
2088 3335 }
2089 3336 /*Tooltip end*/
2090 3337
2091 -
2092 3338 /* Add section modal*/
2093 3339 .pagelayer-add-section-modal-container{
2094 3340 position: fixed;
2095 3341 top: 0;
@@ -2098,31 +3344,110 @@
2098 3344 height: 100%;
2099 3345 background-color: #00000069;
2100 3346 z-index:9999;
2101 3347 display:none;
2102 -font-family: "Open Sans", Arial,Helvetica,sans-serif;
3348 +font-family: Roboto, 'Open Sans', Arial, Helvetica, sans-serif;
2103 3349 }
2104 3350
2105 -.pagelayer-add-section-modal-container span{
2106 -font-family: "Open Sans", Arial,Helvetica,sans-serif;
3351 +.pagelayer-add-section-modal-close{
3352 +font-size: 30px;
3353 +float: right;
3354 +cursor:pointer;
3355 +line-height: 100%;
2107 3356 }
2108 3357
2109 3358 .pagelayer-add-section-modal-holder{
2110 3359 position: relative;
2111 -top: 40px;
2112 3360 font-size: 18px;
3361 +height: 100vh;
2113 3362 }
2114 3363
2115 3364 .pagelayer-add-section-modal{
2116 3365 background-color: #ffffff;
2117 -width: 90%;
2118 -height: calc(100vh - 80px);
2119 -border-radius: 5px;
3366 +width: 100%;
2120 3367 margin: auto;
2121 -overflow:auto;
2122 3368 position: relative;
2123 3369 }
2124 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 +
2125 3450 /* width */
2126 3451 .pagelayer-add-section-modal::-webkit-scrollbar {
2127 3452 width: 7px;
2128 3453 }
@@ -2145,51 +3470,101 @@
2145 3470 }
2146 3471
2147 3472 .pagelayer-add-section-modal-header{
2148 3473 padding: 15px;
2149 -border-bottom: 1px solid #e5e5e5;
2150 3474 position: sticky;
2151 -background: #fff;
3475 +background: #5e5e5e;
2152 3476 top: 0;
2153 3477 z-index: 999;
3478 +color: #fff;
2154 3479 }
2155 3480
2156 -.pagelayer-add-section-modal-body{
2157 -padding: 20px;
2158 -margin: 0;
2159 -box-sizing: border-box;
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;
2160 3504 position:relative;
2161 -/*display: flex;
2162 -flex-flow: row wrap; */
2163 3505 }
2164 3506
2165 -@media (min-width: 360px) {
2166 -.pagelayer-add-section-modal-body {
2167 --webkit-column-count: 1;
2168 -column-count: 1;
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;
2169 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;
2170 3524 }
2171 3525
2172 -@media (min-width: 768px) {
2173 -.pagelayer-add-section-modal-body {
2174 --webkit-column-count: 2;
2175 -column-count: 2;
3526 +.pagelayer-section-search-div .pagelayer-sf-empty{
3527 +right:0;
3528 +left:auto;
3529 +font-weight:bolder;
3530 +cursor:pointer;
2176 3531 }
3532 +
3533 +.pagelayer-section-tags-holder{
3534 +padding: 0px 10px;
3535 +height: calc(100vh - 150px);
3536 +overflow: auto;
2177 3537 }
2178 3538
2179 -@media (min-width: 992px) {
2180 -.pagelayer-add-section-modal-body{
2181 --webkit-column-count: 3;
2182 -column-count: 3;
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;
2183 3547 }
3548 +
3549 +.pagelayer-section-tags[on="1"]{
3550 +background: #326fa6;
2184 3551 }
2185 3552
2186 -@media (min-width: 1500px) {
3553 +.pagelayer-section-modal-body-holder{
3554 +overflow:auto;
3555 +height: calc(100vh - 50px);
3556 +width: calc(100vw - 250px);
3557 +background: #efefef;
3558 +}
3559 +
2187 3560 .pagelayer-add-section-modal-body{
2188 --webkit-column-count: 4;
2189 -column-count: 4;
3561 +margin: 0;
3562 +background: #efefef;
3563 +height: 100%;
3564 +display: flex;
3565 +flex-wrap: wrap;
2190 3566 }
2191 -}
2192 3567
2193 3568 .pagelayer-add-section-modal-footer{
2194 3569 padding: 15px;
2195 3570 border-top: 1px solid #e5e5e5;
@@ -2194,59 +3569,92 @@
2194 3569 padding: 15px;
2195 3570 border-top: 1px solid #e5e5e5;
2196 3571 }
2197 3572
2198 -.pagelayer-add-section-modal-close{
2199 -float: right;
3573 +.pagelayer-section-is-visible{
3574 +height: 50px;
3575 +flex-basis: 100%;
2200 3576 }
2201 3577
2202 -.pagelayer-section-item[pagelayer-sc]{
2203 -text-align: center;
2204 -display:flex;
2205 -align-items:center;
2206 -justify-content: space-around;
2207 -min-height: 150px;
2208 -border:2px dashed #e1e1e1;
3578 +.pagelayer-section-holder{
3579 +vertical-align: top;
3580 +background: #efefef;
3581 +flex: 1;
2209 3582 }
2210 3583
2211 3584 .pagelayer-section-item{
2212 3585 min-height: 50px;
2213 -box-shadow: 0px 3px 5px #c3c1c1;
2214 -border-radius:4px;
2215 -margin:5px 0px 15px;
2216 --webkit-column-break-inside: avoid;
2217 -break-inside: avoid;
2218 -line-height:0;
2219 -display:inline-block;
3586 +margin:15px;
2220 3587 z-index: 9;
2221 3588 transition-duration: 0.2s;
2222 3589 background-color:#fff;
2223 -width:100%;
3590 +border: 3px solid #fff;
3591 +border-radius: 4px;
3592 +cursor: pointer;
3593 +position: relative;
2224 3594 }
2225 3595
2226 3596 .pagelayer-section-item:hover{
2227 3597 z-index: 99;
2228 -transform: scale(1.03);
2229 -position: relative;
3598 +transform: scale(1.01);
3599 +border: 3px solid #1A9CDB;
2230 3600 }
2231 3601
2232 3602 .pagelayer-section-item img{
2233 3603 width:100%;
2234 -box-sizing: border-box;
2235 3604 }
2236 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 +
2237 3645 .pagelayer-add-section-modal-overlay{
2238 -position:sticky;
3646 +position: absolute;
2239 3647 top:0;
2240 3648 bottom:0;
2241 3649 height:100%;
3650 +width:100%;
2242 3651 z-index:999999;
2243 3652 align-items: center;
2244 3653 justify-content: center;
2245 3654 text-align:center;
2246 3655 display:flex;
2247 -color:#3e8ef7;
2248 -background-color:#f7f7f7c2;
3656 +background-color:#f7f7f7fa;
2249 3657 }
2250 3658
2251 3659 .pagelayer-section-wait .fa-spin{
2252 3660 font-size:50px;
@@ -2251,12 +3659,8 @@
2251 3659 .pagelayer-section-wait .fa-spin{
2252 3660 font-size:50px;
2253 3661 }
2254 3662
2255 -.pagelayer-add-section-modal-close{
2256 -cursor:pointer;
2257 -}
2258 -
2259 3663 /* Add section modal end */
2260 3664
2261 3665 /* Navigator start */
2262 3666 .pagelayer-leftbar-prop-body{
@@ -2366,5 +3770,3285 @@
2366 3770 .pagelayer-leftbar-moving.pagelayer-leftbar-minimize .pagelayer-bottombar-row{
2367 3771 display:none;
2368 3772 }
2369 3773
2370 -/* Left bar move end*/
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 +}