PluginProbe
Customify / 1.5.0
Customify v1.5.0
2.10.9 1.2.3 1.2.4 1.2.5 1.2.6 1.2.7 1.2.7.1 1.3.0 1.3.1 1.4.0 1.4.1 1.4.2 1.5.0 1.5.1 1.5.2 1.5.3 1.5.4 1.5.5 1.5.6 1.5.7 1.6.0 1.6.0.1 1.6.5 1.7.0 1.7.1 All 77 releases
customify / css / customizer.css

customizer.css in Customify 1.5.0, at css/customizer.css

1,672 lines 34.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .wp-full-overlay-sidebar *
2 {
3 box-sizing: border-box;
4 }
5
6 .accordion-section-content
7 {
8 overflow: visible;
9 }
10
11 .control-section:not(.control-section-themes) .customize-control
12 {
13 width: 100%;
14 min-height: initial;
15 padding: 0;
16 }
17
18 .customize-controls-close
19 {
20 width: 48px;
21 height: 44px;
22
23 color: #7da9c3;
24 border-top: none;
25 border-right-color: #e0e8ef;
26 background: #fff;
27 }
28 .customize-controls-close:focus,
29 .customize-controls-close:hover
30 {
31 background: #f5fcff;
32 }
33 .customize-controls-close:before
34 {
35 top: 0;
36 }
37
38 #customize-controls .customize-info
39 {
40 border-bottom-color: #e0e8ef;
41 }
42
43 .customize-panel-back,
44 .customize-section-back
45 {
46 height: 74px;
47
48 color: #7da9c3;
49 border-right-color: #e0e8ef;
50 }
51 .customize-panel-back:hover,
52 .customize-panel-back:focus,
53 .customize-section-back:hover,
54 .customize-section-back:focus
55 {
56 border-left-color: #f5fcff;
57 background: #f5fcff;
58 }
59
60 #customize-theme-controls .theme *
61 {
62 box-sizing: content-box;
63 }
64
65 #customize-theme-controls .accordion-section-content
66 {
67 padding: 17px;
68 }
69
70 #customize-theme-controls .customize-section-title
71 {
72 margin-top: -17px;
73 margin-right: -17px;
74 }
75
76 #customize-theme-controls .control-panel-content .control-section:nth-child(2),
77 #customize-theme-controls .control-panel-content .control-section:nth-child(3)
78 {
79 border-top: none;
80 }
81
82 #customize-theme-controls .control-panel-content .control-section:nth-last-child(2)
83 {
84 border-bottom: 1px solid #e0e8ef;
85 }
86
87 #customize-theme-controls #accordion-section-add_menu
88 {
89 overflow: visible;
90
91 text-align: right;
92 }
93 #customize-theme-controls #accordion-section-add_menu .add-menu-toggle
94 {
95 float: none;
96 }
97
98 #customize-theme-controls .customize-pane-child.open
99 {
100 height: 100%;
101 }
102
103 #customize-controls .description
104 {
105 font-size: 12px;
106 font-weight: 300;
107 font-style: normal;
108 line-height: 1.6;
109
110 margin-bottom: 9px;
111
112 text-indent: 0;
113
114 color: #4d7b90;
115 }
116
117 .customize-control-description
118 {
119 margin-top: 6px;
120 }
121
122 .customize-control
123 {
124 margin-bottom: 24px;
125 }
126
127 #accordion-section-themes + .control-section
128 {
129 border-top: none;
130 }
131
132 #customize-controls .panel-meta.customize-info .accordion-section-title
133 {
134 height: 74px;
135
136 border-top: none;
137 }
138
139 .wp-core-ui .button:not(.theme-details):not(.collapse-sidebar),
140 .wp-core-ui .button-primary,
141 .wp-core-ui .button-secondary
142 {
143 font-size: 13px;
144 font-weight: 400;
145 line-height: 1.4;
146
147 width: auto;
148 padding: 6px 20px;
149
150 transition: all .1s;
151
152 color: #f5fcff;
153 border: none;
154 border-radius: 4px;
155 background: #aed2e5;
156 box-shadow: 0 2px 0 0 #8dbed7;
157 text-shadow: none;
158 }
159 .wp-core-ui .button:not(.theme-details):not(.collapse-sidebar):hover,
160 .wp-core-ui .button-primary:hover,
161 .wp-core-ui .button-secondary:hover
162 {
163 color: white;
164 background: #98c6dd;
165 box-shadow: 0 2px 0 0 #74a7c2;
166 text-shadow: none;
167 }
168
169 .wp-core-ui .button-primary
170 {
171 background: #73c5ee;
172 box-shadow: 0 2px 0 0 #57abd5;
173 }
174 .wp-core-ui .button-primary:hover
175 {
176 background: #58b0dd;
177 box-shadow: 0 2px 0 0 #3f8aaf;
178 }
179
180 .wp-core-ui .reset_section,
181 .wp-core-ui .reset_panel
182 {
183 display: block;
184
185 width: 100%;
186 height: 4em;
187 margin: 0 0 25px;
188 }
189
190 .wp-core-ui .reset_panel
191 {
192 margin-top: 10px;
193 }
194
195 .separator.label
196 {
197 font-size: 14px;
198 font-weight: 600;
199 line-height: 24px;
200
201 display: block;
202 }
203
204 .customize-control-title,
205 .separator.label
206 {
207 color: #416b7e;
208 }
209
210 .separator.section:before,
211 .separator.sub-section:before
212 {
213 position: absolute;
214 z-index: -1;
215 top: 0;
216 right: -18px;
217 bottom: 0;
218 left: -18px;
219
220 content: '';
221 }
222
223 .separator.label
224 {
225 font-weight: 500;
226
227 margin-bottom: -3px;
228 margin-bottom: -15px;
229 }
230
231 .separator.large
232 {
233 font-size: 16px;
234
235 margin-top: 12px;
236
237 color: #39474d;
238 }
239
240 .separator.section
241 {
242 position: relative;
243
244 margin-bottom: 0;
245 padding: 14px 0;
246
247 border: none;
248 background: none;
249 }
250 .separator.section[id*='layout']
251 {
252 margin-top: 0;
253 }
254 .separator.section[id*='layout']:before
255 {
256 border: none;
257 }
258 .separator.section:before
259 {
260 border: 1px solid #e0e8ef;
261 background-color: #fff;
262 box-shadow: 0 1px 0 0 #dfe8ef;
263 }
264
265 .separator.sub-section
266 {
267 position: relative;
268
269 padding: 12px 0;
270 }
271 .separator.sub-section:before
272 {
273 border-top: 1px solid #e0e8ef;
274 border-bottom: 1px solid #e0e8ef;
275 background-color: #f6fbff;
276 }
277 .separator.sub-section + span
278 {
279 font-style: normal;
280
281 margin-top: 20px;
282 }
283
284 .section-navigation-wrapper
285 {
286 position: relative;
287
288 height: 43px;
289 margin: -15px -12px 0 -12px;
290 margin-right: -17px;
291 margin-left: -17px;
292 }
293
294 .section-navigation
295 {
296 display: -ms-flexbox;
297 display: flex;
298 clear: both;
299
300 margin-top: -1px;
301
302 border-top: 1px solid #e0e8ef;
303 }
304 .section-navigation a
305 {
306 display: block;
307
308 padding: 12px 0;
309
310 transition: background-color .15s ease-in-out;
311 text-align: center;
312 text-decoration: none;
313
314 color: #3b484e;
315 border-right: 1px solid #e0e8ef;
316 border-bottom: 1px solid #e0e8ef;
317 background-color: #fff;
318
319 -ms-flex: 1 1 auto;
320 flex: 1 1 auto;
321 }
322 .section-navigation a:last-child
323 {
324 border-right: 0;
325 }
326
327 #customize-controls .customize-info.is-sticky.is-sticky,
328 #customize-controls .customize-section-title.is-sticky.is-sticky
329 {
330 top: 40px;
331 }
332
333 #customize-controls .customize-info.is-in-view.is-in-view,
334 #customize-controls .customize-section-title.is-in-view.is-in-view
335 {
336 box-shadow: none;
337 }
338
339 #customize-controls .has-nav .customize-info,
340 #customize-controls .has-nav .customize-section-title
341 {
342 margin-right: -12px;
343 }
344
345 #customize-controls .customize-section-title.customize-section-title
346 {
347 border-bottom: 0;
348 }
349
350 .customize-section-description-container.section-meta.has-nav
351 {
352 margin-bottom: 0;
353 }
354
355 .font-options__wrapper
356 {
357 position: relative;
358 }
359 .font-options__wrapper:after
360 {
361 position: absolute;
362 z-index: 0;
363 top: 90%;
364 right: 0;
365 left: 0;
366
367 display: block;
368
369 height: 100px;
370
371 content: '';
372 }
373
374 .font-options__head
375 {
376 display: -ms-flexbox;
377 display: flex;
378
379 -ms-flex-pack: justify;
380 justify-content: space-between;
381 }
382 .font-options__head.font-options__head
383 {
384 white-space: nowrap;
385 text-overflow: ellipsis;
386
387 -webkit-appearance: none;
388 }
389
390 .font-options__font-title
391 {
392 font-size: 12px;
393 font-weight: 300;
394 line-height: 20px;
395
396 overflow: hidden;
397
398 margin-right: 26px;
399 margin-left: 10px;
400
401 white-space: nowrap;
402 text-overflow: ellipsis;
403
404 color: #98c6dd;
405 }
406
407 .font-options__options-list
408 {
409 position: absolute;
410 z-index: 2;
411 top: calc(100% + 6px);
412 right: -6px;
413 left: -6px;
414
415 display: block;
416 display: none;
417
418 padding: 10px;
419
420 transition: opacity .15s linear;
421
422 opacity: 0;
423 border: 1px solid #dfe8ef;
424 border-radius: 5px;
425 background-color: #fff;
426 }
427 .font-options__options-list:last-child
428 {
429 margin-bottom: 0;
430 }
431 .font-options__options-list:before,
432 .font-options__options-list:after
433 {
434 position: absolute;
435 z-index: 10;
436 top: -20px;
437 right: 25px;
438
439 width: 0;
440 height: 0;
441
442 content: '';
443
444 border: solid transparent;
445 }
446 .font-options__options-list:before
447 {
448 z-index: 11;
449
450 border-width: 10px;
451 border-bottom-color: white;
452 }
453 .font-options__options-list:after
454 {
455 top: -24px;
456 right: 23px;
457
458 border-width: 12px;
459 border-bottom-color: rgba(0, 0, 0, .075);
460 }
461
462 .customize-control-color .wp-picker-container .wp-picker-open + .wp-picker-input-wrap:after
463 {
464 position: absolute;
465 right: 12px;
466 bottom: 100%;
467
468 width: 0;
469 height: 0;
470
471 border-collapse: separate;
472
473 content: '';
474
475 border-width: 0 9px 9px 9px;
476 border-style: solid;
477 border-color: transparent transparent #fff transparent;
478 }
479
480 .font-options__head,
481 .customize-control input[type=text],
482 .customize-control input[type=checkbox],
483 .customize-control input[type=password],
484 .customize-control input[type=color],
485 .customize-control input[type=date],
486 .customize-control input[type=datetime],
487 .customize-control input[type=datetime-local],
488 .customize-control input[type=email],
489 .customize-control input[type=month],
490 .customize-control input[type=number],
491 .customize-control input[type=radio],
492 .customize-control input[type=tel],
493 .customize-control input[type=time],
494 .customize-control input[type=url],
495 .customize-control input[type=week],
496 .customize-control input[type=search],
497 .customize-control select,
498 .customize-control textarea,
499 .customize-control input[type='number'].range-value,
500 ul.font-options__options-list .select2-container .select2-selection--single
501 {
502 font-size: 14px;
503 line-height: 1.5;
504
505 width: 100%;
506 height: 44px;
507 padding: 10px 14px;
508
509 color: #416b7e;
510 border: 2px solid #b8daeb;
511 border-radius: 4px;
512 outline: 0;
513 background: #fff;
514 }
515 .font-options__head:focus,
516 .customize-control input[type=text]:focus,
517 .customize-control input[type=checkbox]:focus,
518 .customize-control input[type=password]:focus,
519 .customize-control input[type=color]:focus,
520 .customize-control input[type=date]:focus,
521 .customize-control input[type=datetime]:focus,
522 .customize-control input[type=datetime-local]:focus,
523 .customize-control input[type=email]:focus,
524 .customize-control input[type=month]:focus,
525 .customize-control input[type=number]:focus,
526 .customize-control input[type=radio]:focus,
527 .customize-control input[type=tel]:focus,
528 .customize-control input[type=time]:focus,
529 .customize-control input[type=url]:focus,
530 .customize-control input[type=week]:focus,
531 .customize-control input[type=search]:focus,
532 .customize-control select:focus,
533 .customize-control textarea:focus,
534 .customize-control input[type='number'].range-value:focus,
535 ul.font-options__options-list .select2-container .select2-selection--single:focus
536 {
537 border-color: #73c5ee;
538 box-shadow: none;
539 }
540
541 .font-options__head,
542 .customize-control select,
543 ul.font-options__options-list .select2-container .select2-selection--single
544 {
545 font-weight: 600;
546
547 width: 100%;
548
549 background: white url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE1cHgiIGhlaWdodD0iOXB4IiB2aWV3Qm94PSIwIDAgMTUgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJDdXN0b21pZnktQ29weS0yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjU2LjAwMDAwMCwgLTM4Ni4wMDAwMDApIiBmaWxsPSIjOThDNkRFIj4KICAgICAgICAgICAgPGcgaWQ9IkhlYWRlciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxLjAwMDAwMCwgNDcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ29udGVudCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCA3NS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iVGl0bGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI2LjAwMDAwMCwgMjE5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iRmllbGQtLS1TZWxlY3QtQ29weSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iU2VsZWN0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMjcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTI1NC40ODEyLDE4IEwyNTYsMTkuNTE0IEwyNDguNSwyNyBMMjQxLDE5LjUxNCBMMjQyLjUxODgsMTggTDI0OC41LDIzLjk2NzIgTDI1NC40ODEyLDE4IFoiIGlkPSJQYWdlLTEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat;
550 background-position: right 16px top 16px;
551
552 -webkit-appearance: button;
553 -moz-appearance: none;
554 }
555 [multiple].font-options__head,
556 .customize-control select[multiple],
557 ul.font-options__options-list .select2-container [multiple].select2-selection--single
558 {
559 background: white;
560 }
561
562 .customize-control input[type=text],
563 .customize-control textarea
564 {
565 font-size: 13px;
566 }
567
568 .customize-control textarea
569 {
570 height: auto;
571 }
572
573 .customize-control input[type=checkbox],
574 .customize-control input[type=radio]
575 {
576 width: 22px;
577 height: 22px;
578 }
579 .customize-control input[type=checkbox]:checked,
580 .customize-control input[type=radio]:checked
581 {
582 border-color: #5ab9e8;
583 background: #73c5ee;
584 }
585 .customize-control input[type=checkbox]:checked:before,
586 .customize-control input[type=radio]:checked:before
587 {
588 margin: -1px 0 0 -2px;
589
590 color: white;
591 }
592
593 .customize-control.customize-control-checkbox label:not(:only-of-type),
594 .customize-control.customize-control-radio label:not(:only-of-type)
595 {
596 display: inline-block;
597
598 width: calc(49% - 30px);
599 margin-left: 30px;
600 padding-top: 0;
601 padding-bottom: 0;
602
603 text-indent: -6px;
604 }
605
606 .customize-control.customize-control-checkbox label,
607 .customize-control.customize-control-radio label
608 {
609 color: #416b7e;
610 }
611
612 .customize-control-html + .customize-control.customize-control-checkbox,
613 .customize-control-html + .customize-control.customize-control-radio
614 {
615 margin-top: -24px;
616 }
617
618 [id*='divider'] + .customize-control.customize-control-checkbox,
619 [id*='divider'] + .customize-control.customize-control-radio
620 {
621 margin-top: 0;
622 }
623
624 .customize-control input[type=radio]
625 {
626 border-radius: 50%;
627 }
628 .customize-control input[type=radio]:checked:before
629 {
630 content: none;
631 }
632
633 .customize-control.customize-control-radio label
634 {
635 margin-top: 12px;
636 }
637
638 .customize-control input[type='range']
639 {
640 width: 65%;
641 }
642
643 .customize-control input[type='range']
644 {
645 position: relative;
646
647 overflow: hidden;
648
649 width: 200px;
650 height: 22px;
651
652 outline: none;
653 background: none;
654
655 -webkit-appearance: none;
656 }
657 .customize-control input[type='range']:before
658 {
659 position: absolute;
660 top: 8px;
661 left: 0;
662
663 width: 100%;
664 height: 6px;
665
666 content: ' ';
667
668 border-radius: 10px;
669 background: #dfe8ef;
670 box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, .3);
671 }
672 .customize-control input[type='range']::-webkit-slider-thumb
673 {
674 position: relative;
675 z-index: 3;
676
677 width: 22px;
678 height: 22px;
679
680 border: 2px solid #b8daeb;
681 border-radius: 4px;
682 background: #27ae60;
683 background: #fff;
684
685 -webkit-appearance: none;
686 }
687 .customize-control input[type='range']::-webkit-slider-thumb:before
688 {
689 font-size: 1em;
690
691 position: absolute;
692 top: -5px;
693 left: 5px;
694
695 content: '..';
696 letter-spacing: 1px;
697
698 color: #b8daeb;
699 }
700 .customize-control input[type='range']::-webkit-slider-thumb:after
701 {
702 position: absolute;
703 z-index: 1;
704 top: 6px;
705 right: 20px;
706
707 width: 200px;
708 height: 6px;
709
710 content: ' ';
711
712 background: #73c5ee;
713 }
714
715 .customize-control input[type='number'].range-value
716 {
717 font-size: 13px;
718 line-height: 1;
719
720 top: -5px;
721
722 float: right;
723
724 width: auto;
725 min-width: 40px;
726 max-width: 80px;
727 height: 30px;
728 margin-left: 10px;
729 padding: 4px 0 5px 0;
730
731 text-align: center;
732 }
733
734 .customize-control input[type=number]::-webkit-inner-spin-button,
735 .customize-control input[type=number]::-webkit-outer-spin-button
736 {
737 margin: 0;
738
739 -webkit-appearance: none;
740 }
741
742 .customize-control-color
743 {
744 display: block;
745 }
746 .customize-control-color .customize-control-title,
747 .customize-control-color .separator.label
748 {
749 float: left;
750 }
751 .customize-control-color .wp-picker-container
752 {
753 position: relative;
754 top: -3px;
755
756 float: right;
757 }
758 .customize-control-color .wp-picker-container .wp-picker-holder
759 {
760 position: relative;
761 }
762 .customize-control-color .wp-picker-container .iris-picker
763 {
764 position: absolute;
765 z-index: 1000;
766 top: 40px;
767 right: 0;
768
769 width: 275px !important;
770
771 border: none;
772 border-color: #dfdfde;
773 border-top: none;
774 border-radius: 0 0 3px 3px;
775 background: white;
776 }
777 .customize-control-color .wp-picker-container .iris-picker .iris-square
778 {
779 width: 215px !important;
780 height: 173px !important;
781 margin-right: 0;
782 }
783 .customize-control-color .wp-picker-container .iris-picker .iris-strip
784 {
785 float: right;
786
787 box-shadow: rgba(0, 0, 0, .4) 0 1px 1px inset;
788 }
789 .customize-control-color .wp-picker-container .iris-picker .iris-strip .ui-slider-handle
790 {
791 opacity: 1;
792 border-color: #aaa !important;
793 box-shadow: none;
794 }
795 .customize-control-color .wp-picker-container .iris-picker .iris-palette
796 {
797 width: 24px !important;
798 height: 24px !important;
799
800 border-radius: 50px;
801 box-shadow: rgba(0, 0, 0, .4) 0 1px 1px inset;
802 }
803 .customize-control-color .wp-picker-container .wp-picker-open + .wp-picker-input-wrap
804 {
805 position: absolute;
806 z-index: 1000;
807 top: 35px;
808 right: 0;
809
810 width: 275px;
811 padding: 9px 12px;
812
813 border: none;
814 border-radius: 3px 3px 0 0;
815 background: white;
816 }
817 .customize-control-color .wp-picker-container .wp-picker-open + .wp-picker-input-wrap input.wp-color-picker
818 {
819 font-size: 13px;
820
821 float: left;
822
823 width: 100px;
824 height: auto;
825 margin: 0;
826 padding: 6px 12px;
827
828 text-align: left;
829 }
830 .customize-control-color .wp-picker-container .wp-picker-open + .wp-picker-input-wrap input.button
831 {
832 float: right;
833
834 height: 30px;
835 padding: 4px 12px;
836 }
837 .customize-control-color .wp-color-result
838 {
839 top: 0;
840
841 width: 40px;
842 height: 30px;
843 margin: 0;
844 padding: 0;
845
846 border: 2px solid #b8daeb;
847 border-radius: 4px;
848 background: #2ecc71;
849 box-shadow: none;
850 }
851 .customize-control-color .wp-color-result:after
852 {
853 display: none;
854 }
855
856 #accordion-section-live_css_edit_section .customize-section-title
857 {
858 margin-top: -13px;
859
860 border-bottom: 1px solid #ddd;
861 }
862
863 #accordion-section-live_css_edit_section #css_editor
864 {
865 top: 70px;
866
867 overflow: visible;
868
869 border-top: 10px solid white;
870 }
871 #accordion-section-live_css_edit_section #css_editor:before
872 {
873 position: absolute;
874 z-index: 10000000;
875 top: -10px;
876 left: 0;
877
878 display: block;
879
880 width: 48px;
881 height: 10px;
882
883 content: '';
884
885 background: #e8e8e8;
886 }
887
888 #accordion-section-live_css_edit_section .ace_scroller
889 {
890 padding-left: 10px;
891 }
892
893 .wp-full-overlay.editor_opened
894 {
895 margin-left: 500px;
896 }
897 .wp-full-overlay.editor_opened #customize-controls
898 {
899 width: 500px;
900 }
901 .wp-full-overlay.editor_opened.collapsed #customize-controls
902 {
903 width: 300px;
904 }
905
906 .customize-control-media .current,
907 .customize-control-site_icon .current,
908 li#customize-control-site_logo .current
909 {
910 min-height: 44px;
911 margin-bottom: 10px;
912
913 border: 2px solid #b8daeb;
914 border-radius: 4px;
915 background: #f5fcff;
916 }
917 .customize-control-media .current .container,
918 .customize-control-media .current span,
919 .customize-control-site_icon .current .container,
920 .customize-control-site_icon .current span,
921 li#customize-control-site_logo .current .container,
922 li#customize-control-site_logo .current span
923 {
924 border: none;
925 }
926
927 .customize-control-media .inner,
928 .customize-control-media .current span,
929 .customize-control-site_icon .inner,
930 .customize-control-site_icon .current span,
931 li#customize-control-site_logo .inner,
932 li#customize-control-site_logo .current span
933 {
934 font-size: 13px;
935
936 color: #98c6dd;
937 }
938
939 .customize-control-media .inner,
940 .customize-control-site_icon .inner,
941 li#customize-control-site_logo .inner
942 {
943 line-height: 1.4;
944 }
945
946 .customize-control-media .thumbnail-image,
947 .customize-control-site_icon .thumbnail-image,
948 li#customize-control-site_logo .thumbnail-image
949 {
950 padding: 14px;
951
952 text-align: center;
953 }
954 .customize-control-media .thumbnail-image img,
955 .customize-control-site_icon .thumbnail-image img,
956 li#customize-control-site_logo .thumbnail-image img
957 {
958 width: auto;
959 }
960
961 .customize-control-media .actions,
962 .customize-control-site_icon .actions,
963 li#customize-control-site_logo .actions
964 {
965 margin-bottom: 0;
966 }
967
968 .customize-control-typography select,
969 .customize-control-typography select
970 {
971 margin-bottom: 10px;
972 }
973
974 .customize-control-typography .description,
975 .customize-control-typography .description
976 {
977 margin-top: -3px;
978 }
979
980 .customize-control-typography ul li,
981 .customize-control-typography ul li
982 {
983 width: 100%;
984 margin: 0;
985 }
986
987 .default-preset-button
988 {
989 font-family: 'Open Sans',sans-serif;
990 font-size: 13px;
991
992 float: right;
993
994 margin-right: 4px;
995 padding: 1px 8px;
996
997 border: 1px solid #cbcbcb;
998 border-radius: 3px;
999 background-color: #f5f6f6;
1000 }
1001
1002 .customize-control-preset .description
1003 {
1004 font-style: normal;
1005
1006 margin-right: 5px;
1007 }
1008
1009 .customify_preset.radio_buttons .customify_radio_button
1010 {
1011 position: relative;
1012
1013 display: inline-block;
1014 overflow: hidden;
1015
1016 height: auto;
1017 margin: 3px;
1018 padding: 2px;
1019
1020 border: none;
1021 }
1022 .customify_preset.radio_buttons .customify_radio_button input[type='radio']
1023 {
1024 position: absolute;
1025 z-index: 9999;
1026
1027 width: 100%;
1028 height: 100%;
1029
1030 opacity: 0;
1031 }
1032 .customify_preset.radio_buttons .customify_radio_button input[type='radio']:checked + label
1033 {
1034 background-color: #ebebeb;
1035 }
1036 .customify_preset.radio_buttons .customify_radio_button input[type='radio']:checked + label:before
1037 {
1038 content: '>';
1039
1040 color: inherit;
1041 }
1042 .customify_preset.radio_buttons .customify_radio_button input[type='radio']:checked + label:after
1043 {
1044 content: '<';
1045
1046 color: inherit;
1047 }
1048 .customify_preset.radio_buttons .customify_radio_button input[type='radio']:checked:before
1049 {
1050 opacity: 0;
1051 }
1052 .customify_preset.radio_buttons .customify_radio_button label
1053 {
1054 position: relative;
1055 z-index: 999;
1056
1057 border-left: 4px solid;
1058 }
1059
1060 .customify_preset .awesome_preset
1061 {
1062 position: relative;
1063
1064 display: inline-block;
1065
1066 width: 45%;
1067 margin-top: 5px;
1068 margin-bottom: 25px;
1069
1070 transition: all .2s;
1071 text-align: center;
1072
1073 color: white;
1074 }
1075 .customify_preset .awesome_preset:hover
1076 {
1077 opacity: .9;
1078 }
1079 .customify_preset .awesome_preset:before
1080 {
1081 position: absolute;
1082 z-index: 5;
1083 top: 1px;
1084 right: 1px;
1085 bottom: 1px;
1086 left: 1px;
1087
1088 content: '';
1089
1090 opacity: .5;
1091 border: 1px solid #fff;
1092 border-radius: 4px;
1093 background: transparent;
1094 }
1095 .customify_preset .awesome_preset .preset-wrap .preset-color
1096 {
1097 height: 128px;
1098 padding: 17px 0 27px;
1099
1100 border-radius: 4px 4px 0 0;
1101 }
1102 .customify_preset .awesome_preset .preset-wrap .preset-color .first-font
1103 {
1104 font-size: 55px;
1105 line-height: 1;
1106
1107 display: inline-block;
1108
1109 width: 100%;
1110 }
1111 .customify_preset .awesome_preset .preset-wrap .preset-color .secondary-font
1112 {
1113 font-size: 20px;
1114 line-height: 1;
1115
1116 display: inline-block;
1117
1118 width: 100%;
1119 margin-top: 8px;
1120 }
1121 .customify_preset .awesome_preset .preset-wrap .preset-name
1122 {
1123 font-size: 11px;
1124
1125 position: relative;
1126
1127 padding: 1px;
1128
1129 text-transform: UPPERCASE;
1130
1131 border-radius: 0 0 4px 4px;
1132 }
1133 .customify_preset .awesome_preset .preset-wrap .preset-name:before
1134 {
1135 position: absolute;
1136 top: -10px;
1137 left: 40%;
1138
1139 content: '';
1140
1141 border: 10px solid;
1142 border-color: inherit;
1143 border-top: transparent;
1144 border-right-color: transparent;
1145 border-bottom-color: inherit;
1146 border-left-color: transparent;
1147 }
1148 .customify_preset .awesome_preset:nth-child(odd)
1149 {
1150 margin-right: 7%;
1151 }
1152 .customify_preset .awesome_preset input[type=radio]
1153 {
1154 position: absolute;
1155 z-index: 10;
1156 top: 0;
1157 left: 0;
1158
1159 display: inline-block;
1160
1161 width: 100%;
1162 height: 100%;
1163 margin: 0;
1164
1165 color: #006505;
1166 border: 0;
1167 border-radius: 0;
1168 background-color: transparent;
1169 box-shadow: none;
1170 }
1171 .customify_preset .awesome_preset input[type=radio]:checked:before
1172 {
1173 position: absolute;
1174 z-index: 1;
1175 top: -13px;
1176 right: -14px;
1177
1178 width: 25px;
1179 height: 25px;
1180
1181 background: #fff;
1182 }
1183 .customify_preset .awesome_preset input[type=radio]:checked:after
1184 {
1185 position: absolute;
1186 z-index: 10;
1187 top: -5px;
1188 right: -5px;
1189
1190 width: 26px;
1191 height: 26px;
1192
1193 content: '';
1194
1195 border-radius: 50%;
1196 background: #73c5ee url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEzcHgiIGhlaWdodD0iOXB4IiB2aWV3Qm94PSIwIDAgMTMgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJDdXN0b21pZnktQ29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxLjAwMDAwMCwgLTQwOC4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPGcgaWQ9IkhlYWRlciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxLjAwMDAwMCwgNDcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ29udGVudCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCA3NS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iRmllbGQtLS1DaGVja2JveC1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNy4wMDAwMDAsIDI0OS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IkNoZWNrYm94IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMzAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTAuMDM4NDk1LDE2IEwxNy4xMTYxMzc1LDguOTIxNDg3NiBMMTUuMTk0NjQ5OCw3IEwxMC4wMzg0OTUsMTIuMTU1MDY3NCBMNi45MjE0ODc2LDkuMDM4OTI5OTcgTDUsMTAuOTYwNDE3NiBMMTAuMDM4NDk1LDE2IFoiIGlkPSJQYWdlLTEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat;
1197 background-position: center center;
1198
1199 -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
1200 filter: alpha(opacity=0);
1201 }
1202
1203 .customify_radio_image
1204 {
1205 display: inline-block;
1206 }
1207 .customify_radio_image label
1208 {
1209 position: relative;
1210
1211 display: block;
1212 float: left;
1213
1214 margin-right: 10px;
1215 }
1216 .customify_radio_image label input[type=radio]
1217 {
1218 position: absolute;
1219 top: 0;
1220 right: 0;
1221 bottom: 0;
1222 left: 0;
1223
1224 visibility: hidden;
1225
1226 width: 100%;
1227 height: 100%;
1228 }
1229 .customify_radio_image label input[type=radio] img
1230 {
1231 cursor: pointer;
1232
1233 border: 2px solid transparent;
1234 }
1235 .customify_radio_image label input[type=radio]:checked + img
1236 {
1237 border: 3px solid #73c5ee;
1238 }
1239
1240 .customify_ace_editor
1241 {
1242 display: block;
1243
1244 min-height: 200px;
1245
1246 border: 1px solid #ddd;
1247 }
1248
1249 .customize-control-custom_background .hide
1250 {
1251 display: none;
1252 }
1253
1254 .customize-control-custom_background .upload_button_div
1255 {
1256 margin: 10px 0;
1257 }
1258 .customize-control-custom_background .upload_button_div > *
1259 {
1260 margin-right: 10px;
1261 }
1262
1263 .customize-control-custom_background .preview_screenshot
1264 {
1265 margin: 10px 0;
1266
1267 text-align: center;
1268 }
1269 .customize-control-custom_background .preview_screenshot img
1270 {
1271 border: 2px solid #ccc;
1272 }
1273
1274 #customify_import_demo_data_button
1275 {
1276 display: inline-block;
1277
1278 width: 70%;
1279 height: auto;
1280 margin: 0 15% 10% 15%;
1281 padding: 10px;
1282
1283 text-align: center;
1284 }
1285
1286 .import_step_note
1287 {
1288 display: inline-block;
1289
1290 width: 100%;
1291 margin: 5px;
1292 }
1293 .import_step_note:before
1294 {
1295 content: '\1F449';
1296 }
1297 .import_step_note.success:before
1298 {
1299 content: '\1F44D';
1300 }
1301 .import_step_note.failed:before
1302 {
1303 content: '\274C';
1304 }
1305
1306 #customize-header-actions
1307 {
1308 border-color: #e0e8ef;
1309 background: #fff;
1310 }
1311
1312 .wp-full-overlay-sidebar,
1313 .customize-themes-panel
1314 {
1315 border-right: 1px solid #e0e8ef;
1316 background: #eaf9fe;
1317 }
1318
1319 #customize-theme-controls #accordion-section-menu_locations
1320 {
1321 border-bottom: 1px solid #e0e8ef;
1322 }
1323
1324 #customize-controls #accordion-section-themes > .accordion-section-title
1325 {
1326 font-weight: 600;
1327
1328 border-bottom: 1px solid #e0e8ef;
1329 }
1330 #customize-controls #accordion-section-themes > .accordion-section-title:hover
1331 {
1332 background: #fff;
1333 }
1334
1335 #customize-controls .panel-meta.customize-info
1336 {
1337 border-bottom-color: #e0e8ef;
1338 }
1339
1340 #customize-theme-controls .control-section .accordion-section-title
1341 {
1342 font-weight: 400;
1343
1344 border-top: 1px solid #e0e8ef;
1345 border-bottom: none;
1346 }
1347
1348 #customize-theme-controls .control-section:last-of-type > .accordion-section-title
1349 {
1350 border-bottom: 1px solid #e0e8ef;
1351 }
1352
1353 #customize-theme-controls .customize-section-title
1354 {
1355 border-top: 1px solid #e0e8ef;
1356 border-bottom: 1px solid #e0e8ef;
1357 }
1358
1359 #customize-controls .control-section .accordion-section-title:focus,
1360 #customize-controls .control-section .accordion-section-title:hover,
1361 #customize-controls .control-section.open .accordion-section-title,
1362 #customize-controls .control-section:hover > .accordion-section-title
1363 {
1364 color: #056184;
1365 border-left-color: #f5fcff;
1366 background: #f5fcff;
1367 }
1368
1369 [data-balloon]
1370 {
1371 position: relative;
1372 }
1373
1374 [data-balloon]::before
1375 {
1376 font-size: 12px;
1377
1378 position: absolute;
1379 z-index: 10;
1380
1381 padding: .5em 1em;
1382
1383 content: attr(data-balloon);
1384 transition: all .18s ease-out;
1385 white-space: nowrap;
1386 pointer-events: none;
1387
1388 opacity: 0;
1389 color: #fff;
1390 border-radius: 4px;
1391 background: rgba(17, 17, 17, .9);
1392 }
1393
1394 [data-balloon]::after
1395 {
1396 position: absolute;
1397 z-index: 10;
1398
1399 width: 18px;
1400 height: 6px;
1401
1402 content: '';
1403 transition: all .18s ease-out;
1404 pointer-events: none;
1405
1406 opacity: 0;
1407 background: no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36px" height="12px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(0)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>');
1408 background-size: 100% auto;
1409 }
1410
1411 [data-balloon]:hover::before,
1412 [data-balloon]:hover::after
1413 {
1414 pointer-events: auto;
1415
1416 opacity: 1;
1417 }
1418
1419 [data-balloon][data-balloon-pos='up']::before
1420 {
1421 bottom: 100%;
1422 left: 50%;
1423
1424 margin-bottom: 11px;
1425
1426 -webkit-transform: translate3d(-50%, 10px, 0);
1427 transform: translate3d(-50%, 10px, 0);
1428 -webkit-transform-origin: top;
1429 transform-origin: top;
1430 }
1431
1432 [data-balloon][data-balloon-pos='up']::after
1433 {
1434 bottom: 100%;
1435 left: 50%;
1436
1437 margin-bottom: 5px;
1438
1439 -webkit-transform: translate3d(-50%, 10px, 0);
1440 transform: translate3d(-50%, 10px, 0);
1441 -webkit-transform-origin: top;
1442 transform-origin: top;
1443 }
1444
1445 [data-balloon][data-balloon-pos='up']:hover::before
1446 {
1447 -webkit-transform: translate3d(-50%, 0, 0);
1448 transform: translate3d(-50%, 0, 0);
1449 }
1450
1451 [data-balloon][data-balloon-pos='up']:hover::after
1452 {
1453 -webkit-transform: translate3d(-50%, 0, 0);
1454 transform: translate3d(-50%, 0, 0);
1455 }
1456
1457 [data-balloon][data-balloon-pos='down']::before
1458 {
1459 top: 100%;
1460 left: 50%;
1461
1462 margin-top: 11px;
1463
1464 -webkit-transform: translate3d(-50%, -10px, 0);
1465 transform: translate3d(-50%, -10px, 0);
1466 }
1467
1468 [data-balloon][data-balloon-pos='down']::after
1469 {
1470 top: 100%;
1471 left: 50%;
1472
1473 width: 18px;
1474 height: 6px;
1475 margin-top: 5px;
1476
1477 -webkit-transform: translate3d(-50%, -10px, 0);
1478 transform: translate3d(-50%, -10px, 0);
1479
1480 background: no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36px" height="12px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(180 18 6)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>');
1481 background-size: 100% auto;
1482 }
1483
1484 [data-balloon][data-balloon-pos='down']:hover::before
1485 {
1486 -webkit-transform: translate3d(-50%, 0, 0);
1487 transform: translate3d(-50%, 0, 0);
1488 }
1489
1490 [data-balloon][data-balloon-pos='down']:hover::after
1491 {
1492 -webkit-transform: translate3d(-50%, 0, 0);
1493 transform: translate3d(-50%, 0, 0);
1494 }
1495
1496 [data-balloon][data-balloon-pos='left']::before
1497 {
1498 top: 50%;
1499 right: 100%;
1500
1501 margin-right: 11px;
1502
1503 -webkit-transform: translate3d(10px, -50%, 0);
1504 transform: translate3d(10px, -50%, 0);
1505 }
1506
1507 [data-balloon][data-balloon-pos='left']::after
1508 {
1509 top: 50%;
1510 right: 100%;
1511
1512 width: 6px;
1513 height: 18px;
1514 margin-right: 5px;
1515
1516 -webkit-transform: translate3d(10px, -50%, 0);
1517 transform: translate3d(10px, -50%, 0);
1518
1519 background: no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="36px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(-90 18 18)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>');
1520 background-size: 100% auto;
1521 }
1522
1523 [data-balloon][data-balloon-pos='left']:hover::before
1524 {
1525 -webkit-transform: translate3d(0, -50%, 0);
1526 transform: translate3d(0, -50%, 0);
1527 }
1528
1529 [data-balloon][data-balloon-pos='left']:hover::after
1530 {
1531 -webkit-transform: translate3d(0, -50%, 0);
1532 transform: translate3d(0, -50%, 0);
1533 }
1534
1535 [data-balloon][data-balloon-pos='right']::before
1536 {
1537 top: 50%;
1538 left: 100%;
1539
1540 margin-left: 11px;
1541
1542 -webkit-transform: translate3d(-10px, -50%, 0);
1543 transform: translate3d(-10px, -50%, 0);
1544 }
1545
1546 [data-balloon][data-balloon-pos='right']::after
1547 {
1548 top: 50%;
1549 left: 100%;
1550
1551 width: 6px;
1552 height: 18px;
1553 margin-left: 5px;
1554
1555 -webkit-transform: translate3d(-10px, -50%, 0);
1556 transform: translate3d(-10px, -50%, 0);
1557
1558 background: no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="36px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(90 6 6)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>');
1559 background-size: 100% auto;
1560 }
1561
1562 [data-balloon][data-balloon-pos='right']:hover::before
1563 {
1564 -webkit-transform: translate3d(0, -50%, 0);
1565 transform: translate3d(0, -50%, 0);
1566 }
1567
1568 [data-balloon][data-balloon-pos='right']:hover::after
1569 {
1570 -webkit-transform: translate3d(0, -50%, 0);
1571 transform: translate3d(0, -50%, 0);
1572 }
1573
1574 [data-balloon][data-balloon-length='small']::before
1575 {
1576 width: 80px;
1577
1578 white-space: normal;
1579 }
1580
1581 [data-balloon][data-balloon-length='medium']::before
1582 {
1583 width: 150px;
1584
1585 white-space: normal;
1586 }
1587
1588 [data-balloon][data-balloon-length='large']::before
1589 {
1590 width: 260px;
1591
1592 white-space: normal;
1593 }
1594
1595 [data-balloon][data-balloon-length='xlarge']::before
1596 {
1597 width: 380px;
1598
1599 white-space: normal;
1600 }
1601
1602 @media screen and (max-width: 768px)
1603 {
1604 [data-balloon][data-balloon-length='xlarge']::before
1605 {
1606 width: 90vw;
1607
1608 white-space: normal;
1609 }
1610 }
1611
1612 [data-balloon][data-balloon-length='fit']::before
1613 {
1614 width: 100%;
1615
1616 white-space: normal;
1617 }
1618
1619 .font-options__wrapper .font-options__options-list
1620 {
1621 border-color: #b8daeb;
1622 box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .15);
1623 }
1624
1625 .font-options__wrapper .font-options__option
1626 {
1627 margin-bottom: 12px;
1628 }
1629 .font-options__wrapper .font-options__option label
1630 {
1631 display: block;
1632
1633 margin-bottom: 6px;
1634 }
1635
1636 .font-options__wrapper [type=checkbox]:checked ~ .font-options__options-list
1637 {
1638 display: block;
1639
1640 opacity: 1;
1641 }
1642
1643 input.customify_font_tooltip
1644 {
1645 display: none;
1646 }
1647
1648 ul.font-options__options-list .select2-container
1649 {
1650 width: 100% !important;
1651 }
1652 ul.font-options__options-list .select2-container .select2-selection--single
1653 {
1654 -webkit-appearance: initial;
1655 }
1656 ul.font-options__options-list .select2-container .select2-selection--single .select2-selection__arrow
1657 {
1658 display: none;
1659 }
1660
1661 ul.font-options__options-list .select2-container--default .select2-selection--single .select2-selection__rendered
1662 {
1663 line-height: initial;
1664
1665 color: inherit;
1666 }
1667
1668 .select2-container.select2-container--open
1669 {
1670 z-index: 99999999;
1671 }
1672