5 #customize-controls a {
9 #customize-controls h3 {
13 #customize-controls .submit {
17 #customize-controls .description {
21 #customize-header-actions .button-primary {
26 #customize-header-actions .spinner {
31 .saving #customize-header-actions .spinner {
37 border-top: 1px solid #ddd;
40 #customize-info .accordion-section-title {
41 background-color: #fff;
45 border-bottom: 1px solid #eeeeee;
48 #customize-info.open .accordion-section-title,
49 #customize-info .accordion-section-title:hover,
50 #customize-info .accordion-section-title:focus {
54 #customize-info.open .accordion-section-title:after,
55 #customize-info .accordion-section-title:hover:after,
56 #customize-info .accordion-section-title:focus:after {
60 #customize-info.open .accordion-section-title {
61 border-color: transparent;
64 #customize-info .preview-notice {
69 #customize-info .theme-name {
76 #customize-info .theme-screenshot {
80 #customize-info .theme-description {
86 #customize-theme-controls {
87 -webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
88 box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
91 #customize-theme-controls .control-section {
95 #customize-theme-controls .accordion-section-title {
97 background-color: #fff;
98 border-bottom: 1px solid #eeeeee;
101 #customize-theme-controls .accordion-section-content {
106 #customize-theme-controls .control-section:hover .accordion-section-title,
107 #customize-theme-controls .control-section .accordion-section-title:hover,
108 #customize-theme-controls .control-section.open .accordion-section-title,
109 #customize-theme-controls .control-section .accordion-section-title:focus {
114 .js .control-section:hover .accordion-section-title,
115 .js .control-section .accordion-section-title:hover,
116 .js .control-section.open .accordion-section-title,
117 .js .control-section .accordion-section-title:focus {
121 #customize-theme-controls .control-section:hover .accordion-section-title::after,
122 #customize-theme-controls .control-section .accordion-section-title:hover::after,
123 #customize-theme-controls .control-section.open .accordion-section-title::after,
124 #customize-theme-controls .control-section .accordion-section-title:focus::after {
128 #customize-theme-controls .control-section.open {
129 border-bottom: 1px solid #eeeeee;
132 #customize-theme-controls .control-section.open .accordion-section-title {
133 border-bottom-color: #eeeeee !important;
136 #customize-theme-controls .control-section:last-of-type.open,
137 #customize-theme-controls .control-section:last-of-type .accordion-section-title {
138 border-bottom-color: #ddd;
141 #customize-theme-controls > ul,
142 #customize-theme-controls .accordion-section-content {
153 .customize-control select,
154 .customize-control input[type="text"],
155 .customize-control input[type="radio"],
156 .customize-control input[type="checkbox"] {
160 .customize-control input[type="text"] {
166 .customize-control select {
173 .customize-control select[multiple] {
177 .customize-control-title {
185 .customize-control-color .color-picker,
186 .customize-control-checkbox label,
187 .customize-control-upload div {
191 .customize-control-checkbox input {
195 .customize-control-radio {
199 .customize-control-radio .customize-control-title {
204 .customize-control-radio label {
208 .customize-control-radio input {
212 #customize-preview iframe {
217 .wp-full-overlay-sidebar {
219 border-left: 1px solid #ddd;
223 background-color: transparent !important;
224 border: none !important;
225 -webkit-box-shadow: none !important;
226 box-shadow: none !important;
227 -webkit-border-radius: !important 0;
228 border-radius: !important 0;
232 .collapse-sidebar:active,
233 .collapse-sidebar:active .collapse-sidebar-label,
234 .collapse-sidebar:active .collapse-sidebar-arrow:before {
238 .collapsed .collapse-sidebar-arrow:before {
242 /* Style for custom settings */
247 .accordion-section .dropdown {
254 .accordion-section .dropdown-content {
262 border: 2px solid #eeeeee;
263 -webkit-user-select: none;
264 -moz-user-select: none;
265 -ms-user-select: none;
269 .customize-control .dropdown-arrow {
278 .customize-control .dropdown-arrow:after {
280 font: normal 20px/1 'dashicons';
287 -webkit-font-smoothing: antialiased;
288 -moz-osx-font-smoothing: grayscale;
289 text-decoration: none !important;
293 .customize-control .dropdown-status {
301 .customize-control-color .color-picker-hex {
305 .customize-control-color.open .color-picker-hex {
309 .customize-control-color .dropdown {
314 .customize-control-color .dropdown .dropdown-content {
315 background-color: #555555;
316 border: 1px solid rgba(0, 0, 0, 0.15);
319 .customize-control-color .dropdown:hover .dropdown-content {
320 border-color: rgba(0, 0, 0, 0.25);
326 .customize-control-image .library,
327 .customize-control-image .actions {
333 .customize-control-image.open .library,
334 .customize-control-image.open .actions {
338 .accordion-section .customize-control-image .dropdown-content {
345 .accordion-section .customize-control-image .dropdown-status {
349 .accordion-section .customize-control-image .preview-thumbnail img {
357 .accordion-section .customize-control-image .actions {
361 .accordion-section .customize-control-image .library ul {
362 border-bottom: 1px solid #ddd;
368 .accordion-section .customize-control-image .library li {
373 border: 1px solid transparent;
376 .accordion-section .customize-control-image .library li.library-selected {
381 border-bottom-color: #fff;
384 .accordion-section .customize-control-image .library .thumbnail {
389 .accordion-section .customize-control-image .library .thumbnail img {
398 .accordion-section .customize-control-image .library .thumbnail:hover img {
399 background-color: #2ea2cc;
402 .accordion-section .customize-control-image .library-content {
409 .accordion-section .customize-control-image .library-content.library-selected {
413 .accordion-section .customize-control-upload .upload-fallback,
414 .accordion-section .customize-control-image .upload-fallback {
418 .accordion-section .customize-control-upload .upload-dropzone,
419 .accordion-section .customize-control-image .upload-dropzone {
422 border: 3px dashed #dfdfdf;
429 .accordion-section .customize-control-upload .upload-dropzone.supports-drag-drop,
430 .accordion-section .customize-control-image .upload-dropzone.supports-drag-drop {
432 -webkit-transition: border-color 0.1s;
433 transition: border-color 0.1s;
436 .accordion-section .customize-control-upload .library ul li,
437 .accordion-section .customize-control-image .library ul li {
441 .accordion-section .customize-control-upload .upload-dropzone.supports-drag-drop.drag-over,
442 .accordion-section .customize-control-image .upload-dropzone.supports-drag-drop.drag-over {
443 border-color: #83b4d8;
447 * iOS can't scroll iframes,
448 * instead it expands the iframe size to match the size of the content
450 .ios .wp-full-overlay {
454 .ios #customize-preview {
458 .ios #customize-controls .wp-full-overlay-sidebar-content {
459 -webkit-overflow-scrolling: touch;
462 /** Header control **/
464 #customize-control-header_image .current {
468 #customize-control-header_image .uploaded {
472 #customize-control-header_image .uploaded button:not(.random),
473 #customize-control-header_image .default button:not(.random) {
483 #customize-control-header_image button img {
487 #customize-control-header_image button.new,
488 #customize-control-header_image button.remove {
495 /* Header control: current image container */
497 #customize-control-header_image .current .container {
499 -webkit-border-radius: 2px;
500 border: 1px solid #eee;
501 -webkit-border-radius: 2px;
505 #customize-control-header_image .placeholder {
512 #customize-control-header_image .inner {
518 text-overflow: ellipsis;
522 #customize-control-header_image .inner,
523 #customize-control-header_image .inner .dashicons {
527 #customize-control-header_image .list .inner,
528 #customize-control-header_image .list .inner .dashicons {
532 #customize-control-header_image .header-view {
538 #customize-control-header_image .header-view:last-child {
542 /* Convoluted, but 'outline' support isn't good enough yet */
543 #customize-control-header_image .header-view:after {
546 #customize-control-header_image .header-view.selected:after {
550 top: 0; right: 0; bottom: 0; left: 0;
551 border: 4px solid #2ea2cc;
552 -webkit-border-radius: 2px;
555 #customize-control-header_image .header-view.button.selected {
559 /* Header control: overlay "close" button */
561 #customize-control-header_image .uploaded .header-view .close {
574 #customize-control-header_image .uploaded .header-view .close:hover {
583 #customize-control-header_image .header-view:hover .close {
587 /* Header control: randomiz(s)er */
589 #customize-control-header_image .random.placeholder {
591 -webkit-border-radius: 2px;
596 #customize-control-header_image button.random {
603 #customize-control-header_image button.random .dice {
607 #customize-control-header_image .placeholder:hover .dice,
608 #customize-control-header_image .header-view:hover > button.random .dice {
609 -webkit-animation: dice-color-change 3s infinite;
610 -ms-animation: dice-color-change 3s infinite;
611 animation: dice-color-change 3s infinite;
614 @-webkit-keyframes dice-color-change {
615 0% { color: #d4b146; }
616 50% { color: #ef54b0; }
617 75% { color: #7190d3; }
618 100% { color: #d4b146; }
621 @-ms-keyframes dice-color-change {
622 0% { color: #d4b146; }
623 50% { color: #ef54b0; }
624 75% { color: #7190d3; }
625 100% { color: #d4b146; }
628 @keyframes dice-color-change {
629 0% { color: #d4b146; }
630 50% { color: #ef54b0; }
631 75% { color: #7190d3; }
632 100% { color: #d4b146; }
635 /* Header control: actions and choices */
637 #customize-control-header_image .actions {
641 #customize-control-header_image .choice {
647 #customize-control-header_image .uploaded div:last-child > .choice {
651 #customize-control-header_image img {
653 -webkit-border-radius: 2px;
657 #customize-control-header_image .remove {
662 #customize-control-header_image .new {
667 /** Handle cheaters. */
672 margin: 50px auto 2em;
676 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.13);
677 box-shadow: 0 1px 3px rgba(0,0,0,0.13);