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 {
165 #customize-theme-controls .accordion-section-content {
167 background: transparent;
170 #customize-controls .control-section:hover > .accordion-section-title,
171 #customize-controls .control-section .accordion-section-title:hover,
172 #customize-controls .control-section.open .accordion-section-title,
173 #customize-controls .control-section .accordion-section-title:focus {
178 .js .control-section:hover .accordion-section-title,
179 .js .control-section .accordion-section-title:hover,
180 .js .control-section.open .accordion-section-title,
181 .js .control-section .accordion-section-title:focus {
185 #customize-theme-controls .control-section:hover > .accordion-section-title:after,
186 #customize-theme-controls .control-section .accordion-section-title:hover:after,
187 #customize-theme-controls .control-section.open .accordion-section-title:after,
188 #customize-theme-controls .control-section .accordion-section-title:focus:after {
192 #customize-theme-controls .control-section.open {
193 border-bottom: 1px solid #eee;
196 #customize-theme-controls .control-section.open .accordion-section-title {
197 border-bottom-color: #eee !important;
200 #customize-theme-controls .control-section:last-of-type.open,
201 #customize-theme-controls .control-section:last-of-type > .accordion-section-title {
202 border-bottom-color: #ddd;
205 #customize-theme-controls > ul {
209 #customize-theme-controls .accordion-section-content {
216 -webkit-box-sizing: border-box;
217 -moz-box-sizing: border-box;
218 box-sizing: border-box;
221 .customize-section-description-container {
225 .customize-section-title {
226 margin: -12px -12px 0 -12px;
227 border-bottom: 1px solid #ddd;
231 div.customize-section-description {
235 div.customize-section-description p:first-child {
239 div.customize-section-description p:last-child {
243 #customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child {
244 border-bottom: 1px solid #ddd;
245 padding: 12px 12px 12px 12px;
248 .ios #customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child {
249 padding: 12px 12px 13px 12px;
252 .customize-section-title h3,
253 h3.customize-section-title {
254 padding: 10px 14px 12px 10px;
260 #customize-theme-controls {
263 -webkit-transition: .18s right ease-in-out;
264 transition: .18s right ease-in-out;
267 .ios #customize-theme-controls {
268 -webkit-transition: right 0s;
269 transition: right 0s;
272 .section-open #customize-info,
273 .section-open #customize-theme-controls {
277 .accordion-sub-container.control-panel-content {
283 -webkit-transition: right ease-in-out .18s;
284 transition: right ease-in-out .18s;
287 .ios .accordion-sub-container.control-panel-content {
288 -webkit-transition: right 0s;
289 transition: right 0s;
292 .accordion-sub-container.control-panel-content.animating {
296 .current-panel .accordion-sub-container.control-panel-content {
300 .customize-controls-close {
310 border-left: 1px solid #ddd;
314 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
315 transition: color .1s ease-in-out, background .1s ease-in-out;
316 -webkit-box-sizing: content-box;
317 -moz-box-sizing: content-box;
318 box-sizing: content-box;
321 .customize-panel-back,
322 .customize-section-back {
331 border-left: 1px solid #ddd;
332 -webkit-box-shadow: none;
335 -webkit-transition: right .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
336 transition: right .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
339 .customize-section-back {
343 .ios .customize-panel-back,
344 .ios .customize-section-back {
345 -webkit-transition: right 0s;
346 transition: right 0s;
349 .ios .customize-panel-back {
353 .ios .expanded.in-sub-panel .customize-panel-back {
357 .panel-meta.customize-info .accordion-section-title {
361 #customize-controls .panel-meta.customize-info .accordion-section-title:hover {
366 .customize-controls-close:focus,
367 .customize-controls-close:hover,
368 .customize-controls-preview-toggle:focus,
369 .customize-controls-preview-toggle:hover {
374 -webkit-box-shadow: none;
378 .customize-panel-back:hover,
379 .customize-panel-back:focus,
380 .customize-section-back:hover,
381 .customize-section-back:focus {
385 -webkit-box-shadow: none;
389 .customize-controls-close:before {
390 font: normal 22px/45px dashicons;
397 .customize-panel-back:before,
398 .customize-section-back:before {
399 font: normal 20px/72px dashicons;
405 .wp-full-overlay-sidebar .wp-full-overlay-header {
406 -webkit-transition: padding ease-in-out .18s;
407 transition: padding ease-in-out .18s;
410 .in-sub-panel .wp-full-overlay-sidebar .wp-full-overlay-header {
415 #customize-theme-controls > ul > .accordion-section {
418 -webkit-transition: right ease-in-out .18s;
419 transition: right ease-in-out .18s;
422 .ios #customize-info,
423 .ios #customize-theme-controls > ul > .accordion-section {
424 -webkit-transition: right 0s;
425 transition: right 0s;
428 .in-sub-panel #customize-info,
429 .in-sub-panel #customize-theme-controls > ul > .accordion-section {
434 .in-sub-panel #customize-theme-controls .accordion-section.current-panel {
438 #customize-theme-controls .control-section.current-panel {
442 #customize-theme-controls .control-section > h3.accordion-section-title {
447 #customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
449 -webkit-transition: right ease-in-out .18s;
450 transition: right ease-in-out .18s;
453 .ios #customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
454 -webkit-transition: right 0s;
455 transition: right 0s;
458 .wp-full-overlay.section-open #customize-controls .wp-full-overlay-sidebar-content {
463 .wp-full-overlay.section-open .wp-full-overlay-sidebar-content .accordion-section.open {
467 .wp-full-overlay.section-open .wp-full-overlay-sidebar-content .accordion-section.open .accordion-section-content {
471 p.customize-section-description {
484 .customize-control select,
485 .customize-control input[type="radio"],
486 .customize-control input[type="checkbox"] {
490 .customize-control input[type="text"],
491 .customize-control input[type="password"],
492 .customize-control input[type="email"],
493 .customize-control input[type="number"],
494 .customize-control input[type="search"],
495 .customize-control input[type="tel"],
496 .customize-control input[type="url"] {
502 .customize-control-hidden {
506 .customize-control-textarea textarea {
511 .customize-control select {
518 .customize-control select[multiple] {
522 .customize-control-title {
530 .customize-control-description {
537 .customize-control-color .color-picker,
538 .customize-control-upload div {
542 .customize-control-radio label,
543 .customize-control-checkbox label,
544 .customize-control-nav_menu_auto_add label {
552 .customize-control-radio input,
553 .customize-control-checkbox input,
554 .customize-control-nav_menu_auto_add input {
559 .customize-control-radio {
563 .customize-control-radio .customize-control-title {
568 .customize-control-radio .customize-control-title + .customize-control-description {
572 .customize-control .attachment-thumb.type-icon {
578 .customize-control .attachment-title {
584 .customize-control .attachment-meta {
587 text-overflow: ellipsis;
592 .customize-control .attachment-meta-title {
596 .customize-control .thumbnail-image {
600 .customize-control .thumbnail-image img {
604 #customize-controls .thumbnail-audio .thumbnail {
611 #customize-preview iframe {
616 #customize-preview iframe + iframe {
620 .wp-full-overlay-sidebar {
622 border-left: 1px solid #ddd;
625 /* Style for custom settings */
631 .accordion-section .dropdown {
638 .accordion-section .dropdown-content {
646 border: 2px solid #eee;
647 -webkit-user-select: none;
648 -moz-user-select: none;
649 -ms-user-select: none;
653 /* @todo maybe no more used? */
654 .customize-control .dropdown-arrow {
663 .customize-control .dropdown-arrow:after {
665 font: normal 20px/1 dashicons;
672 -webkit-font-smoothing: antialiased;
673 -moz-osx-font-smoothing: grayscale;
674 text-decoration: none !important;
678 .customize-control .dropdown-status {
686 .customize-control-color .color-picker-hex {
690 .customize-control-color.open .color-picker-hex {
694 .customize-control-color .dropdown {
699 .customize-control-color .dropdown .dropdown-content {
700 background-color: #555;
701 border: 1px solid rgba(0, 0, 0, 0.15);
704 .customize-control-color .dropdown:hover .dropdown-content {
705 border-color: rgba(0, 0, 0, 0.25);
709 * iOS can't scroll iframes,
710 * instead it expands the iframe size to match the size of the content
713 .ios .wp-full-overlay {
717 .ios #customize-controls .wp-full-overlay-sidebar-content {
718 -webkit-overflow-scrolling: touch;
723 .customize-control-media .current,
724 .customize-control-upload .current,
725 .customize-control-image .current,
726 .customize-control-background .current,
727 .customize-control-cropped_image .current,
728 .customize-control-site_icon .current,
729 .customize-control-header .current {
733 .customize-control-header .uploaded {
737 .customize-control-header .uploaded button:not(.random),
738 .customize-control-header .default button:not(.random) {
748 .customize-control-header button img {
752 .customize-control-media .remove-button,
753 .customize-control-media .default-button,
754 .customize-control-media .upload-button,
755 .customize-control-upload .remove-button,
756 .customize-control-upload .default-button,
757 .customize-control-upload .upload-button,
758 .customize-control-image .remove-button,
759 .customize-control-image .default-button,
760 .customize-control-image .upload-button,
761 .customize-control-background .remove-button,
762 .customize-control-background .default-button,
763 .customize-control-background .upload-button,
764 .customize-control-cropped_image .remove-button,
765 .customize-control-cropped_image .default-button,
766 .customize-control-cropped_image .upload-button,
767 .customize-control-site_icon .remove-button,
768 .customize-control-site_icon .default-button,
769 .customize-control-site_icon .upload-button,
770 .customize-control-header button.new,
771 .customize-control-header button.remove {
777 .customize-control-media .current .container,
778 .customize-control-upload .current .container,
779 .customize-control-image .current .container,
780 .customize-control-background .current .container,
781 .customize-control-cropped_image .current .container,
782 .customize-control-site_icon .current .container,
783 .customize-control-header .current .container {
785 -webkit-border-radius: 2px;
786 border: 1px solid #eee;
787 -webkit-border-radius: 2px;
791 .customize-control-media .current .container,
792 .customize-control-upload .current .container,
793 .customize-control-background .current .container,
794 .customize-control-cropped_image .current .container,
795 .customize-control-site_icon .current .container,
796 .customize-control-image .current .container {
800 .customize-control-media .placeholder,
801 .customize-control-upload .placeholder,
802 .customize-control-image .placeholder,
803 .customize-control-background .placeholder,
804 .customize-control-cropped_image .placeholder,
805 .customize-control-site_icon .placeholder,
806 .customize-control-header .placeholder {
811 border: 1px dashed #b4b9be;
812 -webkit-box-sizing: border-box;
813 -moz-box-sizing: border-box;
814 box-sizing: border-box;
818 .customize-control-media .inner,
819 .customize-control-upload .inner,
820 .customize-control-image .inner,
821 .customize-control-background .inner,
822 .customize-control-cropped_image .inner,
823 .customize-control-site_icon .inner,
824 .customize-control-header .inner {
830 text-overflow: ellipsis;
834 .customize-control-media .inner,
835 .customize-control-upload .inner,
836 .customize-control-background .inner,
837 .customize-control-cropped_image .inner,
838 .customize-control-site_icon .inner,
839 .customize-control-image .inner {
844 .customize-control-media .inner,
845 .customize-control-upload .inner,
846 .customize-control-image .inner,
847 .customize-control-background .inner,
848 .customize-control-cropped_image .inner,
849 .customize-control-site_icon .inner,
850 .customize-control-header .inner,
851 .customize-control-header .inner .dashicons {
856 .customize-control-header .list .inner,
857 .customize-control-header .list .inner .dashicons {
861 .customize-control-header .header-view {
867 .customize-control-header .header-view:last-child {
871 /* Convoluted, but 'outline' support isn't good enough yet */
872 .customize-control-header .header-view:after {
875 .customize-control-header .header-view.selected:after {
879 top: 0; right: 0; bottom: 0; left: 0;
880 border: 4px solid #00a0d2;
881 -webkit-border-radius: 2px;
884 .customize-control-header .header-view.button.selected {
888 /* Header control: overlay "close" button */
890 .customize-control-header .uploaded .header-view .close {
894 background: rgba(0, 0, 0, 0.5);
904 .customize-control-header .header-view:hover .close,
905 .customize-control-header .header-view .close:focus {
909 /* Header control: randomiz(s)er */
911 .customize-control-header .random.placeholder {
913 -webkit-border-radius: 2px;
918 .customize-control-header button.random {
925 .customize-control-header button.random .dice {
929 .customize-control-header .placeholder:hover .dice,
930 .customize-control-header .header-view:hover > button.random .dice {
931 -webkit-animation: dice-color-change 3s infinite;
932 animation: dice-color-change 3s infinite;
935 @-webkit-keyframes dice-color-change {
936 0% { color: #d4b146; }
937 50% { color: #ef54b0; }
938 75% { color: #7190d3; }
939 100% { color: #d4b146; }
942 @keyframes dice-color-change {
943 0% { color: #d4b146; }
944 50% { color: #ef54b0; }
945 75% { color: #7190d3; }
946 100% { color: #d4b146; }
949 .customize-control-header .choice {
955 .customize-control-header .uploaded div:last-child > .choice {
959 .customize-control-media img,
960 .customize-control-upload img,
961 .customize-control-image img,
962 .customize-control-background img,
963 .customize-control-cropped_image img,
964 .customize-control-header img {
966 -webkit-border-radius: 2px;
970 .customize-control-media .remove-button,
971 .customize-control-media .default-button,
972 .customize-control-upload .remove-button,
973 .customize-control-upload .default-button,
974 .customize-control-image .remove-button,
975 .customize-control-image .default-button,
976 .customize-control-background .remove-button,
977 .customize-control-background .default-button,
978 .customize-control-cropped_image .remove-button,
979 .customize-control-cropped_image .default-button,
980 .customize-control-site_icon .remove-button,
981 .customize-control-site_icon .default-button,
982 .customize-control-header .remove {
987 .customize-control-media .upload-button,
988 .customize-control-upload .upload-button,
989 .customize-control-image .upload-button,
990 .customize-control-background .upload-button,
991 .customize-control-cropped_image .upload-button,
992 .customize-control-site_icon .upload-button,
993 .customize-control-header .new {
1001 @-webkit-keyframes customize-reload {
1003 100% { opacity: 1; }
1006 @keyframes customize-reload {
1008 100% { opacity: 1; }
1011 /* #customize-container is reused from customize-loader.js, hence the naming. */
1012 .wp-customizer .customize-loading #customize-container {
1014 -webkit-animation: customize-reload .75s; /* Can't use `transition` because `display` changes here. */
1015 animation: customize-reload .75s;
1018 .control-section-themes .accordion-section-title {
1022 #customize-theme-controls .control-section-themes .accordion-section-title:hover,
1023 #customize-theme-controls .control-section-themes .accordion-section-title:focus {
1025 background-color: #fff;
1028 .control-section-themes .accordion-section-title {
1032 .customize-themes-panel .accordion-section-title {
1036 .control-section-themes .accordion-section-title {
1037 padding-left: 100px; /* Space for the button */
1040 .control-section-themes .accordion-section-title span.customize-action,
1041 #customize-controls .customize-section-title span.customize-action {
1047 .control-section-themes .accordion-section-title .change-theme,
1048 .control-section-themes .accordion-section-title .customize-theme {
1053 font-weight: normal;
1056 .control-section-themes .accordion-section-title:before {
1060 .customize-themes-panel {
1063 background: #f1f1f1;
1064 -webkit-box-sizing: border-box;
1065 -moz-box-sizing: border-box;
1066 box-sizing: border-box;
1069 .customize-themes-panel .accordion-section-title:first-child {
1073 #customize-controls .customize-themes-panel .accordion-section-title:nth-child(2) {
1078 .customize-themes-panel > h2 {
1079 padding: 15px 8px 0 8px;
1082 .control-section.open .customize-themes-panel {
1086 #customize-theme-controls .customize-themes-panel .accordion-section-content {
1087 background: transparent;
1091 .customize-control.customize-control-theme {
1095 #customize-theme-controls .themes.accordion-section-content {
1102 .wp-customizer .theme-browser .themes {
1103 padding-bottom: 8px;
1106 .wp-customizer .theme-browser .theme {
1111 .wp-customizer .theme-browser .theme .theme-actions {
1112 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
1116 #customize-controls h3.theme-name {
1120 #customize-controls .theme-overlay .theme-name {
1124 .wp-customizer #themes-filter {
1131 #accordion-section-themes .accordion-section-title:after {
1135 #customize-theme-controls .control-section-themes.current-panel > h3.accordion-section-title {
1139 .customize-themes-panel.control-panel-content {
1144 border-top: 1px solid #ddd;
1147 .in-themes-panel #customize-info,
1148 .in-themes-panel #customize-theme-controls > ul > .accordion-section {
1153 .wp-customizer .theme-overlay {
1157 .wp-customizer.modal-open .theme-overlay {
1166 .wp-customizer .theme-overlay .theme-backdrop {
1167 background: rgba( 238, 238, 238, 0.75 );
1172 .wp-customizer .theme-overlay .theme-wrap {
1178 max-width: 1740px; /* To ensure that theme screenshots are not displayed larger than 880px wide. */
1181 .wp-customizer .theme-overlay .theme-actions {
1182 text-align: left; /* Because there's only one action, match the pattern of media modals and right-align the action. */
1185 .modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
1186 overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
1189 .ie8 .wp-customizer .theme-overlay .theme-header,
1190 .ie8 .wp-customizer .theme-overlay .theme-about,
1191 .ie8 .wp-customizer .theme-overlay .theme-actions {
1196 @media (max-width:850px), (max-height:472px) {
1197 .wp-customizer .theme-overlay .theme-wrap {
1205 /* Handle cheaters. */
1210 margin: 50px auto 2em;
1214 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.13);
1215 box-shadow: 0 1px 3px rgba(0,0,0,0.13);
1219 border-bottom: 1px solid #ddd;
1222 font: 24px "Open Sans", sans-serif;
1225 padding-bottom: 7px;
1231 margin: 25px 0 20px;
1235 * Widgets and Menus common styles
1238 /* higher specificity than .wp-core-ui .button-secondary */
1239 #customize-theme-controls .add-new-widget,
1240 #customize-theme-controls .add-new-menu-item {
1244 -webkit-transition: all 0.2s;
1245 transition: all 0.2s;
1246 -webkit-user-select: none;
1247 -moz-user-select: none;
1248 -ms-user-select: none;
1253 .reordering .add-new-widget,
1254 .reordering .add-new-menu-item {
1256 pointer-events: none;
1257 cursor: not-allowed; /* doesn't work in conjunction with pointer-events */
1260 .add-new-widget:before,
1261 .add-new-menu-item:before {
1263 display: inline-block;
1267 font: normal 20px/1 dashicons;
1268 vertical-align: middle;
1269 -webkit-transition: all 0.2s;
1270 transition: all 0.2s;
1271 -webkit-font-smoothing: antialiased;
1272 -moz-osx-font-smoothing: grayscale;
1280 text-decoration: none;
1283 -webkit-user-select: none;
1284 -moz-user-select: none;
1285 -ms-user-select: none;
1289 .reorder-toggle:hover {
1293 .reorder-toggle:focus {
1294 outline: 1px dotted;
1298 .reordering .reorder-done {
1304 .reordering .reorder {
1309 .reorder-toggle:hover .reorder-done,
1310 .reorder-toggle:active .reorder-done,
1311 .reorder-toggle:focus .reorder-done {
1315 .widget-reorder-nav span,
1316 .menu-item-reorder-nav button {
1321 width: 33px; /* was 42px for mobile */
1324 text-indent: -9999px;
1329 .menu-item-reorder-nav button {
1332 background: transparent;
1334 -webkit-box-shadow: none;
1338 .widget-reorder-nav span:before,
1339 .menu-item-reorder-nav button:before {
1340 display: inline-block;
1346 font: normal 20px/43px dashicons;
1349 -webkit-font-smoothing: antialiased;
1350 -moz-osx-font-smoothing: grayscale;
1353 .widget-reorder-nav span:hover,
1354 .widget-reorder-nav span:focus,
1355 .menu-item-reorder-nav button:hover,
1356 .menu-item-reorder-nav button:focus {
1361 .move-widget-down:before,
1362 .menus-move-down:before {
1366 .move-widget-up:before,
1367 .menus-move-up:before {
1371 #customize-theme-controls .first-widget .move-widget-up,
1372 #customize-theme-controls .last-widget .move-widget-down,
1373 .move-up-disabled .menus-move-up,
1374 .move-down-disabled .menus-move-down,
1375 .move-right-disabled .menus-move-right,
1376 .move-left-disabled .menus-move-left {
1378 background-color: #fff;
1380 pointer-events: none;
1384 * New widget and Add-menu-items modes and panels
1387 .wp-full-overlay-main {
1388 left: auto; /* this overrides a right: 0; which causes the preview to resize, I'd rather have it go off screen at the normal size. */
1392 body.adding-widget .add-new-widget,
1393 body.adding-widget .add-new-widget:hover,
1394 .adding-menu-items .add-new-menu-item,
1395 .adding-menu-items .add-new-menu-item:hover,
1396 .add-menu-toggle.open,
1397 .add-menu-toggle.open:hover {
1399 border-color: #929793;
1401 -webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
1402 box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
1405 body.adding-widget .add-new-widget:before,
1406 .adding-menu-items .add-new-menu-item:before,
1407 #accordion-section-add_menu .add-new-menu-item.open:before {
1408 -webkit-transform: rotate(-45deg);
1409 -ms-transform: rotate(-45deg);
1410 transform: rotate(-45deg);
1414 #available-menu-items {
1426 -webkit-transition: right .18s;
1427 transition: right .18s;
1428 border-left: 1px solid #ddd;
1431 #available-widgets .customize-section-title,
1432 #available-menu-items .customize-section-title {
1436 #available-widgets-list {
1444 #available-widgets-filter {
1450 border-bottom: 1px solid #e5e5e5;
1453 /* search field container */
1454 #available-widgets-filter,
1455 #available-menu-items-search .accordion-section-title {
1457 -webkit-box-sizing: border-box;
1458 -moz-box-sizing: border-box;
1459 box-sizing: border-box;
1462 #available-widgets-filter input,
1463 #available-menu-items-search input {
1468 #available-widgets .widget-top,
1469 #available-widgets .widget-top:hover,
1470 #available-menu-items .item-top,
1471 #available-menu-items .item-top:hover {
1473 background: transparent;
1474 -webkit-box-shadow: none;
1478 #available-widgets .widget-tpl,
1479 #available-menu-items .item-tpl {
1481 padding: 20px 60px 20px 15px;
1483 border-bottom: 1px solid #e5e5e5;
1488 #available-widgets .widget,
1489 #available-menu-items .item {
1495 .customize-controls-preview-toggle {
1499 @media only screen and (max-width: 782px) {
1500 .wp-customizer .theme:not(.active):hover .theme-actions,
1501 .wp-customizer .theme:not(.active):focus .theme-actions {
1505 .wp-customizer .theme-browser .theme.active .theme-name span {
1509 .customize-control-radio label,
1510 .customize-control-checkbox label,
1511 .customize-control-nav_menu_auto_add label {
1515 .customize-control-radio input,
1516 .customize-control-checkbox input,
1517 .customize-control-nav_menu_auto_add input {
1518 margin-right: -32px;
1521 .customize-control input[type="radio"] + label,
1522 .customize-control input[type="checkbox"] + label {
1527 @media screen and ( max-width: 640px ) {
1528 #customize-controls {
1532 .wp-full-overlay.expanded {
1536 /* when the sidebar is collapsed and switching to responsive view,
1537 bring it back see ticket #35220 */
1538 .wp-full-overlay.collapsed #customize-controls {
1542 .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
1546 .customize-controls-preview-toggle {
1553 padding: 0 12px 0 12px;
1557 border-left: 1px solid #ddd;
1560 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
1561 transition: color .1s ease-in-out, background .1s ease-in-out;
1564 #customize-footer-actions,
1566 .customize-controls-preview-toggle .controls,
1567 .preview-only .wp-full-overlay-sidebar-content,
1568 .preview-only .customize-controls-preview-toggle .preview {
1572 .customize-controls-preview-toggle .preview:before,
1573 .customize-controls-preview-toggle .controls:before {
1574 font: normal 20px/1 dashicons;
1581 .customize-controls-preview-toggle .controls:before {
1585 .preview-only #customize-controls {
1589 .preview-only #customize-preview,
1590 .preview-only .customize-controls-preview-toggle .controls {
1594 #customize-preview {
1600 .wp-core-ui.wp-customizer .button {
1602 line-height: normal;
1604 vertical-align: middle;
1609 #customize-header-actions .button-primary {
1613 body.adding-widget div#available-widgets,
1614 body.adding-menu-items div#available-menu-items {
1621 #available-widgets .customize-section-title,
1622 #available-menu-items .customize-section-title {
1627 #available-widgets .customize-section-back,
1628 #available-menu-items .customize-section-back {
1632 #available-widgets .customize-section-title h3,
1633 #available-menu-items .customize-section-title h3 {
1636 padding: 9px 14px 12px 10px;
1642 white-space: nowrap;
1643 text-overflow: ellipsis;
1646 #available-widgets .customize-section-title .customize-action,
1647 #available-menu-items .customize-section-title .customize-action {
1652 white-space: nowrap;
1653 text-overflow: ellipsis;
1656 #available-widgets-filter {
1664 #available-widgets-list {