3 -webkit-text-size-adjust: 100%;
6 #customize-controls a {
10 #customize-controls h3 {
14 #customize-controls img {
18 #customize-controls .submit {
22 #customize-controls .description {
26 #customize-header-actions .button-primary {
31 #customize-header-actions .spinner {
36 .saving #customize-header-actions .spinner {
40 #customize-header-actions {
41 border-bottom: 1px solid #ddd;
44 #customize-controls .wp-full-overlay-sidebar-content {
49 #customize-controls .customize-info {
51 border-top: 1px solid #ddd;
52 border-bottom: 1px solid #ddd;
56 #customize-controls .customize-info .accordion-section-title {
65 #customize-controls .customize-info.open .accordion-section-title:after,
66 #customize-controls .customize-info .accordion-section-title:hover:after,
67 #customize-controls .customize-info .accordion-section-title:focus:after {
71 #customize-controls .customize-info .accordion-section-title:after {
75 #customize-controls .customize-info .preview-notice {
80 #customize-controls .control-section .customize-section-title h3,
81 #customize-controls .control-section h3.customize-section-title,
82 #customize-controls .customize-info .panel-title {
89 text-overflow: ellipsis;
92 #customize-controls .customize-section-title span.customize-action {
95 text-overflow: ellipsis;
98 #customize-controls .customize-info .customize-help-toggle {
102 padding: 20px 10px 10px 20px;
106 -webkit-box-shadow: none;
108 -webkit-appearance: none;
109 background: transparent;
114 #customize-controls .customize-info .customize-help-toggle:before {
120 #customize-controls .customize-info.open .customize-help-toggle,
121 #customize-controls .customize-info .customize-help-toggle:focus,
122 #customize-controls .customize-info .customize-help-toggle:hover {
126 #customize-controls .customize-info .customize-panel-description,
127 #customize-controls .no-widget-areas-rendered-notice {
132 border-top: 1px solid #ddd;
134 #customize-controls .customize-info .customize-panel-description.open + .no-widget-areas-rendered-notice {
138 #customize-controls .customize-info .customize-panel-description p:first-child {
142 #customize-controls .customize-info .customize-panel-description p:last-child {
146 #customize-controls .current-panel .control-section > h3.accordion-section-title {
150 #customize-theme-controls .control-section {
154 #customize-theme-controls .accordion-section-title {
156 background-color: #fff;
157 border-bottom: 1px solid #eee;
160 #customize-theme-controls .accordion-section-title:after {
164 #customize-theme-controls .accordion-section-content {
166 background: transparent;
169 #customize-controls .control-section:hover > .accordion-section-title,
170 #customize-controls .control-section .accordion-section-title:hover,
171 #customize-controls .control-section.open .accordion-section-title,
172 #customize-controls .control-section .accordion-section-title:focus {
177 .js .control-section:hover .accordion-section-title,
178 .js .control-section .accordion-section-title:hover,
179 .js .control-section.open .accordion-section-title,
180 .js .control-section .accordion-section-title:focus {
184 #customize-theme-controls .control-section:hover > .accordion-section-title:after,
185 #customize-theme-controls .control-section .accordion-section-title:hover:after,
186 #customize-theme-controls .control-section.open .accordion-section-title:after,
187 #customize-theme-controls .control-section .accordion-section-title:focus:after {
191 #customize-theme-controls .control-section.open {
192 border-bottom: 1px solid #eee;
195 #customize-theme-controls .control-section.open .accordion-section-title {
196 border-bottom-color: #eee !important;
199 #customize-theme-controls .control-section:last-of-type.open,
200 #customize-theme-controls .control-section:last-of-type > .accordion-section-title {
201 border-bottom-color: #ddd;
204 #customize-theme-controls > ul {
208 #customize-theme-controls .accordion-section-content {
215 -webkit-box-sizing: border-box;
216 -moz-box-sizing: border-box;
217 box-sizing: border-box;
220 .customize-section-description-container {
224 .customize-section-title {
225 margin: -12px -12px 0 -12px;
226 border-bottom: 1px solid #ddd;
230 div.customize-section-description {
234 div.customize-section-description p:first-child {
238 div.customize-section-description p:last-child {
242 #customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child {
243 border-bottom: 1px solid #ddd;
244 padding: 12px 12px 12px 12px;
247 .ios #customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child {
248 padding: 12px 12px 13px 12px;
251 .customize-section-title h3,
252 h3.customize-section-title {
253 padding: 10px 14px 12px 10px;
259 #customize-theme-controls {
262 -webkit-transition: .18s right ease-in-out;
263 transition: .18s right ease-in-out;
266 .ios #customize-theme-controls {
267 -webkit-transition: right 0s;
268 transition: right 0s;
271 .section-open #customize-info,
272 .section-open #customize-theme-controls {
276 .accordion-sub-container.control-panel-content {
282 -webkit-transition: right ease-in-out .18s;
283 transition: right ease-in-out .18s;
286 .ios .accordion-sub-container.control-panel-content {
287 -webkit-transition: right 0s;
288 transition: right 0s;
291 .accordion-sub-container.control-panel-content.animating {
295 .current-panel .accordion-sub-container.control-panel-content {
299 .customize-controls-close {
309 border-left: 1px solid #ddd;
313 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
314 transition: color .1s ease-in-out, background .1s ease-in-out;
315 -webkit-box-sizing: content-box;
316 -moz-box-sizing: content-box;
317 box-sizing: content-box;
320 .customize-panel-back,
321 .customize-section-back {
330 border-left: 1px solid #ddd;
331 -webkit-box-shadow: none;
334 -webkit-transition: right .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
335 transition: right .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
338 .customize-section-back {
342 .ios .customize-panel-back,
343 .ios .customize-section-back {
344 -webkit-transition: right 0s;
345 transition: right 0s;
348 .ios .customize-panel-back {
352 .ios .expanded.in-sub-panel .customize-panel-back {
356 .panel-meta.customize-info .accordion-section-title {
360 #customize-controls .panel-meta.customize-info .accordion-section-title:hover {
365 .customize-controls-close:focus,
366 .customize-controls-close:hover,
367 .customize-controls-preview-toggle:focus,
368 .customize-controls-preview-toggle:hover {
373 -webkit-box-shadow: none;
377 .customize-panel-back:hover,
378 .customize-panel-back:focus,
379 .customize-section-back:hover,
380 .customize-section-back:focus {
384 -webkit-box-shadow: none;
388 .customize-controls-close:before {
389 font: normal 22px/45px dashicons;
396 .customize-panel-back:before,
397 .customize-section-back:before {
398 font: normal 20px/72px dashicons;
404 .wp-full-overlay-sidebar .wp-full-overlay-header {
405 -webkit-transition: padding ease-in-out .18s;
406 transition: padding ease-in-out .18s;
409 .in-sub-panel .wp-full-overlay-sidebar .wp-full-overlay-header {
414 #customize-theme-controls > ul > .accordion-section {
417 -webkit-transition: right ease-in-out .18s;
418 transition: right ease-in-out .18s;
421 .ios #customize-info,
422 .ios #customize-theme-controls > ul > .accordion-section {
423 -webkit-transition: right 0s;
424 transition: right 0s;
427 .in-sub-panel #customize-info,
428 .in-sub-panel #customize-theme-controls > ul > .accordion-section {
433 .in-sub-panel #customize-theme-controls .accordion-section.current-panel {
437 #customize-theme-controls .control-section.current-panel {
441 #customize-theme-controls .control-section > h3.accordion-section-title {
446 #customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
448 -webkit-transition: right ease-in-out .18s;
449 transition: right ease-in-out .18s;
452 .ios #customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
453 -webkit-transition: right 0s;
454 transition: right 0s;
457 .wp-full-overlay.section-open #customize-controls .wp-full-overlay-sidebar-content {
462 .wp-full-overlay.section-open .wp-full-overlay-sidebar-content .accordion-section.open {
466 .wp-full-overlay.section-open .wp-full-overlay-sidebar-content .accordion-section.open .accordion-section-content {
470 p.customize-section-description {
483 .customize-control select,
484 .customize-control input[type="radio"],
485 .customize-control input[type="checkbox"] {
489 .customize-control input[type="text"],
490 .customize-control input[type="password"],
491 .customize-control input[type="email"],
492 .customize-control input[type="number"],
493 .customize-control input[type="search"],
494 .customize-control input[type="tel"],
495 .customize-control input[type="url"] {
501 .customize-control-hidden {
505 .customize-control-textarea textarea {
510 .customize-control select {
517 .customize-control select[multiple] {
521 .customize-control-title {
529 .customize-control-description {
536 .customize-control-color .color-picker,
537 .customize-control-upload div {
541 .customize-control-radio label,
542 .customize-control-checkbox label,
543 .customize-control-nav_menu_auto_add label {
551 .customize-control-radio input,
552 .customize-control-checkbox input,
553 .customize-control-nav_menu_auto_add input {
558 .customize-control-radio {
562 .customize-control-radio .customize-control-title {
567 .customize-control-radio .customize-control-title + .customize-control-description {
571 .customize-control .attachment-thumb.type-icon {
577 .customize-control .attachment-title {
583 .customize-control .attachment-meta {
586 text-overflow: ellipsis;
591 .customize-control .attachment-meta-title {
595 .customize-control .thumbnail-image {
599 .customize-control .thumbnail-image img {
603 #customize-controls .thumbnail-audio .thumbnail {
610 #customize-preview iframe {
615 .wp-full-overlay-sidebar {
617 border-left: 1px solid #ddd;
620 /* Style for custom settings */
626 .accordion-section .dropdown {
633 .accordion-section .dropdown-content {
641 border: 2px solid #eee;
642 -webkit-user-select: none;
643 -moz-user-select: none;
644 -ms-user-select: none;
648 .customize-control .dropdown-arrow {
657 .customize-control .dropdown-arrow:after {
659 font: normal 20px/1 dashicons;
666 -webkit-font-smoothing: antialiased;
667 -moz-osx-font-smoothing: grayscale;
668 text-decoration: none !important;
672 .customize-control .dropdown-status {
680 .customize-control-color .color-picker-hex {
684 .customize-control-color.open .color-picker-hex {
688 .customize-control-color .dropdown {
693 .customize-control-color .dropdown .dropdown-content {
694 background-color: #555;
695 border: 1px solid rgba(0, 0, 0, 0.15);
698 .customize-control-color .dropdown:hover .dropdown-content {
699 border-color: rgba(0, 0, 0, 0.25);
703 * iOS can't scroll iframes,
704 * instead it expands the iframe size to match the size of the content
707 .ios .wp-full-overlay {
711 .ios #customize-preview {
715 .ios #customize-controls .wp-full-overlay-sidebar-content {
716 -webkit-overflow-scrolling: touch;
721 .customize-control-media .current,
722 .customize-control-upload .current,
723 .customize-control-image .current,
724 .customize-control-background .current,
725 .customize-control-cropped_image .current,
726 .customize-control-site_icon .current,
727 .customize-control-header .current {
731 .customize-control-header .uploaded {
735 .customize-control-header .uploaded button:not(.random),
736 .customize-control-header .default button:not(.random) {
746 .customize-control-header button img {
750 .customize-control-media .remove-button,
751 .customize-control-media .default-button,
752 .customize-control-media .upload-button,
753 .customize-control-upload .remove-button,
754 .customize-control-upload .default-button,
755 .customize-control-upload .upload-button,
756 .customize-control-image .remove-button,
757 .customize-control-image .default-button,
758 .customize-control-image .upload-button,
759 .customize-control-background .remove-button,
760 .customize-control-background .default-button,
761 .customize-control-background .upload-button,
762 .customize-control-cropped_image .remove-button,
763 .customize-control-cropped_image .default-button,
764 .customize-control-cropped_image .upload-button,
765 .customize-control-site_icon .remove-button,
766 .customize-control-site_icon .default-button,
767 .customize-control-site_icon .upload-button,
768 .customize-control-header button.new,
769 .customize-control-header button.remove {
775 .customize-control-media .current .container,
776 .customize-control-upload .current .container,
777 .customize-control-image .current .container,
778 .customize-control-background .current .container,
779 .customize-control-cropped_image .current .container,
780 .customize-control-site_icon .current .container,
781 .customize-control-header .current .container {
783 -webkit-border-radius: 2px;
784 border: 1px solid #eee;
785 -webkit-border-radius: 2px;
789 .customize-control-media .current .container,
790 .customize-control-upload .current .container,
791 .customize-control-background .current .container,
792 .customize-control-cropped_image .current .container,
793 .customize-control-site_icon .current .container,
794 .customize-control-image .current .container {
798 .customize-control-media .placeholder,
799 .customize-control-upload .placeholder,
800 .customize-control-image .placeholder,
801 .customize-control-background .placeholder,
802 .customize-control-cropped_image .placeholder,
803 .customize-control-site_icon .placeholder,
804 .customize-control-header .placeholder {
811 .customize-control-media .inner,
812 .customize-control-upload .inner,
813 .customize-control-image .inner,
814 .customize-control-background .inner,
815 .customize-control-cropped_image .inner,
816 .customize-control-site_icon .inner,
817 .customize-control-header .inner {
823 text-overflow: ellipsis;
827 .customize-control-media .inner,
828 .customize-control-upload .inner,
829 .customize-control-background .inner,
830 .customize-control-cropped_image .inner,
831 .customize-control-site_icon .inner,
832 .customize-control-image .inner {
837 .customize-control-media .inner,
838 .customize-control-upload .inner,
839 .customize-control-image .inner,
840 .customize-control-background .inner,
841 .customize-control-cropped_image .inner,
842 .customize-control-site_icon .inner,
843 .customize-control-header .inner,
844 .customize-control-header .inner .dashicons {
849 .customize-control-header .list .inner,
850 .customize-control-header .list .inner .dashicons {
854 .customize-control-header .header-view {
860 .customize-control-header .header-view:last-child {
864 /* Convoluted, but 'outline' support isn't good enough yet */
865 .customize-control-header .header-view:after {
868 .customize-control-header .header-view.selected:after {
872 top: 0; right: 0; bottom: 0; left: 0;
873 border: 4px solid #00a0d2;
874 -webkit-border-radius: 2px;
877 .customize-control-header .header-view.button.selected {
881 /* Header control: overlay "close" button */
883 .customize-control-header .uploaded .header-view .close {
887 background: rgba(0, 0, 0, 0.5);
897 .customize-control-header .header-view:hover .close,
898 .customize-control-header .header-view .close:focus {
902 /* Header control: randomiz(s)er */
904 .customize-control-header .random.placeholder {
906 -webkit-border-radius: 2px;
911 .customize-control-header button.random {
918 .customize-control-header button.random .dice {
922 .customize-control-header .placeholder:hover .dice,
923 .customize-control-header .header-view:hover > button.random .dice {
924 -webkit-animation: dice-color-change 3s infinite;
925 animation: dice-color-change 3s infinite;
928 @-webkit-keyframes dice-color-change {
929 0% { color: #d4b146; }
930 50% { color: #ef54b0; }
931 75% { color: #7190d3; }
932 100% { color: #d4b146; }
935 @keyframes dice-color-change {
936 0% { color: #d4b146; }
937 50% { color: #ef54b0; }
938 75% { color: #7190d3; }
939 100% { color: #d4b146; }
942 .customize-control-media .actions,
943 .customize-control-upload .actions,
944 .customize-control-image .actions,
945 .customize-control-background .actions,
946 .customize-control-cropped_image .actions,
947 .customize-control-site_icon .actions,
948 .customize-control-header .actions {
952 .customize-control-header .choice {
958 .customize-control-header .uploaded div:last-child > .choice {
962 .customize-control-media img,
963 .customize-control-upload img,
964 .customize-control-image img,
965 .customize-control-background img,
966 .customize-control-cropped_image img,
967 .customize-control-site_icon img,
968 .customize-control-header img {
970 -webkit-border-radius: 2px;
974 .customize-control-media .remove-button,
975 .customize-control-media .default-button,
976 .customize-control-upload .remove-button,
977 .customize-control-upload .default-button,
978 .customize-control-image .remove-button,
979 .customize-control-image .default-button,
980 .customize-control-background .remove-button,
981 .customize-control-background .default-button,
982 .customize-control-cropped_image .remove-button,
983 .customize-control-cropped_image .default-button,
984 .customize-control-site_icon .remove-button,
985 .customize-control-site_icon .default-button,
986 .customize-control-header .remove {
991 .customize-control-media .upload-button,
992 .customize-control-upload .upload-button,
993 .customize-control-image .upload-button,
994 .customize-control-background .upload-button,
995 .customize-control-cropped_image .upload-button,
996 .customize-control-site_icon .upload-button,
997 .customize-control-header .new {
1005 @-webkit-keyframes customize-reload {
1007 100% { opacity: 1; }
1010 @keyframes customize-reload {
1012 100% { opacity: 1; }
1015 /* #customize-container is reused from customize-loader.js, hence the naming. */
1016 .wp-customizer .customize-loading #customize-container {
1018 -webkit-animation: customize-reload .75s; /* Can't use `transition` because `display` changes here. */
1019 animation: customize-reload .75s;
1022 .control-section-themes .accordion-section-title {
1026 #customize-theme-controls .control-section-themes .accordion-section-title:hover,
1027 #customize-theme-controls .control-section-themes .accordion-section-title:focus {
1029 background-color: #fff;
1032 .control-section-themes .accordion-section-title {
1036 .customize-themes-panel .accordion-section-title {
1040 .control-section-themes .accordion-section-title {
1041 padding-left: 100px; /* Space for the button */
1044 .control-section-themes .accordion-section-title span.customize-action,
1045 #customize-controls .customize-section-title span.customize-action {
1051 .control-section-themes .accordion-section-title .change-theme,
1052 .control-section-themes .accordion-section-title .customize-theme {
1057 font-weight: normal;
1060 .control-section-themes .accordion-section-title:before {
1064 .customize-themes-panel {
1067 background: #f1f1f1;
1068 -webkit-box-sizing: border-box;
1069 -moz-box-sizing: border-box;
1070 box-sizing: border-box;
1073 .customize-themes-panel .accordion-section-title:first-child {
1077 #customize-controls .customize-themes-panel .accordion-section-title:nth-child(2) {
1082 .customize-themes-panel > h2 {
1083 padding: 15px 8px 0 8px;
1086 .control-section.open .customize-themes-panel {
1090 #customize-theme-controls .customize-themes-panel .accordion-section-content {
1091 background: transparent;
1095 .customize-control.customize-control-theme {
1099 #customize-theme-controls .themes.accordion-section-content {
1106 .wp-customizer .theme-browser .themes {
1107 padding-bottom: 8px;
1110 .wp-customizer .theme-browser .theme {
1115 .wp-customizer .theme-browser .theme .theme-actions {
1116 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
1120 #customize-controls h3.theme-name {
1124 #customize-controls .theme-overlay .theme-name {
1128 .wp-customizer #themes-filter {
1135 #accordion-section-themes .accordion-section-title:after {
1139 #customize-theme-controls .control-section-themes.current-panel > h3.accordion-section-title {
1143 .customize-themes-panel.control-panel-content {
1148 border-top: 1px solid #ddd;
1151 .in-themes-panel #customize-info,
1152 .in-themes-panel #customize-theme-controls > ul > .accordion-section {
1157 .wp-customizer .theme-overlay {
1161 .wp-customizer.modal-open .theme-overlay {
1170 .wp-customizer .theme-overlay .theme-backdrop {
1171 background: rgba( 238, 238, 238, 0.75 );
1176 .wp-customizer .theme-overlay .theme-wrap {
1182 max-width: 1740px; /* To ensure that theme screenshots are not displayed larger than 880px wide. */
1185 .wp-customizer .theme-overlay .theme-actions {
1186 text-align: left; /* Because there's only one action, match the pattern of media modals and right-align the action. */
1189 .modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
1190 overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
1193 .ie8 .wp-customizer .theme-overlay .theme-header,
1194 .ie8 .wp-customizer .theme-overlay .theme-about,
1195 .ie8 .wp-customizer .theme-overlay .theme-actions {
1200 @media (max-width:850px), (max-height:472px) {
1201 .wp-customizer .theme-overlay .theme-wrap {
1209 /* Handle cheaters. */
1214 margin: 50px auto 2em;
1218 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.13);
1219 box-shadow: 0 1px 3px rgba(0,0,0,0.13);
1223 border-bottom: 1px solid #dadada;
1226 font: 24px "Open Sans", sans-serif;
1229 padding-bottom: 7px;
1235 margin: 25px 0 20px;
1239 * Widgets and Menus common styles
1242 /* higher specificity than .wp-core-ui .button-secondary */
1243 #customize-theme-controls .add-new-widget,
1244 #customize-theme-controls .add-new-menu-item {
1248 -webkit-transition: all 0.2s;
1249 transition: all 0.2s;
1250 -webkit-user-select: none;
1251 -moz-user-select: none;
1252 -ms-user-select: none;
1257 .reordering .add-new-widget,
1258 .reordering .add-new-menu-item {
1260 pointer-events: none;
1261 cursor: not-allowed; /* doesn't work in conjunction with pointer-events */
1264 .add-new-widget:before,
1265 .add-new-menu-item:before {
1267 display: inline-block;
1271 font: normal 20px/1 dashicons;
1272 vertical-align: middle;
1273 -webkit-transition: all 0.2s;
1274 transition: all 0.2s;
1275 -webkit-font-smoothing: antialiased;
1276 -moz-osx-font-smoothing: grayscale;
1283 text-decoration: none;
1286 -webkit-user-select: none;
1287 -moz-user-select: none;
1288 -ms-user-select: none;
1292 .reorder-toggle:focus {
1293 outline: 1px dotted;
1297 .reordering .reorder-done {
1303 .reordering .reorder {
1308 .reorder-toggle:hover .reorder-done,
1309 .reorder-toggle:active .reorder-done,
1310 .reorder-toggle:focus .reorder-done {
1315 .customize-controls-preview-toggle {
1319 @media only screen and (max-width: 782px) {
1320 .wp-customizer .theme:not(.active):hover .theme-actions,
1321 .wp-customizer .theme:not(.active):focus .theme-actions {
1325 .wp-customizer .theme-browser .theme.active .theme-name span {
1329 .customize-control-radio label,
1330 .customize-control-checkbox label,
1331 .customize-control-nav_menu_auto_add label {
1335 .customize-control-radio input,
1336 .customize-control-checkbox input,
1337 .customize-control-nav_menu_auto_add input {
1338 margin-right: -32px;
1341 .customize-control input[type="radio"] + label,
1342 .customize-control input[type="checkbox"] + label {
1347 @media screen and ( max-width: 640px ) {
1348 #customize-controls {
1352 .wp-full-overlay.expanded {
1356 .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
1360 .customize-controls-preview-toggle {
1367 padding: 0 12px 0 12px;
1371 border-left: 1px solid #ddd;
1374 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
1375 transition: color .1s ease-in-out, background .1s ease-in-out;
1378 #customize-footer-actions,
1380 .customize-controls-preview-toggle .controls,
1381 .preview-only .wp-full-overlay-sidebar-content,
1382 .preview-only .customize-controls-preview-toggle .preview {
1386 .customize-controls-preview-toggle .preview:before,
1387 .customize-controls-preview-toggle .controls:before {
1388 font: normal 20px/1 dashicons;
1395 .customize-controls-preview-toggle .controls:before {
1399 .preview-only #customize-controls {
1403 .preview-only #customize-preview,
1404 .preview-only .customize-controls-preview-toggle .controls {
1408 #customize-preview {
1414 .wp-core-ui.wp-customizer .button {
1416 line-height: normal;
1418 vertical-align: middle;
1423 #customize-header-actions .button-primary {