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