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 +5524 -296 0.9.7 → 2.2.2 View file →
@@ -8,12 +8,14 @@
8 8
9 9 html {
10 10 line-height: 1.15; /* 1 */
11 11 -webkit-text-size-adjust: 100%; /* 2 */
12 + overflow: hidden !important;
12 13 }
13 14
14 15 body {
15 16 margin: 0;
17 + overflow: hidden !important;
16 18 }
17 19
18 20 main {
19 21 display: block;
@@ -191,9 +193,9 @@
191 193
192 194 /* An overwrite to show the row irrespective in the editor */
193 195
194 196 body {
195 -font-family: Arial;
197 +font-family: Roboto, 'Open Sans', Arial, Helvetica, sans-serif;
196 198 font-size:12px;
197 199 }
198 200
199 201 .pagelayer-normalize{
@@ -205,10 +207,11 @@
205 207 }
206 208
207 209 /* Pagelayer Top Bar */
208 210 .pagelayer-bottombar-holder{
209 -background: #f69c55;
211 +background: #4f4f4f;
210 212 position:relative;
213 +padding: 5px;
211 214 }
212 215
213 216 .pagelayer-bottombar{
214 217 padding: auto;
@@ -214,29 +217,65 @@
214 217 padding: auto;
215 218 }
216 219
217 220 .pagelayer-bottombar-rightbuttons button{
218 -font-size: 14px;
221 +font-size: 13px;
219 222 font-weight: bold;
220 223 cursor: pointer;
221 224 border-radius: 2px;
222 225 padding: 4px 8px;
223 226 margin: auto 5px;
227 +outline:none;
224 228 }
225 229
226 -.pagelayer-update-button,
227 -.pagelayer-post-settings-apply{
230 +.pagelayer-bottombar-rightbuttons .pli{
231 +color:#fff;
232 +cursor: pointer;
233 +}
234 +
235 +.pagelayer-success-btn{
228 236 border: #398439 1px solid;
229 237 color: #fff;
230 238 background: #449d44;
231 239 }
232 240
241 +.pagelayer-success-btn:hover{
242 +background: #3a733a;
243 +border-color: #3a733a;
244 +}
245 +
246 +.pagelayer-primary-btn{
247 +border: #2e6da4 1px solid;
248 +color: #fff;
249 +background: #337ab7;
250 +}
251 +
252 +.pagelayer-primary-btn:hover{
253 +background: #286090;
254 +border-color: #204d74;
255 +}
256 +
233 257 .pagelayer-close-button{
234 -border: #CDCDCD 1px solid;
258 +border: #ef4d4d 1px solid;
235 259 color: #fff;
236 -background: #CDCDCD;
260 +background: #ef4d4d;
237 261 }
238 262
263 +.pagelayer-close-button:hover{
264 +background: #c13030;
265 +border-color: #c13030;
266 +}
267 +
268 +.pagelayer-bottombar-rightbuttons i{
269 +padding: 4px;
270 +margin: auto 3px;
271 +}
272 +
273 +.pagelayer-mode-wrapper i{
274 +padding: 8px;
275 +margin: auto 5px;
276 +}
277 +
239 278 .pagelayer-mode-wrapper{
240 279 display:inline-block;
241 280 text-align:center;
242 281 }
@@ -241,9 +280,8 @@
241 280 text-align:center;
242 281 }
243 282
244 283 .pagelayer-mode-wrapper i{
245 -cursor: pointer;
246 284 padding: 8px;
247 285 margin: auto 5px;
248 286 }
249 287
@@ -252,8 +290,9 @@
252 290 bottom:100%;
253 291 color:#fff;
254 292 background-color: #3e8ef7;
255 293 display:none;
294 +z-index:1;
256 295 }
257 296
258 297 .pagelayer-leftbar-toggle-h{
259 298 width:0px;
@@ -258,8 +297,20 @@
258 297 .pagelayer-leftbar-toggle-h{
259 298 width:0px;
260 299 }
261 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 +
262 313 .pagelayer-leftbar-toggle{
263 314 position: absolute;
264 315 width:12px;
265 316 background: #E3E3E3;
@@ -265,10 +316,22 @@
265 316 background: #E3E3E3;
266 317 cursor: pointer;
267 318 text-align:center;
268 319 line-height:300%;
320 +top: 50%;
321 +left: 100%;
322 +transform: translateY(-50%);
269 323 }
270 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 +
271 334 .pagelayer-leftbar-toggle:hover{
272 335 background-color: #3e8ef7;
273 336 color: #ffffff;
274 337 }
@@ -279,30 +342,63 @@
279 342 top: 0;
280 343 bottom: 0;
281 344 left: 0;
282 345 right: 0;
346 +border-right: 1px solid #c9d0d9;
283 347 }
284 348
285 -.pagelayer-iframe{
286 -}
349 +/*.pagelayer-body-table{
350 +max-height: 100vh !important;
351 +}*/
287 352
353 +.pagelayer-iframe {}
354 +
288 355 .pagelayer-iframe-holder{
289 -max-height:100vh !important;
356 +max-height: 100vh !important;
290 357 height: 100%;
291 358 overflow: auto;
292 359 text-align:center;
293 360 }
294 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 +
295 374 .pagelayer-body{
296 375 transition:0.5s;
297 376 }
298 377
299 -.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 +}
300 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;
301 396 }
302 397
398 +.pagelayer-screen-desktop {}
399 +
303 400 .pagelayer-screen-tablet{
304 -width:768px;
305 401 height:900px;
306 402 margin:20px auto;
307 403 border: solid #444;
308 404 border-width: 30px 10px;
@@ -309,9 +405,8 @@
309 405 border-radius: 10px;
310 406 }
311 407
312 408 .pagelayer-screen-mobile{
313 -width:360px;
314 409 height:540px;
315 410 margin:20px auto;
316 411 border: solid #444;
317 412 border-width: 30px 10px;
@@ -319,26 +414,28 @@
319 414 }
320 415
321 416 /* Element Properties Dialog classes */
322 417 [class^="pagelayer-elp"]{
323 -font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
418 +font-family: Roboto, 'Open Sans', Arial, Helvetica, sans-serif !important;
324 419 color: #313439;
325 420 background-color: transparent;
326 421 }
327 422
328 423 #pagelayer-elpd {
329 -background-color: #f1f1f1;
330 424 display:none;
331 425 color:#444;
332 426 border: 1px solid #d3d3d3;
333 427 }
334 428
429 +.pagelayer-dark #pagelayer-elpd {
430 +border: 1px solid #252529;
431 +}
432 +
335 433 #pagelayer-elpd .slimScrollDiv{
336 434 height: calc(100% - 50px) !important;
337 435 }
338 436
339 437 .pagelayer-elpd-header {
340 -background-color: #3e8ef7;
341 438 border: none;
342 439 color:#fff;
343 440 }
344 441
@@ -347,19 +444,20 @@
347 444 padding:0px;
348 445 cursor: move;
349 446 color: #fff;
350 447 font-weight: 600;
448 +width:76%;
351 449 }
352 450
353 451 .pagelayer-elpd-close {
354 -float:right;
355 452 padding-right:10px;
356 453 cursor: pointer;
357 454 margin: 0px;
358 -position: relative;
455 +position: absolute;
359 456 right: 5px;
360 457 color: #fff;
361 -font-weight: 600;
458 +top: 50%;
459 +transform: translateY(-50%);
362 460 }
363 461
364 462 .pagelayer-elpd-body{
365 463 border: none;
@@ -366,37 +464,70 @@
366 464 }
367 465
368 466 .pagelayer-elpd-section-rows{
369 467 background-color: #FFF;
468 +border-top: 1px solid #d3d3d3;
370 469 }
371 470
471 +.pagelayer-dark .pagelayer-elpd-section-rows{
472 +background-color: #1c1c1f;
473 +border-top: 1px solid #1c1c1f;
474 +}
475 +
372 476 .pagelayer-elpd-section-name{
373 477 margin-top: 10px;
374 478 padding: 11px 10px;
375 -border-bottom: 1px solid #d3d3d3;
376 479 background-color: #FFF;
377 -font-size: 12px;
480 +font-size: 13px;
378 481 font-weight: bold;
379 -color: #666;
482 +color: #555;
380 483 cursor: pointer;
484 +transition: all 0.3s;
381 485 }
382 486
383 -.pagelayer-elpd-section-name:not(.pagelayer-elpd-section-open) .fa:before{
487 +.pagelayer-dark .pagelayer-elpd-section-name{
488 +background-color: #252529;
489 +font-family: Roboto;
490 +font-size: 12px;
491 +font-weight: 400;
492 +color: #ffffff;
493 +}
494 +
495 +.pagelayer-elpd-section-name:hover,
496 +.pagelayer-elpd-section-open{
497 +color:#1a7fb0;
498 +}
499 +
500 +.pagelayer-dark .pagelayer-elpd-section-open{
501 +background-color: #0d47a1;
502 +}
503 +
504 +.pagelayer-dark .pagelayer-elpd-section-name:hover{
505 +color:#ffffff;
506 +}
507 +
508 +.pagelayer-elpd-section-name:not(.pagelayer-elpd-section-open) .pli:before,
509 +.pagelayer-navigator-toggle .pagalayer-arrow:before{
384 510 content: "\f0da";
511 +font-family: pagelayer;
385 512 }
386 -.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{
387 515 content: "\f0d7";
516 +font-family: pagelayer;
388 517 }
389 518
390 -.pagelayer-elpd-section-name .fa{
519 +.pagelayer-elpd-section-name .pli{
391 520 width:15px;
392 521 float:right;
522 +font-style: normal;
393 523 }
394 524
395 525 /* Pagelayer editor panel tabs*/
396 526
397 527 .pagelayer-elpd-tab,
398 -.pagelayer-history-tab{
528 +.pagelayer-history-tab,
529 +.pagelayer-widget-tab{
399 530 display: inline-block;
400 531 font-size: 13px;
401 532 cursor: pointer;
402 533 padding: 10px 6px;
@@ -402,8 +533,23 @@
402 533 padding: 10px 6px;
403 534 margin: 0px 5px 0px 0px;
404 535 }
405 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 +
406 552 .pagelayer-elpd-settings-body{
407 553 display: none;
408 554 }
409 555
@@ -439,17 +585,47 @@
439 585 }
440 586
441 587 [pagelayer-elpd-active-tab="1"],
442 588 [pagelayer-history-active-tab="1"] {
443 -color: #3e8ef7;
589 +color: #2563eb;
590 +border-bottom: 2px solid #2563eb;
444 591 }
445 592
593 +.pagelayer-dark [pagelayer-elpd-active-tab="1"],
594 +.pagelayer-dark [pagelayer-history-active-tab="1"]{
595 +color: #ffffff;
596 +}
597 +
446 598 .pagelayer-elpd-tabs,
447 -.pagelayer-history-tabs {
599 +.pagelayer-history-tabs,
600 +.pagelayer-widget-tabs {
448 601 background-color: #fff;
449 602 border-bottom: 1px solid #d3d3d3;
450 603 }
451 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 +
452 628 .pagelayer-elpd-options{
453 629 text-align:right;
454 630 display:inline-block;
455 631 margin-right:10px;
@@ -459,8 +635,16 @@
459 635 padding:4px 5px;
460 636 cursor:pointer;
461 637 }
462 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 +
463 647 .pagelayer-form-item {
464 648 border-bottom: 1px dashed #e6e6e6;
465 649 padding: 10px 8px 10px 6px;
466 650 margin-bottom: 0px;
@@ -466,14 +650,39 @@
466 650 margin-bottom: 0px;
467 651 position: relative;
468 652 }
469 653
470 -.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{
471 676 padding:4px 0px 4px 0px;
472 677 position:relative;
473 678 }
474 679
475 -.pagelayer-elp-label{
680 +.pagelayer-elp-label-div[type=select]{
681 +width:50%;
682 +}
683 +
684 +.pagelayer-elp-label, .pagelayer-elp-link-label{
476 685 display: inline-block;
477 686 color: #555;
478 687 font-size: 12px;
479 688 line-height: 150%;
@@ -478,8 +687,16 @@
478 687 font-size: 12px;
479 688 line-height: 150%;
480 689 }
481 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 +
482 699 .pagelayer-elp-heading{
483 700 font-size: 13px;
484 701 font-weight:600;
485 702 line-height: 150%;
@@ -486,15 +703,15 @@
486 703 }
487 704
488 705 .pagelayer-elp-screen{
489 706 display: inline-block;
490 -position: absolute;
491 -top: -2px;
492 707 text-align: center;
493 708 z-index: 1;
709 +vertical-align: middle;
710 +position: relative;
494 711 }
495 712
496 -.pagelayer-elp-screen .fa{
713 +.pagelayer-elp-screen .pli{
497 714 padding: 0;
498 715 cursor: pointer;
499 716 box-shadow: 0 0 0.5rem #babbbc;
500 717 height: 30px;
@@ -503,66 +720,81 @@
503 720 line-height: 30px;
504 721 transition-duration: 0.1s;
505 722 }
506 723
507 -.pagelayer-elp-screen .fa-desktop:not(.pagelayer-prop-screen),
508 -.pagelayer-elp-screen .fa-tablet:not(.pagelayer-prop-screen),
509 -.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){
510 732 position: absolute;
511 733 transform: none;
512 734 left: 0;
735 +display:none;
513 736 opacity:0;
514 737 background:#aaaaaa;
515 738 color:#ffffff;
516 739 }
517 740
518 -.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{
519 748 transform: rotate(-90deg) translate(30px, -27px) rotate(90deg);
520 749 transition-delay: 0s;
750 +top:-5px;
521 751 left: 40px;
522 752 opacity:1;
753 +display:block;
523 754 }
524 755
525 -.pagelayer-elp-screen .fa-tablet.open{
756 +.pagelayer-elp-screen .pli-tablet.open{
526 757 transform: rotate(-90deg) translate(0px, -6px) rotate(90deg);
527 758 transition-delay: 0.1s;
759 +top:0px;
528 760 left: 40px;
529 761 opacity:1;
762 +display:block;
530 763 }
531 764
532 -.pagelayer-elp-screen .fa-mobile.open{
765 +.pagelayer-elp-screen .pli-mobile.open{
533 766 transform: rotate(-90deg) translate(-30px, -27px) rotate(90deg);
534 767 transition-delay: 0.2s;
768 +top:5px;
535 769 left: 40px;
536 770 opacity:1;
771 +display:block;
537 772 }
538 773
539 774 .pagelayer-elp-screen .pagelayer-prop-screen{
540 775 box-shadow: none;
541 776 z-index: 2;
542 -position: absolute;
777 +font-size: 12px;
778 +height: 20px;
779 +width: 20px;
780 +line-height: 20px;
543 781 }
544 782
545 -.pagelayer-elp-screen .fa:not(.pagelayer-prop-screen):hover{
546 -background-color: #3E8EF7;
783 +.pagelayer-elp-screen .pli:not(.pagelayer-prop-screen):hover{
784 +background-color: #2563eb;
547 785 }
548 786
549 -.pagelayer-elp-screen .pagelayer-prop-screen:hover{
550 -color: #3E8EF7;
787 +.pagelayer-dark .pagelayer-elp-screen .pli:not(.pagelayer-prop-screen):hover{
788 +background-color: #2563eb;
551 789 }
552 790
553 -.pagelayer-elp-screen .fa-tablet{
554 -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;
555 795 }
556 796
557 -.pagelayer-elp-screen .fa-mobile{
558 -font-size:1.3em;
559 -}
560 -
561 -.pagelayer-elp-screen{
562 -display: inline-block;
563 -}
564 -
565 797 .pagelayer-elp-units{
566 798 display: inline-block;
567 799 float:right;
568 800 padding-top:4px;
@@ -573,18 +805,46 @@
573 805 font-size:12px;
574 806 cursor: pointer;
575 807 }
576 808
809 +.pagelayer-dark .pagelayer-elp-units span{
810 +color:#bdbdbd;
811 +}
812 +
577 813 .pagelayer-elp-units span[selected] {
578 814 color: #3e8ef7;
579 815 }
580 816
581 -.pagelayer-elp-desc{
582 -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;
583 841 font-size: 12px;
584 842 line-height: 20px;
585 843 font-style: italic;
586 844 margin-top: 5px;
845 +display:block;
846 +word-break: break-word;
587 847 }
588 848
589 849 .pagelayer-elpd-body input,
590 850 .pagelayer-elpd-body textarea,
@@ -594,50 +854,241 @@
594 854 font-size: 13px !important;
595 855 color: #666;
596 856 border-radius: unset;
597 857 border:1px solid #CCC;
598 -line-height: 26px;
599 858 width: 100%;
600 859 }
601 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 +
602 884 .pagelayer-elpd-body input:focus,
603 885 .pagelayer-elpd-body textarea:focus,
604 886 .pagelayer-elpd-body select:focus{
605 -border-color: #00A0D2;
606 -box-shadow: 0 0 1px #00A0D2 inset;
887 +border-color: #2563eb;
888 +box-shadow: 0 0 1px #2563eb inset;
607 889 }
608 890
609 891 .pagelayer-elp-button{
610 -text-transform: unset;
611 -border: 1px solid #00A0D2;
612 -font-weight: unset;
613 -font-size: 12px;
614 -padding: 12px 10px;
615 -min-height: unset;
616 -background-color: #3e8ef7;
617 -color: #fff;
618 -transition: all 0.3s;
619 -border-radius: unset;
620 -border-radius: 2px;
621 -padding: 10px 15px;
622 -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;
623 905 }
624 906
625 907 .pagelayer-elp-button:hover{
626 -background-color: #3e8ef7bf;
627 -border-color: #00A0D2;
908 +background-color: #1d4ed8 !important;
909 +border-color: #1d4ed8 !important;
628 910 }
629 911
630 -.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{
631 929 padding:7px;
632 930 width:90%;
633 931 margin:5px auto;
634 932 height:150px;
635 -border: 1px solid #d5dadf;
636 933 position:relative;
637 -border: 1px solid #3e8ef7;
934 +border: 1px solid #2563eb;
638 935 }
639 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 +
640 1091 .pagelayer-elp-image{
641 1092 height: 100%;
642 1093 -webkit-background-size: cover;
643 1094 background-size: cover;
@@ -644,15 +1095,18 @@
644 1095 background-position: 50%;
645 1096 cursor:pointer;
646 1097 }
647 1098
648 -.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{
649 1103 cursor: pointer;
650 1104 position: absolute;
651 1105 top: 4px;
652 1106 right: 4px;
653 -background-color: #3e8ef7;
654 -padding: 5px 9px;
1107 +background-color: #2563eb;
1108 +padding: 5px 9px;
655 1109 max-width: 28px;
656 1110 max-height: 28px;
657 1111 -webkit-box-sizing: content-box;
658 1112 -moz-box-sizing: content-box;
@@ -659,9 +1113,27 @@
659 1113 box-sizing: content-box;
660 1114 border-radius: 2px;
661 1115 }
662 1116
663 -.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{
664 1136 color: #fff;
665 1137 }
666 1138
667 1139 .pagelayer-hidden{
@@ -671,54 +1143,229 @@
671 1143 .pagelayer-elp-radio-div{
672 1144 display:flex;
673 1145 }
674 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 +
675 1157 .pagelayer-elp-radio{
676 1158 display: inline-block;
677 1159 vertical-align: middle;
678 -padding: 6px 8px;
1160 +padding: 6px;
679 1161 cursor: pointer;
680 1162 font-size:12px;
681 1163 color: #666 !important;
682 1164 text-decoration: none;
683 1165 background: #eee;
684 -margin: 5px 2px;
685 1166 flex:1;
686 1167 text-align:center;
687 1168 }
688 1169
689 1170 .pagelayer-elp-radio:hover{
690 -background-color:#3e8ef7bf !important;
1171 +background-color: #4CB5E8 !important;
691 1172 color:#fff !important;
692 -transition: all 0.6s;
1173 +transition: all 0.3s;
693 1174 }
694 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 +
695 1185 .pagelayer-elp-radio-active{
696 -background-color: #3e8ef7 !important;
697 -color:#ffffff !important;
1186 +background-color: #1A9CDB !important;
1187 +color:#ffffff !important;
698 1188 }
699 1189
700 -.pagelayer-elp-color-div{
1190 +.pagelayer-elp-typo-edit-div,
1191 +.pagelayer-elp-color-div-holder{
701 1192 cursor: pointer;
702 -padding: 4px;
703 -width: 50px;
704 -height: 25px;
705 -display: block;
706 -border-radius: 2px;
1193 +width: 70px;
1194 +height: 30px;
1195 +border-radius: 3px;
707 1196 margin: 0 auto;
708 1197 position: absolute;
709 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;
710 1219 right: 7px;
711 -border: solid 1px #d1d1d1;
1220 +border: solid 1px #999;
712 1221 color: #333;
713 1222 vertical-align: middle;
714 1223 }
715 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 +
716 1233 .pagelayer-elp-color-preview{
717 -height: 93%;
718 -border: solid 1px #d1d1d1;
1234 +height: 100%;
1235 +background-size: cover !important;
1236 +border-radius: 2px;
1237 +flex: 1;
719 1238 }
720 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 +
721 1368 .picker_arrow {
722 1369 display:none;
723 1370 }
724 1371
@@ -724,10 +1371,28 @@
724 1371
725 1372 .picker_wrapper {
726 1373 top: 13px !important;
727 1374 right: -15px !important;
1375 +font-family: Roboto !important;
1376 +font-size: 12px;
1377 +border-radius: 4px;
1378 +background:#f7f7f7;
728 1379 }
729 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 +
730 1395 .pagelayer-elp-color-span{
731 1396 padding: 2px 0;
732 1397 height: 28px;
733 1398 line-height: 28px;
@@ -741,8 +1406,46 @@
741 1406 background: #fff !important;
742 1407 box-shadow: 0 3px 5px rgba(0,0,0,0.2) !important;
743 1408 }
744 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 +
745 1448 .pagelayer-elp-icon-div{
746 1449 cursor: pointer;
747 1450 padding: 6px;
748 1451 border: solid 1px #d1d1d1;
@@ -758,14 +1461,20 @@
758 1461 top: 7px;
759 1462 right: 10px;
760 1463 }
761 1464
1465 +.pagelayer-dark .pagelayer-elp-icon-div{
1466 +background-color: #1c1c1f;
1467 +color: #bdbdbd;
1468 +border: 1px solid #6e6d6d;
1469 +}
1470 +
762 1471 .pagelayer-elp-icon-preview{
763 1472 position: relative;
764 1473 display: block;
765 1474 margin-right: 5px;
766 1475 float: left;
767 -width: 83%;
1476 +width: 75%;
768 1477 height: auto;
769 1478 border: none;
770 1479 overflow: hidden;
771 1480 white-space: nowrap;
@@ -778,13 +1487,19 @@
778 1487 color: #666;
779 1488 vertical-align: middle;
780 1489 }
781 1490
1491 +.pagelayer-dark .pagelayer-elp-icon-preview i,
1492 +.pagelayer-dark .pagelayer-elp-icon-name{
1493 +color:#bdbdbd;
1494 +}
1495 +
782 1496 .pagelayer-elp-icon-name{
783 1497 font-size: 13px;
784 1498 }
785 1499
786 -.pagelayer-elp-icon-open{
1500 +.pagelayer-elp-icon-open,
1501 +.pagelayer-elp-icon-close{
787 1502 float: right;
788 1503 font-size: 10px;
789 1504 padding: 0px;
790 1505 line-height: 20px;
@@ -789,8 +1504,18 @@
789 1504 padding: 0px;
790 1505 line-height: 20px;
791 1506 }
792 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 +
793 1518 .pagelayer-elp-icon-remove{
794 1519 position: absolute;
795 1520 right: 20px;
796 1521 font-size: 11px;
@@ -797,9 +1522,10 @@
797 1522 top: 10px;
798 1523 z-index: 10;
799 1524 }
800 1525
801 -.pagelayer-elp-icon-selector{
1526 +.pagelayer-elp-icon-selector,
1527 +.pagelayer-elp-link-list{
802 1528 position: absolute;
803 1529 z-index: 1000;
804 1530 border: 1px solid rgba(0,0,0,0.2) !important;
805 1531 background: #fff !important;
@@ -809,9 +1535,9 @@
809 1535 padding: 5px;
810 1536 height: auto;
811 1537 box-sizing: border-box;
812 1538 display: none;
813 -width: 70%;
1539 +width: 80%;
814 1540 border-radius: 2px;
815 1541 margin: 0 0 0 auto;
816 1542 top: 40px;
817 1543 right: 10px;
@@ -816,8 +1542,13 @@
816 1542 top: 40px;
817 1543 right: 10px;
818 1544 }
819 1545
1546 +.pagelayer-dark .pagelayer-elp-icon-selector{
1547 +background: #252529 !important;
1548 +border: 1px solid #ffffff73 !important;
1549 +}
1550 +
820 1551 .pagelayer-elp-search-icon{
821 1552 margin-bottom: 5px !important;
822 1553 padding: 2px 6px;
823 1554 line-height: 20px !important;
@@ -833,8 +1564,27 @@
833 1564 max-height: 183px;
834 1565 overflow-y: auto;
835 1566 }
836 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 +
837 1587 .pagelayer-elp-icon-span{
838 1588 display: block;
839 1589 margin: 2px;
840 1590 cursor: pointer;
@@ -844,10 +1594,15 @@
844 1594 font-size: 13px;
845 1595 padding: 3px;
846 1596 }
847 1597
1598 +.pagelayer-dark .pagelayer-elp-icon-span,
1599 +.pagelayer-dark .pagelayer-elp-icon-span i{
1600 +color:#bdbdbd;
1601 +}
1602 +
848 1603 .pagelayer-elp-icon-span:hover{
849 -border-color: #00A0D2;
1604 +border-color: #2563eb;
850 1605 background-color: #3e8ef7;
851 1606 color: #ffffff;
852 1607 box-shadow: 0px 1px 1px #3e8ef7bf;
853 1608 }
@@ -864,9 +1619,40 @@
864 1619 .pagelayer-elp-icon-span:hover i{
865 1620 color: #ffffff;
866 1621 }
867 1622
1623 +.pagelayer-elp-icon-type{
1624 +display:flex;
1625 +flex-grow:1;
1626 +text-align:center;
1627 +}
868 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 +
869 1655 .pagelayer-video{
870 1656 width: 100% !important;
871 1657 /* background: #ccc; */
872 1658 position: relative;
@@ -881,26 +1667,33 @@
881 1667 left: 8px;
882 1668 }
883 1669
884 1670 .pagelayer-elp-slider-div{
885 -display: flex;
886 -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;
887 1676 }
888 1677
889 1678 input.pagelayer-elp-slider{
890 --webkit-appearance: none;
891 -width: 75%;
892 -height: 10px;
893 -border-radius: 5px;
894 -background: #d3d3d3 !important;
895 -outline: none;
896 -opacity: 0.7;
897 --webkit-transition: .2s;
898 -transition: opacity .2s;
899 -font-size: 0px !important;
900 -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;
901 1690 }
902 1691
1692 +.pagelayer-dark input.pagelayer-elp-slider {
1693 +background-color: #334155 !important;
1694 +}
1695 +
903 1696 .pagelayer-elp-slider:focus{
904 1697 border-color: transparent;
905 1698 box-shadow: 0 0 1px transparent;
906 1699 }
@@ -918,27 +1711,110 @@
918 1711 background: #4CAF50;
919 1712 cursor: pointer;
920 1713 }
921 1714
1715 +.pagelayer-dark .pagelayer-elp-slider::-webkit-slider-thumb{
1716 +background: #3e8ef7;
1717 +}
1718 +
922 1719 .pagelayer-elp-slider::-moz-range-thumb{
923 1720 width: 15px;
924 1721 height: 15px;
925 1722 border-radius: 50%;
926 -background: #00A0D2;
1723 +background: #2563eb;
927 1724 cursor: pointer;
928 1725 }
929 1726
930 -.pagelayer-elp-slider-value{
931 -width: 23% !important;
932 -margin-left: 2%;
933 -margin-top: -10px;
934 -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;
935 1740 }
936 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 +
937 1748 .pagelayer-elp-datetime-div{
938 1749 position: relative;
1750 +width: 100% !important;
939 1751 }
940 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 +
941 1817 .pagelayer-elp-fa-calendar{
942 1818 position: absolute;
943 1819 height: 40px;
944 1820 width: 40px;
@@ -969,11 +1845,16 @@
969 1845 transition: all .2s ease-in-out;
970 1846 }
971 1847
972 1848 input[type="checkbox"].pagelayer-elp-checkbox:checked{
973 -background-color: #3e8ef7;
1849 +background-color: #1A9CDB;
1850 +border-color: #1A9CDB;
974 1851 }
975 1852
1853 +.pagelayer-dark input[type="checkbox"].pagelayer-elp-checkbox:checked{
1854 +background-color: #0d47a1;
1855 +}
1856 +
976 1857 input[type="checkbox"].pagelayer-elp-checkbox:after{
977 1858 position: absolute;
978 1859 content: "";
979 1860 width: 1.5em;
@@ -997,52 +1878,164 @@
997 1878 .pagelayer-elp-pos-rel{
998 1879 position: relative;
999 1880 }
1000 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 +
1001 1890 .pagelayer-elp-input-icon input{
1002 -width: 83%;
1891 +width: 85%;
1003 1892 }
1004 1893
1005 -.pagelayer-elp-input-icon i.fa {
1006 -padding: 6px 10px;
1007 -position: relative;
1008 -top: 2px;
1894 +.pagelayer-elp-input-icon i.pli{
1895 +padding:1px 10px;
1896 +position:relative;
1897 +top:0px;
1009 1898 border: 1px solid #d1d1d1;
1010 1899 border-left:0px;
1011 1900 cursor: pointer;
1012 1901 background:#FFF;
1902 +line-height:26px !important;
1903 +font-size: 13px;
1013 1904 }
1014 1905
1015 -.pagelayer-elp-padding-div i.fa{
1016 -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;
1017 1912 border: 1px solid #d1d1d1;
1018 -border-left:0px;
1913 +border-left:0px !important;
1019 1914 cursor: pointer;
1020 1915 background: #FFF;
1021 1916 vertical-align:top;
1917 +font-size: 12px;
1918 +border-top-right-radius: 3px;
1919 +border-bottom-right-radius: 3px;
1022 1920 }
1023 1921
1024 1922 .pagelayer-elp-padding-linked{
1025 -background: #CCC !important;
1923 +background: #1a7fb0 !important;
1924 +color: #fff !important;
1925 +border: 1px solid #1a7fb0 !important;
1026 1926 }
1027 1927
1028 -.pagelayer-elp-dimension-div i.fa{
1029 -padding:6px 11px;
1030 -border: 1px solid #d1d1d1;
1031 -border-left:0px;
1032 -cursor: pointer;
1033 -background: #FFF;
1034 -vertical-align:top;
1928 +.pagelayer-elp-padding:first-child{
1929 +border-top-left-radius: 3px;
1930 +border-bottom-left-radius: 3px;
1035 1931 }
1036 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,
1037 1989 .pagelayer-elp-dimension-linked{
1038 -background: #CCC !important;
1990 +background-color: #2563eb !important;
1991 +border-color: #2563eb !important;
1992 +color: #ffffff !important;
1039 1993 }
1040 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 +
1041 2034 /* Pagelayer Multi Select Property */
1042 2035 .pagelayer-elp-multiselect{
1043 2036 min-height: 25px;
1044 -width:96%;
2037 +width:95%;
1045 2038 }
1046 2039
1047 2040 .pagelayer-elp-multiselect-ul{
1048 2041 list-style:none;
@@ -1054,34 +2047,63 @@
1054 2047 border-top:none;
1055 2048 position:absolute;
1056 2049 background:rgb(255, 255, 255);
1057 2050 z-index:1;
1058 -width:100%;
2051 +width:99%;
1059 2052 }
1060 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 +
1061 2061 .pagelayer-elp-multiselect-option{
1062 2062 font-size:13px;
1063 -padding:3px 8px;
2063 +padding:4px 8px;
1064 2064 cursor:pointer;
1065 2065 }
1066 2066
2067 +.pagelayer-dark .pagelayer-elp-multiselect-option{
2068 +color: #777;
2069 +}
2070 +
1067 2071 .pagelayer-elp-multiselect-option[selected="selected"]{
1068 -background: #cccccc;
2072 +background: #f2f2f2;
1069 2073 }
1070 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 +
1071 2086 .pagelayer-elp-multiselect-selected{
1072 2087 padding: 3px 5px;
1073 2088 border-radius: 5px;
1074 2089 margin: 2px;
1075 -background: #cccccc;
2090 +background: #44a9db;
1076 2091 line-height: 13px;
1077 2092 font-size: 13px;
2093 +color: #fff;
1078 2094 }
1079 2095
2096 +.pagelayer-dark .pagelayer-elp-multiselect-selected{
2097 +color: #777;
2098 +background: #ffffff;
2099 +}
2100 +
1080 2101 .pagelayer-elp-multiselect{
1081 2102 display: flex;
1082 2103 flex-wrap: wrap;
1083 2104 padding: 5px;
2105 +border-radius: 3px;
1084 2106 }
1085 2107
1086 2108 /* Pagelayer Multi Select Property end*/
1087 2109
@@ -1163,17 +2185,108 @@
1163 2185 float: left;
1164 2186 }
1165 2187
1166 2188 .pagelayer-elp-audio-div,
1167 -.pagelayer-elp-media-div{
1168 -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;
1169 2196 }
1170 2197
1171 -.pagelayer-elp-audio,
1172 -.pagelayer-elp-media{
1173 -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;
1174 2212 }
1175 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 +
1176 2289 .pagelayer-elp-audio-insert,
1177 2290 .pagelayer-elp-media-select{
1178 2291 position: absolute;
1179 2292 top: 0;
@@ -1185,20 +2298,13 @@
1185 2298 -moz-box-sizing: content-box;
1186 2299 box-sizing: content-box;
1187 2300 }
1188 2301
1189 -.pagelayer-elp-select-div .fa{
1190 -position: absolute;
1191 -right: 12px;
1192 -top: 0;
1193 -line-height: 40px;
1194 -}
1195 -
1196 2302 .pagelayer-elp-shadow-div,
1197 2303 .pagelayer-elp-typo-div,
1198 2304 .pagelayer-elp-filter-div{
1199 -padding: 10px 10px 0px;
1200 -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);
1201 2307 position: relative;
1202 2308 margin-top: 8px;
1203 2309 border: 1px solid #ddd;
1204 2310 display: none;
@@ -1204,18 +2310,37 @@
1204 2310 display: none;
1205 2311 position: absolute;
1206 2312 background-color: #fff;
1207 2313 width: 86%;
1208 -z-index: 2;
2314 +z-index: 12;
1209 2315 }
1210 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 +
1211 2336 .pagelayer-prop-edit{
1212 2337 padding: 7px;
1213 -border: 1px solid #ccc;
1214 -width: 44px;
2338 +border: 1px solid #3e8ca4;
2339 +width: 20px;
1215 2340 position: absolute;
1216 2341 top: 7px;
1217 -right: 8px;
2342 +right: 11px;
1218 2343 text-align: center;
1219 2344 cursor: pointer;
1220 2345 border-radius: 3px;
1221 2346 }
@@ -1220,43 +2345,67 @@
1220 2345 border-radius: 3px;
1221 2346 }
1222 2347
1223 2348 .pagelayer-prop-edit i{
1224 -font-size: 20px;
2349 +font-size: 14px;
2350 +color: #484848;
1225 2351 }
1226 2352
2353 +.pagelayer-dark .pagelayer-prop-edit i{
2354 +color:#bdbdbd;
2355 +}
2356 +
1227 2357 .pagelayer-prop-show{
1228 2358 display: block;
1229 2359 }
1230 2360
1231 2361 .pagelayer-elp-shadow-color{
1232 -position: relative;
1233 -height: 35px;
2362 +padding: 15px 0px !important;
1234 2363 }
1235 2364
1236 2365 .pagelayer-elp-shadow-color .pagelayer-elp-color-div{
1237 -top:0;
2366 +top:7px;
1238 2367 }
1239 2368
1240 -.pagelayer-elp-typo:not(:first-child),
2369 +.pagelayer-elp-typo,
1241 2370 .pagelayer-elp-prop-grp{
1242 -margin: 3px 0;
1243 -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;
1244 2377 }
1245 2378
2379 +.pagelayer-elp-typo-fonts{
2380 +padding: 10px 0;
2381 +}
2382 +
1246 2383 .pagelayer-elp-gradient-div .pagelayer-elp-prop-grp{
1247 2384 padding: 5px 0;
2385 +display: flex;
2386 +align-items: center;
2387 +justify-content: space-between;
1248 2388 }
1249 2389
1250 -.pagelayer-elp-prop-grp{
1251 -position: relative;
2390 +.pagelayer-elp-gradient-div .pagelayer-elp-label{
2391 +width: auto !important;
1252 2392 }
1253 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 +
1254 2403 .pagelayer-elp-prop-grp .pagelayer-elp-color-div{
1255 -top: -3px;
1256 2404 right: 0;
1257 2405 }
1258 2406
2407 +.pagelayer-elp-typo-fonts .pagelayer-elp-label,
1259 2408 .pagelayer-elp-typo .pagelayer-elp-label,
1260 2409 .pagelayer-elp-typo .pagelayer-elp-typo-input,
1261 2410 .pagelayer-elp-shadow-div .pagelayer-elp-shadow-input,
1262 2411 .pagelayer-elp-shadow-div .pagelayer-elp-label,
@@ -1275,8 +2424,43 @@
1275 2424 font-size:13px;
1276 2425 text-align: right;
1277 2426 }
1278 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,
1279 2463 .pagelayer-elp-typo .pagelayer-elp-label{
1280 2464 font-weight: 600;
1281 2465 font-size: 11px;
1282 2466 color: #555;
@@ -1281,16 +2465,51 @@
1281 2465 font-size: 11px;
1282 2466 color: #555;
1283 2467 }
1284 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 +
1285 2500 .pagelayer-elp-typo select.pagelayer-elp-typo-input,
1286 2501 .pagelayer-elp-typo-input,
1287 2502 .pagelayer-elp-shadow-input{
1288 2503 padding: 3px;
1289 2504 border-radius: 4px !important;
1290 -line-height: 18px !important;
2505 +line-height: 23px !important;
1291 2506 }
1292 2507
2508 +.pagelayer-dark .pagelayer-elp-typo select.pagelayer-elp-typo-input{
2509 +background-color: #252529;
2510 +}
2511 +
1293 2512 .pagelayer-elp-grad-color{
1294 2513 position:relative;
1295 2514 }
1296 2515
@@ -1301,11 +2520,19 @@
1301 2520 .pagelayer-elp-tinymce {
1302 2521 border-radius: 2px !important;
1303 2522 }
1304 2523
2524 +.pagelayer-post-type{
2525 +text-transform: capitalize;
2526 +}
2527 +
2528 +.pagelayer-elp-text{
2529 +padding-left:5px;
2530 +}
2531 +
1305 2532 .pagelayer-elp-select-div,
1306 2533 .pagelayer-elp-spinner-div{
1307 -width: 140px;
2534 +width: 50%;
1308 2535 right: 10px;
1309 2536 position: absolute;
1310 2537 top: 7px;
1311 2538 }
@@ -1318,13 +2545,52 @@
1318 2545 padding: 2px 0 2px 6px;
1319 2546 border-radius: 4px !important;
1320 2547 }
1321 2548
1322 -.pagelayer-elp-select-div .pagelayer-elp-select {
1323 -border-radius: 4px;
1324 -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;
1325 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 +}
1326 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 +
1327 2593 .pagelayer-elpd-body input:focus,
1328 2594 .pagelayer-elpd-body textarea:focus,
1329 2595 .pagelayer-elpd-body select:focus {
1330 2596 border-color: #3e8ef7;
@@ -1340,19 +2606,56 @@
1340 2606 .pagelayer-elp-group-item .pagelayer-form-item{
1341 2607 padding: 10px 0px 10px 0px;
1342 2608 }
1343 2609
1344 -.pagelayer-elp-group-item .pagelayer-elp-select-div,
1345 2610 .pagelayer-elp-group-item .pagelayer-elp-spinner-div,
1346 -.pagelayer-elp-group-item .pagelayer-elp-color-div{
1347 -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;
1348 2614 }
1349 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 +
1350 2649 .pagelayer-elp-group-item-head{
1351 2650 display:flex;
1352 2651 background: #F8F8F8;
1353 2652 }
1354 2653
2654 +.pagelayer-dark .pagelayer-elp-group-item-head{
2655 +background:#252529;
2656 +}
2657 +
1355 2658 .pagelayer-elp-group-item-head span{
1356 2659 cursor: pointer;
1357 2660 padding: 9px;
1358 2661 display:inline-block;
@@ -1357,10 +2660,21 @@
1357 2660 padding: 9px;
1358 2661 display:inline-block;
1359 2662 }
1360 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 +
1361 2672 .pagelayer-elp-group-item-title{
1362 2673 flex-grow: 100;
2674 +white-space: nowrap;
2675 +overflow: hidden;
2676 +text-overflow: ellipsis;
1363 2677 }
1364 2678
1365 2679 .pagelayer-elp-group-item-del{
1366 2680 float: right;
@@ -1404,11 +2718,31 @@
1404 2718 padding:5px;
1405 2719 }
1406 2720
1407 2721 .pagelayer-widgets-form input[type="checkbox"]{
1408 -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;
1409 2729 }
1410 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 +
1411 2745 .pagelayer-widgets-form{
1412 2746 line-height:150%;
1413 2747 border-top: none;
1414 2748 padding: 8px;
@@ -1413,8 +2747,20 @@
1413 2747 border-top: none;
1414 2748 padding: 8px;
1415 2749 }
1416 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 +
1417 2763 /* End Widget Parameters */
1418 2764
1419 2765 .trumbowyg-box{
1420 2766 margin-top:0px !important;
@@ -1427,20 +2773,46 @@
1427 2773
1428 2774 /* Pagelayer Left bar */
1429 2775
1430 2776 .pagelayer-topbar-holder{
1431 -background-color: #3e8ef7;
2777 +background-color: #4CB5E8;
1432 2778 position:relative;
2779 +animation: colorchange 30s infinite alternate;
2780 +-webkit-animation: colorchange 30s infinite alternate;
1433 2781 }
1434 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 +
1435 2807 .pagelayer-logo{
1436 -font-size:20px;
2808 +font-size:18px;
1437 2809 font-weight: bold;
1438 2810 display: block;
1439 2811 text-align:center;
1440 2812 vertical-align:middle;
1441 2813 color:#fff;
1442 -background-color: #3e8ef7;
2814 +width:76%;
1443 2815 }
1444 2816
1445 2817 .pagelayer-logo-text{
1446 2818 font-weight: bold;
@@ -1449,9 +2821,8 @@
1449 2821 vertical-align: super;
1450 2822 }
1451 2823
1452 2824 .pagelayer-settings-icon{
1453 -float:right;
1454 2825 padding-right:10px;
1455 2826 cursor: pointer;
1456 2827 position: absolute;
1457 2828 right: 5px;
@@ -1458,30 +2829,73 @@
1458 2829 top: 50%;
1459 2830 transform: translateY(-50%);
1460 2831 }
1461 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 +
1462 2844 .pagelayer-leftbar{
1463 2845 width:270px !important;
1464 2846 padding-top:0;
1465 -background: #E3E3E3 !important;
2847 +background-color: #E3E3E3;
1466 2848 overflow: hidden;
2849 +background: -moz-linear-gradient(224deg, rgba(222,222,222,1) 0%, rgba(191,202,214,1) 100%); /* ff3.6+ */
2850 +background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(191,202,214,1)), color-stop(100%, rgba(222,222,222,1))); /* safari4+,chrome */
2851 +background: -webkit-linear-gradient(224deg, rgba(222,222,222,1) 0%, rgba(191,202,214,1) 100%); /* safari5.1+,chrome10+ */
2852 +background: -o-linear-gradient(224deg, rgba(222,222,222,1) 0%, rgba(191,202,214,1) 100%); /* opera 11.10+ */
2853 +background: -ms-linear-gradient(224deg, rgba(222,222,222,1) 0%, rgba(191,202,214,1) 100%); /* ie10+ */
2854 +background: linear-gradient(226deg, rgba(222,222,222,1) 0%, rgba(191,202,214,1) 100%); /* w3c */
2855 +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#BFCAD6', endColorstr='#DEDEDE',GradientType=1 ); /* ie6-9 */
1467 2856 }
1468 2857
2858 +.pagelayer-dark .pagelayer-leftbar{
2859 +background: unset !important;
2860 +background-color: #1c1c1f !important;
2861 +}
2862 +
1469 2863 .pagelayer-leftbar-search{
1470 2864 text-align:center;
1471 -padding: 10px 40px 10px 25px;
2865 +margin: 20px 40px 10px 25px;
2866 +position:relative;
1472 2867 }
1473 2868
1474 2869 .pagelayer-search-field{
1475 2870 width:100%;
1476 2871 line-height:120%;
1477 -padding:2px;
2872 +padding: 5px 20px 5px 30px;
2873 +border-radius: 5px;
2874 +border: none;
2875 +font-size: 14px;
2876 +height:30px;
1478 2877 }
1479 2878
1480 -.pagelayer-shortcodes{
1481 -margin-left:17px;
2879 +.pagelayer-widget-search .pli,
2880 +.pagelayer-leftbar-search .pli{
2881 +position: absolute;
2882 +top: 0;
2883 +height: 30px;
2884 +padding: 0 7px;
2885 +color: #666;
2886 +line-height: 30px;
1482 2887 }
1483 2888
2889 +.pagelayer-widget-search .pagelayer-sf-empty,
2890 +.pagelayer-leftbar-search .pagelayer-sf-empty{
2891 +right:0;
2892 +left:auto;
2893 +font-weight:bolder;
2894 +cursor:pointer;
2895 +}
2896 +
2897 +.pagelayer-widget-group,
1484 2898 .pagelayer-leftbar-group{
1485 2899 width: 100%;
1486 2900 background-repeat: no-repeat;
1487 2901 background-position: center;
@@ -1488,12 +2902,13 @@
1488 2902 font-size: 11px !important;
1489 2903 color: #442E2E;
1490 2904 clear: both;
1491 2905 text-align: center;
1492 -font-family: "Open Sans",arial,sans-serif !important;
2906 +font-family: Roboto, 'Open Sans', Arial, sans-serif !important;
1493 2907 margin-bottom: 2px;
1494 2908 }
1495 2909
2910 +.pagelayer-widget-group h5,
1496 2911 .pagelayer-leftbar-group h5{
1497 2912 font-size: 11px;
1498 2913 line-height: 20px;
1499 2914 text-transform: uppercase;
@@ -1501,23 +2916,41 @@
1501 2916 padding: 5px 0 3px;
1502 2917 margin: 5px;
1503 2918 }
1504 2919
1505 -.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{
1506 2934 width: 100px !important;
1507 2935 height:67px !important;
1508 -margin-bottom:6px;
2936 +margin-bottom:12px;
1509 2937 margin-left:12px;
1510 -background-color:#FFFFFF;
2938 +background-color: #FFFFFF;
1511 2939 border-radius: 4px;
1512 2940 float: left;
1513 -transition: all 0.3s;
1514 -border: 1px solid #ccc;
2941 +transition: all 0.1s;
1515 2942 }
1516 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,
1517 2951 .pagelayer-shortcode-drag:hover{
1518 -box-shadow: 2px 2px 2px #c6c6c6;
1519 -border-color: #00A0D2;
2952 +transform: scale(1.06);
1520 2953 }
1521 2954
1522 2955 .pagelayer-sc{
1523 2956 padding: 4px !important;
@@ -1524,28 +2957,8 @@
1524 2957 margin: 4px auto 0 auto !important;
1525 2958 cursor: move;
1526 2959 }
1527 2960
1528 -.pagelayer-shortcode,.pagelayer-shortcode:before{
1529 -display:inline-block;
1530 -width:22px;
1531 -height:22px;
1532 -font-size:22px;
1533 -line-height:1;
1534 -font-family:pagelayer,fontawesome;
1535 -text-decoration:inherit;
1536 -font-weight:400;
1537 -font-style:normal;
1538 -vertical-align:top;
1539 -text-align:center;
1540 --webkit-transition:color .1s ease-in 0;
1541 -transition:color .1s ease-in 0;
1542 --webkit-font-smoothing:antialiased;
1543 --moz-osx-font-smoothing:grayscale;
1544 -color: #777;
1545 -transition: all 0.3s;
1546 -}
1547 -
1548 2961 .pagelayer-shortcode-inner{
1549 2962 height: 25px;
1550 2963 padding: 0px !important;
1551 2964 }
@@ -1550,10 +2963,12 @@
1550 2963 padding: 0px !important;
1551 2964 }
1552 2965
1553 2966 .pagelayer-shortcode-text{
1554 -display: block;
1555 -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;
1556 2971 font-size: 11px !important;
1557 2972 font-style: normal;
1558 2973 line-height: 125%;
1559 2974 margin: 0;
@@ -1567,89 +2982,38 @@
1567 2982 transition: all 0.3s;
1568 2983 padding:1px;
1569 2984 }
1570 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 +
1571 3006 .pagelayer-shortcode-drag:hover .pagelayer-shortcode:before,
1572 3007 .pagelayer-shortcode-drag:hover .pagelayer-shortcode-text{
1573 - color: #00A0D2;
3008 +color: #2563eb;
1574 3009 }
1575 3010
1576 -/* Pagelayer Editor Icons */
1577 -@font-face{font-family:pagelayer;src:url(../fonts/pagelayer.eot)}
1578 -@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 +}
1579 3015
1580 -.pagelayer-pl_row:before{content:"\f0c9"} /* e916 */
1581 -.pagelayer-pl_inner_row:before{content:"\f022"}
1582 -.pagelayer-pl_col:before{content:"\f0db"}
1583 -.pagelayer-pl_heading:before,.pagelayer-pl_post_title:before{content:"\e90f";font-size:18px;}
1584 -.pagelayer-pl_text:before{content:"\f036"}
1585 -.pagelayer-pl_code:before{content:"\f044"}
1586 -.pagelayer-pl_quote:before{content:"\e906"}
1587 -.pagelayer-pl_list:before{content:"\e908";font-size:20px;}
1588 -.pagelayer-pl_icon:before{content:"\f006"}
1589 -.pagelayer-pl_image:before{content:"\f03e"}
1590 -.pagelayer-pl_image_slider:before{content:"\e939";margin-left:-5px;}
1591 -.pagelayer-pl_grid_gallery:before{content:"\f00a"}
1592 -.pagelayer-pl_image_hotspot:before{content:"\e91c"}
1593 -.pagelayer-pl_btn:before{content:"\e90b"}
1594 -.pagelayer-pl_btn_grp:before{content:"\f24d"}
1595 -.pagelayer-pl_download:before{content:"\e909"}
1596 -.pagelayer-pl_social:before{content:"\e938"}
1597 -.pagelayer-pl_share:before{content:"\e952"}
1598 -.pagelayer-pl_video:before{content:"\f03d"}
1599 -.pagelayer-pl_audio:before{content:"\f028"}
1600 -.pagelayer-pl_video_lightbox:before{content:"\e910"}
1601 -.pagelayer-pl_video_slider:before{content:"\e944"}
1602 -.pagelayer-pl_service:before{content:"\e937"}
1603 -.pagelayer-pl_tabs:before{content:"\e93c"}
1604 -.pagelayer-pl_accordion:before{content:"\e946"}
1605 -.pagelayer-pl_table:before{content:"\f0ce"}
1606 -.pagelayer-pl_call:before{content:"\e916"}
1607 -.pagelayer-pl_modal:before{content:"\e90e"}
1608 -.pagelayer-pl_splash:before{content:"\e90c"}
1609 -.pagelayer-pl_space:before{content:"\e93a"}
1610 -.pagelayer-pl_embed:before{content:"\f121"}
1611 -.pagelayer-pl_chart:before{content:"\e94d"}
1612 -.pagelayer-pl_google_maps:before{content:"\e924"}
1613 -.pagelayer-pl_countdown:before{content:"\e941"}
1614 -.pagelayer-pl_pricing:before{content:"\e933"}
1615 -.pagelayer-pl_contact:before{content:"\f298"}
1616 -.pagelayer-pl_search:before{content:"\f002"}
1617 -.pagelayer-pl_testimonial:before{content:"\e906"}
1618 -.pagelayer-pl_alert:before{content:"\f06a"}
1619 -.pagelayer-pl_anchor:before{content:"\f13d"}
1620 -.pagelayer-pl_progress:before{content:"\f0ae"}
1621 -.pagelayer-pl_social_grp:before{content:"\f029"}
1622 -.pagelayer-pl_share_grp:before{content:"\e952"}
1623 -.pagelayer-pl_counter:before{content:"\f162"}
1624 -.pagelayer-pl_shortcodes:before{content:"\f141"}
1625 -.pagelayer-pl_divider:before{content:"\f2d1"}
1626 -.pagelayer-pl_stars:before{content:"\f123"}
1627 -.pagelayer-pl_block:before{content:"\f0c8"}
1628 -.pagelayer-pl_collapse:before{content:"\f233"}
1629 -.pagelayer-pl_iconbox:before{content:"\e912"}
1630 -.pagelayer-pl_tooltip:before{content:"\f27a"} /*f18d*/
1631 -.pagelayer-pl_post_comment:before{content:"\f0e6"}
1632 -.pagelayer-pl_post_info:before{content:"\f05a"}
1633 -.pagelayer-pl_post_nav:before{content:"\f0ec"}
1634 -.pagelayer-pl_badge:before{content:"\f2c1"}
1635 -.pagelayer-pl_wp_widgets:before{content:"\e945"}
1636 -.pagelayer-pl_wp_custom_menu:before{content:"\e92a"}
1637 -.pagelayer-pl_wp_posts_grid:before{content:"\e92f"}
1638 -.pagelayer-pl_wp_posts_slider:before{content:"\e951"}
1639 -.pagelayer-pl_wp_comments:before{content:"\e970"}
1640 -.pagelayer-pl_wp_pages:before{content:"\e92e"}
1641 -.pagelayer-pl_wp_posts:before{content:"\e912"}
1642 -.pagelayer-pl_wp_calendar:before{content:"\f073"}
1643 -.pagelayer-pl_wp_categories:before{content:"\e949"}
1644 -.pagelayer-pl_wp_archives:before{content:"\f271"}
1645 -.pagelayer-pl_wp_tags:before{content:"\e913"}
1646 -.pagelayer-pl_wp_title:before{content:"\e90f";font-size:18px;}
1647 -.pagelayer-pl_wp_menu:before{content:"\e900";font-size:28px; margin:-3px;}
1648 -.pagelayer-pl_arrow_down:before{content:"\e900";font-size:28px; margin:-3px;}
1649 -.pagelayer-pl_posts:before{content:"\e92e";font-size:28px; margin:-3px;}
1650 -.pagelayer-shortcode[class*="pagelayer-pl_wp_"]:before{content:"\f19a"}
1651 -
1652 3016 /* Trumbowyg color widget style */
1653 3017 .trumbowyg-dropdown-foreColor,
1654 3018 .trumbowyg-dropdown-backColor {
1655 3019 width: 100% !important;
@@ -1695,8 +3059,15 @@
1695 3059 box-shadow: #000 0 0 2px;
1696 3060 z-index: 10;
1697 3061 }
1698 3062
3063 +.trumbowyg-dropdown-fontsize,
3064 +.trumbowyg-dropdown-lineheight,
3065 +.trumbowyg-dropdown-fontfamily{
3066 +height: 200px;
3067 +overflow: auto;
3068 +}
3069 +
1699 3070 /* Trumbowyg color widget style end */
1700 3071
1701 3072 /* Pagelayer history style*/
1702 3073
@@ -1765,8 +3136,61 @@
1765 3136 }
1766 3137
1767 3138 /* Pagelayer history end*/
1768 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 +
1769 3193 /* Pagelayer settings*/
1770 3194
1771 3195 .pagelayer-post-settings-holder{
1772 3196 border:1px solid #d3d3d3;
@@ -1823,4 +3247,3808 @@
1823 3247 margin:7px 0;
1824 3248 }
1825 3249
1826 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 +}