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-frontend.css +1056 -933 2.1.3 → 2.2.2 View file →
@@ -1,933 +1,1056 @@
1 -
2 -/* Add an element box */
3 -.pagelayer-add-ele{
4 -display:block;
5 -vertical-align:middle;
6 -text-align:center;
7 -border:1px dashed #4a4949;
8 -min-height:60px;
9 -padding:5px;
10 -color:#4f4f4f;
11 -font-size: 16px;
12 -line-height: 1.5;
13 -position: relative;
14 -}
15 -
16 -.pagelayer-add-ele .fas{
17 -font-size:15px;
18 -color:#4a4949;
19 -cursor:pointer;
20 -}
21 -
22 -.pagelayer-add-ele .fas:hover:before{
23 -color:#3e8ef7;
24 -}
25 -
26 -.pagelayer-add-ele span,
27 -.pagelayer-add-widget-area p{
28 -font-family: "Open Sans", Arial, Helvetica, sans-serif;
29 -}
30 -
31 -.pagelayer-empty-col{
32 -display:table-cell;
33 -}
34 -
35 -.pagelayer-row{
36 -min-height:20px;
37 -}
38 -
39 -/* Since we have a wrap, we set the cols to the wrap. Hence we need to make the width of the real thing to 100% */
40 -.pagelayer-ele-wrap>.pagelayer-col{
41 -width:100%;
42 -}
43 -
44 -.pagelayer-ele-wrap{
45 -position: relative;
46 -}
47 -
48 -/*.pagelayer-ele-option{
49 -min-height: 10px;
50 -} */
51 -
52 -.pagelayer-wrap-col{
53 -align-content: unset !important;
54 -}
55 -
56 -.pagelayer-ele-overlay{
57 -position: absolute;
58 -width: 100%;
59 -height: 100%;
60 -right: 0px;
61 -top: 0px;
62 -z-index: 10;
63 -pointer-events:none;
64 -opacity: 0%;
65 -outline-width:0px;
66 -}
67 -
68 -.pagelayer-ele-hover, .pagelayer-drag-ele-hover{/* Both classes are same. but its just that during drag, we use the later */
69 -outline:1px solid #a8a8a8;
70 -opacity: 100%;
71 -transition: transform 0.2s linear, opacity 0.2s linear;
72 -}
73 -
74 -.pagelayer-active{
75 -outline:1px solid #999;
76 -opacity: 100%;
77 -}
78 -
79 -.pagelayer-hide-active>.pagelayer-ele-overlay{
80 -outline: transparent !important;
81 -opacity: 0 !important;
82 -}
83 -
84 -.pagelayer-row-hover{
85 -outline:1px solid #277CF9;
86 -}
87 -
88 -.pagelayer-col-hover{
89 -outline:1px solid #42ADE1;
90 -}
91 -
92 -.pagelayer-ele-option,
93 -.pagelayer-row-option,
94 -.pagelayer-col-option{
95 -position: absolute;
96 -top:0px;
97 -right:0px;
98 -z-index: 20;
99 -padding:0px;
100 -margin:0px;
101 -line-height: 0;
102 -pointer-events:auto;
103 -}
104 -
105 -.pagelayer-eoi{
106 -display:inline-block !important;
107 -font-size:12px !important;
108 -padding:4px !important;
109 -background:#444;
110 -color:#fff;
111 -}
112 -
113 -.pagelayer-eoi:hover{
114 -background:#222;
115 -cursor: pointer;
116 -}
117 -
118 -.pagelayer-row-option{
119 -top:-20px;
120 -left:calc(50% - 63px/2);
121 -z-index: 30;
122 -}
123 -
124 -.pagelayer-row-option-zero>.pagelayer-wrap-row:nth-child(1 of .pagelayer-wrap-row)>.pagelayer-ele-overlay .pagelayer-row-option{
125 -top:0;
126 -}
127 -
128 -.pagelayer-row-option .pagelayer-eoi{
129 -background:#277CF9;
130 -}
131 -
132 -.pagelayer-row-option .pagelayer-eoi:hover{
133 -background:#1c59b3;
134 -}
135 -
136 -.pagelayer-wrap-row > .pagelayer-ele-overlay .pagelayer-move-up,
137 -.pagelayer-col-holder > .pagelayer-wrap-inner-row:first-child > .pagelayer-ele-overlay .pagelayer-move-up,
138 -.pagelayer-col-holder > .pagelayer-wrap-ele:first-child > .pagelayer-ele-overlay .pagelayer-move-up{
139 -display:none !important;
140 -}
141 -
142 -.pagelayer-wrap-row ~ .pagelayer-wrap-row > .pagelayer-ele-overlay .pagelayer-move-up{
143 -display:inline-block !important;
144 -}
145 -
146 -.pagelayer-wrap-row:nth-last-of-type(2) > .pagelayer-ele-overlay .pagelayer-move-down,
147 -.pagelayer-col-holder > .pagelayer-wrap-inner-row:last-child > .pagelayer-ele-overlay .pagelayer-move-down,
148 -.pagelayer-col-holder > .pagelayer-wrap-ele:last-child > .pagelayer-ele-overlay .pagelayer-move-down{
149 -display:none !important;
150 -}
151 -
152 -.pagelayer-col-option .pagelayer-eoi{
153 -background:#42ADE1;
154 -}
155 -
156 -.pagelayer-col-option .pagelayer-eoi:hover{
157 -background:#1070AA;
158 -}
159 -
160 -.pagelayer-col-option{
161 -top:0px;
162 -left:0px;
163 -z-index: 30;
164 -width: 21px;
165 -}
166 -
167 -.pagelayer-splash{
168 -background-image:url(../images/splash.png);
169 -height:30px;
170 -background-position: center center;
171 -background-repeat: no-repeat;
172 -background-size: cover;
173 -}
174 -
175 -.pagelayer-space-holder{
176 -background:url(../images/space.png);
177 -background-repeat:repeat;
178 -}
179 -
180 -.pagelayer-anchor{
181 -background-image:url(../images/anchor.png);
182 -height:30px;
183 -background-position: center center;
184 -background-repeat: no-repeat;
185 -background-size: cover;
186 -}
187 -
188 -/* Right Click */
189 -.pagelayer-right-click-options{
190 -position:absolute;
191 -background:#e9eaea;
192 -border-radius: 2px;
193 -box-shadow: 0 0 5px rgba(0,0,0,0.1);
194 -z-index: 99999;
195 -border: 1px solid rgba(0,0,0,0.2);
196 -min-width:135px;
197 -/*max-width:170px;*/
198 -}
199 -
200 -.pagelayer-right-click-options ul{
201 -list-style: none;
202 -margin: 0;
203 -padding: 0;
204 -}
205 -
206 -.pagelayer-right-click-options a{
207 -color: #4a4949;
208 -padding: 8px 10px;
209 -width: 100%;
210 -display: block;
211 -transition: all 0.2s;
212 -white-space:nowrap;
213 -}
214 -
215 -.pagelayer-right-click-options a .far{
216 -margin-right: 5px;
217 -}
218 -
219 -.pagelayer-right-click-options a:hover{
220 -background: #449D44;
221 -color:#fff;
222 -}
223 -
224 -.pagelayer-right-click-options li{
225 -border-bottom: 1px solid rgb(236, 236, 236);
226 -font-size: 12px;
227 -font-family: Opensans, arial;
228 -cursor:pointer;
229 -}
230 -
231 -.pagelayer-right-click-options .pagelayer-right-delete:hover {
232 -background:#EF4D4D;
233 -}
234 -
235 -.pagelayer-context-disable{
236 -opacity: 0.5;
237 -cursor: progress;
238 -}
239 -
240 -/* Pagelayer add section area */
241 -
242 -.pagelayer-add-widget-area{
243 -padding: 10px;
244 -width:100%;
245 -text-align: center;
246 -border: 2px #3e8ef7;
247 -border-style: dashed;
248 -position:relative;
249 -font-family: "Open Sans", Arial,Helvetica,sans-serif;
250 -margin:20px auto;
251 -cursor: pointer;
252 -}
253 -
254 -.pagelayer-add-widget-area .pagelayer-add-button{
255 -font-size: 14px;
256 -font-weight: bold;
257 -border: 1px solid #007bff;
258 -background-color: #007bff;
259 -color:#fff;
260 -border-radius:5px;
261 -padding:9px;
262 -margin-right:5px;
263 -cursor:pointer;
264 -display:inline-block;
265 -}
266 -
267 -.pagelayer-add-widget-area .pagelayer-add-button:hover{
268 -border: 1px solid #0069d9;
269 -background-color: #0069d9;
270 -}
271 -
272 -.pagelayer-add-widget-area .pagelayer-add-section{
273 -border: 1px solid #17a2b8;
274 -background-color: #17a2b8;
275 -}
276 -
277 -.pagelayer-add-widget-area .pagelayer-add-section:hover{
278 -border: 1px solid #138496;
279 -background-color: #138496;
280 -}
281 -
282 -.pagelayer-add-widget-area p{
283 -margin: 0px !important;
284 -color:#4f4f4f;
285 -font-size: 20px;
286 -line-height: 1.8;
287 -}
288 -
289 -.pagelayer-add-widget-drag{
290 -border-color: #111111;
291 -background: #c4d2de;
292 -}
293 -
294 -/* Pagelayer Drag stuff */
295 -
296 -.pagelayer-is-dragging{
297 -opacity: 0.33;
298 -transition:0.1s;
299 -}
300 -
301 -.pagelayer-drag-show{
302 -position:absolute;
303 -top:0px;
304 -left:0px;
305 -display:none;
306 -background: blue;
307 -z-index:1000;
308 -}
309 -
310 -.pagelayer-drag-prospect{
311 -height:1px;
312 -background:#00BCD4;
313 -z-index: 1000;
314 -width: 100%;
315 -}
316 -
317 -.pagelayer-drag-prospect-col{
318 -position: absolute;
319 -top: 0px;
320 -width: 1px;
321 -height: 100% !important;
322 -}
323 -
324 -/* Column resize handler icon */
325 -.pagelayer-resize-handler{
326 -position:absolute;
327 -top:50%;
328 -left:100%;
329 -transform: translate(-43%, -50%);
330 -color: #fff;
331 -font-size: 11px;
332 -z-index: 99;
333 -cursor:ew-resize;
334 -display:none;
335 -pointer-events: all;
336 -}
337 -
338 -.pagelayer-resize-icon{
339 -background-color: #42ADE1;
340 -padding: 3px;
341 -border-radius: 4px;
342 -height:30px;
343 -display:inline-block;
344 -}
345 -
346 -.pagelayer-resize-handler:before{
347 -content:attr(pre-width);
348 -background: #4f4f4f;
349 -position: absolute;
350 -right: 120%;
351 -top: 50%;
352 -transform: translateY(-50%);
353 -padding: 0 6px;
354 -border-radius:100%;
355 -}
356 -
357 -.pagelayer-resize-handler:after{
358 -content:attr(next-width);
359 -background: #4f4f4f;
360 -position: absolute;
361 -left: 120%;
362 -top: 50%;
363 -transform: translateY(-50%);
364 -padding: 0 6px;
365 -border-radius:100%;
366 -}
367 -
368 -/* Hide resize handler icon from last child*/
369 -.pagelayer-wrap-col:not(:last-child):hover > .pagelayer-ele-hover .pagelayer-resize-handler{
370 -display:block;
371 -}
372 -
373 -/* Column resize handler icon end */
374 -
375 -/* WordPress media box CSS */
376 -[id^="__wp-uploader"] .screen-reader-text{
377 -display:none;
378 -}
379 -
380 -[id^="__wp-uploader"] .media-button-select{
381 -text-transform: uppercase;
382 -font-weight: 700;
383 -letter-spacing: 0.046875em;
384 -}
385 -/* WordPress media box CSS end */
386 -
387 -
388 -/* image drop zone css start */
389 -.pagelayer-image-drop-zone{
390 -position:absolute;
391 -text-align:center;
392 -width:100%;
393 -height:100%;
394 -z-index:3;
395 -background-color: #2ea5dff0;
396 -display:none;
397 -}
398 -
399 -.pagelayer-image-drop-zone *{
400 -pointer-events:none;
401 -}
402 -
403 -.pagelayer-image-drop-zone > div{
404 -position: relative;
405 -top: 50%;
406 --webkit-transform: translateY(-50%);
407 --ms-transform: translateY(-50%);
408 -transform: translateY(-50%);
409 -}
410 -
411 -.pagelayer-image-drop-zone div *{
412 -color: white !important;
413 -line-height: 1;
414 -}
415 -
416 -.pagelayer-image-drop-zone div i{
417 -font-size:50px;
418 -}
419 -
420 -.pagelayer-image-drop-zone h4{
421 -margin: 20px;
422 -}
423 -
424 -.pagelayer-img-up-progress {
425 -width: 30%;
426 -margin-left: auto;
427 -margin-right: auto;
428 -background-color: transparent;
429 -border: 2px solid white;
430 -border-radius: 30px;
431 -padding: 3px;
432 -}
433 -
434 -.pagelayer-img-up-bar {
435 -width: 3%;
436 -height: 7px;
437 -background-color: white;
438 -line-height: 7px;
439 -text-align: center;
440 -border-radius: 30px;
441 -}
442 -
443 -@media screen and (max-width: 600px) {
444 -.pagelayer-img-up-progress {
445 -width: 54%;
446 -}
447 -}
448 -/* image drop zone css start */
449 -
450 -.pagelayer-pro-req{
451 -font-size: 10px;
452 -padding: 2px 4px;
453 -display: inline-block;
454 -background-color: #e63131;
455 -color: #fff;
456 -margin-left: 4px;
457 -border-radius: 2px;
458 -cursor: pointer;
459 -}
460 -
461 -/* Media upload box css */
462 -.media-modal .media-modal-content h1{
463 -font-size: 22px !important;
464 -line-height: 2.27 !important;
465 -}
466 -
467 -.media-modal .media-modal-content h2{
468 -font-size: 13px !important;
469 -line-height: 1 !important;
470 -}
471 -
472 -.media-modal .media-modal-content .uploader-inline h2{
473 -font-size: 20px !important;
474 -line-height: 1.4 !important;
475 -font-weight: 400 !important;
476 -}
477 -/* Media upload box css end */
478 -
479 -/*Tooltip widget*/
480 -.pagelayer-service-details{
481 -position:relative;
482 -z-index:9;
483 -}
484 -
485 -.pagelayer-shortcode-plus{
486 -border: none;
487 -margin: auto;
488 -z-index: 11;
489 -cursor: pointer;
490 -font-size: 10px;
491 -position: absolute;
492 -left: 50%;
493 -transform: translateX(-50%);
494 -bottom: -7px;
495 -text-align: center;
496 -pointer-events: all;
497 -display: none;
498 -line-height:1 !important;
499 -padding:0 !important;
500 -}
501 -
502 -.pagelayer-show-wiget-list{
503 -opacity:100%;
504 -}
505 -
506 -.pagelayer-show-wiget-list .pagelayer-shortcode-plus,
507 -:not(.pagelayer-hide-active) > .pagelayer-ele-hover .pagelayer-shortcode-plus{
508 -display: block !important;
509 -}
510 -
511 -.pagelayer-shortcode-plus .fas{
512 -display: inline-block !important;
513 -font-size: 10px !important;
514 -padding: 2px !important;
515 -background: #444;
516 -color: #fff;
517 -}
518 -
519 -.pagelayer-shortcode-plus:hover .fas{
520 -background: #0069d9;
521 -}
522 -
523 -[contenteditable]:focus{
524 -outline: 0px;
525 -}
526 -
527 -[data-placeholder-text]::after{
528 -display:flex;
529 -content: attr(data-placeholder-text);
530 -position:absolute;
531 -top: 50%;
532 -transform: translateY(-50%);
533 -left:3px;
534 -pointer-events:none;
535 -opacity:0.6;
536 -user-select:none;
537 -}
538 -
539 -.pagelayer-missing-message{
540 -border: 1px solid #434343;
541 -background: #fff;
542 -padding: 10px;
543 -border-radius: 3px;
544 -font-size: 13px;
545 -}
546 -
547 -.pagelayer-row-not-found{
548 -padding: 6px;
549 -margin: 10px 5px;
550 -border: 1px dashed #5a5a5a;
551 -}
552 -
553 -.pagelayer-row-not-found .pagelayer-click-add-row{
554 -cursor: pointer;
555 -color: #007bff !important;
556 -}
557 -
558 -/* Image map */
559 -.pagelayer-imgmap-toolbar,
560 -.pagelayer-imgmap-navigator-item-drag,
561 -.pagelayer-imgmap-navigator-title{
562 -display: flex;
563 -}
564 -
565 -.pagelayer-imgmap-toolbar {
566 -position: absolute !important;
567 -left: 10px;
568 -top: 0;
569 -background: #ffffffb0;
570 -border-radius: 6px;
571 -padding: 4px;
572 -}
573 -
574 -.pagelayer-imgmap-toolbar-item,
575 -.pagelayer-map-navigator-trigger,
576 -.pagelayer-map-list-trigger{
577 -width: 24px;
578 -padding: 6px;
579 -border: none;
580 -color: #666161 !important;
581 -cursor: pointer;
582 -display: inline-block;
583 -border-radius: 0;
584 -background: transparent !important;
585 -font-size: 12px;
586 -margin: auto;
587 -}
588 -
589 -.pagelayer-imgmap-toolbar-mover{
590 -padding: 2px;
591 -background: gray;
592 -border-radius: 10px;
593 -cursor: move;
594 -}
595 -
596 -.pagelayer-imgmap-toolbar.pagelayer-imgmap-selected .pagelayer-map_append,
597 -.pagelayer-imgmap-toolbar:not(.pagelayer-imgmap-edit) .pagelayer-map_save,
598 -.pagelayer-imgmap-toolbar:not(.pagelayer-imgmap-edit) .pagelayer-map_remove,
599 -.pagelayer-imgmap-toolbar:not(.pagelayer-imgmap-edit) .pagelayer-map_href,
600 -.pagelayer-imgmap-toolbar:not(.pagelayer-imgmap-edit) .pagelayer-map_edit,
601 -.pagelayer-imgmap-toolbar.pagelayer-imgmap-edit .pagelayer-map_append,
602 -.pagelayer-imgmap-toolbar.pagelayer-imgmap-edit .pagelayer-map_edit{
603 -display: none;
604 -}
605 -
606 -.pagelayer-imgmap-toolbar.pagelayer-imgmap-selected .pagelayer-map_edit,
607 -.pagelayer-imgmap-toolbar.pagelayer-imgmap-selected .pagelayer-map_remove{
608 -display: block;
609 -}
610 -
611 -.pagelayer-imgmap-toolbar-link {
612 -position: absolute;
613 -width: max-content;
614 -padding: 2px 5px 3px 5px;
615 -background: #ffffffb0;
616 -border-radius: 6px;
617 -margin: 28px 0 0 0;
618 -display: none;
619 -}
620 -
621 -.pagelayer-imgmap-toolbar-link input {
622 -width: 180px;
623 -font-size: 12px;
624 -padding: 2px !important;
625 -}
626 -
627 -.pagelayer-imgmap-save-link {
628 -padding: 4px 6px;
629 -font-size: 12px;
630 -font-weight: bold;
631 -border-radius: 6px;
632 -margin: 0 0 0 6px;
633 -cursor: pointer;
634 -}
635 -
636 -.pagelayer-imgmap-hover-active .pagelayer-imgmap-item {
637 -cursor: pointer;
638 -opacity: 0;
639 -}
640 -
641 -.pagelayer-map-item-active_is_editable{
642 -opacity: 1;
643 -}
644 -
645 -.pagelayer-imgmap-coord {
646 -position: absolute;
647 -background: #bfbfbf;
648 -top: 0;
649 -border-radius: 100%;
650 -margin-top: -5px;
651 -width: 10px;
652 -height: 10px;
653 -border: 2px solid #000000bf;
654 -margin-left: -5px;
655 -cursor: pointer;
656 -display: none;
657 -}
658 -
659 -span.pagelayer-imgmap-remove-cord {
660 -padding: 5px 6px;
661 -position: absolute;
662 -top: 11px;
663 -background: #fff;
664 -font-size: 12px;
665 -border-radius: 5px;
666 -left: -8px;
667 -color: gray;
668 -cursor: pointer;
669 -z-index: 999;
670 -display: none;
671 -}
672 -
673 -.pagelayer-imgmap-remove-cord::after {
674 -content: '';
675 -padding: 4px;
676 -position: absolute;
677 -top: -4px;
678 -background: inherit;
679 -transform: rotate(47deg);
680 -left: 7px;
681 -}
682 -
683 -.pagelayer-imgmap-coord:hover > .pagelayer-imgmap-remove-cord,
684 -.pagelayer-imgmap-coord.pagelayer-mapele-dragging{
685 -display: block;
686 -}
687 -
688 -.pagelayer-imgmap-coord.pagelayer-mapele-dragging span{
689 -display: none !important;
690 -}
691 -
692 -.pagelayer-imgmap-navigator {
693 -position: absolute;
694 -width: 245px;
695 -background: #f6f6f8;
696 -top: 38px;
697 -border-radius: 2px;
698 -padding: 1px 4px 6px 4px;
699 -box-shadow: 0px 0px 4px -1px #666;
700 -display: none;
701 -}
702 -
703 -.pagelayer-imgmap-navigator-close {
704 -position: absolute;
705 -right: 12px;
706 -top: 9px;
707 -cursor: pointer;
708 -}
709 -
710 -.pagelayer-imgmap-navigator-wrap {
711 -height: 162px;
712 -overflow-y: auto;
713 -scrollbar-width: thin;
714 -resize: vertical;
715 -padding: 2px 0;
716 -}
717 -
718 -.pagelayer-imgmap-navigator-item {
719 -display: grid;
720 -grid-template-columns: 30px auto 86px;
721 -background: #fff;
722 -color: #4f4f4f;
723 -padding: 4px;
724 -font-size: 12px;
725 -margin: 6px 4px;
726 -border-radius: 4px;
727 -border: 1px solid #d9d9d9;
728 -}
729 -
730 -.pagelayer-imgmap-navigator-item:first-child {
731 -margin-top: 0;
732 -}
733 -
734 -.pagelayer-imgmap-navigator-header {
735 -text-align: left;
736 -padding: 4px 6px;
737 -font-size: 12px;
738 -font-weight: bolder;
739 -}
740 -
741 -.pagelayer-imgmap-navigator-title {
742 -text-align: left;
743 -}
744 -
745 -.pagelayer-imgmap-navigator-item-drag i{
746 -margin: auto;
747 -}
748 -
749 -.pagelayer-imgmap-navigator-title{
750 -align-self: center;
751 -}
752 -
753 -.pagelayer-map-navigator-trigger{
754 -width: 18px;
755 -}
756 -
757 -.pagelayer-navigator-item-active {
758 -outline: 1px solid #ff6b6b;
759 -}
760 -/* Image map end*/
761 -
762 -/* Markdown start*/
763 -.pagelayer-markdown-editor-ui{
764 -padding: 2px;
765 -text-align: center;
766 -margin-top: 10px;
767 -}
768 -
769 -.pagelayer-float-edit-btn{
770 -position: absolute;
771 -left: 50%;
772 -transform: translateX(-50%) !important;
773 -z-index: 90;
774 -opacity: 0;
775 -visibility: hidden;
776 -transition: all 0.3s ease;
777 -color: #fff;
778 -background-color: #7a36d9;
779 -border: 2px solid #b98ef5;
780 -border-radius: 20px;
781 -font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
782 -font-size: 12px;
783 -font-weight: 800;
784 -padding: 5px 10px;
785 -cursor: pointer;
786 -line-height: normal;
787 -box-shadow: 0 4px 10px rgba(0,0,0,0.15);
788 -display: inline-flex;
789 -align-items: center;
790 -}
791 -
792 -.pagelayer-markdown-wrapper:hover .pagelayer-float-edit-btn{
793 -opacity: 1;
794 -visibility: visible;
795 -transform: translateY(0);
796 -}
797 -
798 -.pagelayer-float-edit-btn:hover{
799 -background-color: #642bb3;
800 -border-color: #a370e8;
801 -}
802 -
803 -.pagelayer-float-edit-btn .dashicons{
804 -margin-left: 3px;
805 -margin-right: 0;
806 -font-size:16px;
807 -font-weight:800;
808 -display: inline-flex;
809 -align-items: center;
810 -}
811 -
812 -.pagelayer-markdown-modal{
813 -display:none;
814 -position:fixed;
815 -top:0; left:0;
816 -width:100vw;
817 -height:100vh;
818 -background:rgba(0,0,0,0.85);
819 -z-index:999999;
820 -text-align:left;
821 -}
822 -
823 -.pagelayer-mardown-modal-editor{
824 -position:relative;
825 -width:90vw;
826 -height:90vh;
827 -margin:5vh auto;
828 -background:#fff;
829 -border-radius:6px;
830 -display:flex;
831 -flex-direction:column;
832 -overflow:hidden;
833 -box-shadow: 0 10px 30px rgba(0,0,0,0.5);
834 -}
835 -
836 -.pagelayer-markdown-modal-header{
837 -position: relative;
838 -padding:15px 20px;
839 -background:#fff;
840 -border-bottom:1px solid #ddd;
841 -display:flex;
842 -justify-content:space-between;
843 -align-items:center;
844 -}
845 -
846 -.pagelayer-markdown-modal-header h3{
847 -font-size: 23px !important;
848 -margin:0;
849 -color:#333;
850 -}
851 -
852 -.pagelayer-markdown-modal-header span:not(.pagelayer-markdown-close-btn){
853 -font-size: 14px;
854 -font-weight: normal;
855 -opacity: 0.7;
856 -margin: 0 0 0 300px;
857 -}
858 -
859 -.pagelayer-markdown-modal-header button{
860 -font-size: 13px;
861 -font-weight: 600;
862 -padding: 10px;
863 -border: 1px solid #9ded9e;
864 -border-radius: 20px;
865 -margin-right: 40px;
866 -}
867 -
868 -.pagelayer-markdown-close-btn{
869 -position: absolute;
870 -top: 15px;
871 -right: 20px;
872 -font-size: 40px;
873 -line-height: 1;
874 -font-weight: bold;
875 -color: #888;
876 -cursor: pointer;
877 -transition: color 0.2s ease-in-out;
878 -margin: 0;
879 -}
880 -
881 -.pagelayer-markdown-close-btn:hover{
882 -color: #dc3232;
883 -}
884 -
885 -.pagelayer-markdown-modal-container{
886 -display:flex;
887 -flex:1;
888 -height:calc(100% - 60px);
889 -}
890 -
891 -.pagelayer-markdown-modal-input-box{
892 -flex:1;
893 -border-right:1px solid #ddd;
894 -background:#282c34;
895 -}
896 -
897 -.pagelayer-markdown-modal-input{
898 -width:100%;
899 -height:100%;
900 -padding:20px;
901 -border:none;
902 -resize:none;
903 -font-size:14px;
904 -background:transparent;
905 -color:#abb2bf;
906 -outline:none;
907 -box-sizing:border-box;
908 -}
909 -
910 -.pagelayer-markdown-modal-input:focus{
911 -color:#abb2bf;
912 -}
913 -
914 -.pagelayer-markdown-modal-preview{
915 -flex:1;
916 -padding:20px;
917 -overflow-y:auto;
918 -background:#fff;
919 -color:#333;
920 -box-sizing:border-box;
921 -}
922 -
923 -.pagelayer-markdown-spinner{
924 -text-align: center;
925 -padding: 20px;
926 -}
927 -
928 -.pagelayer-markdown-error{
929 -color: red;
930 -padding: 10px;
931 -}
932 -/* Markdown end*/
933 -
1 +
2 +/* Add an element box */
3 +.pagelayer-add-ele{
4 +display:block;
5 +vertical-align:middle;
6 +text-align:center;
7 +border:1px dashed #4a4949;
8 +min-height:60px;
9 +padding:5px;
10 +color:#4f4f4f;
11 +font-size: 16px;
12 +line-height: 1.5;
13 +position: relative;
14 +}
15 +
16 +.pagelayer-add-ele .fas{
17 +font-size:15px;
18 +color:#4a4949;
19 +cursor:pointer;
20 +}
21 +
22 +.pagelayer-add-ele .fas:hover:before{
23 +color:#3e8ef7;
24 +}
25 +
26 +.pagelayer-add-ele span,
27 +.pagelayer-add-widget-area p{
28 +font-family: "Open Sans", Arial, Helvetica, sans-serif;
29 +}
30 +
31 +.pagelayer-empty-col{
32 +display:table-cell;
33 +}
34 +
35 +.pagelayer-row{
36 +min-height:20px;
37 +}
38 +
39 +/* Since we have a wrap, we set the cols to the wrap. Hence we need to make the width of the real thing to 100% */
40 +.pagelayer-ele-wrap>.pagelayer-col{
41 +width:100%;
42 +}
43 +
44 +.pagelayer-ele-wrap{
45 +position: relative;
46 +}
47 +
48 +/*.pagelayer-ele-option{
49 +min-height: 10px;
50 +} */
51 +
52 +.pagelayer-wrap-col{
53 +align-content: unset !important;
54 +}
55 +
56 +.pagelayer-ele-overlay{
57 +position: absolute;
58 +width: 100%;
59 +height: 100%;
60 +right: 0px;
61 +top: 0px;
62 +z-index: 10;
63 +pointer-events:none;
64 +opacity: 0%;
65 +outline-width:0px;
66 +transition: outline 0.1s ease, opacity 0.1s ease;
67 +}
68 +
69 +.pagelayer-ele-hover, .pagelayer-drag-ele-hover{
70 +outline: 2px dashed #2563eb !important;
71 +opacity: 100% !important;
72 +}
73 +
74 +.pagelayer-active{
75 +outline: 2px solid #2563eb !important;
76 +opacity: 100% !important;
77 +}
78 +
79 +.pagelayer-editor-hidden-element {
80 +opacity: 0.45 !important;
81 +outline: 1.5px dashed #ef4444 !important;
82 +filter: grayscale(30%);
83 +}
84 +
85 +.pagelayer-editor-locked-element {
86 +outline: 1.5px solid #f59e0b !important;
87 +cursor: not-allowed !important;
88 +}
89 +
90 +.pagelayer-editor-locked-element [contenteditable="true"] {
91 +pointer-events: none !important;
92 +}
93 +
94 +.pagelayer-hide-active>.pagelayer-ele-overlay{
95 +outline: transparent !important;
96 +opacity: 0 !important;
97 +}
98 +
99 +.pagelayer-row-hover{
100 +outline:1px solid #277CF9;
101 +}
102 +
103 +.pagelayer-col-hover{
104 +outline:1px solid #42ADE1;
105 +}
106 +
107 +.pagelayer-ele-option,
108 +.pagelayer-row-option,
109 +.pagelayer-col-option{
110 +position: absolute;
111 +top:0px;
112 +right:0px;
113 +z-index: 20;
114 +padding:0px;
115 +margin:0px;
116 +line-height: 0;
117 +pointer-events:auto;
118 +}
119 +
120 +.pagelayer-eoi{
121 +display:inline-block !important;
122 +font-size:12px !important;
123 +padding:4px !important;
124 +background:#444;
125 +color:#fff;
126 +}
127 +
128 +.pagelayer-eoi:hover{
129 +background:#222;
130 +cursor: pointer;
131 +}
132 +
133 +.pagelayer-row-option{
134 +top:-20px;
135 +left:calc(50% - 63px/2);
136 +z-index: 30;
137 +}
138 +
139 +.pagelayer-row-option-zero>.pagelayer-wrap-row:nth-child(1 of .pagelayer-wrap-row)>.pagelayer-ele-overlay .pagelayer-row-option{
140 +top:0;
141 +}
142 +
143 +.pagelayer-row-option .pagelayer-eoi{
144 +background:#277CF9;
145 +}
146 +
147 +.pagelayer-row-option .pagelayer-eoi:hover{
148 +background:#1c59b3;
149 +}
150 +
151 +.pagelayer-wrap-row > .pagelayer-ele-overlay .pagelayer-move-up,
152 +.pagelayer-col-holder > .pagelayer-wrap-inner-row:first-child > .pagelayer-ele-overlay .pagelayer-move-up,
153 +.pagelayer-col-holder > .pagelayer-wrap-ele:first-child > .pagelayer-ele-overlay .pagelayer-move-up{
154 +display:none !important;
155 +}
156 +
157 +.pagelayer-wrap-row ~ .pagelayer-wrap-row > .pagelayer-ele-overlay .pagelayer-move-up{
158 +display:inline-block !important;
159 +}
160 +
161 +.pagelayer-wrap-row:nth-last-of-type(2) > .pagelayer-ele-overlay .pagelayer-move-down,
162 +.pagelayer-col-holder > .pagelayer-wrap-inner-row:last-child > .pagelayer-ele-overlay .pagelayer-move-down,
163 +.pagelayer-col-holder > .pagelayer-wrap-ele:last-child > .pagelayer-ele-overlay .pagelayer-move-down{
164 +display:none !important;
165 +}
166 +
167 +.pagelayer-col-option .pagelayer-eoi{
168 +background:#42ADE1;
169 +}
170 +
171 +.pagelayer-col-option .pagelayer-eoi:hover{
172 +background:#1070AA;
173 +}
174 +
175 +.pagelayer-col-option{
176 +top:0px;
177 +left:0px;
178 +z-index: 30;
179 +width: 21px;
180 +}
181 +
182 +.pagelayer-splash{
183 +background-image:url(../images/splash.png);
184 +height:30px;
185 +background-position: center center;
186 +background-repeat: no-repeat;
187 +background-size: cover;
188 +}
189 +
190 +.pagelayer-space-holder{
191 +background:url(../images/space.png);
192 +background-repeat:repeat;
193 +}
194 +
195 +.pagelayer-anchor{
196 +background-image:url(../images/anchor.png);
197 +height:30px;
198 +background-position: center center;
199 +background-repeat: no-repeat;
200 +background-size: cover;
201 +}
202 +
203 +/* Right Click */
204 +.pagelayer-right-click-options{
205 +position:fixed;
206 +background:#e9eaea;
207 +border-radius: 2px;
208 +box-shadow: 0 0 5px rgba(0,0,0,0.1);
209 +z-index: 99999;
210 +border: 1px solid rgba(0,0,0,0.2);
211 +min-width:135px;
212 +}
213 +
214 +.pagelayer-right-click-options ul{
215 +list-style: none;
216 +margin: 0;
217 +padding: 0;
218 +}
219 +
220 +.pagelayer-right-click-options a{
221 +color: #4a4949;
222 +padding: 8px 10px;
223 +width: 100%;
224 +display: block;
225 +box-sizing: border-box;
226 +transition: all 0.2s;
227 +white-space:nowrap;
228 +}
229 +
230 +.pagelayer-right-click-options a .far{
231 +margin-right: 5px;
232 +}
233 +
234 +.pagelayer-right-click-options a:hover{
235 +background: #449D44;
236 +color:#fff;
237 +}
238 +
239 +.pagelayer-right-click-options li{
240 +border-bottom: 1px solid rgb(236, 236, 236);
241 +font-size: 12px;
242 +font-family: Opensans, arial;
243 +cursor:pointer;
244 +}
245 +
246 +.pagelayer-right-click-options .pagelayer-right-delete:hover {
247 +background:#EF4D4D;
248 +}
249 +
250 +.pagelayer-context-disable{
251 +opacity: 0.5;
252 +cursor: progress;
253 +}
254 +
255 +
256 +.pagelayer-add-widget-area .pagelayer-add-button{
257 +font-size: 14px;
258 +font-weight: bold;
259 +border: 1px solid #007bff;
260 +background-color: #007bff;
261 +color:#fff;
262 +border-radius:5px;
263 +padding:9px;
264 +margin-right:5px;
265 +cursor:pointer;
266 +display:inline-block;
267 +}
268 +
269 +.pagelayer-add-widget-area .pagelayer-add-button:hover{
270 +border: 1px solid #0069d9;
271 +background-color: #0069d9;
272 +}
273 +
274 +.pagelayer-add-widget-area .pagelayer-add-section{
275 +border: 1px solid #17a2b8;
276 +background-color: #17a2b8;
277 +}
278 +
279 +.pagelayer-add-widget-area .pagelayer-add-section:hover{
280 +border: 1px solid #138496;
281 +background-color: #138496;
282 +}
283 +
284 +.pagelayer-add-widget-area p{
285 +margin: 0px !important;
286 +color:#4f4f4f;
287 +font-size: 20px;
288 +line-height: 1.8;
289 +}
290 +
291 +.pagelayer-add-widget-drag{
292 +border-color: #111111;
293 +background: #c4d2de;
294 +}
295 +
296 +/* Pagelayer Drag stuff */
297 +
298 +.pagelayer-is-dragging{
299 +opacity: 0.33;
300 +transition:0.1s;
301 +}
302 +
303 +.pagelayer-drag-show{
304 +position:absolute;
305 +top:0px;
306 +left:0px;
307 +display:none;
308 +background: blue;
309 +z-index:1000;
310 +}
311 +
312 +.pagelayer-drag-prospect{
313 +height: 4px !important;
314 +background: #2563eb !important;
315 +z-index: 1000;
316 +width: 100%;
317 +position: relative;
318 +}
319 +
320 +.pagelayer-drag-prospect::before {
321 +content: '' !important;
322 +position: absolute !important;
323 +left: 0 !important;
324 +top: -4px !important;
325 +width: 12px !important;
326 +height: 12px !important;
327 +border-radius: 50% !important;
328 +background: #2563eb !important;
329 +border: 2px solid #ffffff !important;
330 +box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
331 +}
332 +
333 +.pagelayer-drag-prospect-col{
334 +position: absolute;
335 +top: 0px;
336 +width: 4px !important;
337 +height: 100% !important;
338 +background: #2563eb !important;
339 +position: relative;
340 +}
341 +
342 +.pagelayer-drag-prospect-col::before {
343 +content: '' !important;
344 +position: absolute !important;
345 +left: -4px !important;
346 +top: 0 !important;
347 +width: 12px !important;
348 +height: 12px !important;
349 +border-radius: 50% !important;
350 +background: #2563eb !important;
351 +border: 2px solid #ffffff !important;
352 +box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
353 +}
354 +
355 +/* Column resize handler icon */
356 +.pagelayer-resize-handler{
357 +position:absolute;
358 +top:50%;
359 +left:100%;
360 +transform: translate(-43%, -50%);
361 +color: #fff;
362 +font-size: 11px;
363 +z-index: 99;
364 +cursor:ew-resize;
365 +display:none;
366 +pointer-events: all;
367 +}
368 +
369 +.pagelayer-resize-icon{
370 +background-color: #42ADE1;
371 +padding: 3px;
372 +border-radius: 4px;
373 +height:30px;
374 +display:inline-block;
375 +}
376 +
377 +.pagelayer-resize-handler:before{
378 +content:attr(pre-width);
379 +background: #4f4f4f;
380 +position: absolute;
381 +right: 120%;
382 +top: 50%;
383 +transform: translateY(-50%);
384 +padding: 0 6px;
385 +border-radius:100%;
386 +}
387 +
388 +.pagelayer-resize-handler:after{
389 +content:attr(next-width);
390 +background: #4f4f4f;
391 +position: absolute;
392 +left: 120%;
393 +top: 50%;
394 +transform: translateY(-50%);
395 +padding: 0 6px;
396 +border-radius:100%;
397 +}
398 +
399 +/* Hide resize handler icon from last child*/
400 +.pagelayer-wrap-col:not(:last-child):hover > .pagelayer-ele-hover .pagelayer-resize-handler{
401 +display:block;
402 +}
403 +
404 +/* Column resize handler icon end */
405 +
406 +/* WordPress media box CSS */
407 +[id^="__wp-uploader"] .screen-reader-text{
408 +display:none;
409 +}
410 +
411 +[id^="__wp-uploader"] .media-button-select{
412 +text-transform: uppercase;
413 +font-weight: 700;
414 +letter-spacing: 0.046875em;
415 +}
416 +/* WordPress media box CSS end */
417 +
418 +
419 +/* image drop zone css start */
420 +.pagelayer-image-drop-zone{
421 +position:absolute;
422 +text-align:center;
423 +width:100%;
424 +height:100%;
425 +z-index:3;
426 +background-color: rgba(37, 99, 235, 0.94);
427 +display:none;
428 +}
429 +
430 +.pagelayer-image-drop-zone *{
431 +pointer-events:none;
432 +}
433 +
434 +.pagelayer-image-drop-zone > div{
435 +position: relative;
436 +top: 50%;
437 +-webkit-transform: translateY(-50%);
438 +-ms-transform: translateY(-50%);
439 +transform: translateY(-50%);
440 +}
441 +
442 +.pagelayer-image-drop-zone div *{
443 +color: white !important;
444 +line-height: 1;
445 +}
446 +
447 +.pagelayer-image-drop-zone div i{
448 +font-size:50px;
449 +}
450 +
451 +.pagelayer-image-drop-zone h4{
452 +margin: 20px;
453 +}
454 +
455 +.pagelayer-img-up-progress {
456 +width: 30%;
457 +margin-left: auto;
458 +margin-right: auto;
459 +background-color: transparent;
460 +border: 2px solid white;
461 +border-radius: 30px;
462 +padding: 3px;
463 +}
464 +
465 +.pagelayer-img-up-bar {
466 +width: 3%;
467 +height: 7px;
468 +background-color: white;
469 +line-height: 7px;
470 +text-align: center;
471 +border-radius: 30px;
472 +}
473 +
474 +@media screen and (max-width: 600px) {
475 +.pagelayer-img-up-progress {
476 +width: 54%;
477 +}
478 +}
479 +/* image drop zone css start */
480 +
481 +.pagelayer-pro-req{
482 +font-size: 10px;
483 +padding: 2px 4px;
484 +display: inline-block;
485 +background-color: #e63131;
486 +color: #fff;
487 +margin-left: 4px;
488 +border-radius: 2px;
489 +cursor: pointer;
490 +}
491 +
492 +/* Media upload box css */
493 +.media-modal .media-modal-content h1{
494 +font-size: 22px !important;
495 +line-height: 2.27 !important;
496 +}
497 +
498 +.media-modal .media-modal-content h2{
499 +font-size: 13px !important;
500 +line-height: 1 !important;
501 +}
502 +
503 +.media-modal .media-modal-content .uploader-inline h2{
504 +font-size: 20px !important;
505 +line-height: 1.4 !important;
506 +font-weight: 400 !important;
507 +}
508 +/* Media upload box css end */
509 +
510 +/*Tooltip widget*/
511 +.pagelayer-service-details{
512 +position:relative;
513 +z-index:9;
514 +}
515 +
516 +.pagelayer-shortcode-plus{
517 +border: none;
518 +margin: auto;
519 +z-index: 11;
520 +cursor: pointer;
521 +font-size: 10px;
522 +position: absolute;
523 +left: 50%;
524 +transform: translateX(-50%);
525 +bottom: -7px;
526 +text-align: center;
527 +pointer-events: all;
528 +display: none;
529 +line-height:1 !important;
530 +padding:0 !important;
531 +}
532 +
533 +.pagelayer-show-wiget-list{
534 +opacity:100%;
535 +}
536 +
537 +.pagelayer-show-wiget-list .pagelayer-shortcode-plus,
538 +:not(.pagelayer-hide-active) > .pagelayer-ele-hover .pagelayer-shortcode-plus{
539 +display: block !important;
540 +}
541 +
542 +.pagelayer-shortcode-plus .fas{
543 +display: inline-block !important;
544 +font-size: 10px !important;
545 +padding: 2px !important;
546 +background: #444;
547 +color: #fff;
548 +}
549 +
550 +.pagelayer-shortcode-plus:hover .fas{
551 +background: #0069d9;
552 +}
553 +
554 +[contenteditable]:focus{
555 +outline: 0px;
556 +}
557 +
558 +[data-placeholder-text]::after{
559 +display:flex;
560 +content: attr(data-placeholder-text);
561 +position:absolute;
562 +top: 50%;
563 +transform: translateY(-50%);
564 +left:3px;
565 +pointer-events:none;
566 +opacity:0.6;
567 +user-select:none;
568 +}
569 +
570 +.pagelayer-missing-message{
571 +border: 1px solid #434343;
572 +background: #fff;
573 +padding: 10px;
574 +border-radius: 3px;
575 +font-size: 13px;
576 +}
577 +
578 +.pagelayer-row-not-found{
579 +padding: 6px;
580 +margin: 10px 5px;
581 +border: 1px dashed #5a5a5a;
582 +}
583 +
584 +.pagelayer-row-not-found .pagelayer-click-add-row{
585 +cursor: pointer;
586 +color: #007bff !important;
587 +}
588 +
589 +/* Image map */
590 +.pagelayer-imgmap-toolbar,
591 +.pagelayer-imgmap-navigator-item-drag,
592 +.pagelayer-imgmap-navigator-title{
593 +display: flex;
594 +}
595 +
596 +.pagelayer-imgmap-toolbar {
597 +position: absolute !important;
598 +left: 10px;
599 +top: 0;
600 +background: #ffffffb0;
601 +border-radius: 6px;
602 +padding: 4px;
603 +}
604 +
605 +.pagelayer-imgmap-toolbar-item,
606 +.pagelayer-map-navigator-trigger,
607 +.pagelayer-map-list-trigger{
608 +width: 24px;
609 +padding: 6px;
610 +border: none;
611 +color: #666161 !important;
612 +cursor: pointer;
613 +display: inline-block;
614 +border-radius: 0;
615 +background: transparent !important;
616 +font-size: 12px;
617 +margin: auto;
618 +}
619 +
620 +.pagelayer-imgmap-toolbar-mover{
621 +padding: 2px;
622 +background: gray;
623 +border-radius: 10px;
624 +cursor: move;
625 +}
626 +
627 +.pagelayer-imgmap-toolbar.pagelayer-imgmap-selected .pagelayer-map_append,
628 +.pagelayer-imgmap-toolbar:not(.pagelayer-imgmap-edit) .pagelayer-map_save,
629 +.pagelayer-imgmap-toolbar:not(.pagelayer-imgmap-edit) .pagelayer-map_remove,
630 +.pagelayer-imgmap-toolbar:not(.pagelayer-imgmap-edit) .pagelayer-map_href,
631 +.pagelayer-imgmap-toolbar:not(.pagelayer-imgmap-edit) .pagelayer-map_edit,
632 +.pagelayer-imgmap-toolbar.pagelayer-imgmap-edit .pagelayer-map_append,
633 +.pagelayer-imgmap-toolbar.pagelayer-imgmap-edit .pagelayer-map_edit{
634 +display: none;
635 +}
636 +
637 +.pagelayer-imgmap-toolbar.pagelayer-imgmap-selected .pagelayer-map_edit,
638 +.pagelayer-imgmap-toolbar.pagelayer-imgmap-selected .pagelayer-map_remove{
639 +display: block;
640 +}
641 +
642 +.pagelayer-imgmap-toolbar-link {
643 +position: absolute;
644 +width: max-content;
645 +padding: 2px 5px 3px 5px;
646 +background: #ffffffb0;
647 +border-radius: 6px;
648 +margin: 28px 0 0 0;
649 +display: none;
650 +}
651 +
652 +.pagelayer-imgmap-toolbar-link input {
653 +width: 180px;
654 +font-size: 12px;
655 +padding: 2px !important;
656 +}
657 +
658 +.pagelayer-imgmap-save-link {
659 +padding: 4px 6px;
660 +font-size: 12px;
661 +font-weight: bold;
662 +border-radius: 6px;
663 +margin: 0 0 0 6px;
664 +cursor: pointer;
665 +}
666 +
667 +.pagelayer-imgmap-hover-active .pagelayer-imgmap-item {
668 +cursor: pointer;
669 +opacity: 0;
670 +}
671 +
672 +.pagelayer-map-item-active_is_editable{
673 +opacity: 1;
674 +}
675 +
676 +.pagelayer-imgmap-coord {
677 +position: absolute;
678 +background: #bfbfbf;
679 +top: 0;
680 +border-radius: 100%;
681 +margin-top: -5px;
682 +width: 10px;
683 +height: 10px;
684 +border: 2px solid #000000bf;
685 +margin-left: -5px;
686 +cursor: pointer;
687 +display: none;
688 +}
689 +
690 +span.pagelayer-imgmap-remove-cord {
691 +padding: 5px 6px;
692 +position: absolute;
693 +top: 11px;
694 +background: #fff;
695 +font-size: 12px;
696 +border-radius: 5px;
697 +left: -8px;
698 +color: gray;
699 +cursor: pointer;
700 +z-index: 999;
701 +display: none;
702 +}
703 +
704 +.pagelayer-imgmap-remove-cord::after {
705 +content: '';
706 +padding: 4px;
707 +position: absolute;
708 +top: -4px;
709 +background: inherit;
710 +transform: rotate(47deg);
711 +left: 7px;
712 +}
713 +
714 +.pagelayer-imgmap-coord:hover > .pagelayer-imgmap-remove-cord,
715 +.pagelayer-imgmap-coord.pagelayer-mapele-dragging{
716 +display: block;
717 +}
718 +
719 +.pagelayer-imgmap-coord.pagelayer-mapele-dragging span{
720 +display: none !important;
721 +}
722 +
723 +.pagelayer-imgmap-navigator {
724 +position: absolute;
725 +width: 245px;
726 +background: #f6f6f8;
727 +top: 38px;
728 +border-radius: 2px;
729 +padding: 1px 4px 6px 4px;
730 +box-shadow: 0px 0px 4px -1px #666;
731 +display: none;
732 +}
733 +
734 +.pagelayer-imgmap-navigator-close {
735 +position: absolute;
736 +right: 12px;
737 +top: 9px;
738 +cursor: pointer;
739 +}
740 +
741 +.pagelayer-imgmap-navigator-wrap {
742 +height: 162px;
743 +overflow-y: auto;
744 +scrollbar-width: thin;
745 +resize: vertical;
746 +padding: 2px 0;
747 +}
748 +
749 +.pagelayer-imgmap-navigator-item {
750 +display: grid;
751 +grid-template-columns: 30px auto 86px;
752 +background: #fff;
753 +color: #4f4f4f;
754 +padding: 4px;
755 +font-size: 12px;
756 +margin: 6px 4px;
757 +border-radius: 4px;
758 +border: 1px solid #d9d9d9;
759 +}
760 +
761 +.pagelayer-imgmap-navigator-item:first-child {
762 +margin-top: 0;
763 +}
764 +
765 +.pagelayer-imgmap-navigator-header {
766 +text-align: left;
767 +padding: 4px 6px;
768 +font-size: 12px;
769 +font-weight: bolder;
770 +}
771 +
772 +.pagelayer-imgmap-navigator-title {
773 +text-align: left;
774 +}
775 +
776 +.pagelayer-imgmap-navigator-item-drag i{
777 +margin: auto;
778 +}
779 +
780 +.pagelayer-imgmap-navigator-title{
781 +align-self: center;
782 +}
783 +
784 +.pagelayer-map-navigator-trigger{
785 +width: 18px;
786 +}
787 +
788 +.pagelayer-navigator-item-active {
789 +outline: 1px solid #ff6b6b;
790 +}
791 +/* Image map end*/
792 +
793 +/* Markdown start*/
794 +.pagelayer-markdown-editor-ui{
795 +padding: 2px;
796 +text-align: center;
797 +margin-top: 10px;
798 +}
799 +
800 +.pagelayer-float-edit-btn{
801 +position: absolute;
802 +left: 50%;
803 +transform: translateX(-50%) !important;
804 +z-index: 90;
805 +opacity: 0;
806 +visibility: hidden;
807 +transition: all 0.3s ease;
808 +color: #fff;
809 +background-color: #7a36d9;
810 +border: 2px solid #b98ef5;
811 +border-radius: 20px;
812 +font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
813 +font-size: 12px;
814 +font-weight: 800;
815 +padding: 5px 10px;
816 +cursor: pointer;
817 +line-height: normal;
818 +box-shadow: 0 4px 10px rgba(0,0,0,0.15);
819 +display: inline-flex;
820 +align-items: center;
821 +}
822 +
823 +.pagelayer-markdown-wrapper:hover .pagelayer-float-edit-btn{
824 +opacity: 1;
825 +visibility: visible;
826 +transform: translateY(0);
827 +}
828 +
829 +.pagelayer-float-edit-btn:hover{
830 +background-color: #642bb3;
831 +border-color: #a370e8;
832 +}
833 +
834 +.pagelayer-float-edit-btn .dashicons{
835 +margin-left: 3px;
836 +margin-right: 0;
837 +font-size:16px;
838 +font-weight:800;
839 +display: inline-flex;
840 +align-items: center;
841 +}
842 +
843 +.pagelayer-markdown-modal{
844 +display:none;
845 +position:fixed;
846 +top:0; left:0;
847 +width:100vw;
848 +height:100vh;
849 +background:rgba(0,0,0,0.85);
850 +z-index:999999;
851 +text-align:left;
852 +}
853 +
854 +.pagelayer-mardown-modal-editor{
855 +position:relative;
856 +width:90vw;
857 +height:90vh;
858 +margin:5vh auto;
859 +background:#fff;
860 +border-radius:6px;
861 +display:flex;
862 +flex-direction:column;
863 +overflow:hidden;
864 +box-shadow: 0 10px 30px rgba(0,0,0,0.5);
865 +}
866 +
867 +.pagelayer-markdown-modal-header{
868 +position: relative;
869 +padding:15px 20px;
870 +background:#fff;
871 +border-bottom:1px solid #ddd;
872 +display:flex;
873 +justify-content:space-between;
874 +align-items:center;
875 +}
876 +
877 +.pagelayer-markdown-modal-header h3{
878 +font-size: 23px !important;
879 +margin:0;
880 +color:#333;
881 +}
882 +
883 +.pagelayer-markdown-modal-header span:not(.pagelayer-markdown-close-btn){
884 +font-size: 14px;
885 +font-weight: normal;
886 +opacity: 0.7;
887 +margin: 0 0 0 300px;
888 +}
889 +
890 +.pagelayer-markdown-modal-header button{
891 +font-size: 13px;
892 +font-weight: 600;
893 +padding: 10px;
894 +border: 1px solid #9ded9e;
895 +border-radius: 20px;
896 +margin-right: 40px;
897 +}
898 +
899 +.pagelayer-markdown-close-btn{
900 +position: absolute;
901 +top: 15px;
902 +right: 20px;
903 +font-size: 40px;
904 +line-height: 1;
905 +font-weight: bold;
906 +color: #888;
907 +cursor: pointer;
908 +transition: color 0.2s ease-in-out;
909 +margin: 0;
910 +}
911 +
912 +.pagelayer-markdown-close-btn:hover{
913 +color: #dc3232;
914 +}
915 +
916 +.pagelayer-markdown-modal-container{
917 +display:flex;
918 +flex:1;
919 +height:calc(100% - 60px);
920 +}
921 +
922 +.pagelayer-markdown-modal-input-box{
923 +flex:1;
924 +border-right:1px solid #ddd;
925 +background:#282c34;
926 +}
927 +
928 +.pagelayer-markdown-modal-input{
929 +width:100%;
930 +height:100%;
931 +padding:20px;
932 +border:none;
933 +resize:none;
934 +font-size:14px;
935 +background:transparent;
936 +color:#abb2bf;
937 +outline:none;
938 +box-sizing:border-box;
939 +}
940 +
941 +.pagelayer-markdown-modal-input:focus{
942 +color:#abb2bf;
943 +}
944 +
945 +.pagelayer-markdown-modal-preview{
946 +flex:1;
947 +padding:20px;
948 +overflow-y:auto;
949 +background:#fff;
950 +color:#333;
951 +box-sizing:border-box;
952 +}
953 +
954 +.pagelayer-markdown-spinner{
955 +text-align: center;
956 +padding: 20px;
957 +}
958 +
959 +.pagelayer-markdown-error{
960 +color: red;
961 +padding: 10px;
962 +}
963 +/* Markdown end*/
964 +
965 +/*Drag and Drop Widget*/
966 +.pagelayer-add-widget-area {
967 +padding: 20px 15px !important;
968 +width: auto !important;
969 +max-width: 90% !important;
970 +text-align: center !important;
971 +border: 1px dashed #c2cbd2 !important;
972 +background-color: transparent !important;
973 +border-radius: 4px !important;
974 +margin: 30px auto !important;
975 +font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
976 +cursor: default !important;
977 +}
978 +
979 +.pagelayer-add-widget-area:hover {
980 +border-color: #a4afb7 !important;
981 +}
982 +
983 +.pagelayer-add-buttons-container {
984 +display: flex !important;
985 +justify-content: center !important;
986 +align-items: center !important;
987 +gap: 12px !important;
988 +margin-bottom: 12px !important;
989 +}
990 +
991 +.pagelayer-add-circle-btn {
992 +width: 36px !important;
993 +height: 36px !important;
994 +border-radius: 50% !important;
995 +border: none !important;
996 +display: inline-flex !important;
997 +align-items: center !important;
998 +justify-content: center !important;
999 +cursor: pointer !important;
1000 +outline: none !important;
1001 +padding: 0 !important;
1002 +color: #ffffff !important;
1003 +transition: background-color 0.2s ease, transform 0.2s ease !important;
1004 +box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
1005 +}
1006 +
1007 +.pagelayer-add-circle-btn:hover {
1008 +transform: scale(1.08) !important;
1009 +}
1010 +
1011 +.pagelayer-add-circle-btn i {
1012 +font-size: 14px !important;
1013 +}
1014 +
1015 +/* Specific colors from */
1016 +.pagelayer-add-circle-plus {
1017 +background-color: #495157 !important; /* Dark slate-grey */
1018 +}
1019 +
1020 +.pagelayer-add-circle-plus:hover {
1021 +background-color: #353a3d !important;
1022 +}
1023 +
1024 +.pagelayer-add-circle-folder {
1025 +background-color: #556068 !important; /* Slate-grey */
1026 +}
1027 +
1028 +.pagelayer-add-circle-folder:hover {
1029 +background-color: #3f464b !important;
1030 +}
1031 +
1032 +.pagelayer-add-circle-ai {
1033 +background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
1034 +color: #ffffff !important;
1035 +}
1036 +
1037 +.pagelayer-add-circle-ai:hover {
1038 +background: linear-gradient(135deg, #4f46e5 0%, #7c3aed) !important;
1039 +transform: scale(1.08) !important;
1040 +box-shadow: 0 4px 12px rgba(99, 102, 241, 0.45) !important;
1041 +}
1042 +
1043 +.pagelayer-add-widget-text {
1044 +margin: 0 !important;
1045 +color: #7e8b96 !important;
1046 +font-size: 13px !important;
1047 +font-style: italic !important;
1048 +font-family: inherit !important;
1049 +line-height: normal !important;
1050 +}
1051 +
1052 +.pagelayer-add-widget-drag {
1053 +border-color: #2563eb !important;
1054 +background: rgba(37, 99, 235, 0.05) !important;
1055 +}
1056 +