PluginProbe
Page Builder: Pagelayer – Drag and Drop website builder / 0.9.6
Page Builder: Pagelayer – Drag and Drop website builder v0.9.6
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 1.0.5 All 129 releases
pagelayer / css / pagelayer-editor.css

pagelayer-editor.css in Page Builder: Pagelayer – Drag and Drop website builder 0.9.6, at css/pagelayer-editor.css

1,638 lines 28.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /*
2 PAGELAYER
3 http://pagelayer.com/
4 (c) Pagelayer Team
5 */
6
7 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
8
9 html {
10 line-height: 1.15; /* 1 */
11 -webkit-text-size-adjust: 100%; /* 2 */
12 }
13
14 body {
15 margin: 0;
16 }
17
18 main {
19 display: block;
20 }
21
22 h1 {
23 font-size: 2em;
24 margin: 0.67em 0;
25 }
26
27 hr {
28 box-sizing: content-box; /* 1 */
29 height: 0; /* 1 */
30 overflow: visible; /* 2 */
31 }
32
33 pre {
34 font-family: monospace, monospace; /* 1 */
35 font-size: 1em; /* 2 */
36 }
37
38 a {
39 background-color: transparent;
40 }
41
42 abbr[title] {
43 border-bottom: none; /* 1 */
44 text-decoration: underline; /* 2 */
45 text-decoration: underline dotted; /* 2 */
46 }
47
48 b,
49 strong {
50 font-weight: bolder;
51 }
52
53 code,
54 kbd,
55 samp {
56 font-family: monospace, monospace; /* 1 */
57 font-size: 1em; /* 2 */
58 }
59
60 small {
61 font-size: 80%;
62 }
63
64 sub,
65 sup {
66 font-size: 75%;
67 line-height: 0;
68 position: relative;
69 vertical-align: baseline;
70 }
71
72 sub {
73 bottom: -0.25em;
74 }
75
76 sup {
77 top: -0.5em;
78 }
79
80 img {
81 border-style: none;
82 }
83
84 button,
85 input,
86 optgroup,
87 select,
88 textarea {
89 font-family: inherit; /* 1 */
90 font-size: 100%; /* 1 */
91 line-height: 1.15; /* 1 */
92 margin: 0; /* 2 */
93 }
94
95 button,
96 input { /* 1 */
97 overflow: visible;
98 }
99
100 button,
101 select { /* 1 */
102 text-transform: none;
103 }
104
105 button,
106 [type="button"],
107 [type="reset"],
108 [type="submit"] {
109 -webkit-appearance: button;
110 }
111
112 button::-moz-focus-inner,
113 [type="button"]::-moz-focus-inner,
114 [type="reset"]::-moz-focus-inner,
115 [type="submit"]::-moz-focus-inner {
116 border-style: none;
117 padding: 0;
118 }
119
120 button:-moz-focusring,
121 [type="button"]:-moz-focusring,
122 [type="reset"]:-moz-focusring,
123 [type="submit"]:-moz-focusring {
124 outline: 1px dotted ButtonText;
125 }
126
127 fieldset {
128 padding: 0.35em 0.75em 0.625em;
129 }
130
131 legend {
132 box-sizing: border-box; /* 1 */
133 color: inherit; /* 2 */
134 display: table; /* 1 */
135 max-width: 100%; /* 1 */
136 padding: 0; /* 3 */
137 white-space: normal; /* 1 */
138 }
139
140 progress {
141 vertical-align: baseline;
142 }
143
144 textarea {
145 overflow: auto;
146 }
147
148 [type="checkbox"],
149 [type="radio"] {
150 box-sizing: border-box; /* 1 */
151 padding: 0; /* 2 */
152 }
153
154 [type="number"]::-webkit-inner-spin-button,
155 [type="number"]::-webkit-outer-spin-button {
156 height: auto;
157 }
158
159 [type="search"] {
160 -webkit-appearance: textfield; /* 1 */
161 outline-offset: -2px; /* 2 */
162 }
163
164 [type="search"]::-webkit-search-decoration {
165 -webkit-appearance: none;
166 }
167
168 ::-webkit-file-upload-button {
169 -webkit-appearance: button; /* 1 */
170 font: inherit; /* 2 */
171 }
172
173 details {
174 display: block;
175 }
176
177 summary {
178 display: list-item;
179 }
180
181
182 template {
183 display: none;
184 }
185
186 [hidden] {
187 display: none;
188 }
189
190 /* END normalize.css */
191
192 /* An overwrite to show the row irrespective in the editor */
193
194 body {
195 font-family: Arial;
196 font-size:12px;
197 }
198
199 .pagelayer-normalize{
200 height:100%;
201 width:100%;
202 padding:0px;
203 margin:0px;
204 border:0px;
205 }
206
207 /* Pagelayer Top Bar */
208 .pagelayer-bottombar-holder{
209 background: #f69c55;
210 position:relative;
211 }
212
213 .pagelayer-bottombar{
214 padding: auto;
215 }
216
217 .pagelayer-bottombar-rightbuttons button{
218 font-size: 14px;
219 font-weight: bold;
220 cursor: pointer;
221 border-radius: 2px;
222 padding: 4px 8px;
223 margin: auto 5px;
224 }
225
226 .pagelayer-update-button{
227 border: #398439 1px solid;
228 color: #fff;
229 background: #449d44;
230 }
231
232 .pagelayer-close-button{
233 border: #CDCDCD 1px solid;
234 color: #fff;
235 background: #CDCDCD;
236 }
237
238 .pagelayer-mode-wrapper{
239 display:inline-block;
240 text-align:center;
241 }
242
243 .pagelayer-mode-wrapper i{
244 cursor: pointer;
245 padding: 8px;
246 margin: auto 5px;
247 }
248
249 .pagelayer-mode-buttons-wrapper{
250 position:absolute;
251 bottom:100%;
252 color:#fff;
253 background-color: #3e8ef7;
254 display:none;
255 }
256
257 .pagelayer-leftbar-toggle-h{
258 width:0px;
259 }
260
261 .pagelayer-leftbar-toggle{
262 position: absolute;
263 width:12px;
264 background: #E3E3E3;
265 cursor: pointer;
266 text-align:center;
267 line-height:300%;
268 }
269
270 .pagelayer-leftbar-toggle:hover{
271 background-color: #3e8ef7;
272 color: #ffffff;
273 }
274
275 .pagelayer-leftbar-holder{
276 overflow: hidden;
277 position: absolute;
278 top: 0;
279 bottom: 0;
280 left: 0;
281 right: 0;
282 }
283
284 .pagelayer-iframe{
285 }
286
287 .pagelayer-iframe-holder{
288 max-height:100vh !important;
289 height: 100%;
290 overflow: auto;
291 text-align:center;
292 }
293
294 .pagelayer-body{
295 transition:0.5s;
296 }
297
298 .pagelayer-screen-desktop{
299
300 }
301
302 .pagelayer-screen-tablet{
303 width:768px;
304 height:900px;
305 margin:20px auto;
306 border: solid #444;
307 border-width: 30px 10px;
308 border-radius: 10px;
309 }
310
311 .pagelayer-screen-mobile{
312 width:360px;
313 height:540px;
314 margin:20px auto;
315 border: solid #444;
316 border-width: 30px 10px;
317 border-radius: 10px;
318 }
319
320 /* Element Properties Dialog classes */
321 [class^="pagelayer-elp"]{
322 font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
323 color: #313439;
324 background-color: transparent;
325 }
326
327 #pagelayer-elpd {
328 background-color: #f1f1f1;
329 display:none;
330 color:#444;
331 border: 1px solid #d3d3d3;
332 }
333
334 #pagelayer-elpd .slimScrollDiv{
335 height: calc(100% - 50px) !important;
336 }
337
338 .pagelayer-elpd-header {
339 background-color: #3e8ef7;
340 border: none;
341 color:#fff;
342 }
343
344 .pagelayer-elpd-title {
345 text-align: center;
346 padding:0px;
347 cursor: move;
348 color: #fff;
349 font-weight: 600;
350 }
351
352 .pagelayer-elpd-close {
353 float:right;
354 padding-right:10px;
355 cursor: pointer;
356 margin: 0px;
357 position: relative;
358 right: 5px;
359 color: #fff;
360 font-weight: 600;
361 }
362
363 .pagelayer-elpd-body{
364 border: none;
365 }
366
367 .pagelayer-elpd-section-rows{
368 background-color: #FFF;
369 }
370
371 .pagelayer-elpd-section-name{
372 margin-top: 10px;
373 padding: 11px 10px;
374 border-bottom: 1px solid #d3d3d3;
375 background-color: #FFF;
376 font-size: 12px;
377 font-weight: bold;
378 color: #666;
379 cursor: pointer;
380 }
381
382 .pagelayer-elpd-section-name:not(.pagelayer-elpd-section-open) .fa:before{
383 content: "\f0da";
384 }
385 .pagelayer-elpd-section-name.pagelayer-elpd-section-open .fa:before{
386 content: "\f0d7";
387 }
388
389 .pagelayer-elpd-section-name .fa{
390 width:15px;
391 float:right;
392 }
393
394 /* Pagelayer editor panel tabs*/
395
396 .pagelayer-elpd-tab,
397 .pagelayer-history-tab{
398 display: inline-block;
399 font-size: 13px;
400 cursor: pointer;
401 padding: 10px 6px;
402 margin: 0px 5px 0px 0px;
403 }
404
405 .pagelayer-elpd-settings-body{
406 display: none;
407 }
408
409 .pagelayer-elpd-settings-body.active{
410 display: block;
411 }
412
413 .pagelayer-elpd-style-body{
414 display: none;
415 }
416
417 .pagelayer-elpd-style-body.active{
418 display: block;
419 }
420
421 .pagelayer-history-section{
422 display:none;
423 }
424
425 .pagelayer-history-body{
426 margin:10px 0px;
427 padding:10px;
428 background-color:#ffffff;
429 }
430
431 .pagelayer-history-section.active{
432 display:block;
433 }
434
435 .pagelayer-history-section.active[pagelayer-show-tab="actions"]{
436 display:flex;
437 flex-direction:column-reverse;
438 }
439
440 [pagelayer-elpd-active-tab="1"],
441 [pagelayer-history-active-tab="1"] {
442 color: #3e8ef7;
443 }
444
445 .pagelayer-elpd-tabs,
446 .pagelayer-history-tabs {
447 background-color: #fff;
448 border-bottom: 1px solid #d3d3d3;
449 }
450
451 .pagelayer-elpd-options{
452 text-align:right;
453 display:inline-block;
454 margin-right:10px;
455 }
456
457 .pagelayer-elpd-options i{
458 padding:4px 5px;
459 cursor:pointer;
460 }
461
462 .pagelayer-form-item {
463 border-bottom: 1px dashed #e6e6e6;
464 padding: 10px 8px 10px 6px;
465 margin-bottom: 0px;
466 position: relative;
467 }
468
469 .pagelayer-elp-label-div{
470 padding:4px 0px 4px 0px;
471 position:relative;
472 }
473
474 .pagelayer-elp-label{
475 display: inline-block;
476 color: #555;
477 font-size: 12px;
478 line-height: 150%;
479 }
480
481 .pagelayer-elp-screen{
482 display: inline-block;
483 }
484
485 .pagelayer-elp-screen .fa{
486 padding:1px 6px;
487 cursor: pointer;
488 }
489
490 .pagelayer-elp-screen .fa:hover{
491 color: #07a;
492 }
493
494 .pagelayer-elp-screen .fa-tablet{
495 font-size:1.2em;
496 }
497
498 .pagelayer-elp-screen .fa-mobile{
499 font-size:1.3em;
500 }
501
502 .pagelayer-elp-screen{
503 display: inline-block;
504 }
505
506 .pagelayer-elp-units{
507 display: inline-block;
508 float:right;
509 padding-top:4px;
510 }
511
512 .pagelayer-elp-units span{
513 padding:1px 4px;
514 font-size:12px;
515 cursor: pointer;
516 }
517
518 .pagelayer-elp-units span[selected] {
519 color: #3e8ef7;
520 }
521
522 .pagelayer-elp-desc{
523 color: rgba(49, 52, 57, 0.8);
524 font-size: 12px;
525 line-height: 20px;
526 font-style: italic;
527 margin-top: 5px;
528 }
529
530 .pagelayer-elpd-body input,
531 .pagelayer-elpd-body textarea,
532 .pagelayer-elpd-body select,
533 .pagelayer-elpd-body option{
534 font-size: 13px !important;
535 color: #666;
536 border-radius: unset;
537 border:1px solid #CCC;
538 line-height: 26px;
539 width: 100%;
540 }
541
542 .pagelayer-elpd-body input:focus,
543 .pagelayer-elpd-body textarea:focus,
544 .pagelayer-elpd-body select:focus{
545 border-color: #00A0D2;
546 box-shadow: 0 0 1px #00A0D2 inset;
547 }
548
549 .pagelayer-elp-button{
550 text-transform: unset;
551 border: 1px solid #00A0D2;
552 font-weight: unset;
553 font-size: 12px;
554 padding: 12px 10px;
555 min-height: unset;
556 background-color: #3e8ef7;
557 color: #fff;
558 transition: all 0.3s;
559 border-radius: unset;
560 border-radius: 2px;
561 padding: 10px 15px;
562 cursor:pointer;
563 }
564
565 .pagelayer-elp-button:hover{
566 background-color: #3e8ef7bf;
567 border-color: #00A0D2;
568 }
569
570 .pagelayer-elp-image-div{
571 padding:7px;
572 width:90%;
573 margin:5px auto;
574 height:150px;
575 border: 1px solid #d5dadf;
576 position:relative;
577 border: 1px solid #3e8ef7;
578 }
579
580 .pagelayer-elp-image{
581 height: 100%;
582 -webkit-background-size: cover;
583 background-size: cover;
584 background-position: 50%;
585 cursor:pointer;
586 }
587
588 .pagelayer-elp-image-delete{
589 cursor: pointer;
590 position: absolute;
591 top: 4px;
592 right: 4px;
593 background-color: #3e8ef7;
594 padding: 5px 9px;
595 max-width: 28px;
596 max-height: 28px;
597 -webkit-box-sizing: content-box;
598 -moz-box-sizing: content-box;
599 box-sizing: content-box;
600 border-radius: 2px;
601 }
602
603 .pagelayer-elp-image-delete .fa{
604 color: #fff;
605 }
606
607 .pagelayer-hidden{
608 display:none !important;
609 }
610
611 .pagelayer-elp-radio-div{
612 display:flex;
613 }
614
615 .pagelayer-elp-radio{
616 display: inline-block;
617 vertical-align: middle;
618 padding: 6px 8px;
619 cursor: pointer;
620 font-size:12px;
621 color: #666 !important;
622 text-decoration: none;
623 background: #eee;
624 margin: 5px 2px;
625 flex:1;
626 text-align:center;
627 }
628
629 .pagelayer-elp-radio:hover{
630 background-color:#3e8ef7bf !important;
631 color:#fff !important;
632 transition: all 0.6s;
633 }
634
635 .pagelayer-elp-radio-active{
636 background-color: #3e8ef7 !important;
637 color:#ffffff !important;
638 }
639
640 .pagelayer-elp-color-div{
641 cursor: pointer;
642 padding: 4px;
643 width: 50px;
644 height: 25px;
645 display: block;
646 border-radius: 2px;
647 margin: 0 auto;
648 position: absolute;
649 top: 5px;
650 right: 7px;
651 border: solid 1px #d1d1d1;
652 color: #333;
653 vertical-align: middle;
654 }
655
656 .pagelayer-elp-color-preview{
657 height: 93%;
658 border: solid 1px #d1d1d1;
659 }
660
661 .picker_arrow {
662 display:none;
663 }
664
665 .picker_wrapper {
666 top: 13px !important;
667 right: -15px !important;
668 }
669
670 .pagelayer-elp-color-span{
671 padding: 2px 0;
672 height: 28px;
673 line-height: 28px;
674 float: left;
675 font-size: 10px;
676 }
677
678 .pagelayer-elp-color-div .picker_wrapper{
679 margin-top: 22px !important;
680 border: 1px solid rgba(0,0,0,0.2) !important;
681 background: #fff !important;
682 box-shadow: 0 3px 5px rgba(0,0,0,0.2) !important;
683 }
684
685 .pagelayer-elp-icon-div{
686 cursor: pointer;
687 padding: 6px;
688 border: solid 1px #d1d1d1;
689 background: #fffffc;
690 color: #333;
691 vertical-align: middle;
692 width: 126px;
693 height: 18px;
694 display: block;
695 border-radius: 4px;
696 margin: 0 auto;
697 position: absolute;
698 top: 7px;
699 right: 10px;
700 }
701
702 .pagelayer-elp-icon-preview{
703 position: relative;
704 display: block;
705 margin-right: 5px;
706 float: left;
707 width: 83%;
708 height: auto;
709 border: none;
710 overflow: hidden;
711 white-space: nowrap;
712 text-overflow: ellipsis;
713 }
714
715 .pagelayer-elp-icon-preview i{
716 padding-right: 5px;
717 font-size: 19px;
718 color: #666;
719 vertical-align: middle;
720 }
721
722 .pagelayer-elp-icon-name{
723 font-size: 13px;
724 }
725
726 .pagelayer-elp-icon-open{
727 float: right;
728 font-size: 10px;
729 padding: 0px;
730 line-height: 20px;
731 }
732
733 .pagelayer-elp-icon-remove{
734 position: absolute;
735 right: 20px;
736 font-size: 11px;
737 top: 10px;
738 z-index: 10;
739 }
740
741 .pagelayer-elp-icon-selector{
742 position: absolute;
743 z-index: 1000;
744 border: 1px solid rgba(0,0,0,0.2) !important;
745 background: #fff !important;
746 box-shadow: 0 3px 5px rgba(0,0,0,0.2) !important;
747 -webkit-border-radius: 2px !important;
748 text-shadow: none !important;
749 padding: 5px;
750 height: auto;
751 box-sizing: border-box;
752 display: none;
753 width: 70%;
754 border-radius: 2px;
755 margin: 0 0 0 auto;
756 top: 40px;
757 right: 10px;
758 }
759
760 .pagelayer-elp-search-icon{
761 margin-bottom: 5px !important;
762 padding: 2px 6px;
763 line-height: 20px !important;
764 border-radius: 3px !important;
765 }
766
767 .pagelayer-elp-icon-list{
768 width: 100%;
769 -moz-box-sizing: border-box;
770 -webkit-box-sizing: border-box;
771 box-sizing: border-box;
772 padding: 0;
773 max-height: 183px;
774 overflow-y: auto;
775 }
776
777 .pagelayer-elp-icon-span{
778 display: block;
779 margin: 2px;
780 cursor: pointer;
781 box-sizing: border-box;
782 border: 1px solid #dbdbdb;
783 transition: all 0.3s;
784 font-size: 13px;
785 padding: 3px;
786 }
787
788 .pagelayer-elp-icon-span:hover{
789 border-color: #00A0D2;
790 background-color: #3e8ef7;
791 color: #ffffff;
792 box-shadow: 0px 1px 1px #3e8ef7bf;
793 }
794
795 .pagelayer-elp-icon-span i{
796 font-size: 15px;
797 line-height: 1em;
798 padding: 3px;
799 color: #555;
800 transition: all 0.3s;
801 vertical-align: middle;
802 }
803
804 .pagelayer-elp-icon-span:hover i{
805 color: #ffffff;
806 }
807
808
809 .pagelayer-video{
810 width: 100% !important;
811 /* background: #ccc; */
812 position: relative;
813 /* top: -40px;
814 float: right;
815 border-radius: 0px 4px 4px 0px; */
816 }
817
818 .pagelayer-video i{
819 top: 10px;
820 position: relative;
821 left: 8px;
822 }
823
824 .pagelayer-elp-slider-div{
825 display: flex;
826 padding: 7px 0 0;
827 }
828
829 input.pagelayer-elp-slider{
830 -webkit-appearance: none;
831 width: 75%;
832 height: 10px;
833 border-radius: 5px;
834 background: #d3d3d3 !important;
835 outline: none;
836 opacity: 0.7;
837 -webkit-transition: .2s;
838 transition: opacity .2s;
839 font-size: 0px !important;
840 padding: 0;
841 }
842
843 .pagelayer-elp-slider:focus{
844 border-color: transparent;
845 box-shadow: 0 0 1px transparent;
846 }
847
848 .pagelayer-elp-slider:hover{
849 opacity: 1;
850 }
851
852 .pagelayer-elp-slider::-webkit-slider-thumb{
853 -webkit-appearance: none;
854 appearance: none;
855 width: 15px;
856 height: 15px;
857 border-radius: 50%;
858 background: #4CAF50;
859 cursor: pointer;
860 }
861
862 .pagelayer-elp-slider::-moz-range-thumb{
863 width: 15px;
864 height: 15px;
865 border-radius: 50%;
866 background: #00A0D2;
867 cursor: pointer;
868 }
869
870 .pagelayer-elp-slider-value{
871 width: 23% !important;
872 margin-left: 2%;
873 margin-top: -10px;
874 border-radius: 4px;
875 }
876
877 .pagelayer-elp-datetime-div{
878 position: relative;
879 }
880
881 .pagelayer-elp-fa-calendar{
882 position: absolute;
883 height: 40px;
884 width: 40px;
885 background: #000;
886 right: 0;
887 top: 0;
888 }
889
890 .pagelayer-elp-checkbox-div{
891 top: 13px;
892 right:7px;
893 position: absolute;
894 }
895
896 input[type="checkbox"].pagelayer-elp-checkbox{
897 font-size: 30px;
898 -webkit-appearance: none;
899 -moz-appearance: none;
900 appearance: none;
901 width: 3.5em;
902 height: 1.7em;
903 background: #ddd;
904 border-radius: 3em;
905 position: relative;
906 cursor: pointer;
907 outline: none;
908 -webkit-transition: all .2s ease-in-out;
909 transition: all .2s ease-in-out;
910 }
911
912 input[type="checkbox"].pagelayer-elp-checkbox:checked{
913 background-color: #3e8ef7;
914 }
915
916 input[type="checkbox"].pagelayer-elp-checkbox:after{
917 position: absolute;
918 content: "";
919 width: 1.5em;
920 height: 1.5em;
921 border-radius: 50%;
922 background: #fff;
923 -webkit-box-shadow: 0 0 .25em rgba(0,0,0,.3);
924 box-shadow: 0 0 .25em rgba(0,0,0,.3);
925 -webkit-transform: scale(.7);
926 transform: scale(.7);
927 left: 0;
928 -webkit-transition: all .2s ease-in-out;
929 transition: all .2s ease-in-out;
930 }
931
932 input[type="checkbox"].pagelayer-elp-checkbox:checked:after{
933 left: calc(100% - 1.5em);
934 }
935
936 .pagelayer-elp-input-icon,
937 .pagelayer-elp-pos-rel{
938 position: relative;
939 }
940
941 .pagelayer-elp-input-icon input{
942 width: 83%;
943 }
944
945 .pagelayer-elp-input-icon i.fa {
946 padding: 6px 10px;
947 position: relative;
948 top: 2px;
949 border: 1px solid #d1d1d1;
950 border-left:0px;
951 cursor: pointer;
952 background:#FFF;
953 }
954
955 .pagelayer-elp-padding-div i.fa{
956 padding:6px 11px;
957 border: 1px solid #d1d1d1;
958 border-left:0px;
959 cursor: pointer;
960 background: #FFF;
961 vertical-align:top;
962 }
963
964 .pagelayer-elp-padding-linked{
965 background: #CCC !important;
966 }
967
968 .pagelayer-elp-dimension-div i.fa{
969 padding:6px 11px;
970 border: 1px solid #d1d1d1;
971 border-left:0px;
972 cursor: pointer;
973 background: #FFF;
974 vertical-align:top;
975 }
976
977 .pagelayer-elp-dimension-linked{
978 background: #CCC !important;
979 }
980
981 .pagelayer-elp-multi_image{
982 padding: 3px;
983 width: 60%;
984 margin: 5px auto;
985 border: 1px solid #d5dadf;
986 position: relative;
987 text-align: center;
988 background: #4CBCDF;
989 color: #fff;
990 font-size: 13px;
991 cursor: pointer;
992 }
993
994 .pagelayer-elp-multi_image{
995 height: 100%;
996 -webkit-background-size: cover;
997 background-size: cover;
998 background-position: 50%;
999 }
1000
1001 .pagelayer-elp-multi_image-thumbs{
1002 margin-top:10px;
1003 }
1004
1005 .pagelayer-elp-multi_image-thumb{
1006 display: inline-block;
1007 width: 44px;
1008 height: 44px;
1009 background-size: cover;
1010 background-position: 50% 50%;
1011 margin: 0 7px 0 0;
1012 border: 2px solid #d5dadf;
1013 }
1014
1015 .pagelayer-grid-columns-1 .pagelayer-grid-item{
1016 width: 100%;
1017 }
1018
1019 .pagelayer-grid-columns-2 .pagelayer-grid-item{
1020 width: 50%;
1021 }
1022
1023 .pagelayer-grid-columns-3 .pagelayer-grid-item{
1024 width: 33%;
1025 }
1026
1027 .pagelayer-grid-columns-4 .pagelayer-grid-item{
1028 width: 25%;
1029 }
1030
1031 .pagelayer-grid-columns-5 .pagelayer-grid-item{
1032 width: 20%;
1033 }
1034
1035 .pagelayer-grid-columns-6 .pagelayer-grid-item{
1036 width: 16%;
1037 }
1038
1039 .pagelayer-grid-columns-7 .pagelayer-grid-item{
1040 width: 14%;
1041 }
1042
1043 .pagelayer-grid-columns-8 .pagelayer-grid-item{
1044 width: 12%;
1045 }
1046
1047 .pagelayer-grid-columns-9 .pagelayer-grid-item{
1048 width: 11%;
1049 }
1050
1051 .pagelayer-grid-columns-10 .pagelayer-grid-item{
1052 width: 10%;
1053 }
1054
1055 .pagelayer-grid-item{
1056 float: left;
1057 }
1058
1059 .pagelayer-elp-audio-div,
1060 .pagelayer-elp-media-div{
1061 position: relative;
1062 }
1063
1064 .pagelayer-elp-audio,
1065 .pagelayer-elp-media{
1066 width: calc(100% - 40px);
1067 }
1068
1069 .pagelayer-elp-audio-insert,
1070 .pagelayer-elp-media-select{
1071 position: absolute;
1072 top: 0;
1073 right: 0;
1074 background-color: #000;
1075 height: 100%;
1076 width: 40px;
1077 -webkit-box-sizing: content-box;
1078 -moz-box-sizing: content-box;
1079 box-sizing: content-box;
1080 }
1081
1082 .pagelayer-elp-select-div .fa{
1083 position: absolute;
1084 right: 12px;
1085 top: 0;
1086 line-height: 40px;
1087 }
1088
1089 .pagelayer-elp-shadow-div,
1090 .pagelayer-elp-typo-div,
1091 .pagelayer-elp-filter-div{
1092 padding: 10px 10px 0px;
1093 box-shadow: 0px 0px 2px rgba(0,0,0,.2);
1094 position: relative;
1095 margin-top: 8px;
1096 border: 1px solid #ddd;
1097 display: none;
1098 position: absolute;
1099 background-color: #fff;
1100 width: 86%;
1101 z-index: 1;
1102 }
1103
1104 .pagelayer-prop-edit{
1105 padding: 7px;
1106 border: 1px solid #ccc;
1107 width: 44px;
1108 position: absolute;
1109 top: 7px;
1110 right: 8px;
1111 text-align: center;
1112 cursor: pointer;
1113 border-radius: 3px;
1114 }
1115
1116 .pagelayer-prop-edit i{
1117 font-size: 20px;
1118 }
1119
1120 .pagelayer-prop-show{
1121 display: block;
1122 }
1123
1124 .pagelayer-elp-shadow-color{
1125 position: relative;
1126 height: 35px;
1127 }
1128
1129 .pagelayer-elp-shadow-color .pagelayer-elp-color-div{
1130 top:0;
1131 }
1132
1133 .pagelayer-elp-typo:not(:first-child),
1134 .pagelayer-elp-prop-grp{
1135 margin: 3px 0;
1136 padding: 5px 0;
1137 }
1138
1139 .pagelayer-elp-gradient-div .pagelayer-elp-prop-grp{
1140 padding: 5px 0;
1141 }
1142
1143 .pagelayer-elp-prop-grp{
1144 position: relative;
1145 }
1146
1147 .pagelayer-elp-prop-grp .pagelayer-elp-color-div{
1148 top: -3px;
1149 right: 0;
1150 }
1151
1152 .pagelayer-elp-typo .pagelayer-elp-label,
1153 .pagelayer-elp-typo .pagelayer-elp-typo-input,
1154 .pagelayer-elp-shadow-div .pagelayer-elp-shadow-input,
1155 .pagelayer-elp-shadow-div .pagelayer-elp-label,
1156 .pagelayer-elp-prop-grp>label, .pagelayer-elp-prop-grp>input{
1157 width: 50%;
1158 }
1159
1160 .pagelayer-elp-filter-div .pagelayer-elp-label{
1161 width:40%;
1162 text-transform: capitalize;
1163 }
1164
1165 .pagelayer-elp-filter-div .pagelayer-elp-filter-val{
1166 float:right;
1167 width:10%;
1168 font-size:13px;
1169 text-align: right;
1170 }
1171
1172 .pagelayer-elp-typo .pagelayer-elp-label{
1173 font-weight: 600;
1174 font-size: 11px;
1175 color: #555;
1176 }
1177
1178 .pagelayer-elp-typo select.pagelayer-elp-typo-input,
1179 .pagelayer-elp-typo-input,
1180 .pagelayer-elp-shadow-input{
1181 padding: 3px;
1182 border-radius: 4px !important;
1183 line-height: 18px !important;
1184 }
1185
1186 .pagelayer-elp-grad-color{
1187 position:relative;
1188 }
1189
1190 /* Left side menu Input related */
1191 .pagelayer-elp-text,
1192 .pagelayer-elp-spinner,
1193 .pagelayer-elp-tinymce-textarea,
1194 .pagelayer-elp-tinymce {
1195 border-radius: 2px !important;
1196 }
1197
1198 .pagelayer-elp-select-div,
1199 .pagelayer-elp-spinner-div{
1200 width: 140px;
1201 right: 10px;
1202 position: absolute;
1203 top: 7px;
1204 }
1205
1206 .pagelayer-elp-spinner-div{
1207 width:85px;
1208 }
1209
1210 .pagelayer-elp-spinner{
1211 padding: 2px 0 2px 6px;
1212 border-radius: 4px !important;
1213 }
1214
1215 .pagelayer-elp-select-div .pagelayer-elp-select {
1216 border-radius: 4px;
1217 padding: 6px;
1218 }
1219
1220 .pagelayer-elpd-body input:focus,
1221 .pagelayer-elpd-body textarea:focus,
1222 .pagelayer-elpd-body select:focus {
1223 border-color: #3e8ef7;
1224 box-shadow: unset;
1225 }
1226
1227 .pagelayer-elp-group-item{
1228 border: 1px solid #777;
1229 font-size: 13px;
1230 margin-bottom: 10px;
1231 }
1232
1233 .pagelayer-elp-group-item-head{
1234 display:flex;
1235 background: #F8F8F8;
1236 }
1237
1238 .pagelayer-elp-group-item-head span{
1239 cursor: pointer;
1240 padding: 9px;
1241 display:inline-block;
1242 }
1243
1244 .pagelayer-elp-group-item-title{
1245 flex-grow: 100;
1246 }
1247
1248 .pagelayer-elp-group-item-del{
1249 float: right;
1250 }
1251
1252 .pagelayer-elp-group-item-body{
1253 display: none;
1254 padding: 7px 10px;
1255 }
1256
1257 .pagelayer-elp-group-item-clone{
1258 padding-right:0px !important;
1259 }
1260
1261 .pagelayer-elp-padding{
1262 width:21% !important;
1263 }
1264
1265 .pagelayer-elp-dimension{
1266 width:42% !important;
1267 }
1268
1269 /* END Element Properties Dialog classes */
1270
1271 /* Widget Parameters */
1272
1273 .pagelayer-widgets-form input,
1274 .pagelayer-widgets-form select,
1275 .pagelayer-widgets-form textarea {
1276 border: 1px solid #ddd;
1277 box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
1278 background-color: #fff;
1279 color: #32373c;
1280 outline: 0;
1281 transition: 50ms border-color ease-in-out;
1282 font-size: 15px !important;
1283 line-height: 150% !important;
1284 }
1285
1286 .pagelayer-widgets-form select{
1287 padding:5px;
1288 }
1289
1290 .pagelayer-widgets-form input[type="checkbox"]{
1291 width: auto;
1292 }
1293
1294 .pagelayer-widgets-form{
1295 line-height:150%;
1296 border-top: none;
1297 padding: 8px;
1298 }
1299
1300 /* End Widget Parameters */
1301
1302 .trumbowyg-box{
1303 margin-top:0px !important;
1304 }
1305
1306 .trumbowyg-editor{
1307 min-height: 250px !important;
1308 padding: 10px !important;
1309 }
1310
1311 /* Pagelayer Left bar */
1312
1313 .pagelayer-topbar-holder{
1314 background-color: #3e8ef7;
1315 }
1316
1317 .pagelayer-logo{
1318 font-size:20px;
1319 font-weight: bold;
1320 display: table-cell;
1321 text-align:center;
1322 vertical-align:middle;
1323 color:#fff;
1324 background-color: #3e8ef7;
1325 }
1326
1327 .pagelayer-logo-text{
1328 font-weight: bold;
1329 margin-left: 5px;
1330 line-height: normal;
1331 vertical-align: super;
1332 }
1333
1334 .pagelayer-leftbar{
1335 width:270px !important;
1336 padding-top:0;
1337 background: #E3E3E3 !important;
1338 overflow: hidden;
1339 }
1340
1341 .pagelayer-leftbar-search{
1342 text-align:center;
1343 padding: 10px 40px 10px 25px;
1344 }
1345
1346 .pagelayer-search-field{
1347 width:100%;
1348 line-height:120%;
1349 padding:2px;
1350 }
1351
1352 .pagelayer-shortcodes{
1353 margin-left:17px;
1354 }
1355
1356 .pagelayer-leftbar-group{
1357 width: 100%;
1358 background-repeat: no-repeat;
1359 background-position: center;
1360 font-size: 11px !important;
1361 color: #442E2E;
1362 clear: both;
1363 text-align: center;
1364 font-family: "Open Sans",arial,sans-serif !important;
1365 margin-bottom: 2px;
1366 }
1367
1368 .pagelayer-leftbar-group h5{
1369 font-size: 11px;
1370 line-height: 20px;
1371 text-transform: uppercase;
1372 color: #777;
1373 padding: 5px 0 3px;
1374 margin: 5px;
1375 }
1376
1377 .pagelayer-shortcode-drag, .pagelayer-shortcode-drag:hover{
1378 width: 100px !important;
1379 height:67px !important;
1380 margin-bottom:6px;
1381 margin-left:12px;
1382 background-color:#FFFFFF;
1383 border-radius: 4px;
1384 float: left;
1385 transition: all 0.3s;
1386 border: 1px solid #ccc;
1387 }
1388
1389 .pagelayer-shortcode-drag:hover{
1390 box-shadow: 2px 2px 2px #c6c6c6;
1391 border-color: #00A0D2;
1392 }
1393
1394 .pagelayer-sc{
1395 padding: 4px !important;
1396 margin: 4px auto 0 auto !important;
1397 cursor: move;
1398 }
1399
1400 .pagelayer-shortcode,.pagelayer-shortcode:before{
1401 display:inline-block;
1402 width:22px;
1403 height:22px;
1404 font-size:22px;
1405 line-height:1;
1406 font-family:pagelayer,fontawesome;
1407 text-decoration:inherit;
1408 font-weight:400;
1409 font-style:normal;
1410 vertical-align:top;
1411 text-align:center;
1412 -webkit-transition:color .1s ease-in 0;
1413 transition:color .1s ease-in 0;
1414 -webkit-font-smoothing:antialiased;
1415 -moz-osx-font-smoothing:grayscale;
1416 color: #777;
1417 transition: all 0.3s;
1418 }
1419
1420 .pagelayer-shortcode-inner{
1421 height: 25px;
1422 padding: 0px !important;
1423 }
1424
1425 .pagelayer-shortcode-text{
1426 display: block;
1427 font-family: "Open Sans", Arial,Helvetica,sans-serif;
1428 font-size: 11px !important;
1429 font-style: normal;
1430 line-height: 125%;
1431 margin: 0;
1432 overflow: hidden;
1433 cursor: move;
1434 text-overflow: ellipsis;
1435 text-align: center;
1436 width: 100%;
1437 margin-top: 3px;
1438 color: #777;
1439 transition: all 0.3s;
1440 padding:1px;
1441 }
1442
1443 .pagelayer-shortcode-drag:hover .pagelayer-shortcode:before,
1444 .pagelayer-shortcode-drag:hover .pagelayer-shortcode-text{
1445 color: #00A0D2;
1446 }
1447
1448 /* Pagelayer Editor Icons */
1449 @font-face{font-family:pagelayer;src:url(../fonts/pagelayer.eot)}
1450 @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}
1451
1452 .pagelayer-pl_row:before{content:"\f0c9"} /* e916 */
1453 .pagelayer-pl_inner_row:before{content:"\f022"}
1454 .pagelayer-pl_col:before{content:"\f0db"}
1455 .pagelayer-pl_heading:before{content:"\e90f";font-size:18px;}
1456 .pagelayer-pl_text:before{content:"\f036"}
1457 .pagelayer-pl_code:before{content:"\f044"}
1458 .pagelayer-pl_quote:before{content:"\e906"}
1459 .pagelayer-pl_list:before{content:"\e908";font-size:20px;}
1460 .pagelayer-pl_icon:before{content:"\f006"}
1461 .pagelayer-pl_image:before{content:"\f03e"}
1462 .pagelayer-pl_image_slider:before{content:"\e939";margin-left:-5px;}
1463 .pagelayer-pl_grid_gallery:before{content:"\f00a"}
1464 .pagelayer-pl_image_hotspot:before{content:"\e91c"}
1465 .pagelayer-pl_btn:before{content:"\e90b"}
1466 .pagelayer-pl_btn_grp:before{content:"\f24d"}
1467 .pagelayer-pl_download:before{content:"\e909"}
1468 .pagelayer-pl_social:before{content:"\e938"}
1469 .pagelayer-pl_share:before{content:"\e952"}
1470 .pagelayer-pl_video:before{content:"\f03d"}
1471 .pagelayer-pl_audio:before{content:"\f028"}
1472 .pagelayer-pl_video_lightbox:before{content:"\e910"}
1473 .pagelayer-pl_video_slider:before{content:"\e944"}
1474 .pagelayer-pl_service:before{content:"\e937"}
1475 .pagelayer-pl_tabs:before{content:"\e93c"}
1476 .pagelayer-pl_accordion:before{content:"\e946"}
1477 .pagelayer-pl_table:before{content:"\f0ce"}
1478 .pagelayer-pl_call:before{content:"\e916"}
1479 .pagelayer-pl_modal:before{content:"\e90e"}
1480 .pagelayer-pl_splash:before{content:"\e90c"}
1481 .pagelayer-pl_space:before{content:"\e93a"}
1482 .pagelayer-pl_embed:before{content:"\f121"}
1483 .pagelayer-pl_chart:before{content:"\e94d"}
1484 .pagelayer-pl_google_maps:before{content:"\e924"}
1485 .pagelayer-pl_countdown:before{content:"\e941"}
1486 .pagelayer-pl_pricing:before{content:"\e933"}
1487 .pagelayer-pl_contact:before{content:"\f298"}
1488 .pagelayer-pl_search:before{content:"\f002"}
1489 .pagelayer-pl_testimonial:before{content:"\e906"}
1490 .pagelayer-pl_alert:before{content:"\f06a"}
1491 .pagelayer-pl_anchor:before{content:"\f13d"}
1492 .pagelayer-pl_progress:before{content:"\f0ae"}
1493 .pagelayer-pl_social_grp:before{content:"\f029"}
1494 .pagelayer-pl_share_grp:before{content:"\e952"}
1495 .pagelayer-pl_counter:before{content:"\f162"}
1496 .pagelayer-pl_shortcodes:before{content:"\f141"}
1497 .pagelayer-pl_divider:before{content:"\f2d1"}
1498 .pagelayer-pl_stars:before{content:"\f123"}
1499 .pagelayer-pl_block:before{content:"\f0c8"}
1500 .pagelayer-pl_collapse:before{content:"\f233"}
1501 .pagelayer-pl_iconbox:before{content:"\e912"}
1502 .pagelayer-pl_tooltip:before{content:"\f27a"} /*f18d*/
1503 .pagelayer-pl_post_comment:before{content:"\f0e6"}
1504 .pagelayer-pl_post_info:before{content:"\f05a"}
1505 .pagelayer-pl_post_nav:before{content:"\f0ec"}
1506 .pagelayer-pl_badge:before{content:"\f2c1"}
1507 .pagelayer-pl_wp_widgets:before{content:"\e945"}
1508 .pagelayer-pl_wp_custom_menu:before{content:"\e92a"}
1509 .pagelayer-pl_wp_posts_grid:before{content:"\e92f"}
1510 .pagelayer-pl_wp_posts_slider:before{content:"\e951"}
1511 .pagelayer-pl_wp_comments:before{content:"\e970"}
1512 .pagelayer-pl_wp_pages:before{content:"\e92e"}
1513 .pagelayer-pl_wp_posts:before{content:"\e912"}
1514 .pagelayer-pl_wp_calendar:before{content:"\f073"}
1515 .pagelayer-pl_wp_categories:before{content:"\e949"}
1516 .pagelayer-pl_wp_archives:before{content:"\f271"}
1517 .pagelayer-pl_wp_tags:before{content:"\e913"}
1518 .pagelayer-pl_wp_title:before{content:"\e90f";font-size:18px;}
1519 .pagelayer-pl_wp_menu:before{content:"\e900";font-size:28px; margin:-3px;}
1520 .pagelayer-pl_arrow_down:before{content:"\e900";font-size:28px; margin:-3px;}
1521 .pagelayer-shortcode[class*="pagelayer-pl_wp_"]:before{content:"\f19a"}
1522
1523 /* Trumbowyg color widget style */
1524 .trumbowyg-dropdown-foreColor,
1525 .trumbowyg-dropdown-backColor {
1526 width: 100% !important;
1527 max-width: 250px !important;
1528 padding: 7px 5px;
1529 left:0 !important;
1530 }
1531
1532 .trumbowyg-dropdown-foreColor svg,
1533 .trumbowyg-dropdown-backColor svg {
1534 display: none !important;
1535 }
1536
1537 .trumbowyg-dropdown-foreColor button[type="button"],
1538 .trumbowyg-dropdown-backColor button[type="button"] {
1539 display: block;
1540 position: relative;
1541 float: left;
1542 text-indent: -9999px;
1543 height: 20px;
1544 width: 20px;
1545 max-height:27px;
1546 max-width:27px;
1547 border: 1px solid #333;
1548 padding: 0;
1549 margin: 2px;
1550 }
1551
1552 .trumbowyg-dropdown-foreColor button[type="button"]:hover::after,
1553 .trumbowyg-dropdown-backColor button[type="button"]:hover::after,
1554 .trumbowyg-dropdown-foreColor button[type="button"]:focus::after,
1555 .trumbowyg-dropdown-backColor button[type="button"]:focus::after{
1556 content: " ";
1557 display: block;
1558 position: absolute;
1559 top: -5px;
1560 left: -5px;
1561 height: 27px;
1562 width: 27px;
1563 max-width:27px;
1564 background: inherit;
1565 border: 1px solid #FFF;
1566 box-shadow: #000 0 0 2px;
1567 z-index: 10;
1568 }
1569
1570 /* Trumbowyg color widget style end */
1571
1572 /* Pagelayer history style*/
1573
1574 .pagelayer-revision-holder,
1575 .pagelayer-history-holder{
1576 border: 1px solid #b7b5b5fa;
1577 margin-bottom: 10px;
1578 padding: 10px;
1579 display: -webkit-box;
1580 display: -webkit-flex;
1581 display: -ms-flexbox;
1582 display: flex;
1583 -webkit-box-align: center;
1584 -webkit-align-items: center;
1585 -ms-flex-align: center;
1586 align-items: center;
1587 font-size: 12px;
1588 color:#505050;
1589 }
1590
1591 .pagelayer-history,
1592 .pagelayer-history-hidden{
1593 display:none;
1594 }
1595
1596 .pagelayer-revision-holder:hover,
1597 .pagelayer-history-holder:hover,
1598 .pagelayer-history-holder.current_active_item{
1599 background-color:#efefef;
1600 }
1601
1602 .pagelayer-revision-img-holder{
1603 border-radius: 50%;
1604 overflow: hidden;
1605 margin-right:10px;
1606 }
1607
1608 .pagelayer-revision-detail-holder,
1609 .pagelayer-history-detail-holder{
1610 flex:1;
1611 }
1612
1613 .pagelayer-revision-holder .pagelayer-revision-delete,
1614 .pagelayer-history-holder .pagelayer-history-check{
1615 display:none;
1616 }
1617
1618 .pagelayer-revision-holder:hover .pagelayer-revision-delete,
1619 .pagelayer-history-holder.current_active_item .pagelayer-history-check{
1620 display:block;
1621 }
1622
1623 .pagelayer-revision-delete:hover{
1624 cursor:pointer;
1625 }
1626
1627 .pagelayer-revision-img-holder img{
1628 max-width: 100%;
1629 width: 20px;
1630 height: 20px;
1631 }
1632
1633 .pagelayer-history-holder span{
1634 margin-right:5px;
1635 }
1636
1637
1638 /* Pagelayer history end*/