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 +4947 -259 1.0.2 → 2.2.2 View file →
@@ -8,12 +8,14 @@
8 8
9 9 html {
10 10 line-height: 1.15; /* 1 */
11 11 -webkit-text-size-adjust: 100%; /* 2 */
12 + overflow: hidden !important;
12 13 }
13 14
14 15 body {
15 16 margin: 0;
17 + overflow: hidden !important;
16 18 }
17 19
18 20 main {
19 21 display: block;
@@ -191,9 +193,9 @@
191 193
192 194 /* An overwrite to show the row irrespective in the editor */
193 195
194 196 body {
195 -font-family: Arial;
197 +font-family: Roboto, 'Open Sans', Arial, Helvetica, sans-serif;
196 198 font-size:12px;
197 199 }
198 200
199 201 .pagelayer-normalize{
@@ -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,15 +1406,31 @@
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
859 -.pagelayer-prop-action{
860 -height: 15px;
861 -width: 15px;
1420 +.pagelayer-dark .picker_done button {
1421 +border: none;
1422 +font-family: roboto;
1423 +color: #777;
1424 +background-color: #ffffff;
1425 +}
1426 +
1427 +.pagelayer-dark .picker_editor input{
1428 +color: #bdbdbd;
1429 +background-color: #1c1c1f;
1430 +}
1431 +
1432 +.pagelayer-elp-remove-color{
862 1433 background-color:#616161;
863 1434 position: absolute;
864 1435 top: 0;
865 1436 right: 0;
@@ -864,17 +1435,15 @@
864 1435 top: 0;
865 1436 right: 0;
866 1437 z-index:1;
867 1438 box-shadow: 0 0 3px #333;
1439 +padding: 3px;
1440 +border-top-right-radius: 2px;
868 1441 }
869 1442
870 -.pagelayer-prop-action .pli{
1443 +.pagelayer-elp-remove-color .pli:before{
871 1444 color: #fff;
872 -font-size: 12px;
873 -position:absolute;
874 -top:50%;
875 -left:50%;
876 -transform: translate(-50%, -50%);
1445 +font-size: 7px;
877 1446 }
878 1447
879 1448 .pagelayer-elp-icon-div{
880 1449 cursor: pointer;
@@ -892,14 +1461,20 @@
892 1461 top: 7px;
893 1462 right: 10px;
894 1463 }
895 1464
1465 +.pagelayer-dark .pagelayer-elp-icon-div{
1466 +background-color: #1c1c1f;
1467 +color: #bdbdbd;
1468 +border: 1px solid #6e6d6d;
1469 +}
1470 +
896 1471 .pagelayer-elp-icon-preview{
897 1472 position: relative;
898 1473 display: block;
899 1474 margin-right: 5px;
900 1475 float: left;
901 -width: 83%;
1476 +width: 75%;
902 1477 height: auto;
903 1478 border: none;
904 1479 overflow: hidden;
905 1480 white-space: nowrap;
@@ -912,13 +1487,19 @@
912 1487 color: #666;
913 1488 vertical-align: middle;
914 1489 }
915 1490
1491 +.pagelayer-dark .pagelayer-elp-icon-preview i,
1492 +.pagelayer-dark .pagelayer-elp-icon-name{
1493 +color:#bdbdbd;
1494 +}
1495 +
916 1496 .pagelayer-elp-icon-name{
917 1497 font-size: 13px;
918 1498 }
919 1499
920 -.pagelayer-elp-icon-open{
1500 +.pagelayer-elp-icon-open,
1501 +.pagelayer-elp-icon-close{
921 1502 float: right;
922 1503 font-size: 10px;
923 1504 padding: 0px;
924 1505 line-height: 20px;
@@ -923,8 +1504,18 @@
923 1504 padding: 0px;
924 1505 line-height: 20px;
925 1506 }
926 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 +
927 1518 .pagelayer-elp-icon-remove{
928 1519 position: absolute;
929 1520 right: 20px;
930 1521 font-size: 11px;
@@ -932,9 +1523,9 @@
932 1523 z-index: 10;
933 1524 }
934 1525
935 1526 .pagelayer-elp-icon-selector,
936 -.pagelayer-ele-type-sec{
1527 +.pagelayer-elp-link-list{
937 1528 position: absolute;
938 1529 z-index: 1000;
939 1530 border: 1px solid rgba(0,0,0,0.2) !important;
940 1531 background: #fff !important;
@@ -944,9 +1535,9 @@
944 1535 padding: 5px;
945 1536 height: auto;
946 1537 box-sizing: border-box;
947 1538 display: none;
948 -width: 70%;
1539 +width: 80%;
949 1540 border-radius: 2px;
950 1541 margin: 0 0 0 auto;
951 1542 top: 40px;
952 1543 right: 10px;
@@ -951,8 +1542,13 @@
951 1542 top: 40px;
952 1543 right: 10px;
953 1544 }
954 1545
1546 +.pagelayer-dark .pagelayer-elp-icon-selector{
1547 +background: #252529 !important;
1548 +border: 1px solid #ffffff73 !important;
1549 +}
1550 +
955 1551 .pagelayer-elp-search-icon{
956 1552 margin-bottom: 5px !important;
957 1553 padding: 2px 6px;
958 1554 line-height: 20px !important;
@@ -968,8 +1564,27 @@
968 1564 max-height: 183px;
969 1565 overflow-y: auto;
970 1566 }
971 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 +
972 1587 .pagelayer-elp-icon-span{
973 1588 display: block;
974 1589 margin: 2px;
975 1590 cursor: pointer;
@@ -979,10 +1594,15 @@
979 1594 font-size: 13px;
980 1595 padding: 3px;
981 1596 }
982 1597
1598 +.pagelayer-dark .pagelayer-elp-icon-span,
1599 +.pagelayer-dark .pagelayer-elp-icon-span i{
1600 +color:#bdbdbd;
1601 +}
1602 +
983 1603 .pagelayer-elp-icon-span:hover{
984 -border-color: #00A0D2;
1604 +border-color: #2563eb;
985 1605 background-color: #3e8ef7;
986 1606 color: #ffffff;
987 1607 box-shadow: 0px 1px 1px #3e8ef7bf;
988 1608 }
@@ -1020,8 +1640,12 @@
1020 1640 .pagelayer-elp-icon-type p.active{
1021 1641 background-color:#666666;
1022 1642 }
1023 1643
1644 +.pagelayer-dark .pagelayer-elp-icon-type p.active{
1645 +background: #0277bd;
1646 +}
1647 +
1024 1648 .pagelayer-elp-icon-sets{
1025 1649 line-height: 27px;
1026 1650 height: 27px;
1027 1651 border-radius: 4px;
@@ -1043,26 +1667,33 @@
1043 1667 left: 8px;
1044 1668 }
1045 1669
1046 1670 .pagelayer-elp-slider-div{
1047 -display: flex;
1048 -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;
1049 1676 }
1050 1677
1051 1678 input.pagelayer-elp-slider{
1052 --webkit-appearance: none;
1053 -width: 75%;
1054 -height: 10px;
1055 -border-radius: 5px;
1056 -background-color: #d3d3d3 !important;
1057 -outline: none;
1058 -opacity: 0.7;
1059 --webkit-transition: .2s;
1060 -transition: opacity .2s;
1061 -font-size: 0px !important;
1062 -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;
1063 1690 }
1064 1691
1692 +.pagelayer-dark input.pagelayer-elp-slider {
1693 +background-color: #334155 !important;
1694 +}
1695 +
1065 1696 .pagelayer-elp-slider:focus{
1066 1697 border-color: transparent;
1067 1698 box-shadow: 0 0 1px transparent;
1068 1699 }
@@ -1080,27 +1711,110 @@
1080 1711 background: #4CAF50;
1081 1712 cursor: pointer;
1082 1713 }
1083 1714
1715 +.pagelayer-dark .pagelayer-elp-slider::-webkit-slider-thumb{
1716 +background: #3e8ef7;
1717 +}
1718 +
1084 1719 .pagelayer-elp-slider::-moz-range-thumb{
1085 1720 width: 15px;
1086 1721 height: 15px;
1087 1722 border-radius: 50%;
1088 -background: #00A0D2;
1723 +background: #2563eb;
1089 1724 cursor: pointer;
1090 1725 }
1091 1726
1092 -.pagelayer-elp-slider-value{
1093 -width: 23% !important;
1094 -margin-left: 2%;
1095 -margin-top: -10px;
1096 -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;
1097 1740 }
1098 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 +
1099 1748 .pagelayer-elp-datetime-div{
1100 1749 position: relative;
1750 +width: 100% !important;
1101 1751 }
1102 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 +
1103 1817 .pagelayer-elp-fa-calendar{
1104 1818 position: absolute;
1105 1819 height: 40px;
1106 1820 width: 40px;
@@ -1131,11 +1845,16 @@
1131 1845 transition: all .2s ease-in-out;
1132 1846 }
1133 1847
1134 1848 input[type="checkbox"].pagelayer-elp-checkbox:checked{
1135 -background-color: #3e8ef7;
1849 +background-color: #1A9CDB;
1850 +border-color: #1A9CDB;
1136 1851 }
1137 1852
1853 +.pagelayer-dark input[type="checkbox"].pagelayer-elp-checkbox:checked{
1854 +background-color: #0d47a1;
1855 +}
1856 +
1138 1857 input[type="checkbox"].pagelayer-elp-checkbox:after{
1139 1858 position: absolute;
1140 1859 content: "";
1141 1860 width: 1.5em;
@@ -1159,10 +1878,18 @@
1159 1878 .pagelayer-elp-pos-rel{
1160 1879 position: relative;
1161 1880 }
1162 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 +
1163 1890 .pagelayer-elp-input-icon input{
1164 -width: 83%;
1891 +width: 85%;
1165 1892 }
1166 1893
1167 1894 .pagelayer-elp-input-icon i.pli{
1168 1895 padding:1px 10px;
@@ -1172,40 +1899,143 @@
1172 1899 border-left:0px;
1173 1900 cursor: pointer;
1174 1901 background:#FFF;
1175 1902 line-height:26px !important;
1903 +font-size: 13px;
1176 1904 }
1177 1905
1906 +.pagelayer-dark .pagelayer-elp-input-icon i.pli{
1907 +background: #e0e0e0;
1908 +}
1909 +
1178 1910 .pagelayer-elp-padding-div i.pli{
1179 -padding:6px 11px;
1911 +padding:8px 11px;
1180 1912 border: 1px solid #d1d1d1;
1181 -border-left:0px;
1913 +border-left:0px !important;
1182 1914 cursor: pointer;
1183 1915 background: #FFF;
1184 1916 vertical-align:top;
1917 +font-size: 12px;
1918 +border-top-right-radius: 3px;
1919 +border-bottom-right-radius: 3px;
1185 1920 }
1186 1921
1187 1922 .pagelayer-elp-padding-linked{
1188 -background: #CCC !important;
1923 +background: #1a7fb0 !important;
1924 +color: #fff !important;
1925 +border: 1px solid #1a7fb0 !important;
1189 1926 }
1190 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 +
1191 1963 .pagelayer-elp-dimension-div i.pli{
1192 -padding:6px 11px;
1193 -border: 1px solid #d1d1d1;
1194 -border-left:0px;
1195 -cursor: pointer;
1196 -background: #FFF;
1197 -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;
1198 1981 }
1199 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,
1200 1989 .pagelayer-elp-dimension-linked{
1201 -background: #CCC !important;
1990 +background-color: #2563eb !important;
1991 +border-color: #2563eb !important;
1992 +color: #ffffff !important;
1202 1993 }
1203 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 +
1204 2034 /* Pagelayer Multi Select Property */
1205 2035 .pagelayer-elp-multiselect{
1206 2036 min-height: 25px;
1207 -width:96%;
2037 +width:95%;
1208 2038 }
1209 2039
1210 2040 .pagelayer-elp-multiselect-ul{
1211 2041 list-style:none;
@@ -1217,34 +2047,63 @@
1217 2047 border-top:none;
1218 2048 position:absolute;
1219 2049 background:rgb(255, 255, 255);
1220 2050 z-index:1;
1221 -width:100%;
2051 +width:99%;
1222 2052 }
1223 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 +
1224 2061 .pagelayer-elp-multiselect-option{
1225 2062 font-size:13px;
1226 -padding:3px 8px;
2063 +padding:4px 8px;
1227 2064 cursor:pointer;
1228 2065 }
1229 2066
2067 +.pagelayer-dark .pagelayer-elp-multiselect-option{
2068 +color: #777;
2069 +}
2070 +
1230 2071 .pagelayer-elp-multiselect-option[selected="selected"]{
1231 -background: #cccccc;
2072 +background: #f2f2f2;
1232 2073 }
1233 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 +
1234 2086 .pagelayer-elp-multiselect-selected{
1235 2087 padding: 3px 5px;
1236 2088 border-radius: 5px;
1237 2089 margin: 2px;
1238 -background: #cccccc;
2090 +background: #44a9db;
1239 2091 line-height: 13px;
1240 2092 font-size: 13px;
2093 +color: #fff;
1241 2094 }
1242 2095
2096 +.pagelayer-dark .pagelayer-elp-multiselect-selected{
2097 +color: #777;
2098 +background: #ffffff;
2099 +}
2100 +
1243 2101 .pagelayer-elp-multiselect{
1244 2102 display: flex;
1245 2103 flex-wrap: wrap;
1246 2104 padding: 5px;
2105 +border-radius: 3px;
1247 2106 }
1248 2107
1249 2108 /* Pagelayer Multi Select Property end*/
1250 2109
@@ -1326,17 +2185,108 @@
1326 2185 float: left;
1327 2186 }
1328 2187
1329 2188 .pagelayer-elp-audio-div,
1330 -.pagelayer-elp-media-div{
1331 -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;
1332 2196 }
1333 2197
1334 -.pagelayer-elp-audio,
1335 -.pagelayer-elp-media{
1336 -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;
1337 2212 }
1338 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 +
1339 2289 .pagelayer-elp-audio-insert,
1340 2290 .pagelayer-elp-media-select{
1341 2291 position: absolute;
1342 2292 top: 0;
@@ -1348,20 +2298,13 @@
1348 2298 -moz-box-sizing: content-box;
1349 2299 box-sizing: content-box;
1350 2300 }
1351 2301
1352 -.pagelayer-elp-select-div .pli{
1353 -position: absolute;
1354 -right: 12px;
1355 -top: 0;
1356 -line-height: 40px;
1357 -}
1358 -
1359 2302 .pagelayer-elp-shadow-div,
1360 2303 .pagelayer-elp-typo-div,
1361 2304 .pagelayer-elp-filter-div{
1362 -padding: 10px 10px 0px;
1363 -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);
1364 2307 position: relative;
1365 2308 margin-top: 8px;
1366 2309 border: 1px solid #ddd;
1367 2310 display: none;
@@ -1367,57 +2310,37 @@
1367 2310 display: none;
1368 2311 position: absolute;
1369 2312 background-color: #fff;
1370 2313 width: 86%;
1371 -z-index: 2;
2314 +z-index: 12;
1372 2315 }
1373 2316
1374 -.pagelayer-elp-typo-container{
1375 -max-height:250px;
1376 -overflow: auto;
2317 +.pagelayer-typo-default{
2318 +display:none;
2319 +width: 20px;
2320 +height: 20px;
2321 +cursor: pointer;
2322 +margin-left: 4px;
1377 2323 }
1378 2324
1379 -.pagelayer-elp-typo-sele{
1380 -width: 50%;
1381 -height: 24px;
2325 +.pagelayer-global-on .pagelayer-elp-typo:not([pagelayer-set-global]):hover .pagelayer-typo-default{
1382 2326 display: inline-block;
1383 -vertical-align: middle;
1384 -border: 1px solid #ccc;
1385 -font-size: 12px;
1386 -padding: 0 2px;
1387 -box-sizing: border-box;
1388 -line-height: 24px;
1389 -border-radius: 4px;
1390 -cursor: pointer;
1391 2327 }
1392 2328
1393 -.pagelayer-elp-typo-container span {
1394 -display: block;
1395 -font-size: 13px;
1396 -padding: 3px 2px;
1397 -border: 1px solid #ccc;
1398 -margin: 2px 0;
1399 -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;
1400 2333 }
1401 2334
1402 -.pagelayer-elp-typo-search{
1403 -padding: 0 2px;
1404 -height: 24px;
1405 -line-height: 24px;
1406 -}
1407 2335
1408 -.pagelayer-elp-typo-container span:hover{
1409 -background-color:#3E8EF7;
1410 -color:#ffffff;
1411 -}
1412 -
1413 2336 .pagelayer-prop-edit{
1414 2337 padding: 7px;
1415 -border: 1px solid #ccc;
1416 -width: 44px;
2338 +border: 1px solid #3e8ca4;
2339 +width: 20px;
1417 2340 position: absolute;
1418 2341 top: 7px;
1419 -right: 8px;
2342 +right: 11px;
1420 2343 text-align: center;
1421 2344 cursor: pointer;
1422 2345 border-radius: 3px;
1423 2346 }
@@ -1422,43 +2345,67 @@
1422 2345 border-radius: 3px;
1423 2346 }
1424 2347
1425 2348 .pagelayer-prop-edit i{
1426 -font-size: 20px;
2349 +font-size: 14px;
2350 +color: #484848;
1427 2351 }
1428 2352
2353 +.pagelayer-dark .pagelayer-prop-edit i{
2354 +color:#bdbdbd;
2355 +}
2356 +
1429 2357 .pagelayer-prop-show{
1430 2358 display: block;
1431 2359 }
1432 2360
1433 2361 .pagelayer-elp-shadow-color{
1434 -position: relative;
1435 -height: 35px;
2362 +padding: 15px 0px !important;
1436 2363 }
1437 2364
1438 2365 .pagelayer-elp-shadow-color .pagelayer-elp-color-div{
1439 -top:0;
2366 +top:7px;
1440 2367 }
1441 2368
1442 -.pagelayer-elp-typo:not(:first-child),
2369 +.pagelayer-elp-typo,
1443 2370 .pagelayer-elp-prop-grp{
1444 -margin: 3px 0;
1445 -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;
1446 2377 }
1447 2378
2379 +.pagelayer-elp-typo-fonts{
2380 +padding: 10px 0;
2381 +}
2382 +
1448 2383 .pagelayer-elp-gradient-div .pagelayer-elp-prop-grp{
1449 2384 padding: 5px 0;
2385 +display: flex;
2386 +align-items: center;
2387 +justify-content: space-between;
1450 2388 }
1451 2389
1452 -.pagelayer-elp-prop-grp{
1453 -position: relative;
2390 +.pagelayer-elp-gradient-div .pagelayer-elp-label{
2391 +width: auto !important;
1454 2392 }
1455 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 +
1456 2403 .pagelayer-elp-prop-grp .pagelayer-elp-color-div{
1457 -top: -3px;
1458 2404 right: 0;
1459 2405 }
1460 2406
2407 +.pagelayer-elp-typo-fonts .pagelayer-elp-label,
1461 2408 .pagelayer-elp-typo .pagelayer-elp-label,
1462 2409 .pagelayer-elp-typo .pagelayer-elp-typo-input,
1463 2410 .pagelayer-elp-shadow-div .pagelayer-elp-shadow-input,
1464 2411 .pagelayer-elp-shadow-div .pagelayer-elp-label,
@@ -1480,8 +2427,9 @@
1480 2427
1481 2428 .pagelayer-elp-filter-input{
1482 2429 background-position: center center !important;
1483 2430 background-size: cover !important;
2431 +width: 50% !important;
1484 2432 }
1485 2433
1486 2434 .pagelayer-elp-filter-blur .pagelayer-elp-filter-input{
1487 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;
@@ -1510,8 +2458,9 @@
1510 2458 .pagelayer-elp-filter-opacity input{
1511 2459 background-image: linear-gradient(90deg,#fff,#000);
1512 2460 }
1513 2461
2462 +.pagelayer-elp-typo-fonts .pagelayer-elp-label,
1514 2463 .pagelayer-elp-typo .pagelayer-elp-label{
1515 2464 font-weight: 600;
1516 2465 font-size: 11px;
1517 2466 color: #555;
@@ -1516,16 +2465,51 @@
1516 2465 font-size: 11px;
1517 2466 color: #555;
1518 2467 }
1519 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 +
1520 2500 .pagelayer-elp-typo select.pagelayer-elp-typo-input,
1521 2501 .pagelayer-elp-typo-input,
1522 2502 .pagelayer-elp-shadow-input{
1523 2503 padding: 3px;
1524 2504 border-radius: 4px !important;
1525 -line-height: 18px !important;
2505 +line-height: 23px !important;
1526 2506 }
1527 2507
2508 +.pagelayer-dark .pagelayer-elp-typo select.pagelayer-elp-typo-input{
2509 +background-color: #252529;
2510 +}
2511 +
1528 2512 .pagelayer-elp-grad-color{
1529 2513 position:relative;
1530 2514 }
1531 2515
@@ -1536,11 +2520,19 @@
1536 2520 .pagelayer-elp-tinymce {
1537 2521 border-radius: 2px !important;
1538 2522 }
1539 2523
2524 +.pagelayer-post-type{
2525 +text-transform: capitalize;
2526 +}
2527 +
2528 +.pagelayer-elp-text{
2529 +padding-left:5px;
2530 +}
2531 +
1540 2532 .pagelayer-elp-select-div,
1541 2533 .pagelayer-elp-spinner-div{
1542 -width: 140px;
2534 +width: 50%;
1543 2535 right: 10px;
1544 2536 position: absolute;
1545 2537 top: 7px;
1546 2538 }
@@ -1553,13 +2545,52 @@
1553 2545 padding: 2px 0 2px 6px;
1554 2546 border-radius: 4px !important;
1555 2547 }
1556 2548
1557 -.pagelayer-elp-select-div .pagelayer-elp-select {
1558 -border-radius: 4px;
1559 -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;
1560 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 +}
1561 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 +
1562 2593 .pagelayer-elpd-body input:focus,
1563 2594 .pagelayer-elpd-body textarea:focus,
1564 2595 .pagelayer-elpd-body select:focus {
1565 2596 border-color: #3e8ef7;
@@ -1575,19 +2606,56 @@
1575 2606 .pagelayer-elp-group-item .pagelayer-form-item{
1576 2607 padding: 10px 0px 10px 0px;
1577 2608 }
1578 2609
1579 -.pagelayer-elp-group-item .pagelayer-elp-select-div,
1580 2610 .pagelayer-elp-group-item .pagelayer-elp-spinner-div,
1581 -.pagelayer-elp-group-item .pagelayer-elp-color-div{
1582 -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;
1583 2614 }
1584 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 +
1585 2649 .pagelayer-elp-group-item-head{
1586 2650 display:flex;
1587 2651 background: #F8F8F8;
1588 2652 }
1589 2653
2654 +.pagelayer-dark .pagelayer-elp-group-item-head{
2655 +background:#252529;
2656 +}
2657 +
1590 2658 .pagelayer-elp-group-item-head span{
1591 2659 cursor: pointer;
1592 2660 padding: 9px;
1593 2661 display:inline-block;
@@ -1592,10 +2660,21 @@
1592 2660 padding: 9px;
1593 2661 display:inline-block;
1594 2662 }
1595 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 +
1596 2672 .pagelayer-elp-group-item-title{
1597 2673 flex-grow: 100;
2674 +white-space: nowrap;
2675 +overflow: hidden;
2676 +text-overflow: ellipsis;
1598 2677 }
1599 2678
1600 2679 .pagelayer-elp-group-item-del{
1601 2680 float: right;
@@ -1639,11 +2718,31 @@
1639 2718 padding:5px;
1640 2719 }
1641 2720
1642 2721 .pagelayer-widgets-form input[type="checkbox"]{
1643 -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;
1644 2729 }
1645 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 +
1646 2745 .pagelayer-widgets-form{
1647 2746 line-height:150%;
1648 2747 border-top: none;
1649 2748 padding: 8px;
@@ -1648,8 +2747,20 @@
1648 2747 border-top: none;
1649 2748 padding: 8px;
1650 2749 }
1651 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 +
1652 2763 /* End Widget Parameters */
1653 2764
1654 2765 .trumbowyg-box{
1655 2766 margin-top:0px !important;
@@ -1662,20 +2773,46 @@
1662 2773
1663 2774 /* Pagelayer Left bar */
1664 2775
1665 2776 .pagelayer-topbar-holder{
1666 -background-color: #3e8ef7;
2777 +background-color: #4CB5E8;
1667 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{
1668 2792 cursor: all-scroll;
1669 2793 }
1670 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 +
1671 2807 .pagelayer-logo{
1672 -font-size:20px;
2808 +font-size:18px;
1673 2809 font-weight: bold;
1674 2810 display: block;
1675 2811 text-align:center;
1676 2812 vertical-align:middle;
1677 2813 color:#fff;
2814 +width:76%;
1678 2815 }
1679 2816
1680 2817 .pagelayer-logo-text{
1681 2818 font-weight: bold;
@@ -1684,9 +2821,8 @@
1684 2821 vertical-align: super;
1685 2822 }
1686 2823
1687 2824 .pagelayer-settings-icon{
1688 -float:right;
1689 2825 padding-right:10px;
1690 2826 cursor: pointer;
1691 2827 position: absolute;
1692 2828 right: 5px;
@@ -1700,9 +2836,10 @@
1700 2836 position: absolute;
1701 2837 left: 5px;
1702 2838 top: 50%;
1703 2839 transform: translateY(-50%);
1704 -font-size:25px !important;
2840 +font-size: 18px !important;
2841 +color: #ffffff;
1705 2842 }
1706 2843
1707 2844 .pagelayer-leftbar{
1708 2845 width:270px !important;
@@ -1708,9 +2845,9 @@
1708 2845 width:270px !important;
1709 2846 padding-top:0;
1710 2847 background-color: #E3E3E3;
1711 2848 overflow: hidden;
1712 -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+ */
1713 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 */
1714 2851 background: -webkit-linear-gradient(224deg, rgba(222,222,222,1) 0%, rgba(191,202,214,1) 100%); /* safari5.1+,chrome10+ */
1715 2852 background: -o-linear-gradient(224deg, rgba(222,222,222,1) 0%, rgba(191,202,214,1) 100%); /* opera 11.10+ */
1716 2853 background: -ms-linear-gradient(224deg, rgba(222,222,222,1) 0%, rgba(191,202,214,1) 100%); /* ie10+ */
@@ -1717,8 +2854,13 @@
1717 2854 background: linear-gradient(226deg, rgba(222,222,222,1) 0%, rgba(191,202,214,1) 100%); /* w3c */
1718 2855 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#BFCAD6', endColorstr='#DEDEDE',GradientType=1 ); /* ie6-9 */
1719 2856 }
1720 2857
2858 +.pagelayer-dark .pagelayer-leftbar{
2859 +background: unset !important;
2860 +background-color: #1c1c1f !important;
2861 +}
2862 +
1721 2863 .pagelayer-leftbar-search{
1722 2864 text-align:center;
1723 2865 margin: 20px 40px 10px 25px;
1724 2866 position:relative;
@@ -1733,8 +2875,9 @@
1733 2875 font-size: 14px;
1734 2876 height:30px;
1735 2877 }
1736 2878
2879 +.pagelayer-widget-search .pli,
1737 2880 .pagelayer-leftbar-search .pli{
1738 2881 position: absolute;
1739 2882 top: 0;
1740 2883 height: 30px;
@@ -1742,8 +2885,9 @@
1742 2885 color: #666;
1743 2886 line-height: 30px;
1744 2887 }
1745 2888
2889 +.pagelayer-widget-search .pagelayer-sf-empty,
1746 2890 .pagelayer-leftbar-search .pagelayer-sf-empty{
1747 2891 right:0;
1748 2892 left:auto;
1749 2893 font-weight:bolder;
@@ -1749,12 +2893,9 @@
1749 2893 font-weight:bolder;
1750 2894 cursor:pointer;
1751 2895 }
1752 2896
1753 -.pagelayer-shortcodes{
1754 -margin-left:17px;
1755 -}
1756 -
2897 +.pagelayer-widget-group,
1757 2898 .pagelayer-leftbar-group{
1758 2899 width: 100%;
1759 2900 background-repeat: no-repeat;
1760 2901 background-position: center;
@@ -1761,12 +2902,13 @@
1761 2902 font-size: 11px !important;
1762 2903 color: #442E2E;
1763 2904 clear: both;
1764 2905 text-align: center;
1765 -font-family: "Open Sans",arial,sans-serif !important;
2906 +font-family: Roboto, 'Open Sans', Arial, sans-serif !important;
1766 2907 margin-bottom: 2px;
1767 2908 }
1768 2909
2910 +.pagelayer-widget-group h5,
1769 2911 .pagelayer-leftbar-group h5{
1770 2912 font-size: 11px;
1771 2913 line-height: 20px;
1772 2914 text-transform: uppercase;
@@ -1774,19 +2916,39 @@
1774 2916 padding: 5px 0 3px;
1775 2917 margin: 5px;
1776 2918 }
1777 2919
1778 -.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{
1779 2934 width: 100px !important;
1780 2935 height:67px !important;
1781 2936 margin-bottom:12px;
1782 2937 margin-left:12px;
1783 -background-color:#FFFFFF;
2938 +background-color: #FFFFFF;
1784 2939 border-radius: 4px;
1785 2940 float: left;
1786 2941 transition: all 0.1s;
1787 2942 }
1788 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,
1789 2951 .pagelayer-shortcode-drag:hover{
1790 2952 transform: scale(1.06);
1791 2953 }
1792 2954
@@ -1801,10 +2963,12 @@
1801 2963 padding: 0px !important;
1802 2964 }
1803 2965
1804 2966 .pagelayer-shortcode-text{
1805 -display: block;
1806 -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;
1807 2971 font-size: 11px !important;
1808 2972 font-style: normal;
1809 2973 line-height: 125%;
1810 2974 margin: 0;
@@ -1818,13 +2982,38 @@
1818 2982 transition: all 0.3s;
1819 2983 padding:1px;
1820 2984 }
1821 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 +
1822 3006 .pagelayer-shortcode-drag:hover .pagelayer-shortcode:before,
1823 3007 .pagelayer-shortcode-drag:hover .pagelayer-shortcode-text{
1824 -color: #00A0D2;
3008 +color: #2563eb;
1825 3009 }
1826 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 +
1827 3016 /* Trumbowyg color widget style */
1828 3017 .trumbowyg-dropdown-foreColor,
1829 3018 .trumbowyg-dropdown-backColor {
1830 3019 width: 100% !important;
@@ -1871,8 +3060,9 @@
1871 3060 z-index: 10;
1872 3061 }
1873 3062
1874 3063 .trumbowyg-dropdown-fontsize,
3064 +.trumbowyg-dropdown-lineheight,
1875 3065 .trumbowyg-dropdown-fontfamily{
1876 3066 height: 200px;
1877 3067 overflow: auto;
1878 3068 }
@@ -1946,8 +3136,61 @@
1946 3136 }
1947 3137
1948 3138 /* Pagelayer history end*/
1949 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 +
1950 3193 /* Pagelayer settings*/
1951 3194
1952 3195 .pagelayer-post-settings-holder{
1953 3196 border:1px solid #d3d3d3;
@@ -2091,9 +3334,8 @@
2091 3334 margin-top: -5px;
2092 3335 }
2093 3336 /*Tooltip end*/
2094 3337
2095 -
2096 3338 /* Add section modal*/
2097 3339 .pagelayer-add-section-modal-container{
2098 3340 position: fixed;
2099 3341 top: 0;
@@ -2102,31 +3344,110 @@
2102 3344 height: 100%;
2103 3345 background-color: #00000069;
2104 3346 z-index:9999;
2105 3347 display:none;
2106 -font-family: "Open Sans", Arial,Helvetica,sans-serif;
3348 +font-family: Roboto, 'Open Sans', Arial, Helvetica, sans-serif;
2107 3349 }
2108 3350
2109 -.pagelayer-add-section-modal-container span{
2110 -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%;
2111 3356 }
2112 3357
2113 3358 .pagelayer-add-section-modal-holder{
2114 3359 position: relative;
2115 -top: 40px;
2116 3360 font-size: 18px;
3361 +height: 100vh;
2117 3362 }
2118 3363
2119 3364 .pagelayer-add-section-modal{
2120 3365 background-color: #ffffff;
2121 -width: 90%;
2122 -height: calc(100vh - 80px);
2123 -border-radius: 5px;
3366 +width: 100%;
2124 3367 margin: auto;
2125 -overflow:auto;
2126 3368 position: relative;
2127 3369 }
2128 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 +
2129 3450 /* width */
2130 3451 .pagelayer-add-section-modal::-webkit-scrollbar {
2131 3452 width: 7px;
2132 3453 }
@@ -2149,51 +3470,101 @@
2149 3470 }
2150 3471
2151 3472 .pagelayer-add-section-modal-header{
2152 3473 padding: 15px;
2153 -border-bottom: 1px solid #e5e5e5;
2154 3474 position: sticky;
2155 -background: #fff;
3475 +background: #5e5e5e;
2156 3476 top: 0;
2157 3477 z-index: 999;
3478 +color: #fff;
2158 3479 }
2159 3480
2160 -.pagelayer-add-section-modal-body{
2161 -padding: 20px;
2162 -margin: 0;
2163 -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;
2164 3504 position:relative;
2165 -/*display: flex;
2166 -flex-flow: row wrap; */
2167 3505 }
2168 3506
2169 -@media (min-width: 360px) {
2170 -.pagelayer-add-section-modal-body {
2171 --webkit-column-count: 1;
2172 -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;
2173 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;
2174 3524 }
2175 3525
2176 -@media (min-width: 768px) {
2177 -.pagelayer-add-section-modal-body {
2178 --webkit-column-count: 2;
2179 -column-count: 2;
3526 +.pagelayer-section-search-div .pagelayer-sf-empty{
3527 +right:0;
3528 +left:auto;
3529 +font-weight:bolder;
3530 +cursor:pointer;
2180 3531 }
3532 +
3533 +.pagelayer-section-tags-holder{
3534 +padding: 0px 10px;
3535 +height: calc(100vh - 150px);
3536 +overflow: auto;
2181 3537 }
2182 3538
2183 -@media (min-width: 992px) {
2184 -.pagelayer-add-section-modal-body{
2185 --webkit-column-count: 3;
2186 -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;
2187 3547 }
3548 +
3549 +.pagelayer-section-tags[on="1"]{
3550 +background: #326fa6;
2188 3551 }
2189 3552
2190 -@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 +
2191 3560 .pagelayer-add-section-modal-body{
2192 --webkit-column-count: 4;
2193 -column-count: 4;
3561 +margin: 0;
3562 +background: #efefef;
3563 +height: 100%;
3564 +display: flex;
3565 +flex-wrap: wrap;
2194 3566 }
2195 -}
2196 3567
2197 3568 .pagelayer-add-section-modal-footer{
2198 3569 padding: 15px;
2199 3570 border-top: 1px solid #e5e5e5;
@@ -2198,59 +3569,92 @@
2198 3569 padding: 15px;
2199 3570 border-top: 1px solid #e5e5e5;
2200 3571 }
2201 3572
2202 -.pagelayer-add-section-modal-close{
2203 -float: right;
3573 +.pagelayer-section-is-visible{
3574 +height: 50px;
3575 +flex-basis: 100%;
2204 3576 }
2205 3577
2206 -.pagelayer-section-item[pagelayer-sc]{
2207 -text-align: center;
2208 -display:flex;
2209 -align-items:center;
2210 -justify-content: space-around;
2211 -min-height: 150px;
2212 -border:2px dashed #e1e1e1;
3578 +.pagelayer-section-holder{
3579 +vertical-align: top;
3580 +background: #efefef;
3581 +flex: 1;
2213 3582 }
2214 3583
2215 3584 .pagelayer-section-item{
2216 3585 min-height: 50px;
2217 -box-shadow: 0px 3px 5px #c3c1c1;
2218 -border-radius:4px;
2219 -margin:5px 0px 15px;
2220 --webkit-column-break-inside: avoid;
2221 -break-inside: avoid;
2222 -line-height:0;
2223 -display:inline-block;
3586 +margin:15px;
2224 3587 z-index: 9;
2225 3588 transition-duration: 0.2s;
2226 3589 background-color:#fff;
2227 -width:100%;
3590 +border: 3px solid #fff;
3591 +border-radius: 4px;
3592 +cursor: pointer;
3593 +position: relative;
2228 3594 }
2229 3595
2230 3596 .pagelayer-section-item:hover{
2231 3597 z-index: 99;
2232 -transform: scale(1.03);
2233 -position: relative;
3598 +transform: scale(1.01);
3599 +border: 3px solid #1A9CDB;
2234 3600 }
2235 3601
2236 3602 .pagelayer-section-item img{
2237 3603 width:100%;
2238 -box-sizing: border-box;
2239 3604 }
2240 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 +
2241 3645 .pagelayer-add-section-modal-overlay{
2242 -position:sticky;
3646 +position: absolute;
2243 3647 top:0;
2244 3648 bottom:0;
2245 3649 height:100%;
3650 +width:100%;
2246 3651 z-index:999999;
2247 3652 align-items: center;
2248 3653 justify-content: center;
2249 3654 text-align:center;
2250 3655 display:flex;
2251 -color:#3e8ef7;
2252 -background-color:#f7f7f7c2;
3656 +background-color:#f7f7f7fa;
2253 3657 }
2254 3658
2255 3659 .pagelayer-section-wait .fa-spin{
2256 3660 font-size:50px;
@@ -2255,12 +3659,8 @@
2255 3659 .pagelayer-section-wait .fa-spin{
2256 3660 font-size:50px;
2257 3661 }
2258 3662
2259 -.pagelayer-add-section-modal-close{
2260 -cursor:pointer;
2261 -}
2262 -
2263 3663 /* Add section modal end */
2264 3664
2265 3665 /* Navigator start */
2266 3666 .pagelayer-leftbar-prop-body{
@@ -2297,8 +3697,16 @@
2297 3697
2298 3698 .pagelayer-navi-active{
2299 3699 background-color: #d5e4f7
2300 3700 }
3701 +
3702 +.pagelayer-navigator-options{
3703 +float: right;
3704 +}
3705 +
3706 +.pagelayer-navigator-options .pli{
3707 +padding: 0 4px;
3708 +}
2301 3709 /* Navigator end */
2302 3710
2303 3711 /* Left bar move start */
2304 3712 .pagelayer-leftbar-moving{
@@ -2362,5 +3770,3285 @@
2362 3770 .pagelayer-leftbar-moving.pagelayer-leftbar-minimize .pagelayer-bottombar-row{
2363 3771 display:none;
2364 3772 }
2365 3773
2366 -/* 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 +}