PluginProbe
Page Builder: Pagelayer – Drag and Drop website builder / trunk
Page Builder: Pagelayer – Drag and Drop website builder vtrunk
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 1.0.6 1.0.7 All 127 releases
pagelayer / css / customizer.css

customizer.css in Page Builder: Pagelayer – Drag and Drop website builder trunk, at css/customizer.css

668 lines 15.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .pagelayer-customize-control{
2 position: relative;
3 margin-top: 10px;
4 }
5
6 .pagelayer-customize-heading{
7 background-color: #fff;
8 padding: 10px;
9 margin: 5px -12px 0;
10 font-weight: 600;
11 font-style: normal;
12 }
13
14 .pagelayer-customize-heading .dashicons{
15 color: #a7aaad;
16 font-size: 16px;
17 position: absolute;
18 right: 5px;
19 top: 50%;
20 transform: translateY(-50%);
21 }
22
23 .pagelayer-customize-control .customize-control-title{
24 font-weight: 400;
25 }
26
27 .pagelayer-customize-control-title{
28 display:flex;
29 }
30
31 /* pagelayer padding controls*/
32 .pagelayer-control-padding{
33 display: flex;
34 align-items: center;
35 border: 1px solid #4444;
36 border-radius: 5px;
37 overflow: hidden;
38 }
39
40 .pagelayer-control-padding input.pagelayer-padding-input{
41 border-radius: 0;
42 border: 0;
43 flex: 1;
44 border-right: 1px solid #4444;
45 text-align: center;
46 }
47
48 .pagelayer-control-padding i.dashicons{
49 padding:5px;
50 font-size: 16px;
51 display: flex;
52 align-items: center;
53 cursor:pointer;
54 }
55
56 .pagelayer-padding-linked{
57 background-color: #137dc5;
58 color: #fff;
59 }
60 /* pagelayer padding controls end*/
61 /* pagelayer Typography controls*/
62 .pagelayer-control-typo-holder{
63 text-align: right;
64 }
65
66 .pagelayer-control-typo-holder .pagelayer-control-global-typo-icon,
67 .pagelayer-control-typo-holder .pagelayer-control-typo-icon{
68 background: #fff;
69 align-items: center;
70 margin-left: auto;
71 padding: 3px 6px;
72 border-radius: 4px;
73 border: 1px solid #999;
74 cursor:pointer;
75 font-size: 18px;
76 display: inline-flex;
77 justify-content: center;
78 }
79
80 .pagelayer-control-typo{
81 padding: 5px;
82 margin: 10px 0;
83 display: none;
84 background: #fff;
85 border-radius: 3px;
86 width: 250px;
87 position: relative;
88 text-align: left;
89 box-shadow: 0 0px 15px #b4b4b4
90 }
91
92 .pagelayer-control-typo .pagelayer-control-typo-fields{
93 padding: 10px 5px;
94 display: flex;
95 align-items: center;
96 }
97
98 .pagelayer-control-typo .pagelayer-control-typo-fields:not(:last-child){
99 border-bottom: 1px dashed #d1d1d1;
100 }
101
102 .pagelayer-control-typo .pagelayer-control-typo-fields > *{
103 flex: 1;
104 font-size: 13px;
105 }
106
107 .pagelayer-typo-global-default{
108 display:none;
109 width: 16px;
110 height: 16px;
111 font-size: 16px;
112 cursor: pointer;
113 }
114
115 .pagelayer-global-on .pagelayer-control-typo-fields:not([pagelayer-set-global]):hover .pagelayer-typo-global-default{
116 display: inline-block;
117 }
118
119 /* pagelayer Typography controls end*/
120 /* pagelayer device Start*/
121 .pagelayer-devices button{
122 border:none;
123 display:none;
124 cursor:pointer;
125 background: transparent;
126 }
127
128 .pagelayer-devices button.active-device{
129 display:inline-block;
130 color:#50575e;
131 }
132
133 [data-device-detector="desktop"] [data-show-device]:not([data-show-device="_desktop"]),
134 [data-device-detector="tablet"] [data-show-device]:not([data-show-device="_tablet"]),
135 [data-device-detector="mobile"] [data-show-device]:not([data-show-device="_mobile"]){
136 display:none;
137 }
138
139 .pagelayer-devices .dashicons{
140 font-size: 16px;
141 vertical-align: middle;
142 }
143
144 /* pagelayer device end*/
145 /* pagelayer units*/
146 .pagelayer-units{
147 flex:1;
148 text-align: right;
149 cursor:pointer;
150 }
151 .pagelayer-units [data-unit]:hover,
152 .pagelayer-units [data-unit].active{
153 color:#137dc5;
154 }
155 /* pagelayer units end*/
156 /* Alpha Color Picker CSS */
157 .wp-picker-input-wrap label {
158 margin-bottom: 0 !important;
159 }
160
161 .customize-control-pagelayer-alpha-color .wp-picker-container,
162 .pagelayer-control-typo-icons-holder{
163 position: absolute;
164 right:0;
165 top:0;
166 }
167
168 .customize-control-pagelayer-alpha-color .wp-picker-container .iris-picker {
169 border-bottom:none;
170 border:none;
171 }
172
173 .customize-control-pagelayer-alpha-color .wp-color-result{
174 background-clip: content-box !important;
175 padding: 1px !important;
176 border: 1px solid #999;
177 width: 35px !important;
178 height: 30px !important;
179 position:relative;
180 background: none;
181 border-radius: 5px;
182 }
183
184 .customize-control-pagelayer-alpha-color .pagelayer-control-global-color-icon{
185 position: absolute;
186 right: 38px;
187 top: 0;
188 background: #fff;
189 border-radius: 4px;
190 border: 1px solid #999;
191 cursor: pointer;
192 height: 30px;
193 display: inline-flex;
194 justify-content: center;
195 align-items: center;
196 font-size: 18px;
197 width: 35px;
198 }
199
200 .customize-control-pagelayer-alpha-color .wp-color-result:hover,
201 .customize-control-pagelayer-alpha-color .wp-color-result:focus{
202 background: none;
203 }
204
205 .customize-control-pagelayer-alpha-color .wp-color-result:before{
206 content: '';
207 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;
208 background-size: 140% !important;
209 opacity: 33%;
210 width: 29px;
211 height: 24px;
212 position: absolute;
213 left: 2px;
214 top: 2px;
215 z-index: -1;
216 border-radius: 5px;
217 }
218
219 .customize-control-pagelayer-alpha-color .wp-color-result-text{
220 display:none;
221 }
222
223 .customize-control-pagelayer-alpha-color .wp-picker-container{
224 width: 35px;
225 }
226
227 .customize-control-pagelayer-alpha-color .wp-picker-input-wrap {
228 display: flex;
229 align-items: center;
230 justify-content: center;
231 padding: 0 10px
232 }
233
234 .customize-control-pagelayer-alpha-color .wp-picker-open + .wp-picker-input-wrap {
235 width: 100%;
236 }
237
238 .customize-control-pagelayer-alpha-color .wp-picker-input-wrap input[type="text"].wp-color-picker.pagelayer-alpha-color-control{
239 width:100%;
240 }
241
242 .customize-control-pagelayer-alpha-color .wp-picker-input-wrap input[type="button"].wp-picker-default{
243 flex:auto;
244 height: 27px;
245 }
246
247 .customize-control-pagelayer-alpha-color .wp-picker-holder{
248 background: #fff;
249 padding-top:10px;
250 display: none;
251 border-radius: 5px;
252 z-index: 999;
253 -webkit-box-sizing: border-box;
254 box-sizing: border-box;
255 -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
256 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
257 position: relative;
258 right: 220px;
259 width: 100%;
260 }
261
262 .customize-control-pagelayer-alpha-color .wp-picker-container .wp-picker-open ~ .wp-picker-holder{
263 display: table;
264 }
265
266 .customize-control-pagelayer-alpha-color .alpha-color-picker-container {
267 padding: 0 11px 10px;
268 position: relative;
269 }
270
271 .customize-control-pagelayer-alpha-color .alpha-color-picker-container .ui-widget-content,
272 .customize-control-pagelayer-alpha-color .alpha-color-picker-container .ui-widget-header,
273 .customize-control-pagelayer-alpha-color .alpha-color-picker-wrap .ui-state-focus {
274 background: transparent;
275 border: none;
276 }
277
278 .customize-control-pagelayer-alpha-color .alpha-color-picker-wrap a.iris-square-value:focus {
279 -webkit-box-shadow: none;
280 box-shadow: none;
281 }
282
283 .customize-control-pagelayer-alpha-color .alpha-color-picker-container .ui-slider {
284 position: relative;
285 z-index: 1;
286 height: 24px;
287 text-align: center;
288 margin: 0 auto;
289 width: 88%;
290 width: calc( 100% - 28px );
291 }
292
293 .customize-control-pagelayer-alpha-color .alpha-color-picker-container .ui-slider-handle,
294 .customize-control-pagelayer-alpha-color .alpha-color-picker-container .ui-widget-content .ui-state-default {
295 color: #777;
296 background-color: #FFF;
297 text-shadow: 0 1px 0 #FFF;
298 text-decoration: none;
299 position: absolute;
300 z-index: 2;
301 box-shadow: 0 1px 2px rgba(0,0,0,0.2);
302 border: 1px solid #aaa;
303 -webkit-border-radius: 4px;
304 -moz-border-radius: 4px;
305 border-radius: 4px;
306 margin-top: -2px;
307 top: 0;
308 height: 26px;
309 width: 26px;
310 cursor: ew-resize;
311 font-size: 0;
312 padding: 0;
313 line-height: 27px;
314 margin-left: -14px;
315 }
316
317 .customize-control-pagelayer-alpha-color .alpha-color-picker-container .ui-slider-handle.show-opacity {
318 font-size: 12px;
319 }
320
321 .customize-control-pagelayer-alpha-color .alpha-color-picker-container .click-zone {
322 width: 14px;
323 height: 24px;
324 display: block;
325 position: absolute;
326 left: 10px;
327 }
328
329 .customize-control-pagelayer-alpha-color .alpha-color-picker-container .max-click-zone {
330 right: 10px;
331 left: auto;
332 }
333
334 .customize-control-pagelayer-alpha-color .alpha-color-picker-container .transparency {
335 height: 24px;
336 width: 100%;
337 background-color: #FFF;
338 background-image: url(../images/color-picker-transparency-grid.png);
339 box-shadow: 0 0 5px rgba(0,0,0,0.4) inset;
340 -webkit-border-radius: 3px;
341 -moz-border-radius: 3px;
342 border-radius: 3px;
343 padding: 0;
344 margin-top: -24px;
345 }
346
347 /* Alpha Color Picker CSS End */
348 /* Color Repeater CSS Start */
349 .pagelayer-font-holder{
350 list-style-type: none;
351 margin: 0;
352 padding: 0;
353 padding-bottom: 15px;
354 position: relative;
355 min-height: 30px;
356 }
357
358 .pagelayer-color-holder{
359 list-style-type: none;
360 margin: 0;
361 padding: 0;
362 padding-bottom: 15px;
363 position: relative;
364 min-height: 30px;
365 display: flex;
366 align-items: center;
367 }
368
369 .pagelayer-color-holder .pagelayer-color-controls,
370 .pagelayer-font-holder .pagelayer-font-controls,
371 .customize-control-font-repeater-delete,
372 .customize-control-color-repeater-delete{
373 margin-right: 45px;
374 font-size: 0.7rem;
375 flex: 1;
376 text-align: right;
377 color: #8f8f8f;
378 }
379
380 .customize-control-font-repeater-delete{
381 position: absolute;
382 right: 0;
383 top: 4px;
384 }
385
386 .pagelayer-color-holder:not(:hover) .customize-control-color-repeater-delete,
387 .pagelayer-color-holder:hover .pagelayer-color-controls:not(.pagelayer-prevent-delete){
388 display: none;
389 }
390
391 .customize-control-font-repeater-delete .dashicons:hover,
392 .customize-control-color-repeater-delete .dashicons:hover{
393 color: #f00;
394 }
395
396 .customize-control-font-repeater-delete,
397 .customize-control-color-repeater-delete{
398 text-decoration: none;
399 font-weight: 600;
400 cursor: pointer;
401 font-size: 1rem;
402 }
403
404 .customize-control-font-repeater-delete .dashicons:active,
405 .customize-control-font-repeater-delete .dashicons:focus,
406 .customize-control-color-repeater-delete .dashicons:active,
407 .customize-control-color-repeater-delete .dashicons:focus {
408 outline: none;
409 -webkit-box-shadow: none;
410 box-shadow: none;
411 }
412
413 .customize-control-font-repeater-add,
414 .customize-control-color-repeater-add{
415 display: block !important;
416 margin: auto !important;
417 }
418
419 .pagelayer-font-title,
420 .pagelayer-color-title{
421 padding: 5px;
422 }
423
424 .pagelayer-font-title{
425 float: left;
426 }
427
428 .pagelayer-global-selected,
429 .pagelayer-global-font-list-item:hover,
430 .pagelayer-global-color-list-item:hover{
431 background: #f9f9f9;
432 }
433
434 .pagelayer-global-selected:after{
435 content: "\f15e";
436 font-family: dashicons;
437 font-size: 20px;
438 color: #137dc5;
439 }
440
441 .pagelayer-global-font-list,
442 .pagelayer-global-color-list{
443 position: absolute;
444 background: #fff;
445 padding: 10px 0;
446 z-index: 9999;
447 border-radius: 4px;
448 right: 0;
449 top: 35px;
450 width: 250px;
451 display: none;
452 max-height: 350px;
453 overflow-y: auto;
454 }
455
456 .pagelayer-global-font-list{
457 text-align: left;
458 width: 200px;
459 box-shadow: 0px 1px 8px rgb(209 209 209);
460 }
461
462 .pagelayer-global-font-list-item,
463 .pagelayer-global-color-list-item{
464 display: flex;
465 padding: 10px 20px;
466 cursor: pointer;
467 }
468
469 .pagelayer-global-font-list-item .pagelayer-global-font-title,
470 .pagelayer-global-color-list-item .pagelayer-global-color-title{
471 flex: 1;
472 }
473
474 .pagelayer-global-color-list-item .pagelayer-global-color-pre{
475 position: relative;
476 border: 1px solid #f1f1f1;
477 margin-right: 7px;
478 padding: 1px;
479 background-clip: content-box;
480 }
481
482 .pagelayer-global-color-list-item .pagelayer-global-color-pre:before{
483 content: '';
484 padding: 0px 10px;
485 background-color: #ff000000;
486 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=);
487 -webkit-background-size: 12px 12px;
488 background-size: 6px 6px;
489 position: relative;
490 z-index: -1;
491 }
492
493 .pagelayer-active-global{
494 color: #137dc5;
495 }
496
497 .pagelayer-hidden{
498 display: none;
499 }
500
501 .pagelayer-global-setting-color{
502 position: relative;
503 box-shadow: 0 1px 2px #d2cfcf;
504 padding: 4px 4px 10px 4px;
505 margin-bottom: 5px;
506 }
507
508 .pagelayer-global-setting-font{
509 display: flex;
510 align-items: center;
511 margin: -5px -5px 5px;
512 padding: 5px 10px;
513 position: relative;
514 box-shadow: 0 1px 2px #d2cfcf;
515 }
516
517 .pagelayer-global-setting-color b{
518 margin-left: 11px;
519 }
520
521 .pagelayer-global-setting-color .dashicons{
522 right: 15px;
523 position: absolute;
524 cursor: pointer;
525 font-size: 14px;
526 }
527
528 .pagelayer-global-setting-font .dashicons{
529 right: 30px;
530 border: none;
531 font-size: 16px;
532 cursor: pointer;
533 }
534
535 .pagelayer-global-setting-font .dashicons-admin-generic{
536 right: 15px;
537 }
538
539 .pagelayer-control-typo-fields-label .dashicons-undo:hover,
540 .pagelayer-devices .dashicons:hover,
541 .pagelayer-global-setting-font .dashicons:hover,
542 .pagelayer-global-setting-color .dashicons:hover{
543 color: #137dc5;
544 }
545
546 #sub-accordion-section-pagelayer_global_colors_sec{
547 height: 100% !important;
548 }
549
550 .pagelayer-accordion-tab{
551 cursor: pointer;
552 }
553
554 /* pagelayer controls*/
555 .pagelayer-customize-inside-control-row{
556 display:flex;
557 }
558 input[type="radio"].pagelayer-customize-radio{
559 font-size: 14px;
560 flex: 1 !important;
561 width: 100% !important;
562 height: 2.6em !important;
563 -webkit-appearance: none !important;
564 -moz-appearance: none !important;
565 appearance: none !important;
566 border: 1px solid #fff!important;
567 border-radius: 2px !important;
568 margin:0 !important;
569 box-shadow: none !important;
570 }
571
572 input[type="radio"].pagelayer-customize-radio:before{
573 content: attr(data-label) !important;
574 background: #fff;
575 color: #000;
576 width: calc(100% - 4px);
577 height: calc(100% - 4px);
578 margin: 2px;
579 display: flex;
580 align-items: center;
581 justify-content: center;
582 border-radius: 2px;
583 font-weight: 600;
584 }
585
586 input[type="radio"].pagelayer-customize-radio:hover:before{
587 color: #137dc5;
588 }
589
590 input[type=checkbox].pagelayer-customize-checkbox:checked,
591 input[type="radio"].pagelayer-customize-radio:checked:before{
592 background-color: #137dc5;
593 border-color: #137dc5;
594 color: #fff ;
595 }
596
597 .pagelayer-customize-inside-control-row > label{
598 flex:1;
599 }
600
601 input[type=checkbox].pagelayer-customize-checkbox{
602 font-size: 14px !important;
603 -webkit-appearance: none;
604 -moz-appearance: none;
605 appearance: none;
606 width: 3.5em !important;
607 height: 1.7em;
608 background: #ddd;
609 border-radius: 3em;
610 position: relative;
611 cursor: pointer;
612 outline: none;
613 -webkit-transition: all .2s ease-in-out;
614 transition: all .2s ease-in-out;
615 margin:0;
616 }
617
618 input[type=checkbox].pagelayer-customize-checkbox:before{
619 position: absolute;
620 content: "" !important;
621 width: 1.5em !important;
622 height: 1.5em !important;
623 border-radius: 50% !important;
624 background: #fff;
625 -webkit-box-shadow: 0 0 0.25em rgb(0 0 0 / 30%);
626 box-shadow: 0 0 0.25em rgb(0 0 0 / 30%);
627 -webkit-transform: scale(.7);
628 transform: scale(.7);
629 left: 0;
630 -webkit-transition: all .2s ease-in-out;
631 transition: all .2s ease-in-out;
632 display: flex;
633 align-items: center;
634 justify-content: center;
635 }
636
637 input[type=checkbox].pagelayer-customize-checkbox:checked:before{
638 left: calc(100% - 1.5em);
639 margin: 0;
640 }
641 /* pagelayer controls end*/
642 /* pagelayer slider*/
643 .pagelayer-slider-custom-control .customize-control-title{
644 display:inline-block !important;
645 }
646
647 .pagelayer-slider-custom-control input[type=number]::-webkit-inner-spin-button,
648 .pagelayer-slider-custom-control input[type=number]::-webkit-outer-spin-button {
649 -webkit-appearance: none;
650 margin: 0;
651 }
652
653 .pagelayer-slider-custom-control input[type=number] {
654 -moz-appearance: textfield;
655 width: 50px !important;
656 float: right !important;
657 }
658
659 .pagelayer-slider-custom-control input[type=range]{
660 width: calc(100% - 60px) !important;
661 float: left !important;
662 margin: 7px 0 !important;
663 }
664
665 .pagelayer-slider-custom-control .pagelayer-units{
666 float: right;
667 }
668 /* pagelayer slider end*/