1body {
2 overflow: hidden;
3 -webkit-text-size-adjust: 100%;
4}
5
6.customize-controls-close,
7.widget-control-actions a {
8 text-decoration: none;
9}
10
11#customize-controls h3 {
12 font-size: 14px;
13}
14
15#customize-controls img {
16 max-width: 100%;
17}
18
19#customize-controls .submit {
20 text-align: center;
21}
22
23#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked {
24 background-color: rgba(0, 0, 0, 0.7);
25 padding: 25px;
26}
27
28#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .customize-changeset-locked-message {
29 margin-left: auto;
30 margin-right: auto;
31 max-width: 366px;
32 min-height: 64px;
33 width: auto;
34 padding: 25px;
35 position: relative;
36 background: #fff;
37 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
38 line-height: 1.5;
39 overflow-y: auto;
40 text-align: left;
41 top: calc( 50% - 100px );
42}
43
44#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .customize-changeset-locked-message.has-avatar {
45 padding-left: 109px;
46}
47
48#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .currently-editing {
49 margin-top: 0;
50}
51#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .action-buttons {
52 margin-bottom: 0;
53}
54
55.customize-changeset-locked-avatar {
56 width: 64px;
57 position: absolute;
58 left: 25px;
59 top: 25px;
60}
61
62.wp-core-ui.wp-customizer .customize-changeset-locked-message a.button {
63 margin-right: 10px;
64 margin-top: 0;
65}
66
67#customize-controls .description {
68 color: #50575e;
69}
70
71#customize-save-button-wrapper {
72 float: right;
73 margin-top: 9px;
74}
75
76body:not(.ready) #customize-save-button-wrapper .save {
77 visibility: hidden;
78}
79#customize-save-button-wrapper .save {
80 float: left;
81 border-radius: 3px;
82 box-shadow: none; /* @todo Adjust box shadow based on the disable states of paired button. */
83 margin-top: 0;
84}
85
86#customize-save-button-wrapper .save:focus, #publish-settings:focus {
87 box-shadow: 0 1px 0 #2271b1, 0 0 2px 1px #72aee6; /* This is default box shadow for focus */
88}
89
90#customize-save-button-wrapper .save.has-next-sibling {
91 border-radius: 3px 0 0 3px;
92}
93
94#customize-sidebar-outer-content {
95 position: absolute;
96 top: 0;
97 bottom: 0;
98 left: 0;
99 visibility: hidden;
100 overflow-x: hidden;
101 overflow-y: auto;
102 width: 100%;
103 margin: 0;
104 z-index: -1;
105 background: #f0f0f1;
106 transition: left .18s;
107 border-right: 1px solid #dcdcde;
108 border-left: 1px solid #dcdcde;
109 height: 100%;
110}
111
112@media (prefers-reduced-motion: reduce) {
113 #customize-sidebar-outer-content {
114 transition: none;
115 }
116}
117
118#customize-theme-controls .control-section-outer {
119 display: none !important;
120}
121
122#customize-outer-theme-controls .accordion-section-content {
123 padding: 12px;
124}
125
126#customize-outer-theme-controls .accordion-section-content.open {
127 display: block;
128}
129
130.outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content {
131 visibility: visible;
132 left: 100%;
133 transition: left .18s;
134}
135
136@media (prefers-reduced-motion: reduce) {
137 .outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content {
138 transition: none;
139 }
140}
141
142.customize-outer-pane-parent {
143 margin: 0;
144}
145
146.outer-section-open .wp-full-overlay.expanded .wp-full-overlay-main {
147 left: 300px;
148 opacity: 0.4;
149}
150
151.outer-section-open .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main,
152.outer-section-open .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
153.adding-menu-items .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main,
154.adding-menu-items .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
155.adding-widget .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main,
156.adding-widget .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main {
157 left: 64%;
158}
159
160#customize-outer-theme-controls li.notice {
161 padding-top: 8px;
162 padding-bottom: 8px;
163 margin-left: 0;
164 margin-bottom: 10px;
165}
166
167#publish-settings {
168 text-indent: 0;
169 border-radius: 0 3px 3px 0;
170 padding-left: 0;
171 padding-right: 0;
172 box-shadow: none; /* @todo Adjust box shadow based on the disable states of paired button. */
173 font-size: 14px;
174 width: 30px;
175 float: left;
176 transform: none;
177 margin-top: 0;
178 line-height: 2;
179}
180
181body:not(.ready) #publish-settings,
182body.trashing #customize-save-button-wrapper .save,
183body.trashing #publish-settings {
184 display: none;
185}
186
187#customize-header-actions .spinner {
188 margin-top: 13px;
189 margin-right: 4px;
190}
191
192.saving #customize-header-actions .spinner,
193.trashing #customize-header-actions .spinner {
194 visibility: visible;
195}
196
197#customize-header-actions {
198 border-bottom: 1px solid #dcdcde;
199}
200
201#customize-controls .wp-full-overlay-sidebar-content {
202 overflow-y: auto;
203 overflow-x: hidden;
204}
205
206.outer-section-open #customize-controls .wp-full-overlay-sidebar-content {
207 background: #f0f0f1;
208}
209
210#customize-controls .customize-info {
211 border: none;
212 border-bottom: 1px solid #dcdcde;
213 margin-bottom: 15px;
214}
215
216#customize-control-changeset_status .customize-inside-control-row,
217#customize-control-changeset_preview_link input {
218 background-color: #fff;
219 border-bottom: 1px solid #dcdcde;
220 box-sizing: content-box;
221 width: 100%;
222 margin-left: -12px;
223 padding-left: 12px;
224 padding-right: 12px;
225}
226
227#customize-control-trash_changeset {
228 margin-top: 20px;
229}
230#customize-control-trash_changeset .button-link {
231 position: relative;
232 padding-left: 24px;
233 display: inline-block;
234}
235#customize-control-trash_changeset .button-link:before {
236 content: "\f182";
237 content: "\f182" / '';
238 font: normal 22px dashicons;
239 text-decoration: none;
240 position: absolute;
241 left: 0;
242 top: -2px;
243}
244
245#customize-controls .date-input:invalid {
246 border-color: #d63638;
247}
248
249#customize-control-changeset_status .customize-inside-control-row {
250 padding-top: 10px;
251 padding-bottom: 10px;
252 font-weight: 500;
253}
254
255#customize-control-changeset_status .customize-inside-control-row:first-of-type {
256 border-top: 1px solid #dcdcde;
257}
258
259#customize-control-changeset_status .customize-control-title {
260 margin-bottom: 6px;
261}
262
263#customize-control-changeset_status input {
264 margin-left: 0;
265}
266
267#customize-control-changeset_preview_link {
268 position: relative;
269 display: block;
270}
271
272.preview-link-wrapper .customize-copy-preview-link.preview-control-element.button {
273 margin: 0;
274 position: absolute;
275 bottom: 9px;
276 right: 0;
277}
278
279.preview-link-wrapper {
280 position: relative;
281}
282
283.customize-copy-preview-link:before,
284.customize-copy-preview-link:after {
285 content: "";
286 height: 28px;
287 position: absolute;
288 background: #fff;
289 top: -1px;
290}
291
292.customize-copy-preview-link:before {
293 left: -10px;
294 width: 9px;
295 opacity: 0.75;
296}
297
298.customize-copy-preview-link:after {
299 left: -5px;
300 width: 4px;
301 opacity: 0.8;
302}
303
304#customize-control-changeset_preview_link input {
305 line-height: 2.85714286; /* 40px */
306 border-top: 1px solid #dcdcde;
307 border-left: none;
308 border-right: none;
309 text-indent: -999px;
310 color: #fff;
311 /* Only necessary for IE11 */
312 min-height: 40px;
313}
314
315#customize-control-changeset_preview_link label {
316 position: relative;
317 display: block;
318}
319
320#customize-control-changeset_preview_link a {
321 display: inline-block;
322 position: absolute;
323 white-space: nowrap;
324 overflow: hidden;
325 width: 90%;
326 bottom: 14px;
327 font-size: 14px;
328 text-decoration: none;
329}
330
331#customize-control-changeset_preview_link a.disabled,
332#customize-control-changeset_preview_link a.disabled:active,
333#customize-control-changeset_preview_link a.disabled:focus,
334#customize-control-changeset_preview_link a.disabled:visited {
335 color: #000;
336 opacity: 0.4;
337 cursor: default;
338 outline: none;
339 box-shadow: none;
340}
341
342#sub-accordion-section-publish_settings .customize-section-description-container {
343 display: none;
344}
345
346#customize-controls .customize-info.section-meta {
347 margin-bottom: 15px;
348}
349
350.customize-control-date_time .customize-control-description + .date-time-fields.includes-time {
351 margin-top: 10px;
352}
353
354.customize-control.customize-control-date_time .date-time-fields .date-input.day {
355 margin-right: 0;
356}
357
358.date-time-fields .date-input.month {
359 width: auto;
360 margin: 0;
361}
362
363.date-time-fields .date-input.day,
364.date-time-fields .date-input.hour,
365.date-time-fields .date-input.minute {
366 width: 46px;
367}
368
369.customize-control-date_time select {
370 vertical-align: top;
371}
372
373.date-time-fields .date-input.year {
374 width: 65px;
375}
376
377.date-time-fields .date-input.meridian {
378 width: auto;
379 margin: 0;
380}
381
382.date-time-fields .time-row {
383 margin-top: 12px;
384}
385
386#customize-control-changeset_preview_link {
387 margin-top: 6px;
388}
389
390#customize-control-changeset_status {
391 margin-bottom: 0;
392 padding-bottom: 0;
393}
394
395#customize-control-changeset_scheduled_date {
396 box-sizing: content-box;
397 width: 100%;
398 margin-left: -12px;
399 padding: 12px;
400 background: #fff;
401 border-bottom: 1px solid #dcdcde;
402 margin-bottom: 0;
403}
404
405#customize-control-site_icon .customize-control-description,
406#customize-control-changeset_scheduled_date .customize-control-description {
407 font-style: normal;
408}
409
410#customize-controls .customize-info.is-in-view,
411#customize-controls .customize-section-title.is-in-view {
412 position: absolute;
413 z-index: 9;
414 width: 100%;
415 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
416}
417
418#customize-controls .customize-section-title.is-in-view {
419 margin-top: 0;
420}
421
422#customize-controls .customize-info.is-in-view + .accordion-section {
423 margin-top: 15px;
424}
425
426#customize-controls .customize-info.is-sticky,
427#customize-controls .customize-section-title.is-sticky {
428 position: fixed;
429 top: 46px;
430}
431
432#customize-controls .customize-info .accordion-section-title {
433 background: #fff;
434 color: #50575e;
435 border-left: none;
436 border-right: none;
437 border-bottom: none;
438 cursor: default;
439 padding: 10px 10px 11px 14px;
440}
441
442#customize-controls .customize-info.open .accordion-section-title:after,
443#customize-controls .customize-info .accordion-section-title:hover:after,
444#customize-controls .customize-info .accordion-section-title:focus:after {
445 color: #2c3338;
446}
447
448#customize-controls .customize-info .accordion-section-title:after {
449 display: none;
450}
451
452#customize-controls .customize-info .preview-notice {
453 font-size: 13px;
454 line-height: 1.9;
455 margin: 0;
456 font-weight: 400;
457 color: #50575e;
458}
459
460#customize-controls .customize-pane-child .customize-section-title h3,
461#customize-controls .customize-pane-child h3.customize-section-title,
462#customize-outer-theme-controls .customize-pane-child .customize-section-title h3,
463#customize-outer-theme-controls .customize-pane-child h3.customize-section-title,
464#customize-controls .customize-info .panel-title {
465 font-size: 20px;
466 font-weight: 200;
467 line-height: 26px;
468 display: block;
469 overflow: hidden;
470 white-space: nowrap;
471 text-overflow: ellipsis;
472}
473
474#customize-controls .customize-section-title span.customize-action {
475 overflow: hidden;
476 white-space: nowrap;
477 text-overflow: ellipsis;
478}
479
480#customize-controls .customize-info .customize-help-toggle {
481 position: absolute;
482 top: 4px;
483 right: 1px;
484 padding: 20px 20px 10px 10px;
485 width: 20px;
486 height: 20px;
487 cursor: pointer;
488 box-shadow: none;
489 background: transparent;
490 color: #50575e;
491 border: none;
492}
493
494#customize-controls .customize-info .customize-help-toggle:before {
495 position: absolute;
496 top: 5px;
497 left: 6px;
498}
499
500#customize-controls .customize-info.open .customize-help-toggle,
501#customize-controls .customize-info .customize-help-toggle:focus,
502#customize-controls .customize-info .customize-help-toggle:hover {
503 color: #2271b1;
504}
505
506#customize-controls .customize-info .customize-panel-description,
507#customize-controls .customize-info .customize-section-description,
508#customize-outer-theme-controls .customize-info .customize-section-description,
509#customize-controls .no-widget-areas-rendered-notice {
510 color: #50575e;
511 display: none;
512 background: #fff;
513 padding: 12px 15px;
514 border-top: 1px solid #dcdcde;
515}
516
517#customize-controls .customize-info .customize-panel-description.open + .no-widget-areas-rendered-notice {
518 border-top: none;
519}
520.no-widget-areas-rendered-notice {
521 font-style: italic;
522}
523.no-widget-areas-rendered-notice p:first-child {
524 margin-top: 0;
525}
526.no-widget-areas-rendered-notice p:last-child {
527 margin-bottom: 0;
528}
529
530#customize-controls .customize-info .customize-section-description {
531 margin-bottom: 15px;
532}
533
534#customize-controls .customize-info .customize-panel-description p:first-child,
535#customize-controls .customize-info .customize-section-description p:first-child {
536 margin-top: 0;
537}
538
539#customize-controls .customize-info .customize-panel-description p:last-child,
540#customize-controls .customize-info .customize-section-description p:last-child {
541 margin-bottom: 0;
542}
543
544#customize-controls .current-panel .control-section > h3.accordion-section-title {
545 padding-right: 30px;
546}
547
548#customize-theme-controls .control-section,
549#customize-outer-theme-controls .control-section {
550 border: none;
551}
552
553#customize-theme-controls .accordion-section-title,
554#customize-outer-theme-controls .accordion-section-title {
555 color: #50575e;
556 background-color: #fff;
557 border-bottom: 1px solid #dcdcde;
558 border-left: 4px solid #fff;
559 transition:
560 .15s color ease-in-out,
561 .15s background-color ease-in-out,
562 .15s border-color ease-in-out;
563}
564
565.accordion-section-title:has(button.accordion-trigger),
566#customize-controls .current-panel .control-section > h3.accordion-section-title:has(button.accordion-trigger) {
567 padding: 0;
568}
569
570.accordion-section-title button.accordion-trigger {
571 all: unset;
572 width: 100%;
573 padding: 10px 30px 11px 14px;
574 display: flex;
575 align-items: center;
576 box-sizing: border-box;
577}
578
579.accordion-section-title button.accordion-trigger:has(.menu-in-location) {
580 display: block;
581}
582
583@media (prefers-reduced-motion: reduce) {
584 #customize-theme-controls .accordion-section-title,
585 #customize-outer-theme-controls .accordion-section-title {
586 transition: none;
587 }
588}
589
590#customize-controls #customize-theme-controls .customize-themes-panel .accordion-section-title {
591 color: #50575e;
592 background-color: #fff;
593 border-left: 4px solid #fff;
594}
595
596#customize-theme-controls .accordion-section-title:after,
597#customize-outer-theme-controls .accordion-section-title:after {
598 content: "\f345";
599 content: "\f345" / '';
600 color: #a7aaad;
601 pointer-events: none;
602}
603
604#customize-theme-controls .accordion-section-content,
605#customize-outer-theme-controls .accordion-section-content {
606 color: #50575e;
607 background: transparent;
608}
609
610#customize-controls .control-section:hover > .accordion-section-title,
611#customize-controls .control-section .accordion-section-title button:hover,
612#customize-controls .control-section.open .accordion-section-title,
613#customize-controls .control-section .accordion-section-title button:focus {
614 color: #2271b1;
615 background: #f6f7f7;
616 border-left-color: #2271b1;
617}
618
619#accordion-section-themes + .control-section {
620 border-top: 1px solid #dcdcde;
621}
622
623.js .control-section:hover .accordion-section-title,
624.js .control-section .accordion-section-title:hover,
625.js .control-section.open .accordion-section-title,
626.js .control-section .accordion-section-title:focus {
627 background: #f6f7f7;
628}
629
630#customize-theme-controls .control-section:hover > .accordion-section-title:after,
631#customize-theme-controls .control-section .accordion-section-title:hover:after,
632#customize-theme-controls .control-section.open .accordion-section-title:after,
633#customize-theme-controls .control-section .accordion-section-title:focus:after,
634#customize-outer-theme-controls .control-section:hover > .accordion-section-title:after,
635#customize-outer-theme-controls .control-section .accordion-section-title:hover:after,
636#customize-outer-theme-controls .control-section.open .accordion-section-title:after,
637#customize-outer-theme-controls .control-section .accordion-section-title:focus:after {
638 color: #2271b1;
639}
640
641#customize-theme-controls .control-section.open {
642 border-bottom: 1px solid #f0f0f1;
643}
644
645#customize-theme-controls .control-section.open .accordion-section-title,
646#customize-outer-theme-controls .control-section.open .accordion-section-title {
647 border-bottom-color: #f0f0f1 !important;
648}
649
650#customize-theme-controls .control-section:last-of-type.open,
651#customize-theme-controls .control-section:last-of-type > .accordion-section-title {
652 border-bottom-color: #dcdcde;
653}
654
655#customize-theme-controls .control-panel-content:not(.control-panel-nav_menus) .control-section:nth-child(2),
656#customize-theme-controls .control-panel-nav_menus .control-section-nav_menu,
657#customize-theme-controls .control-section-nav_menu_locations .accordion-section-title {
658 border-top: 1px solid #dcdcde;
659}
660
661#customize-theme-controls .control-panel-nav_menus .control-section-nav_menu + .control-section-nav_menu {
662 border-top: none;
663}
664
665#customize-theme-controls > ul {
666 margin: 0;
667}
668
669#customize-theme-controls .accordion-section-content {
670 position: absolute;
671 top: 0;
672 left: 100%;
673 width: 100%;
674 margin: 0;
675 padding: 12px;
676 box-sizing: border-box;
677}
678
679#customize-info,
680#customize-theme-controls .customize-pane-parent,
681#customize-theme-controls .customize-pane-child {
682 overflow: visible;
683 width: 100%;
684 margin: 0;
685 padding: 0;
686 box-sizing: border-box;
687 transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */
688}
689
690@media (prefers-reduced-motion: reduce) {
691 #customize-info,
692 #customize-theme-controls .customize-pane-parent,
693 #customize-theme-controls .customize-pane-child {
694 transition: none;
695 }
696}
697
698#customize-theme-controls .customize-pane-child.skip-transition {
699 transition: none;
700}
701
702#customize-info,
703#customize-theme-controls .customize-pane-parent {
704 position: relative;
705 visibility: visible;
706 height: auto;
707 max-height: none;
708 overflow: auto;
709 transform: none;
710}
711
712#customize-theme-controls .customize-pane-child {
713 position: absolute;
714 top: 0;
715 left: 0;
716 visibility: hidden;
717 height: 0;
718 max-height: none;
719 overflow: hidden;
720 transform: translateX(100%);
721}
722
723#customize-theme-controls .customize-pane-child.open,
724#customize-theme-controls .customize-pane-child.current-panel {
725 transform: none;
726}
727
728.section-open #customize-theme-controls .customize-pane-parent,
729.in-sub-panel #customize-theme-controls .customize-pane-parent,
730.section-open #customize-info,
731.in-sub-panel #customize-info,
732.in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel {
733 visibility: hidden;
734 height: 0;
735 overflow: hidden;
736 transform: translateX(-100%);
737}
738
739.section-open #customize-theme-controls .customize-pane-parent.busy,
740.in-sub-panel #customize-theme-controls .customize-pane-parent.busy,
741.section-open #customize-info.busy,
742.in-sub-panel #customize-info.busy,
743.busy.section-open.in-sub-panel #customize-theme-controls .customize-pane-child.current-panel,
744#customize-theme-controls .customize-pane-child.open,
745#customize-theme-controls .customize-pane-child.current-panel,
746#customize-theme-controls .customize-pane-child.busy {
747 visibility: visible;
748 height: auto;
749 overflow: auto;
750}
751
752#customize-theme-controls .customize-pane-child.accordion-section-content,
753#customize-theme-controls .customize-pane-child.accordion-sub-container {
754 display: block;
755 overflow-x: hidden;
756}
757
758#customize-theme-controls .customize-pane-child.accordion-section-content {
759 padding: 12px;
760}
761
762#customize-theme-controls .customize-pane-child.menu li {
763 position: static;
764}
765
766.customize-section-description-container,
767.control-section-nav_menu .customize-section-description-container,
768.control-section-new_menu .customize-section-description-container {
769 margin-bottom: 15px;
770}
771
772.control-section-nav_menu .customize-control,
773.control-section-new_menu .customize-control {
774 /* Override default `margin-bottom` for `.customize-control` */
775 margin-bottom: 0;
776}
777
778.customize-section-title {
779 margin: -12px -12px 0;
780 border-bottom: 1px solid #dcdcde;
781 background: #fff;
782}
783
784div.customize-section-description {
785 margin-top: 22px;
786}
787
788.customize-info div.customize-section-description {
789 margin-top: 0;
790}
791
792div.customize-section-description p:first-child {
793 margin-top: 0;
794}
795
796div.customize-section-description p:last-child {
797 margin-bottom: 0;
798}
799
800#customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child {
801 border-bottom: 1px solid #dcdcde;
802 padding: 12px;
803}
804
805.ios #customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child {
806 padding: 12px 12px 13px;
807}
808
809.customize-section-title h3,
810h3.customize-section-title {
811 padding: 10px 10px 12px 14px;
812 margin: 0;
813 line-height: 21px;
814 color: #50575e;
815}
816
817.accordion-sub-container.control-panel-content {
818 display: none;
819 position: absolute;
820 top: 0;
821 width: 100%;
822}
823
824.accordion-sub-container.control-panel-content.busy {
825 display: block;
826}
827
828.current-panel .accordion-sub-container.control-panel-content {
829 width: 100%;
830}
831
832.customize-controls-close {
833 display: block;
834 position: absolute;
835 top: 0;
836 left: 0;
837 width: 45px;
838 height: 41px;
839 padding: 0 2px 0 0;
840 background: #f0f0f1;
841 border: none;
842 border-top: 4px solid #f0f0f1;
843 border-right: 1px solid #dcdcde;
844 color: #3c434a;
845 text-align: left;
846 cursor: pointer;
847 box-sizing: content-box;
848}
849
850@media (prefers-reduced-motion: no-preference) {
851 .customize-controls-close {
852 transition:
853 color .15s ease-in-out,
854 border-color .15s ease-in-out,
855 background .15s ease-in-out;
856 }
857}
858
859.customize-panel-back,
860.customize-section-back {
861 display: block;
862 float: left;
863 width: 48px;
864 height: 71px;
865 padding: 0 24px 0 0;
866 margin: 0;
867 background: #fff;
868 border: none;
869 border-right: 1px solid #dcdcde;
870 border-left: 4px solid #fff;
871 box-shadow: none;
872 cursor: pointer;
873 transition:
874 color .15s ease-in-out,
875 border-color .15s ease-in-out,
876 background .15s ease-in-out;
877}
878
879.customize-section-back {
880 height: 74px;
881}
882
883.ios .customize-panel-back {
884 display: none;
885}
886
887.ios .expanded.in-sub-panel .customize-panel-back {
888 display: block;
889}
890
891#customize-controls .panel-meta.customize-info .accordion-section-title {
892 margin-left: 48px;
893 border-left: none;
894}
895
896#customize-controls .panel-meta.customize-info .accordion-section-title:hover,
897#customize-controls .cannot-expand:hover .accordion-section-title {
898 background: #fff;
899 color: #50575e;
900 border-left-color: #fff;
901}
902
903.customize-controls-close:focus,
904.customize-controls-close:hover,
905.customize-controls-preview-toggle:focus,
906.customize-controls-preview-toggle:hover {
907 background: #fff;
908 color: #2271b1;
909 border-top-color: #2271b1;
910 box-shadow: none;
911 /* Only visible in Windows High Contrast mode */
912 outline: 1px solid transparent;
913}
914
915#customize-theme-controls .accordion-section-title:focus .customize-action {
916 /* Only visible in Windows High Contrast mode */
917 outline: 1px solid transparent;
918 outline-offset: 1px;
919}
920
921.customize-panel-back:hover,
922.customize-panel-back:focus,
923.customize-section-back:hover,
924.customize-section-back:focus {
925 color: #2271b1;
926 background: #f6f7f7;
927 border-left-color: #2271b1;
928 box-shadow: none;
929 /* Only visible in Windows High Contrast mode */
930 outline: 2px solid transparent;
931 outline-offset: -2px;
932}
933
934.customize-controls-close:before {
935 font: normal 22px/45px dashicons;
936 content: "\f335";
937 content: "\f335" / '';
938 position: relative;
939 top: -3px;
940 left: 13px;
941}
942
943.customize-panel-back:before,
944.customize-section-back:before {
945 font: normal 20px/72px dashicons;
946 content: "\f341";
947 content: "\f341" / '';
948 position: relative;
949 left: 9px;
950}
951
952.wp-full-overlay-sidebar .wp-full-overlay-header {
953 background-color: #f0f0f1;
954 transition: padding ease-in-out .18s;
955}
956
957.in-sub-panel .wp-full-overlay-sidebar .wp-full-overlay-header {
958 padding-left: 62px;
959}
960
961p.customize-section-description {
962 font-style: normal;
963 margin-top: 22px;
964 margin-bottom: 0;
965}
966
967.customize-section-description ul {
968 margin-left: 1em;
969}
970
971.customize-section-description ul > li {
972 list-style: disc;
973}
974
975.section-description-buttons {
976 text-align: right;
977}
978
979.customize-control {
980 width: 100%;
981 float: left;
982 clear: both;
983 margin-bottom: 12px;
984}
985
986.customize-control input[type="text"],
987.customize-control input[type="password"],
988.customize-control input[type="email"],
989.customize-control input[type="number"],
990.customize-control input[type="search"],
991.customize-control input[type="tel"],
992.customize-control input[type="url"],
993.customize-control input[type="range"] {
994 width: 100%;
995 margin: 0;
996}
997
998.customize-control-hidden {
999 margin: 0;
1000}
1001
1002.customize-control-textarea textarea {
1003 width: 100%;
1004 resize: vertical;
1005}
1006
1007.customize-control select {
1008 width: 100%;
1009}
1010
1011.customize-control select[multiple] {
1012 height: auto;
1013}
1014
1015.customize-control-title {
1016 display: block;
1017 font-size: 14px;
1018 line-height: 1.75;
1019 font-weight: 600;
1020 margin-bottom: 4px;
1021}
1022
1023.customize-control-description {
1024 display: block;
1025 font-style: italic;
1026 line-height: 1.4;
1027 margin-top: 0;
1028 margin-bottom: 5px;
1029}
1030
1031.customize-section-description a.external-link:after {
1032 font: 16px/11px dashicons;
1033 content: "\f504";
1034 content: "\f504" / '';
1035 top: 3px;
1036 position: relative;
1037 padding-left: 3px;
1038 display: inline-block;
1039 text-decoration: none;
1040}
1041
1042.customize-control-color .color-picker,
1043.customize-control-upload div {
1044 line-height: 28px;
1045}
1046
1047.customize-control .customize-inside-control-row {
1048 line-height: 1.6;
1049 display: block;
1050 margin-left: 24px;
1051 padding-top: 6px;
1052 padding-bottom: 6px;
1053}
1054
1055.customize-control-radio input,
1056.customize-control-checkbox input,
1057.customize-control-nav_menu_auto_add input {
1058 margin-right: 4px;
1059 margin-left: -24px;
1060}
1061
1062.customize-control-radio {
1063 padding: 5px 0 10px;
1064}
1065
1066.customize-control-radio .customize-control-title {
1067 margin-bottom: 0;
1068 line-height: 1.6;
1069}
1070
1071.customize-control-radio .customize-control-title + .customize-control-description {
1072 margin-top: 7px;
1073}
1074
1075.customize-control-radio label,
1076.customize-control-checkbox label {
1077 vertical-align: top;
1078}
1079
1080.customize-control .attachment-thumb.type-icon {
1081 float: left;
1082 margin: 10px;
1083 width: auto;
1084}
1085
1086.customize-control .attachment-title {
1087 font-weight: 600;
1088 margin: 0;
1089 padding: 5px 10px;
1090}
1091
1092.customize-control .attachment-meta {
1093 white-space: nowrap;
1094 overflow: hidden;
1095 text-overflow: ellipsis;
1096 margin: 0;
1097 padding: 0 10px;
1098}
1099
1100.customize-control .attachment-meta-title {
1101 padding-top: 7px;
1102}
1103
1104/* Remove descender space. */
1105.customize-control .thumbnail-image,
1106.customize-control-header .current,
1107.customize-control .wp-media-wrapper.wp-video {
1108 line-height: 0;
1109}
1110
1111
1112.customize-control .thumbnail-image img {
1113 cursor: pointer;
1114}
1115
1116#customize-controls .thumbnail-audio .thumbnail {
1117 max-width: 64px;
1118 max-height: 64px;
1119 margin: 10px;
1120 float: left;
1121}
1122
1123#available-menu-items .accordion-section-content .new-content-item-wrapper,
1124.customize-control-dropdown-pages .new-content-item-wrapper {
1125 width: calc(100% - 30px);
1126 padding: 8px 15px;
1127 position: absolute;
1128 bottom: 0;
1129 z-index: 10;
1130 background: #f0f0f1;
1131}
1132
1133.customize-control-dropdown-pages .new-content-item-wrapper {
1134 width: 100%;
1135 padding: 0;
1136 position: static;
1137}
1138
1139#available-menu-items .accordion-section-content .new-content-item,
1140.customize-control-dropdown-pages .new-content-item {
1141 display: flex;
1142}
1143
1144.customize-control-dropdown-pages .new-content-item {
1145 width: 100%;
1146 padding: 5px 0 5px 1px;
1147 position: relative;
1148}
1149
1150.customize-control-dropdown-pages .new-content-item-wrapper .new-content-item {
1151 padding: 0;
1152}
1153
1154.customize-control-dropdown-pages .new-content-item-wrapper .new-content-item label {
1155 line-height: 1.6;
1156}
1157
1158#available-menu-items .new-content-item .create-item-input,
1159.customize-control-dropdown-pages .new-content-item .create-item-input {
1160 flex-grow: 10;
1161}
1162
1163#available-menu-items .new-content-item .add-content,
1164.customize-control-dropdown-pages .new-content-item .add-content {
1165 margin: 2px 0 2px 6px;
1166 flex-grow: 1;
1167}
1168
1169.customize-control-dropdown-pages .new-content-item .create-item-input.invalid {
1170 border: 1px solid #d63638;
1171}
1172
1173.customize-control-dropdown-pages .add-new-toggle {
1174 margin-left: 1px;
1175 font-weight: 600;
1176 line-height: 2.2;
1177}
1178
1179#customize-preview iframe {
1180 width: 100%;
1181 height: 100%;
1182 position: absolute;
1183}
1184#customize-preview iframe + iframe {
1185 visibility: hidden;
1186}
1187
1188.wp-full-overlay-sidebar {
1189 background: #f0f0f1;
1190 border-right: 1px solid #dcdcde;
1191}
1192
1193
1194/**
1195 * Notifications
1196 */
1197
1198#customize-controls .customize-control-notifications-container { /* Scoped to #customize-controls for specificity over notification styles in common.css. */
1199 margin: 4px 0 8px;
1200 padding: 0;
1201 cursor: default;
1202}
1203
1204#customize-controls .customize-control-widget_form.has-error .widget .widget-top,
1205.customize-control-nav_menu_item.has-error .menu-item-bar .menu-item-handle {
1206 box-shadow: inset 0 0 0 2px #d63638;
1207 transition: .15s box-shadow linear;
1208}
1209
1210#customize-controls .customize-control-notifications-container li.notice {
1211 list-style: none;
1212 margin: 0 0 6px;
1213 padding: 9px 14px;
1214 overflow: hidden;
1215}
1216#customize-controls .customize-control-notifications-container .notice.is-dismissible {
1217 padding-right: 38px;
1218}
1219
1220.customize-control-notifications-container li.notice:last-child {
1221 margin-bottom: 0;
1222}
1223
1224#customize-controls .customize-control-nav_menu_item .customize-control-notifications-container {
1225 margin-top: 0;
1226}
1227
1228#customize-controls .customize-control-widget_form .customize-control-notifications-container {
1229 margin-top: 8px;
1230}
1231
1232.customize-control-text.has-error input {
1233 outline: 2px solid #d63638;
1234}
1235
1236#customize-controls #customize-notifications-area {
1237 position: absolute;
1238 top: 46px;
1239 width: 100%;
1240 border-bottom: 1px solid #dcdcde;
1241 display: block;
1242 padding: 0;
1243 margin: 0;
1244}
1245
1246.wp-full-overlay.collapsed #customize-controls #customize-notifications-area {
1247 display: none !important;
1248}
1249
1250#customize-controls #customize-notifications-area:not(.has-overlay-notifications),
1251#customize-controls .customize-section-title > .customize-control-notifications-container:not(.has-overlay-notifications),
1252#customize-controls .panel-meta > .customize-control-notifications-container:not(.has-overlay-notifications) {
1253 max-height: 210px;
1254 overflow-x: hidden;
1255 overflow-y: auto;
1256}
1257
1258#customize-controls #customize-notifications-area > ul,
1259#customize-controls #customize-notifications-area .notice,
1260#customize-controls .panel-meta > .customize-control-notifications-container,
1261#customize-controls .panel-meta > .customize-control-notifications-container .notice,
1262#customize-controls .customize-section-title > .customize-control-notifications-container,
1263#customize-controls .customize-section-title > .customize-control-notifications-container .notice {
1264 margin: 0;
1265}
1266#customize-controls .panel-meta > .customize-control-notifications-container,
1267#customize-controls .customize-section-title > .customize-control-notifications-container {
1268 border-top: 1px solid #dcdcde;
1269}
1270#customize-controls #customize-notifications-area .notice,
1271#customize-controls .panel-meta > .customize-control-notifications-container .notice,
1272#customize-controls .customize-section-title > .customize-control-notifications-container .notice {
1273 padding: 9px 14px;
1274}
1275#customize-controls #customize-notifications-area .notice.is-dismissible,
1276#customize-controls .panel-meta > .customize-control-notifications-container .notice.is-dismissible,
1277#customize-controls .customize-section-title > .customize-control-notifications-container .notice.is-dismissible {
1278 padding-right: 38px;
1279}
1280#customize-controls #customize-notifications-area .notice + .notice,
1281#customize-controls .panel-meta > .customize-control-notifications-container .notice + .notice,
1282#customize-controls .customize-section-title > .customize-control-notifications-container .notice + .notice {
1283 margin-top: 1px;
1284}
1285
1286@keyframes customize-fade-in {
1287 0% { opacity: 0; }
1288 100% { opacity: 1; }
1289}
1290
1291#customize-controls .notice.notification-overlay,
1292#customize-controls #customize-notifications-area .notice.notification-overlay {
1293 margin: 0;
1294 border-left: 0; /* @todo Appropriate styles could be added for notice-error, notice-warning, notice-success, etc */
1295}
1296
1297#customize-controls .customize-control-notifications-container.has-overlay-notifications {
1298 animation: customize-fade-in 0.5s;
1299 z-index: 30;
1300}
1301
1302/* Note: Styles for this are also defined in themes.css */
1303#customize-controls #customize-notifications-area .notice.notification-overlay .notification-message {
1304 clear: both;
1305 color: #1d2327;
1306 font-size: 18px;
1307 font-style: normal;
1308 margin: 0;
1309 padding: 2em 0;
1310 text-align: center;
1311 width: 100%;
1312 display: block;
1313 top: 50%;
1314 position: relative;
1315}
1316
1317/* Style for custom settings */
1318
1319/**
1320 * Static front page
1321 */
1322
1323#customize-control-show_on_front.has-error {
1324 margin-bottom: 0;
1325}
1326#customize-control-show_on_front.has-error .customize-control-notifications-container {
1327 margin-top: 12px;
1328}
1329
1330/**
1331 * Dropdowns
1332 */
1333
1334.accordion-section .dropdown {
1335 float: left;
1336 display: block;
1337 position: relative;
1338 cursor: pointer;
1339}
1340
1341.accordion-section .dropdown-content {
1342 overflow: hidden;
1343 float: left;
1344 min-width: 30px;
1345 height: 16px;
1346 line-height: 16px;
1347 margin-right: 16px;
1348 padding: 4px 5px;
1349 border: 2px solid #f0f0f1;
1350 -webkit-user-select: none;
1351 user-select: none;
1352}
1353
1354/* @todo maybe no more used? */
1355.customize-control .dropdown-arrow {
1356 position: absolute;
1357 top: 0;
1358 bottom: 0;
1359 right: 0;
1360 width: 20px;
1361 background: #f0f0f1;
1362}
1363
1364.customize-control .dropdown-arrow:after {
1365 content: "\f140";
1366 content: "\f140" / '';
1367 font: normal 20px/1 dashicons;
1368 display: block;
1369 padding: 0;
1370 text-indent: 0;
1371 text-align: center;
1372 position: relative;
1373 -webkit-font-smoothing: antialiased;
1374 -moz-osx-font-smoothing: grayscale;
1375 text-decoration: none !important;
1376 color: #2c3338;
1377}
1378
1379.customize-control .dropdown-status {
1380 color: #2c3338;
1381 background: #f0f0f1;
1382 display: none;
1383 max-width: 112px;
1384}
1385
1386.customize-control-color .dropdown {
1387 margin-right: 5px;
1388 margin-bottom: 5px;
1389}
1390
1391.customize-control-color .dropdown .dropdown-content {
1392 background-color: #50575e;
1393 border: 1px solid rgba(0, 0, 0, 0.15);
1394}
1395
1396.customize-control-color .dropdown:hover .dropdown-content {
1397 border-color: rgba(0, 0, 0, 0.25);
1398}
1399
1400/**
1401 * iOS can't scroll iframes,
1402 * instead it expands the iframe size to match the size of the content
1403 */
1404
1405.ios .wp-full-overlay {
1406 position: relative;
1407}
1408
1409.ios #customize-controls .wp-full-overlay-sidebar-content {
1410 -webkit-overflow-scrolling: touch;
1411}
1412
1413/* Media controls */
1414
1415.customize-control .actions .button {
1416 margin-top: 12px;
1417}
1418
1419.customize-control-header .actions,
1420.customize-control-header .uploaded {
1421 margin-bottom: 18px;
1422}
1423
1424.customize-control-header .uploaded button:not(.random),
1425.customize-control-header .default button:not(.random) {
1426 width: 100%;
1427 padding: 0;
1428 margin: 0;
1429 background: none;
1430 border: none;
1431 color: inherit;
1432 cursor: pointer;
1433}
1434
1435.customize-control-header button img {
1436 display: block;
1437}
1438
1439.customize-control .attachment-media-view .remove-button,
1440.customize-control .attachment-media-view .default-button,
1441.customize-control .attachment-media-view .upload-button,
1442.customize-control-header button.new,
1443.customize-control-header button.remove {
1444 width: auto;
1445 height: auto;
1446 white-space: normal;
1447}
1448
1449.customize-control .attachment-media-view .upload-button {
1450 width: 100%;
1451 padding: 9px 0;
1452}
1453
1454.customize-control .attachment-media-view .upload-button.control-focus {
1455 width: auto;
1456 padding: 0 10px;
1457}
1458
1459.customize-control.customize-control-header .actions .upload-button.button.new {
1460 width: 100%;
1461 padding: 9px 0;
1462}
1463
1464.customize-control .attachment-media-view .thumbnail,
1465.customize-control-header .current .container {
1466 overflow: hidden;
1467}
1468
1469.customize-control .attachment-media-view .placeholder,
1470.customize-control .attachment-media-view .button-add-media,
1471.customize-control-header .placeholder {
1472 width: 100%;
1473 position: relative;
1474 text-align: center;
1475 cursor: default;
1476 border: 1px dashed #c3c4c7;
1477 box-sizing: border-box;
1478 padding: 9px 0;
1479 line-height: 1.6;
1480}
1481
1482.customize-control .attachment-media-view .button-add-media {
1483 cursor: pointer;
1484 background-color: #f0f0f1;
1485 color: #2c3338;
1486}
1487
1488.customize-control .attachment-media-view .button-add-media:hover {
1489 background-color: #fff;
1490}
1491
1492.customize-control .attachment-media-view .button-add-media:focus {
1493 background-color: #fff;
1494 border-color: #3582c4;
1495 border-style: solid;
1496 box-shadow: 0 0 0 1px #3582c4;
1497 /* Only visible in Windows High Contrast mode */
1498 outline: 2px solid transparent;
1499}
1500
1501.customize-control-header .inner {
1502 display: none;
1503 position: absolute;
1504 width: 100%;
1505 color: #50575e;
1506 white-space: nowrap;
1507 text-overflow: ellipsis;
1508 overflow: hidden;
1509}
1510
1511.customize-control-header .inner,
1512.customize-control-header .inner .dashicons {
1513 line-height: 20px;
1514 top: 8px;
1515}
1516
1517.customize-control-header .list .inner,
1518.customize-control-header .list .inner .dashicons {
1519 top: 9px;
1520}
1521
1522.customize-control-header .header-view {
1523 position: relative;
1524 width: 100%;
1525 margin-bottom: 12px;
1526}
1527
1528.customize-control-header .header-view:last-child {
1529 margin-bottom: 0;
1530}
1531
1532/* Convoluted, but 'outline' support isn't good enough yet */
1533.customize-control-header .header-view:after {
1534 border: 0;
1535}
1536
1537.customize-control-header .header-view.selected .choice:focus {
1538 outline: none;
1539}
1540
1541.customize-control-header .header-view.selected:after {
1542 content: "";
1543 position: absolute;
1544 height: auto;
1545 top: 0;
1546 left: 0;
1547 bottom: 0;
1548 right: 0;
1549 border: 4px solid #72aee6;
1550 border-radius: 2px;
1551}
1552
1553.customize-control-header .header-view.button.selected {
1554 border: 0;
1555}
1556
1557/* Header control: overlay "close" button */
1558
1559.customize-control-header .uploaded .header-view .close {
1560 font-size: 20px;
1561 color: #fff;
1562 background: #50575e;
1563 background: rgba(0, 0, 0, 0.5);
1564 position: absolute;
1565 top: 10px;
1566 left: -999px;
1567 z-index: 1;
1568 width: 26px;
1569 height: 26px;
1570 cursor: pointer;
1571}
1572
1573.customize-control-header .header-view:hover .close,
1574.customize-control-header .header-view .close:focus {
1575 left: auto;
1576 right: 10px;
1577}
1578
1579.customize-control-header .header-view .close:focus {
1580 outline: 1px solid #4f94d4;
1581}
1582
1583/* Header control: randomiz(s)er */
1584
1585.customize-control-header .random.placeholder {
1586 cursor: pointer;
1587 border-radius: 2px;
1588 height: 40px;
1589}
1590
1591.customize-control-header button.random {
1592 width: 100%;
1593 height: auto;
1594 min-height: 40px;
1595 white-space: normal;
1596}
1597
1598.customize-control-header button.random .dice {
1599 margin-top: 4px;
1600}
1601
1602.customize-control-header .placeholder:hover .dice,
1603.customize-control-header .header-view:hover > button.random .dice {
1604 animation: dice-color-change 3s infinite;
1605}
1606
1607.button-see-me {
1608 animation: bounce .7s 1;
1609 transform-origin: center bottom;
1610}
1611
1612@keyframes bounce {
1613 from, 20%, 53%, 80%, to {
1614 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
1615 transform: translate3d(0,0,0);
1616 }
1617
1618 40%, 43% {
1619 animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
1620 transform: translate3d(0, -12px, 0);
1621 }
1622
1623 70% {
1624 animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
1625 transform: translate3d(0, -6px, 0);
1626 }
1627
1628 90% {
1629 transform: translate3d(0,-1px,0);
1630 }
1631}
1632
1633.customize-control-header .choice {
1634 position: relative;
1635 display: block;
1636 margin-bottom: 9px;
1637}
1638
1639.customize-control-header .choice:focus {
1640 box-shadow: 0 0 0 2px #2271b1;
1641 /* Only visible in Windows High Contrast mode */
1642 outline: 2px solid transparent;
1643}
1644
1645.customize-control-header .uploaded div:last-child > .choice {
1646 margin-bottom: 0;
1647}
1648
1649.customize-control .attachment-media-view .thumbnail-image img,
1650.customize-control-header img {
1651 max-width: 100%;
1652}
1653
1654.customize-control .attachment-media-view .remove-button,
1655.customize-control .attachment-media-view .default-button,
1656.customize-control-header .remove {
1657 margin-right: 8px;
1658}
1659
1660/* Background position control */
1661.customize-control-background_position .background-position-control .button-group {
1662 display: block;
1663}
1664
1665/**
1666 * Code Editor Control and Custom CSS Section
1667 *
1668 * Modifications to the Section Container to make the textarea full-width and
1669 * full-height, if the control is the only control in the section.
1670 */
1671
1672.customize-control-code_editor textarea {
1673 width: 100%;
1674 font-family: Consolas, Monaco, monospace;
1675 font-size: 12px;
1676 padding: 6px 8px;
1677 tab-size: 2;
1678}
1679.customize-control-code_editor textarea,
1680.customize-control-code_editor .CodeMirror {
1681 height: 14em;
1682}
1683
1684#customize-controls .customize-section-description-container.section-meta.customize-info {
1685 border-bottom: none;
1686}
1687
1688#sub-accordion-section-custom_css .customize-control-notifications-container {
1689 margin-bottom: 15px;
1690}
1691
1692#customize-control-custom_css textarea {
1693 display: block;
1694 height: 500px;
1695}
1696
1697.customize-section-description-container + #customize-control-custom_css .customize-control-title {
1698 margin-left: 12px;
1699}
1700
1701.customize-section-description-container + #customize-control-custom_css:last-child textarea {
1702 border-right: 0;
1703 border-left: 0;
1704 height: calc( 100vh - 185px );
1705 resize: none;
1706}
1707
1708.customize-section-description-container + #customize-control-custom_css:last-child {
1709 margin-left: -12px;
1710 width: 299px;
1711 width: calc( 100% + 24px );
1712 margin-bottom: -12px;
1713}
1714
1715.customize-section-description-container + #customize-control-custom_css:last-child .CodeMirror {
1716 height: calc( 100vh - 185px );
1717}
1718
1719.CodeMirror-lint-tooltip,
1720.CodeMirror-hints {
1721 z-index: 500000 !important;
1722}
1723
1724.customize-section-description-container + #customize-control-custom_css:last-child .customize-control-notifications-container {
1725 margin-left: 12px;
1726 margin-right: 12px;
1727}
1728
1729.theme-browser .theme.active .theme-actions,
1730.wp-customizer .theme-browser .theme .theme-actions {
1731 padding: 9px 15px;
1732 box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
1733}
1734
1735@media screen and (max-width: 640px) {
1736 .customize-section-description-container + #customize-control-custom_css:last-child {
1737 margin-right: 0;
1738 }
1739
1740 .customize-section-description-container + #customize-control-custom_css:last-child textarea {
1741 height: calc( 100vh - 140px );
1742 }
1743}
1744
1745/**
1746 * Themes
1747 */
1748
1749#customize-theme-controls .control-panel-themes {
1750 border-bottom: none;
1751}
1752
1753#customize-theme-controls .control-panel-themes > .accordion-section-title:hover, /* Not a focusable element. */
1754#customize-theme-controls .control-panel-themes > .accordion-section-title {
1755 cursor: default;
1756 background: #fff;
1757 color: #50575e;
1758 border-top: 1px solid #dcdcde;
1759 border-bottom: 1px solid #dcdcde;
1760 border-left: none;
1761 border-right: none;
1762 margin: 0 0 15px;
1763 padding: 12px 100px 15px 15px; /* Space for the button */
1764}
1765
1766#customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child:hover, /* Not a focusable element. */
1767#customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child {
1768 border-top: 0;
1769}
1770
1771#customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */
1772#customize-theme-controls .control-section-themes > .accordion-section-title {
1773 margin: 0 0 15px;
1774}
1775
1776#customize-controls .customize-themes-panel .accordion-section-title:hover,
1777#customize-controls .customize-themes-panel .accordion-section-title {
1778 margin: 15px -8px;
1779}
1780
1781#customize-controls .control-section-themes .accordion-section-title,
1782#customize-controls .customize-themes-panel .accordion-section-title {
1783 padding-right: 100px; /* Space for the button */
1784}
1785
1786.control-panel-themes .accordion-section-title span.customize-action,
1787#customize-controls .customize-section-title span.customize-action,
1788#customize-controls .control-section-themes .accordion-section-title span.customize-action,
1789#customize-controls .customize-section-title span.customize-action {
1790 font-size: 13px;
1791 display: block;
1792 font-weight: 400;
1793}
1794
1795#customize-theme-controls .control-panel-themes .accordion-section-title .change-theme {
1796 position: absolute;
1797 right: 10px;
1798 top: 50%;
1799 margin-top: -14px;
1800 font-weight: 400;
1801}
1802
1803#customize-notifications-area .notification-message button.switch-to-editor {
1804 display: block;
1805 margin-top: 6px;
1806 font-weight: 400;
1807}
1808
1809#customize-theme-controls .control-panel-themes > .accordion-section-title:after {
1810 display: none;
1811}
1812
1813.control-panel-themes .customize-themes-full-container {
1814 position: fixed;
1815 top: 0;
1816 left: 0;
1817 transition: .18s left ease-in-out;
1818 margin: 0 0 0 300px;
1819 padding: 71px 0 25px;
1820 overflow-y: scroll;
1821 width: calc(100% - 300px);
1822 height: calc(100% - 96px);
1823 background: #f0f0f1;
1824 z-index: 20;
1825}
1826
1827@media (prefers-reduced-motion: reduce) {
1828 .control-panel-themes .customize-themes-full-container {
1829 transition: none;
1830 }
1831}
1832
1833@media screen and (min-width: 1670px) {
1834 .control-panel-themes .customize-themes-full-container {
1835 width: 82%;
1836 right: 0;
1837 left: initial;
1838 }
1839}
1840
1841.modal-open .control-panel-themes .customize-themes-full-container {
1842 overflow-y: visible;
1843}
1844
1845/* Animations for opening the themes panel */
1846#customize-save-button-wrapper,
1847#customize-header-actions .spinner,
1848#customize-header-actions .customize-controls-preview-toggle {
1849 transition: .18s margin ease-in-out;
1850}
1851
1852#customize-footer-actions,
1853#customize-footer-actions .collapse-sidebar {
1854 bottom: 0;
1855 transition: .18s bottom ease-in-out;
1856}
1857
1858.in-themes-panel:not(.animating) #customize-header-actions .spinner,
1859.in-themes-panel:not(.animating) #customize-header-actions .customize-controls-preview-toggle,
1860.in-themes-panel:not(.animating) #customize-preview,
1861.in-themes-panel:not(.animating) #customize-footer-actions {
1862 visibility: hidden;
1863}
1864
1865.wp-full-overlay.in-themes-panel {
1866 background: #f0f0f1; /* Prevents a black flash when fading in the panel */
1867}
1868
1869.in-themes-panel #customize-save-button-wrapper,
1870.in-themes-panel #customize-header-actions .spinner,
1871.in-themes-panel #customize-header-actions .customize-controls-preview-toggle {
1872 margin-top: -46px; /* Height of header actions bar */
1873}
1874
1875.in-themes-panel #customize-footer-actions,
1876.in-themes-panel #customize-footer-actions .collapse-sidebar {
1877 bottom: -45px;
1878}
1879
1880/* Don't show the theme count while the panel opens, as it's in the wrong place during the animation */
1881.in-themes-panel.animating .control-panel-themes .filter-themes-count {
1882 display: none;
1883}
1884
1885.in-themes-panel.wp-full-overlay .wp-full-overlay-sidebar-content {
1886 bottom: 0;
1887}
1888
1889.themes-filter-bar .feature-filter-toggle:before {
1890 content: "\f111";
1891 content: "\f111" / '';
1892 margin: 0 5px 0 0;
1893 font: normal 16px/1 dashicons;
1894 vertical-align: text-bottom;
1895 -webkit-font-smoothing: antialiased;
1896 -moz-osx-font-smoothing: grayscale;
1897}
1898
1899.themes-filter-bar .feature-filter-toggle.open {
1900 background: #f0f0f1;
1901 border-color: #8c8f94;
1902 box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
1903}
1904
1905.themes-filter-bar .feature-filter-toggle .filter-count-filters {
1906 display: none;
1907}
1908
1909.filter-drawer {
1910 box-sizing: border-box;
1911 width: 100%;
1912 position: absolute;
1913 top: 46px;
1914 left: 0;
1915 padding: 25px 0 25px 25px;
1916 border-top: 0;
1917 margin: 0;
1918 background: #f0f0f1;
1919 border-bottom: 1px solid #dcdcde;
1920}
1921
1922.filter-drawer .filter-group {
1923 margin: 0 25px 0 0;
1924 width: calc( (100% - 75px) / 3);
1925 min-width: 200px;
1926 max-width: 320px;
1927}
1928
1929/* Adds a delay before fading in to avoid it "jumping" */
1930@keyframes themes-fade-in {
1931 0% {
1932 opacity: 0;
1933 }
1934 50% {
1935 opacity: 0;
1936 }
1937 100% {
1938 opacity: 1;
1939 }
1940}
1941
1942.control-panel-themes .customize-themes-full-container.animate {
1943 animation: .6s themes-fade-in 1;
1944}
1945
1946.in-themes-panel:not(.animating) .control-panel-themes .filter-themes-count {
1947 animation: .6s themes-fade-in 1;
1948}
1949
1950.control-panel-themes .filter-themes-count .themes-displayed {
1951 font-weight: 600;
1952 color: #50575e;
1953}
1954
1955.customize-themes-notifications {
1956 margin: 0;
1957}
1958
1959.control-panel-themes .customize-themes-notifications .notice {
1960 margin: 0 0 25px;
1961}
1962
1963.customize-themes-full-container .customize-themes-section {
1964 display: none !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
1965 overflow: hidden;
1966}
1967
1968.customize-themes-full-container .customize-themes-section.current-section {
1969 display: list-item !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
1970}
1971
1972.control-section .customize-section-text-before {
1973 padding: 0 0 8px 15px;
1974 margin: 15px 0 0;
1975 line-height: 16px;
1976 border-bottom: 1px solid #dcdcde;
1977 color: #50575e;
1978}
1979
1980.control-panel-themes .customize-themes-section-title {
1981 width: 100%;
1982 background: #fff;
1983 box-shadow: none;
1984 outline: none;
1985 border-top: none;
1986 border-bottom: 1px solid #dcdcde;
1987 border-left: 4px solid #fff;
1988 border-right: none;
1989 cursor: pointer;
1990 padding: 10px 15px;
1991 position: relative;
1992 text-align: left;
1993 font-size: 14px;
1994 font-weight: 600;
1995 color: #50575e;
1996 text-shadow: none;
1997}
1998
1999.control-panel-themes #accordion-section-installed_themes {
2000 border-top: 1px solid #dcdcde;
2001}
2002
2003.control-panel-themes .theme-section {
2004 margin: 0;
2005 position: relative;
2006}
2007
2008.control-panel-themes .customize-themes-section-title:focus,
2009.control-panel-themes .customize-themes-section-title:hover {
2010 border-left-color: #2271b1;
2011 color: #2271b1;
2012 background: #f6f7f7;
2013}
2014
2015.customize-themes-section-title:not(.selected):after {
2016 content: "";
2017 display: block;
2018 position: absolute;
2019 top: 9px;
2020 right: 15px;
2021 width: 18px;
2022 height: 18px;
2023 border-radius: 100%;
2024 border: 1px solid #c3c4c7;
2025 background: #fff;
2026}
2027
2028.control-panel-themes .theme-section .customize-themes-section-title.selected:after {
2029 content: "\f147";
2030 content: "\f147" / '';
2031 font: 16px/1 dashicons;
2032 box-sizing: border-box;
2033 width: 20px;
2034 height: 20px;
2035 padding: 3px 3px 1px 1px; /* Re-align the icon to the smaller grid */
2036 border-radius: 100%;
2037 position: absolute;
2038 top: 9px;
2039 right: 15px;
2040 background: #2271b1;
2041 color: #fff;
2042}
2043
2044.control-panel-themes .customize-themes-section-title.selected {
2045 color: #2271b1;
2046}
2047
2048#customize-theme-controls .themes.accordion-section-content {
2049 position: relative;
2050 left: 0;
2051 padding: 0;
2052 width: 100%;
2053}
2054
2055.loading .customize-themes-section .spinner {
2056 display: block;
2057 visibility: visible;
2058 position: relative;
2059 clear: both;
2060 width: 20px;
2061 height: 20px;
2062 left: calc(50% - 10px);
2063 float: none;
2064 margin-top: 50px;
2065}
2066
2067.customize-themes-section .no-themes,
2068.customize-themes-section .no-themes-local {
2069 display: none;
2070}
2071
2072.themes-section-installed_themes .theme .notice-success:not(.updated-message) {
2073 display: none; /* Hide "installed" notice on installed themes tab. */
2074}
2075
2076.customize-control-theme .theme {
2077 width: 100%;
2078 margin: 0;
2079 border: 1px solid #dcdcde;
2080 background: #fff;
2081}
2082
2083.customize-control-theme .theme .theme-name, .customize-control-theme .theme .theme-actions {
2084 background: #fff;
2085 border: none;
2086}
2087
2088.customize-control.customize-control-theme { /* override most properties on .customize-control */
2089 box-sizing: border-box;
2090 width: 25%;
2091 max-width: 600px; /* Max. screenshot size / 2 */
2092 margin: 0 25px 25px 0;
2093 padding: 0;
2094 clear: none;
2095}
2096
2097/* 5 columns above 2100px */
2098@media screen and (min-width: 2101px) {
2099 .customize-control.customize-control-theme {
2100 width: calc( ( 100% - 125px ) / 5 - 1px ); /* 1px offset accounts for browser rounding, typical all grids */
2101 }
2102}
2103
2104/* 4 columns up to 2100px */
2105@media screen and (min-width: 1601px) and (max-width: 2100px) {
2106 .customize-control.customize-control-theme {
2107 width: calc( ( 100% - 100px ) / 4 - 1px );
2108 }
2109}
2110
2111/* 3 columns up to 1600px */
2112@media screen and (min-width: 1201px) and (max-width: 1600px) {
2113 .customize-control.customize-control-theme {
2114 width: calc( ( 100% - 75px ) / 3 - 1px );
2115 }
2116}
2117
2118/* 2 columns up to 1200px */
2119@media screen and (min-width: 851px) and (max-width: 1200px) {
2120 .customize-control.customize-control-theme {
2121 width: calc( ( 100% - 50px ) / 2 - 1px );
2122
2123 }
2124}
2125
2126/* 1 column up to 850 px */
2127@media screen and (max-width: 850px) {
2128 .customize-control.customize-control-theme {
2129 width: 100%;
2130 }
2131}
2132
2133.wp-customizer .theme-browser .themes {
2134 padding: 0 0 25px 25px;
2135 transition: .18s margin-top linear;
2136}
2137
2138.wp-customizer .theme-browser .theme .theme-actions {
2139 opacity: 1;
2140}
2141
2142#customize-controls h3.theme-name {
2143 font-size: 15px;
2144}
2145
2146#customize-controls .theme-overlay .theme-name {
2147 font-size: 32px;
2148}
2149
2150.customize-preview-header.themes-filter-bar {
2151 position: fixed;
2152 top: 0;
2153 left: 300px;
2154 width: calc(100% - 300px);
2155 height: 46px;
2156 background: #f0f0f1;
2157 z-index: 10;
2158 padding: 6px 25px;
2159 box-sizing: border-box;
2160 border-bottom: 1px solid #dcdcde;
2161}
2162.customize-preview-header.themes-filter-bar,
2163.customize-preview-header.themes-filter-bar .search-form {
2164 display: flex;
2165 align-items: center;
2166 gap: 10px;
2167 flex-wrap: wrap;
2168}
2169
2170.customize-preview-header.themes-filter-bar .search-form-input {
2171 position: relative;
2172}
2173
2174.customize-preview-header .filter-themes-wrapper {
2175 display: grid;
2176 align-items: center;
2177 gap: 10px;
2178 grid-template-columns: auto 1fr;
2179}
2180
2181.customize-preview-header .filter-themes-wrapper .filter-themes-count {
2182 justify-self: end;
2183}
2184
2185@media screen and (min-width: 1670px) {
2186 .customize-preview-header.themes-filter-bar {
2187 width: 82%;
2188 right: 0;
2189 left: initial;
2190 }
2191}
2192
2193.themes-filter-bar .themes-filter-container {
2194 margin: 0;
2195 padding: 0;
2196 display: flex;
2197 align-items: center;
2198 gap: 10px;
2199}
2200
2201.themes-filter-bar .wp-filter-search {
2202 line-height: 1.8;
2203 padding: 6px 10px 6px 30px;
2204 max-width: 100%;
2205 width: 40%;
2206 min-width: 300px;
2207 height: 32px;
2208 margin: 1px 0;
2209 top: 0;
2210 left: 0;
2211}
2212
2213/* Unstick the filter bar on short windows/screens. This breakpoint is based on the
2214 current length of .org feature filters assuming translations do not wrap lines. */
2215@media screen and (max-height: 540px), screen and (max-width: 1018px) {
2216 .customize-preview-header.themes-filter-bar {
2217 position: relative;
2218 left: 0;
2219 width: 100%;
2220 margin: 0 0 25px;
2221 }
2222 .filter-drawer {
2223 top: 46px;
2224 }
2225 .wp-customizer .theme-browser .themes {
2226 padding: 0 0 25px 25px;
2227 overflow: hidden;
2228 }
2229
2230 .control-panel-themes .customize-themes-full-container {
2231 margin-top: 0;
2232 padding: 0;
2233 height: 100%;
2234 width: calc(100% - 300px);
2235 }
2236}
2237
2238@media screen and (max-width: 1018px) {
2239 .filter-drawer .filter-group {
2240 width: calc( (100% - 50px) / 2);
2241 }
2242}
2243
2244@media screen and (max-width: 960px) {
2245 .customize-preview-header.themes-filter-bar {
2246 height: 96px;
2247 }
2248}
2249
2250@media screen and (max-width: 900px) {
2251 .themes-filter-bar .wp-filter-search {
2252 width: 100%;
2253 margin: 0;
2254 min-width: 200px;
2255 }
2256
2257 .customize-preview-header.themes-filter-bar,
2258 .customize-preview-header.themes-filter-bar .search-form
2259 .themes-filter-bar .themes-filter-container {
2260 display: grid;
2261 gap: 4px;
2262 }
2263
2264 .customize-preview-header.themes-filter-bar .search-form-input {
2265 display: flex;
2266 flex-grow: 1;
2267 }
2268
2269 .filter-drawer {
2270 top: 86px;
2271 }
2272
2273 .control-panel-themes .filter-themes-count {
2274 float: left;
2275 }
2276}
2277
2278@media screen and (max-width: 792px) {
2279 .filter-drawer .filter-group {
2280 width: calc( 100% - 25px);
2281 }
2282}
2283
2284.control-panel-themes .customize-themes-mobile-back {
2285 display: none;
2286}
2287
2288/* Mobile - toggle between themes and filters */
2289@media screen and (max-width: 600px) {
2290
2291 .filter-drawer {
2292 top: 132px;
2293 }
2294
2295 .wp-full-overlay.showing-themes .control-panel-themes .filter-themes-count .filter-themes {
2296 display: block;
2297 float: right;
2298 }
2299
2300 .control-panel-themes .customize-themes-full-container {
2301 width: 100%;
2302 margin: 0;
2303 padding-top: 46px;
2304 height: calc(100% - 46px);
2305 z-index: 1;
2306 display: none;
2307 }
2308
2309 .showing-themes .control-panel-themes .customize-themes-full-container {
2310 display: block;
2311 }
2312
2313 .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back {
2314 display: block;
2315 position: fixed;
2316 top: 0;
2317 left: 0;
2318 background: #f0f0f1;
2319 color: #3c434a;
2320 border-radius: 0;
2321 box-shadow: none;
2322 border: none;
2323 height: 46px;
2324 width: 100%;
2325 z-index: 10;
2326 text-align: left;
2327 text-shadow: none;
2328 border-bottom: 1px solid #dcdcde;
2329 border-left: 4px solid transparent;
2330 margin: 0;
2331 padding: 0;
2332 font-size: 0;
2333 overflow: hidden;
2334 }
2335
2336 .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:before {
2337 left: 0;
2338 top: 0;
2339 height: 46px;
2340 width: 26px;
2341 display: block;
2342 line-height: 2.3;
2343 padding: 0 8px;
2344 border-right: 1px solid #dcdcde;
2345 }
2346
2347 .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:hover,
2348 .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:focus {
2349 color: #2271b1;
2350 background: #f6f7f7;
2351 border-left-color: #2271b1;
2352 box-shadow: none;
2353 /* Only visible in Windows High Contrast mode */
2354 outline: 2px solid transparent;
2355 outline-offset: -2px;
2356 }
2357
2358 .showing-themes #customize-header-actions {
2359 display: none;
2360 }
2361
2362 #customize-controls {
2363 width: 100%;
2364 }
2365}
2366
2367/* Details View */
2368.wp-customizer .theme-overlay {
2369 display: none;
2370}
2371
2372.wp-customizer.modal-open .theme-overlay {
2373 position: fixed;
2374 left: 0;
2375 top: 0;
2376 right: 0;
2377 bottom: 0;
2378 z-index: 109;
2379}
2380
2381/* Avoid a z-index war by resetting elements that should be under the overlay.
2382 This is likely required because of the way that sections and panels are positioned. */
2383.wp-customizer.modal-open #customize-header-actions,
2384.wp-customizer.modal-open .control-panel-themes .filter-themes-count,
2385.wp-customizer.modal-open .control-panel-themes .customize-themes-section-title.selected:after {
2386 z-index: -1;
2387}
2388
2389.wp-full-overlay.in-themes-panel.themes-panel-expanded #customize-controls .wp-full-overlay-sidebar-content {
2390 overflow: visible;
2391}
2392
2393.wp-customizer .theme-overlay .theme-backdrop {
2394 background: rgba(240, 240, 241, 0.75);
2395 position: fixed;
2396 z-index: 110;
2397}
2398
2399.wp-customizer .theme-overlay .star-rating {
2400 float: left;
2401 margin-right: 8px;
2402}
2403
2404.wp-customizer .theme-rating .num-ratings {
2405 line-height: 20px;
2406}
2407
2408.wp-customizer .theme-overlay .theme-wrap {
2409 left: 90px;
2410 right: 90px;
2411 top: 45px;
2412 bottom: 45px;
2413 z-index: 120;
2414}
2415
2416.wp-customizer .theme-overlay .theme-actions {
2417 text-align: right; /* Because there're only one or two actions, match the UI pattern of media modals and right-align the action. */
2418 padding: 10px 25px 5px;
2419 background: #f0f0f1;
2420 border-top: 1px solid #dcdcde;
2421}
2422
2423.wp-customizer .theme-overlay .theme-actions .theme-install.preview {
2424 margin-left: 8px;
2425}
2426
2427.modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
2428 overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
2429}
2430
2431.wp-customizer .theme-header {
2432 background: #f0f0f1;
2433}
2434
2435.wp-customizer .theme-overlay .theme-header button,
2436.wp-customizer .theme-overlay .theme-header .close:before {
2437 color: #3c434a;
2438}
2439
2440.wp-customizer .theme-overlay .theme-header .close:focus,
2441.wp-customizer .theme-overlay .theme-header .close:hover,
2442.wp-customizer .theme-overlay .theme-header .right:focus,
2443.wp-customizer .theme-overlay .theme-header .right:hover,
2444.wp-customizer .theme-overlay .theme-header .left:focus,
2445.wp-customizer .theme-overlay .theme-header .left:hover {
2446 background: #fff;
2447 border-bottom: 4px solid #2271b1;
2448 color: #2271b1;
2449}
2450
2451.wp-customizer .theme-overlay .theme-header .close:focus:before,
2452.wp-customizer .theme-overlay .theme-header .close:hover:before {
2453 color: #2271b1;
2454}
2455
2456.wp-customizer .theme-overlay .theme-header button.disabled,
2457.wp-customizer .theme-overlay .theme-header button.disabled:hover,
2458.wp-customizer .theme-overlay .theme-header button.disabled:focus {
2459 border-bottom: none;
2460 background: transparent;
2461 color: #c3c4c7;
2462}
2463
2464/* Small Screens */
2465@media (max-width: 850px), (max-height: 472px) {
2466 .wp-customizer .theme-overlay .theme-wrap {
2467 left: 0;
2468 right: 0;
2469 top: 0;
2470 bottom: 0;
2471 }
2472
2473 .wp-customizer .theme-browser .themes {
2474 padding-right: 25px;
2475 }
2476}
2477
2478/* Handle cheaters. */
2479body.cheatin {
2480 font-size: medium;
2481 height: auto;
2482 background: #fff;
2483 border: 1px solid #c3c4c7;
2484 margin: 50px auto 2em;
2485 padding: 1em 2em;
2486 max-width: 700px;
2487 min-width: 0;
2488 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
2489}
2490
2491body.cheatin h1 {
2492 border-bottom: 1px solid #dcdcde;
2493 clear: both;
2494 color: #50575e;
2495 font-size: 24px;
2496 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2497 margin: 30px 0 0;
2498 padding: 0 0 7px;
2499}
2500
2501body.cheatin p {
2502 font-size: 14px;
2503 line-height: 1.5;
2504 margin: 25px 0 20px;
2505}
2506
2507/**
2508 * Widgets and Menus common styles
2509 */
2510
2511/* higher specificity than .wp-core-ui .button */
2512#customize-theme-controls .add-new-widget,
2513#customize-theme-controls .add-new-menu-item {
2514 cursor: pointer;
2515 float: right;
2516 margin: 0 0 0 10px;
2517 transition: all 0.2s;
2518 -webkit-user-select: none;
2519 user-select: none;
2520 outline: none;
2521}
2522
2523.reordering .add-new-widget,
2524.reordering .add-new-menu-item {
2525 opacity: 0.2;
2526 pointer-events: none;
2527 cursor: not-allowed; /* doesn't work in conjunction with pointer-events */
2528}
2529
2530.add-new-widget:before,
2531.add-new-menu-item:before,
2532#available-menu-items .new-content-item .add-content:before {
2533 content: "\f132";
2534 content: "\f132" / '';
2535 display: inline-block;
2536 position: relative;
2537 left: -2px;
2538 top: 0;
2539 font: normal 20px/1 dashicons;
2540 vertical-align: middle;
2541 transition: all 0.2s;
2542 -webkit-font-smoothing: antialiased;
2543 -moz-osx-font-smoothing: grayscale;
2544}
2545
2546/* Reordering */
2547.reorder-toggle {
2548 float: right;
2549 padding: 5px 8px;
2550 text-decoration: none;
2551 cursor: pointer;
2552 outline: none;
2553}
2554
2555.reorder,
2556.reordering .reorder-done {
2557 display: block;
2558 padding: 5px 8px;
2559}
2560
2561.reorder-done,
2562.reordering .reorder {
2563 display: none;
2564}
2565
2566.widget-reorder-nav span,
2567.menu-item-reorder-nav button {
2568 position: relative;
2569 overflow: hidden;
2570 float: left;
2571 display: block;
2572 width: 33px; /* was 42px for mobile */
2573 height: 43px;
2574 color: #8c8f94;
2575 text-indent: -9999px;
2576 cursor: pointer;
2577 outline: none;
2578}
2579
2580.menu-item-reorder-nav button {
2581 width: 30px;
2582 height: 40px;
2583 background: transparent;
2584 border: none;
2585 box-shadow: none;
2586}
2587
2588.widget-reorder-nav span:before,
2589.menu-item-reorder-nav button:before {
2590 display: inline-block;
2591 position: absolute;
2592 top: 0;
2593 right: 0;
2594 width: 100%;
2595 height: 100%;
2596 font: normal 20px/43px dashicons;
2597 text-align: center;
2598 text-indent: 0;
2599 -webkit-font-smoothing: antialiased;
2600 -moz-osx-font-smoothing: grayscale;
2601}
2602
2603.widget-reorder-nav span:hover,
2604.widget-reorder-nav span:focus,
2605.menu-item-reorder-nav button:hover,
2606.menu-item-reorder-nav button:focus {
2607 color: #1d2327;
2608 background: #f0f0f1;
2609}
2610
2611.move-widget-down:before,
2612.menus-move-down:before {
2613 content: "\f347";
2614 content: "\f347" / '';
2615}
2616
2617.move-widget-up:before,
2618.menus-move-up:before {
2619 content: "\f343";
2620 content: "\f343" / '';
2621}
2622
2623#customize-theme-controls .first-widget .move-widget-up,
2624#customize-theme-controls .last-widget .move-widget-down,
2625.move-up-disabled .menus-move-up,
2626.move-down-disabled .menus-move-down,
2627.move-right-disabled .menus-move-right,
2628.move-left-disabled .menus-move-left {
2629 color: #dcdcde;
2630 background-color: #fff;
2631 cursor: default;
2632 pointer-events: none;
2633}
2634
2635/**
2636 * New widget and Add-menu-items modes and panels
2637 */
2638
2639.wp-full-overlay-main {
2640 right: auto; /* this overrides a right: 0; which causes the preview to resize, I'd rather have it go off screen at the normal size. */
2641 width: 100%;
2642}
2643
2644body.adding-widget .add-new-widget,
2645body.adding-widget .add-new-widget:hover,
2646.adding-menu-items .add-new-menu-item,
2647.adding-menu-items .add-new-menu-item:hover,
2648.add-menu-toggle.open,
2649.add-menu-toggle.open:hover {
2650 background: #f0f0f1;
2651 border-color: #8c8f94;
2652 color: #2c3338;
2653 box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
2654}
2655
2656body.adding-widget .add-new-widget:before,
2657.adding-menu-items .add-new-menu-item:before,
2658#accordion-section-add_menu .add-new-menu-item.open:before {
2659 transform: rotate(45deg);
2660}
2661
2662#available-widgets,
2663#available-menu-items {
2664 position: absolute;
2665 top: 0;
2666 bottom: 0;
2667 left: -301px;
2668 visibility: hidden;
2669 overflow-x: hidden;
2670 overflow-y: auto;
2671 width: 300px;
2672 margin: 0;
2673 z-index: 4;
2674 background: #f0f0f1;
2675 transition: left .18s;
2676 border-right: 1px solid #dcdcde;
2677}
2678
2679#available-widgets .customize-section-title,
2680#available-menu-items .customize-section-title {
2681 border: 0;
2682 clip-path: inset(50%);
2683 height: 1px;
2684 margin: -1px;
2685 overflow: hidden;
2686 padding: 0;
2687 position: absolute;
2688 width: 1px;
2689 word-wrap: normal !important;
2690}
2691
2692#available-widgets .customize-section-title button,
2693#available-menu-items .customize-section-title button {
2694 display: none;
2695}
2696
2697#available-widgets-list {
2698 top: 82px;
2699 position: absolute;
2700 overflow: auto;
2701 bottom: 0;
2702 width: 100%;
2703 border-top: 1px solid #dcdcde;
2704}
2705
2706.no-widgets-found #available-widgets-list {
2707 border-top: none;
2708}
2709
2710#available-widgets-filter {
2711 position: fixed;
2712 top: 0;
2713 z-index: 1;
2714 width: 300px;
2715 background: #f0f0f1;
2716}
2717
2718/* search field container */
2719#available-widgets-filter,
2720#available-menu-items-search .accordion-section-title {
2721 padding: 13px 15px;
2722 box-sizing: border-box;
2723}
2724
2725#available-widgets-filter input,
2726#available-menu-items-search input {
2727 width: 100%;
2728 min-height: 32px;
2729 margin: 1px 0;
2730 padding: 0 30px;
2731}
2732
2733#available-widgets-filter input::-ms-clear,
2734#available-menu-items-search input::-ms-clear {
2735 display: none; /* remove the "x" in IE, which conflicts with the "x" icon on button.clear-results */
2736}
2737
2738#available-menu-items-search .search-icon,
2739#available-widgets-filter .search-icon {
2740 display: block;
2741 position: absolute;
2742 bottom: 15px; /* 13 container padding +1 input margin +1 input border */
2743 left: 16px;
2744 width: 30px;
2745 height: 30px;
2746 line-height: 2.1;
2747 text-align: center;
2748 color: #646970;
2749}
2750
2751#available-widgets-filter .clear-results,
2752#available-menu-items-search .accordion-section-title .clear-results {
2753 position: absolute;
2754 top: 36px; /* 13 container padding +1 input margin +1 input border */
2755 right: 16px;
2756 width: 30px;
2757 height: 30px;
2758 padding: 0;
2759 border: 0;
2760 cursor: pointer;
2761 background: none;
2762 color: #d63638;
2763 text-decoration: none;
2764 outline: 0;
2765}
2766
2767#available-widgets-filter .clear-results,
2768#available-menu-items-search .clear-results,
2769#available-menu-items-search.loading .clear-results.is-visible {
2770 display: none;
2771}
2772
2773#available-widgets-filter .clear-results.is-visible,
2774#available-menu-items-search .clear-results.is-visible {
2775 display: block;
2776}
2777
2778#available-widgets-filter .clear-results:before,
2779#available-menu-items-search .clear-results:before {
2780 content: "\f335";
2781 content: "\f335" / '';
2782 font: normal 20px/1 dashicons;
2783 vertical-align: middle;
2784 -webkit-font-smoothing: antialiased;
2785 -moz-osx-font-smoothing: grayscale;
2786}
2787
2788#available-widgets-filter .clear-results:hover,
2789#available-widgets-filter .clear-results:focus,
2790#available-menu-items-search .clear-results:hover,
2791#available-menu-items-search .clear-results:focus {
2792 color: #d63638;
2793}
2794
2795#available-widgets-filter .clear-results:focus,
2796#available-menu-items-search .clear-results:focus {
2797 box-shadow: 0 0 0 2px #2271b1;
2798 /* Only visible in Windows High Contrast mode */
2799 outline: 2px solid transparent;
2800}
2801
2802#available-menu-items-search .search-icon:after,
2803#available-widgets-filter .search-icon:after,
2804.themes-filter-bar .search-icon:after {
2805 content: "\f179";
2806 font: normal 20px/1 dashicons;
2807 vertical-align: middle;
2808 -webkit-font-smoothing: antialiased;
2809 -moz-osx-font-smoothing: grayscale;
2810}
2811
2812.themes-filter-bar .search-icon {
2813 position: absolute;
2814 top: 2px;
2815 left: 2px;
2816 z-index: 1;
2817 color: #646970;
2818 height: 30px;
2819 width: 30px;
2820 line-height: 2;
2821 text-align: center;
2822}
2823
2824.no-widgets-found-message {
2825 display: none;
2826 margin: 0;
2827 padding: 0 15px;
2828 line-height: inherit;
2829}
2830
2831.no-widgets-found .no-widgets-found-message {
2832 display: block;
2833}
2834
2835#available-widgets .widget-top,
2836#available-widgets .widget-top:hover,
2837#available-menu-items .item-top,
2838#available-menu-items .item-top:hover {
2839 border: none;
2840 background: transparent;
2841 box-shadow: none;
2842}
2843
2844#available-widgets .widget-tpl,
2845#available-menu-items .item-tpl {
2846 position: relative;
2847 padding: 15px 15px 15px 60px;
2848 background: #fff;
2849 border-bottom: 1px solid #dcdcde;
2850 border-left: 4px solid #fff;
2851 transition:
2852 .15s color ease-in-out,
2853 .15s background-color ease-in-out,
2854 .15s border-color ease-in-out;
2855 cursor: pointer;
2856 display: none;
2857}
2858
2859#available-widgets .widget,
2860#available-menu-items .item {
2861 position: static;
2862}
2863
2864
2865/* Responsive */
2866.customize-controls-preview-toggle {
2867 display: none;
2868}
2869
2870@media only screen and (max-width: 782px) {
2871 .wp-customizer .theme:not(.active):hover .theme-actions,
2872 .wp-customizer .theme:not(.active):focus .theme-actions {
2873 display: block;
2874 }
2875
2876 .wp-customizer .theme-browser .theme.active .theme-name span {
2877 display: inline;
2878 }
2879
2880 .customize-control-header button.random .dice {
2881 margin-top: 0;
2882 }
2883
2884 .customize-control-radio .customize-inside-control-row,
2885 .customize-control-checkbox .customize-inside-control-row,
2886 .customize-control-nav_menu_auto_add .customize-inside-control-row {
2887 margin-left: 32px;
2888 }
2889
2890 .customize-control-radio input,
2891 .customize-control-checkbox input,
2892 .customize-control-nav_menu_auto_add input {
2893 margin-left: -32px;
2894 }
2895
2896 .customize-control input[type="radio"] + label + br,
2897 .customize-control input[type="checkbox"] + label + br {
2898 line-height: 2.5; /* For widgets checkboxes */
2899 }
2900
2901 .customize-control .date-time-fields select {
2902 height: 39px;
2903 }
2904
2905 .date-time-fields .date-input.month {
2906 width: 79px;
2907 }
2908
2909 .date-time-fields .date-input.day,
2910 .date-time-fields .date-input.hour,
2911 .date-time-fields .date-input.minute {
2912 width: 55px;
2913 }
2914
2915 .date-time-fields .date-input.year {
2916 width: 80px;
2917 }
2918
2919 #customize-control-changeset_preview_link a {
2920 bottom: 16px;
2921 }
2922
2923 .preview-link-wrapper .customize-copy-preview-link.preview-control-element.button {
2924 bottom: 10px;
2925 }
2926
2927 .media-widget-control .media-widget-buttons .button.edit-media,
2928 .media-widget-control .media-widget-buttons .button.change-media,
2929 .media-widget-control .media-widget-buttons .button.select-media {
2930 margin-top: 12px;
2931 }
2932
2933 .customize-preview-header.themes-filter-bar .search-icon {
2934 top: 6px;
2935 }
2936}
2937
2938@media screen and (max-width: 1200px) {
2939 .outer-section-open .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
2940 .adding-menu-items .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
2941 .adding-widget .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main {
2942 left: 67%;
2943 }
2944}
2945
2946@media screen and (max-width: 640px) {
2947
2948 /* when the sidebar is collapsed and switching to responsive view,
2949 bring it back see ticket #35220 */
2950 .wp-full-overlay.collapsed #customize-controls {
2951 margin-left: 0;
2952 }
2953
2954 .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
2955 bottom: 0;
2956 }
2957
2958 .customize-controls-preview-toggle {
2959 display: block;
2960 position: absolute;
2961 top: 0;
2962 left: 48px;
2963 line-height: 2.6;
2964 font-size: 14px;
2965 padding: 0 12px 4px;
2966 margin: 0;
2967 height: 45px;
2968 background: #f0f0f1;
2969 border: 0;
2970 border-right: 1px solid #dcdcde;
2971 border-top: 4px solid #f0f0f1;
2972 color: #50575e;
2973 cursor: pointer;
2974 transition: color .1s ease-in-out, background .1s ease-in-out;
2975 }
2976
2977 #customize-footer-actions,
2978 /*#customize-preview,*/
2979 .customize-controls-preview-toggle .controls,
2980 .preview-only .wp-full-overlay-sidebar-content,
2981 .preview-only .customize-controls-preview-toggle .preview {
2982 display: none;
2983 }
2984
2985 .preview-only #customize-save-button-wrapper {
2986 margin-top: -46px;
2987 }
2988
2989 .customize-controls-preview-toggle .preview:before,
2990 .customize-controls-preview-toggle .controls:before {
2991 font: normal 20px/1 dashicons;
2992 content: "\f177";
2993 content: "\f177" / '';
2994 position: relative;
2995 top: 4px;
2996 margin-right: 6px;
2997 }
2998
2999 .customize-controls-preview-toggle .controls:before {
3000 content: "\f540";
3001 content: "\f540" / '';
3002 }
3003
3004 .preview-only #customize-controls {
3005 height: 45px;
3006 }
3007
3008 .preview-only #customize-preview,
3009 .preview-only .customize-controls-preview-toggle .controls {
3010 display: block;
3011 }
3012
3013 .wp-core-ui.wp-customizer .button {
3014 min-height: 30px;
3015 padding: 0 14px;
3016 line-height: 2;
3017 font-size: 14px;
3018 vertical-align: middle;
3019 }
3020
3021 .customize-control .attachment-media-view .upload-button {
3022 padding: 5px 0;
3023 }
3024
3025 #customize-control-changeset_status .customize-inside-control-row {
3026 padding-top: 15px;
3027 }
3028
3029 body.adding-widget div#available-widgets,
3030 body.adding-menu-items div#available-menu-items,
3031 body.outer-section-open div#customize-sidebar-outer-content {
3032 width: 100%;
3033 }
3034
3035 #available-widgets .customize-section-title,
3036 #available-menu-items .customize-section-title {
3037 border: 0;
3038 clip-path: none;
3039 height: inherit;
3040 margin: 0;
3041 overflow: hidden;
3042 padding: 0;
3043 width: auto;
3044 position: static;
3045 }
3046
3047 #available-widgets .customize-section-title button,
3048 #available-menu-items .customize-section-title button {
3049 display: block;
3050 }
3051
3052 #available-widgets .customize-section-back,
3053 #available-menu-items .customize-section-back {
3054 height: 69px;
3055 }
3056
3057 #available-widgets .customize-section-title h3,
3058 #available-menu-items .customize-section-title h3 {
3059 font-size: 20px;
3060 font-weight: 200;
3061 padding: 9px 10px 12px 14px;
3062 margin: 0;
3063 line-height: 24px;
3064 color: #50575e;
3065 display: block;
3066 overflow: hidden;
3067 white-space: nowrap;
3068 text-overflow: ellipsis;
3069 }
3070
3071 #available-widgets .customize-section-title .customize-action,
3072 #available-menu-items .customize-section-title .customize-action {
3073 font-size: 13px;
3074 display: block;
3075 font-weight: 400;
3076 overflow: hidden;
3077 white-space: nowrap;
3078 text-overflow: ellipsis;
3079 }
3080
3081 #available-widgets-filter {
3082 position: relative;
3083 width: 100%;
3084 height: auto;
3085 }
3086
3087 #available-widgets-list {
3088 top: 152px;
3089 }
3090
3091 #available-menu-items-search .clear-results {
3092 top: 36px;
3093 right: 16px;
3094 }
3095
3096 .reorder,
3097 .reordering .reorder-done {
3098 padding: 8px;
3099 }
3100}
3101
3102@media screen and (max-width: 600px) {
3103 .wp-full-overlay.expanded {
3104 margin-left: 0;
3105 }
3106
3107 body.adding-widget div#available-widgets,
3108 body.adding-menu-items div#available-menu-items,
3109 body.outer-section-open div#customize-sidebar-outer-content {
3110 top: 46px;
3111 z-index: 10;
3112 }
3113
3114 body.wp-customizer .wp-full-overlay.expanded #customize-sidebar-outer-content {
3115 left: -100%;
3116 }
3117
3118 body.wp-customizer.outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content {
3119 left: 0;
3120 }
3121}
3122