PluginProbe
Customify / 1.5.2
Customify v1.5.2
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.2, at css/customizer.css

1,671 lines 34.4 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 {
614 margin-top: -24px;
615 }
616
617 [id*='divider'] + .customize-control.customize-control-checkbox,
618 [id*='divider'] + .customize-control.customize-control-radio
619 {
620 margin-top: 0;
621 }
622
623 .customize-control input[type=radio]
624 {
625 border-radius: 50%;
626 }
627 .customize-control input[type=radio]:checked:before
628 {
629 content: none;
630 }
631
632 .customize-control.customize-control-radio label
633 {
634 margin-top: 12px;
635 }
636
637 .customize-control input[type='range']
638 {
639 width: 65%;
640 }
641
642 .customize-control input[type='range']
643 {
644 position: relative;
645
646 overflow: hidden;
647
648 width: 200px;
649 height: 22px;
650
651 outline: none;
652 background: none;
653
654 -webkit-appearance: none;
655 }
656 .customize-control input[type='range']:before
657 {
658 position: absolute;
659 top: 8px;
660 left: 0;
661
662 width: 100%;
663 height: 6px;
664
665 content: ' ';
666
667 border-radius: 10px;
668 background: #dfe8ef;
669 box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, .3);
670 }
671 .customize-control input[type='range']::-webkit-slider-thumb
672 {
673 position: relative;
674 z-index: 3;
675
676 width: 22px;
677 height: 22px;
678
679 border: 2px solid #b8daeb;
680 border-radius: 4px;
681 background: #27ae60;
682 background: #fff;
683
684 -webkit-appearance: none;
685 }
686 .customize-control input[type='range']::-webkit-slider-thumb:before
687 {
688 font-size: 1em;
689
690 position: absolute;
691 top: -5px;
692 left: 5px;
693
694 content: '..';
695 letter-spacing: 1px;
696
697 color: #b8daeb;
698 }
699 .customize-control input[type='range']::-webkit-slider-thumb:after
700 {
701 position: absolute;
702 z-index: 1;
703 top: 6px;
704 right: 20px;
705
706 width: 200px;
707 height: 6px;
708
709 content: ' ';
710
711 background: #73c5ee;
712 }
713
714 .customize-control input[type='number'].range-value
715 {
716 font-size: 13px;
717 line-height: 1;
718
719 top: -5px;
720
721 float: right;
722
723 width: auto;
724 min-width: 40px;
725 max-width: 80px;
726 height: 30px;
727 margin-left: 10px;
728 padding: 4px 0 5px 0;
729
730 text-align: center;
731 }
732
733 .customize-control input[type=number]::-webkit-inner-spin-button,
734 .customize-control input[type=number]::-webkit-outer-spin-button
735 {
736 margin: 0;
737
738 -webkit-appearance: none;
739 }
740
741 .customize-control-color
742 {
743 display: block;
744 }
745 .customize-control-color .customize-control-title,
746 .customize-control-color .separator.label
747 {
748 float: left;
749 }
750 .customize-control-color .wp-picker-container
751 {
752 position: relative;
753 top: -3px;
754
755 float: right;
756 }
757 .customize-control-color .wp-picker-container .wp-picker-holder
758 {
759 position: relative;
760 }
761 .customize-control-color .wp-picker-container .iris-picker
762 {
763 position: absolute;
764 z-index: 1000;
765 top: 40px;
766 right: 0;
767
768 width: 275px !important;
769
770 border: none;
771 border-color: #dfdfde;
772 border-top: none;
773 border-radius: 0 0 3px 3px;
774 background: white;
775 }
776 .customize-control-color .wp-picker-container .iris-picker .iris-square
777 {
778 width: 215px !important;
779 height: 173px !important;
780 margin-right: 0;
781 }
782 .customize-control-color .wp-picker-container .iris-picker .iris-strip
783 {
784 float: right;
785
786 box-shadow: rgba(0, 0, 0, .4) 0 1px 1px inset;
787 }
788 .customize-control-color .wp-picker-container .iris-picker .iris-strip .ui-slider-handle
789 {
790 opacity: 1;
791 border-color: #aaa !important;
792 box-shadow: none;
793 }
794 .customize-control-color .wp-picker-container .iris-picker .iris-palette
795 {
796 width: 24px !important;
797 height: 24px !important;
798
799 border-radius: 50px;
800 box-shadow: rgba(0, 0, 0, .4) 0 1px 1px inset;
801 }
802 .customize-control-color .wp-picker-container .wp-picker-open + .wp-picker-input-wrap
803 {
804 position: absolute;
805 z-index: 1000;
806 top: 35px;
807 right: 0;
808
809 width: 275px;
810 padding: 9px 12px;
811
812 border: none;
813 border-radius: 3px 3px 0 0;
814 background: white;
815 }
816 .customize-control-color .wp-picker-container .wp-picker-open + .wp-picker-input-wrap input.wp-color-picker
817 {
818 font-size: 13px;
819
820 float: left;
821
822 width: 100px;
823 height: auto;
824 margin: 0;
825 padding: 6px 12px;
826
827 text-align: left;
828 }
829 .customize-control-color .wp-picker-container .wp-picker-open + .wp-picker-input-wrap input.button
830 {
831 float: right;
832
833 height: 30px;
834 padding: 4px 12px;
835 }
836 .customize-control-color .wp-color-result
837 {
838 top: 0;
839
840 width: 40px;
841 height: 30px;
842 margin: 0;
843 padding: 0;
844
845 border: 2px solid #b8daeb;
846 border-radius: 4px;
847 background: #2ecc71;
848 box-shadow: none;
849 }
850 .customize-control-color .wp-color-result:after
851 {
852 display: none;
853 }
854
855 #accordion-section-live_css_edit_section .customize-section-title
856 {
857 margin-top: -13px;
858
859 border-bottom: 1px solid #ddd;
860 }
861
862 #accordion-section-live_css_edit_section #css_editor
863 {
864 top: 70px;
865
866 overflow: visible;
867
868 border-top: 10px solid white;
869 }
870 #accordion-section-live_css_edit_section #css_editor:before
871 {
872 position: absolute;
873 z-index: 10000000;
874 top: -10px;
875 left: 0;
876
877 display: block;
878
879 width: 48px;
880 height: 10px;
881
882 content: '';
883
884 background: #e8e8e8;
885 }
886
887 #accordion-section-live_css_edit_section .ace_scroller
888 {
889 padding-left: 10px;
890 }
891
892 .wp-full-overlay.editor_opened
893 {
894 margin-left: 500px;
895 }
896 .wp-full-overlay.editor_opened #customize-controls
897 {
898 width: 500px;
899 }
900 .wp-full-overlay.editor_opened.collapsed #customize-controls
901 {
902 width: 300px;
903 }
904
905 .customize-control-media .current,
906 .customize-control-site_icon .current,
907 li#customize-control-site_logo .current
908 {
909 min-height: 44px;
910 margin-bottom: 10px;
911
912 border: 2px solid #b8daeb;
913 border-radius: 4px;
914 background: #f5fcff;
915 }
916 .customize-control-media .current .container,
917 .customize-control-media .current span,
918 .customize-control-site_icon .current .container,
919 .customize-control-site_icon .current span,
920 li#customize-control-site_logo .current .container,
921 li#customize-control-site_logo .current span
922 {
923 border: none;
924 }
925
926 .customize-control-media .inner,
927 .customize-control-media .current span,
928 .customize-control-site_icon .inner,
929 .customize-control-site_icon .current span,
930 li#customize-control-site_logo .inner,
931 li#customize-control-site_logo .current span
932 {
933 font-size: 13px;
934
935 color: #98c6dd;
936 }
937
938 .customize-control-media .inner,
939 .customize-control-site_icon .inner,
940 li#customize-control-site_logo .inner
941 {
942 line-height: 1.4;
943 }
944
945 .customize-control-media .thumbnail-image,
946 .customize-control-site_icon .thumbnail-image,
947 li#customize-control-site_logo .thumbnail-image
948 {
949 padding: 14px;
950
951 text-align: center;
952 }
953 .customize-control-media .thumbnail-image img,
954 .customize-control-site_icon .thumbnail-image img,
955 li#customize-control-site_logo .thumbnail-image img
956 {
957 width: auto;
958 }
959
960 .customize-control-media .actions,
961 .customize-control-site_icon .actions,
962 li#customize-control-site_logo .actions
963 {
964 margin-bottom: 0;
965 }
966
967 .customize-control-typography select,
968 .customize-control-typography select
969 {
970 margin-bottom: 10px;
971 }
972
973 .customize-control-typography .description,
974 .customize-control-typography .description
975 {
976 margin-top: -3px;
977 }
978
979 .customize-control-typography ul li,
980 .customize-control-typography ul li
981 {
982 width: 100%;
983 margin: 0;
984 }
985
986 .default-preset-button
987 {
988 font-family: 'Open Sans',sans-serif;
989 font-size: 13px;
990
991 float: right;
992
993 margin-right: 4px;
994 padding: 1px 8px;
995
996 border: 1px solid #cbcbcb;
997 border-radius: 3px;
998 background-color: #f5f6f6;
999 }
1000
1001 .customize-control-preset .description
1002 {
1003 font-style: normal;
1004
1005 margin-right: 5px;
1006 }
1007
1008 .customify_preset.radio_buttons .customify_radio_button
1009 {
1010 position: relative;
1011
1012 display: inline-block;
1013 overflow: hidden;
1014
1015 height: auto;
1016 margin: 3px;
1017 padding: 2px;
1018
1019 border: none;
1020 }
1021 .customify_preset.radio_buttons .customify_radio_button input[type='radio']
1022 {
1023 position: absolute;
1024 z-index: 9999;
1025
1026 width: 100%;
1027 height: 100%;
1028
1029 opacity: 0;
1030 }
1031 .customify_preset.radio_buttons .customify_radio_button input[type='radio']:checked + label
1032 {
1033 background-color: #ebebeb;
1034 }
1035 .customify_preset.radio_buttons .customify_radio_button input[type='radio']:checked + label:before
1036 {
1037 content: '>';
1038
1039 color: inherit;
1040 }
1041 .customify_preset.radio_buttons .customify_radio_button input[type='radio']:checked + label:after
1042 {
1043 content: '<';
1044
1045 color: inherit;
1046 }
1047 .customify_preset.radio_buttons .customify_radio_button input[type='radio']:checked:before
1048 {
1049 opacity: 0;
1050 }
1051 .customify_preset.radio_buttons .customify_radio_button label
1052 {
1053 position: relative;
1054 z-index: 999;
1055
1056 border-left: 4px solid;
1057 }
1058
1059 .customify_preset .awesome_preset
1060 {
1061 position: relative;
1062
1063 display: inline-block;
1064
1065 width: 45%;
1066 margin-top: 5px;
1067 margin-bottom: 25px;
1068
1069 transition: all .2s;
1070 text-align: center;
1071
1072 color: white;
1073 }
1074 .customify_preset .awesome_preset:hover
1075 {
1076 opacity: .9;
1077 }
1078 .customify_preset .awesome_preset:before
1079 {
1080 position: absolute;
1081 z-index: 5;
1082 top: 1px;
1083 right: 1px;
1084 bottom: 1px;
1085 left: 1px;
1086
1087 content: '';
1088
1089 opacity: .5;
1090 border: 1px solid #fff;
1091 border-radius: 4px;
1092 background: transparent;
1093 }
1094 .customify_preset .awesome_preset .preset-wrap .preset-color
1095 {
1096 height: 128px;
1097 padding: 17px 0 27px;
1098
1099 border-radius: 4px 4px 0 0;
1100 }
1101 .customify_preset .awesome_preset .preset-wrap .preset-color .first-font
1102 {
1103 font-size: 55px;
1104 line-height: 1;
1105
1106 display: inline-block;
1107
1108 width: 100%;
1109 }
1110 .customify_preset .awesome_preset .preset-wrap .preset-color .secondary-font
1111 {
1112 font-size: 20px;
1113 line-height: 1;
1114
1115 display: inline-block;
1116
1117 width: 100%;
1118 margin-top: 8px;
1119 }
1120 .customify_preset .awesome_preset .preset-wrap .preset-name
1121 {
1122 font-size: 11px;
1123
1124 position: relative;
1125
1126 padding: 1px;
1127
1128 text-transform: UPPERCASE;
1129
1130 border-radius: 0 0 4px 4px;
1131 }
1132 .customify_preset .awesome_preset .preset-wrap .preset-name:before
1133 {
1134 position: absolute;
1135 top: -10px;
1136 left: 40%;
1137
1138 content: '';
1139
1140 border: 10px solid;
1141 border-color: inherit;
1142 border-top: transparent;
1143 border-right-color: transparent;
1144 border-bottom-color: inherit;
1145 border-left-color: transparent;
1146 }
1147 .customify_preset .awesome_preset:nth-child(odd)
1148 {
1149 margin-right: 7%;
1150 }
1151 .customify_preset .awesome_preset input[type=radio]
1152 {
1153 position: absolute;
1154 z-index: 10;
1155 top: 0;
1156 left: 0;
1157
1158 display: inline-block;
1159
1160 width: 100%;
1161 height: 100%;
1162 margin: 0;
1163
1164 color: #006505;
1165 border: 0;
1166 border-radius: 0;
1167 background-color: transparent;
1168 box-shadow: none;
1169 }
1170 .customify_preset .awesome_preset input[type=radio]:checked:before
1171 {
1172 position: absolute;
1173 z-index: 1;
1174 top: -13px;
1175 right: -14px;
1176
1177 width: 25px;
1178 height: 25px;
1179
1180 background: #fff;
1181 }
1182 .customify_preset .awesome_preset input[type=radio]:checked:after
1183 {
1184 position: absolute;
1185 z-index: 10;
1186 top: -5px;
1187 right: -5px;
1188
1189 width: 26px;
1190 height: 26px;
1191
1192 content: '';
1193
1194 border-radius: 50%;
1195 background: #73c5ee url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEzcHgiIGhlaWdodD0iOXB4IiB2aWV3Qm94PSIwIDAgMTMgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJDdXN0b21pZnktQ29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxLjAwMDAwMCwgLTQwOC4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPGcgaWQ9IkhlYWRlciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxLjAwMDAwMCwgNDcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ29udGVudCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCA3NS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iRmllbGQtLS1DaGVja2JveC1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNy4wMDAwMDAsIDI0OS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IkNoZWNrYm94IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMzAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTAuMDM4NDk1LDE2IEwxNy4xMTYxMzc1LDguOTIxNDg3NiBMMTUuMTk0NjQ5OCw3IEwxMC4wMzg0OTUsMTIuMTU1MDY3NCBMNi45MjE0ODc2LDkuMDM4OTI5OTcgTDUsMTAuOTYwNDE3NiBMMTAuMDM4NDk1LDE2IFoiIGlkPSJQYWdlLTEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat;
1196 background-position: center center;
1197
1198 -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
1199 filter: alpha(opacity=0);
1200 }
1201
1202 .customify_radio_image
1203 {
1204 display: inline-block;
1205 }
1206 .customify_radio_image label
1207 {
1208 position: relative;
1209
1210 display: block;
1211 float: left;
1212
1213 margin-right: 10px;
1214 }
1215 .customify_radio_image label input[type=radio]
1216 {
1217 position: absolute;
1218 top: 0;
1219 right: 0;
1220 bottom: 0;
1221 left: 0;
1222
1223 visibility: hidden;
1224
1225 width: 100%;
1226 height: 100%;
1227 }
1228 .customify_radio_image label input[type=radio] img
1229 {
1230 cursor: pointer;
1231
1232 border: 2px solid transparent;
1233 }
1234 .customify_radio_image label input[type=radio]:checked + img
1235 {
1236 border: 3px solid #73c5ee;
1237 }
1238
1239 .customify_ace_editor
1240 {
1241 display: block;
1242
1243 min-height: 200px;
1244
1245 border: 1px solid #ddd;
1246 }
1247
1248 .customize-control-custom_background .hide
1249 {
1250 display: none;
1251 }
1252
1253 .customize-control-custom_background .upload_button_div
1254 {
1255 margin: 10px 0;
1256 }
1257 .customize-control-custom_background .upload_button_div > *
1258 {
1259 margin-right: 10px;
1260 }
1261
1262 .customize-control-custom_background .preview_screenshot
1263 {
1264 margin: 10px 0;
1265
1266 text-align: center;
1267 }
1268 .customize-control-custom_background .preview_screenshot img
1269 {
1270 border: 2px solid #ccc;
1271 }
1272
1273 #customify_import_demo_data_button
1274 {
1275 display: inline-block;
1276
1277 width: 70%;
1278 height: auto;
1279 margin: 0 15% 10% 15%;
1280 padding: 10px;
1281
1282 text-align: center;
1283 }
1284
1285 .import_step_note
1286 {
1287 display: inline-block;
1288
1289 width: 100%;
1290 margin: 5px;
1291 }
1292 .import_step_note:before
1293 {
1294 content: '\1F449';
1295 }
1296 .import_step_note.success:before
1297 {
1298 content: '\1F44D';
1299 }
1300 .import_step_note.failed:before
1301 {
1302 content: '\274C';
1303 }
1304
1305 #customize-header-actions
1306 {
1307 border-color: #e0e8ef;
1308 background: #fff;
1309 }
1310
1311 .wp-full-overlay-sidebar,
1312 .customize-themes-panel
1313 {
1314 border-right: 1px solid #e0e8ef;
1315 background: #eaf9fe;
1316 }
1317
1318 #customize-theme-controls #accordion-section-menu_locations
1319 {
1320 border-bottom: 1px solid #e0e8ef;
1321 }
1322
1323 #customize-controls #accordion-section-themes > .accordion-section-title
1324 {
1325 font-weight: 600;
1326
1327 border-bottom: 1px solid #e0e8ef;
1328 }
1329 #customize-controls #accordion-section-themes > .accordion-section-title:hover
1330 {
1331 background: #fff;
1332 }
1333
1334 #customize-controls .panel-meta.customize-info
1335 {
1336 border-bottom-color: #e0e8ef;
1337 }
1338
1339 #customize-theme-controls .control-section .accordion-section-title
1340 {
1341 font-weight: 400;
1342
1343 border-top: 1px solid #e0e8ef;
1344 border-bottom: none;
1345 }
1346
1347 #customize-theme-controls .control-section:last-of-type > .accordion-section-title
1348 {
1349 border-bottom: 1px solid #e0e8ef;
1350 }
1351
1352 #customize-theme-controls .customize-section-title
1353 {
1354 border-top: 1px solid #e0e8ef;
1355 border-bottom: 1px solid #e0e8ef;
1356 }
1357
1358 #customize-controls .control-section .accordion-section-title:focus,
1359 #customize-controls .control-section .accordion-section-title:hover,
1360 #customize-controls .control-section.open .accordion-section-title,
1361 #customize-controls .control-section:hover > .accordion-section-title
1362 {
1363 color: #056184;
1364 border-left-color: #f5fcff;
1365 background: #f5fcff;
1366 }
1367
1368 [data-balloon]
1369 {
1370 position: relative;
1371 }
1372
1373 [data-balloon]::before
1374 {
1375 font-size: 12px;
1376
1377 position: absolute;
1378 z-index: 10;
1379
1380 padding: .5em 1em;
1381
1382 content: attr(data-balloon);
1383 transition: all .18s ease-out;
1384 white-space: nowrap;
1385 pointer-events: none;
1386
1387 opacity: 0;
1388 color: #fff;
1389 border-radius: 4px;
1390 background: rgba(17, 17, 17, .9);
1391 }
1392
1393 [data-balloon]::after
1394 {
1395 position: absolute;
1396 z-index: 10;
1397
1398 width: 18px;
1399 height: 6px;
1400
1401 content: '';
1402 transition: all .18s ease-out;
1403 pointer-events: none;
1404
1405 opacity: 0;
1406 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>');
1407 background-size: 100% auto;
1408 }
1409
1410 [data-balloon]:hover::before,
1411 [data-balloon]:hover::after
1412 {
1413 pointer-events: auto;
1414
1415 opacity: 1;
1416 }
1417
1418 [data-balloon][data-balloon-pos='up']::before
1419 {
1420 bottom: 100%;
1421 left: 50%;
1422
1423 margin-bottom: 11px;
1424
1425 -webkit-transform: translate3d(-50%, 10px, 0);
1426 transform: translate3d(-50%, 10px, 0);
1427 -webkit-transform-origin: top;
1428 transform-origin: top;
1429 }
1430
1431 [data-balloon][data-balloon-pos='up']::after
1432 {
1433 bottom: 100%;
1434 left: 50%;
1435
1436 margin-bottom: 5px;
1437
1438 -webkit-transform: translate3d(-50%, 10px, 0);
1439 transform: translate3d(-50%, 10px, 0);
1440 -webkit-transform-origin: top;
1441 transform-origin: top;
1442 }
1443
1444 [data-balloon][data-balloon-pos='up']:hover::before
1445 {
1446 -webkit-transform: translate3d(-50%, 0, 0);
1447 transform: translate3d(-50%, 0, 0);
1448 }
1449
1450 [data-balloon][data-balloon-pos='up']:hover::after
1451 {
1452 -webkit-transform: translate3d(-50%, 0, 0);
1453 transform: translate3d(-50%, 0, 0);
1454 }
1455
1456 [data-balloon][data-balloon-pos='down']::before
1457 {
1458 top: 100%;
1459 left: 50%;
1460
1461 margin-top: 11px;
1462
1463 -webkit-transform: translate3d(-50%, -10px, 0);
1464 transform: translate3d(-50%, -10px, 0);
1465 }
1466
1467 [data-balloon][data-balloon-pos='down']::after
1468 {
1469 top: 100%;
1470 left: 50%;
1471
1472 width: 18px;
1473 height: 6px;
1474 margin-top: 5px;
1475
1476 -webkit-transform: translate3d(-50%, -10px, 0);
1477 transform: translate3d(-50%, -10px, 0);
1478
1479 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>');
1480 background-size: 100% auto;
1481 }
1482
1483 [data-balloon][data-balloon-pos='down']:hover::before
1484 {
1485 -webkit-transform: translate3d(-50%, 0, 0);
1486 transform: translate3d(-50%, 0, 0);
1487 }
1488
1489 [data-balloon][data-balloon-pos='down']:hover::after
1490 {
1491 -webkit-transform: translate3d(-50%, 0, 0);
1492 transform: translate3d(-50%, 0, 0);
1493 }
1494
1495 [data-balloon][data-balloon-pos='left']::before
1496 {
1497 top: 50%;
1498 right: 100%;
1499
1500 margin-right: 11px;
1501
1502 -webkit-transform: translate3d(10px, -50%, 0);
1503 transform: translate3d(10px, -50%, 0);
1504 }
1505
1506 [data-balloon][data-balloon-pos='left']::after
1507 {
1508 top: 50%;
1509 right: 100%;
1510
1511 width: 6px;
1512 height: 18px;
1513 margin-right: 5px;
1514
1515 -webkit-transform: translate3d(10px, -50%, 0);
1516 transform: translate3d(10px, -50%, 0);
1517
1518 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>');
1519 background-size: 100% auto;
1520 }
1521
1522 [data-balloon][data-balloon-pos='left']:hover::before
1523 {
1524 -webkit-transform: translate3d(0, -50%, 0);
1525 transform: translate3d(0, -50%, 0);
1526 }
1527
1528 [data-balloon][data-balloon-pos='left']:hover::after
1529 {
1530 -webkit-transform: translate3d(0, -50%, 0);
1531 transform: translate3d(0, -50%, 0);
1532 }
1533
1534 [data-balloon][data-balloon-pos='right']::before
1535 {
1536 top: 50%;
1537 left: 100%;
1538
1539 margin-left: 11px;
1540
1541 -webkit-transform: translate3d(-10px, -50%, 0);
1542 transform: translate3d(-10px, -50%, 0);
1543 }
1544
1545 [data-balloon][data-balloon-pos='right']::after
1546 {
1547 top: 50%;
1548 left: 100%;
1549
1550 width: 6px;
1551 height: 18px;
1552 margin-left: 5px;
1553
1554 -webkit-transform: translate3d(-10px, -50%, 0);
1555 transform: translate3d(-10px, -50%, 0);
1556
1557 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>');
1558 background-size: 100% auto;
1559 }
1560
1561 [data-balloon][data-balloon-pos='right']:hover::before
1562 {
1563 -webkit-transform: translate3d(0, -50%, 0);
1564 transform: translate3d(0, -50%, 0);
1565 }
1566
1567 [data-balloon][data-balloon-pos='right']:hover::after
1568 {
1569 -webkit-transform: translate3d(0, -50%, 0);
1570 transform: translate3d(0, -50%, 0);
1571 }
1572
1573 [data-balloon][data-balloon-length='small']::before
1574 {
1575 width: 80px;
1576
1577 white-space: normal;
1578 }
1579
1580 [data-balloon][data-balloon-length='medium']::before
1581 {
1582 width: 150px;
1583
1584 white-space: normal;
1585 }
1586
1587 [data-balloon][data-balloon-length='large']::before
1588 {
1589 width: 260px;
1590
1591 white-space: normal;
1592 }
1593
1594 [data-balloon][data-balloon-length='xlarge']::before
1595 {
1596 width: 380px;
1597
1598 white-space: normal;
1599 }
1600
1601 @media screen and (max-width: 768px)
1602 {
1603 [data-balloon][data-balloon-length='xlarge']::before
1604 {
1605 width: 90vw;
1606
1607 white-space: normal;
1608 }
1609 }
1610
1611 [data-balloon][data-balloon-length='fit']::before
1612 {
1613 width: 100%;
1614
1615 white-space: normal;
1616 }
1617
1618 .font-options__wrapper .font-options__options-list
1619 {
1620 border-color: #b8daeb;
1621 box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .15);
1622 }
1623
1624 .font-options__wrapper .font-options__option
1625 {
1626 margin-bottom: 12px;
1627 }
1628 .font-options__wrapper .font-options__option label
1629 {
1630 display: block;
1631
1632 margin-bottom: 6px;
1633 }
1634
1635 .font-options__wrapper [type=checkbox]:checked ~ .font-options__options-list
1636 {
1637 display: block;
1638
1639 opacity: 1;
1640 }
1641
1642 input.customify_font_tooltip
1643 {
1644 display: none;
1645 }
1646
1647 ul.font-options__options-list .select2-container
1648 {
1649 width: 100% !important;
1650 }
1651 ul.font-options__options-list .select2-container .select2-selection--single
1652 {
1653 -webkit-appearance: initial;
1654 }
1655 ul.font-options__options-list .select2-container .select2-selection--single .select2-selection__arrow
1656 {
1657 display: none;
1658 }
1659
1660 ul.font-options__options-list .select2-container--default .select2-selection--single .select2-selection__rendered
1661 {
1662 line-height: initial;
1663
1664 color: inherit;
1665 }
1666
1667 .select2-container.select2-container--open
1668 {
1669 z-index: 99999999;
1670 }
1671