5 #customize-controls a {
10 border-top: 1px solid #fff;
11 border-bottom: 1px solid #dfdfdf;
15 .control-section.customize-section:hover,
16 .control-section.customize-section.open {
17 border-top-color: #808080;
20 .control-section.customize-section:hover {
21 border-bottom-color: #6d6d6d;
24 .customize-section.open:hover {
25 border-bottom-color: #dfdfdf;
28 .customize-section:last-child {
29 box-shadow: 0 1px 0 0px #fff;
32 .customize-section-title {
39 -webkit-user-select: none;
40 -moz-user-select: none;
44 .cannot-expand .customize-section-title {
48 .customize-section-content {
50 padding: 10px 20px 15px;
54 .control-section .customize-section-title {
57 font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
59 text-shadow: 0 1px 0 #fff;
61 background-color: #f5f5f5;
62 background-image: -webkit-linear-gradient( top, #f5f5f5, #eee );
63 background-image: -moz-linear-gradient( top, #f5f5f5, #eee );
64 background-image: -ms-linear-gradient( top, #f5f5f5, #eee );
65 background-image: -o-linear-gradient( top, #f5f5f5, #eee );
66 background-image: linear-gradient( top, #f5f5f5, #eee );
69 .control-section:hover .customize-section-title,
70 .control-section .customize-section-title:hover,
71 .control-section.open .customize-section-title {
73 text-shadow: 0 -1px 0 #333;
74 background-color: #808080;
75 background-image: -webkit-linear-gradient( top, #808080, #6d6d6d );
76 background-image: -moz-linear-gradient( top, #808080, #6d6d6d );
77 background-image: -ms-linear-gradient( top, #808080, #6d6d6d );
78 background-image: -o-linear-gradient( top, #808080, #6d6d6d );
79 background-image: linear-gradient( top, #808080, #6d6d6d );
82 .control-section.open .customize-section-title {
83 border-bottom: 1px solid #6d6d6d;
86 .customize-section.open .customize-section-content {
91 .customize-section-title:after {
95 border-color: #ccc transparent;
97 border-width: 6px 6px 0;
104 .cannot-expand .customize-section-title:after {
108 .customize-section-title:hover:after {
109 border-color: #aaa transparent;
112 .control-section .customize-section-title:hover:after {
113 border-color: #eee transparent;
116 .control-section .customize-section-title:after {
120 #customize-info .customize-section-content {
121 background: transparent;
124 #customize-info .preview-notice {
130 #customize-info .theme-name {
136 text-shadow: 0 1px 0 #fff;
139 #customize-info .theme-screenshot {
141 border: 1px solid #ccc;
144 #customize-info .theme-description {
150 #customize-controls .submit {
154 #customize-theme-controls > ul,
155 #customize-theme-controls .customize-section-content {
159 #customize-header-actions .button-primary {
164 #customize-header-actions img {
171 .saving #customize-header-actions img {
182 .customize-control-title {
188 .customize-control select,
189 .customize-control input[type="text"],
190 .customize-control input[type="radio"],
191 .customize-control input[type="checkbox"],
192 .customize-control-color .color-picker,
193 .customize-control-checkbox label,
194 .customize-control-upload div {
198 .customize-control input[type="text"] {
204 .customize-control select {
211 .customize-control-checkbox input {
215 .customize-control-radio {
219 .customize-control-radio .customize-control-title {
224 .customize-control-radio label {
228 .customize-control-radio input {
232 #customize-preview iframe {
238 * Style for custom settings
244 .customize-section .dropdown {
250 -webkit-border-radius: 3px;
254 .customize-section .dropdown-content {
262 background-color: #eee;
263 border: 1px solid #ccc;
264 -webkit-border-radius: 3px 0 0 3px;
265 border-radius: 3px 0 0 3px;
267 -webkit-user-select: none;
268 -moz-user-select: none;
272 .customize-control .dropdown-arrow {
281 border-width: 1px 1px 1px 0;
282 -webkit-border-radius: 0 3px 3px 0;
283 border-radius: 0 3px 3px 0;
286 .customize-control .dropdown-arrow:after {
290 border-color: #ccc transparent;
292 border-width: 4px 4px 0 4px;
300 .customize-section .dropdown:hover .dropdown-content,
301 .customize-control .dropdown:hover .dropdown-arrow {
305 .customize-section .dropdown:hover .dropdown-arrow:after {
306 border-color: #aaa transparent;
309 .customize-control .dropdown-status {
318 .customize-control-color .color-picker-hex,
319 .customize-control-color .farbtastic-placeholder {
323 .customize-control-color.open .color-picker-hex,
324 .customize-control-color.open .farbtastic-placeholder {
328 .customize-control-color .dropdown {
333 .customize-control-color .dropdown .dropdown-content {
334 background-color: #fff;
335 border: 1px solid rgba( 0, 0, 0, 0.15 );
338 .customize-control-color .dropdown:hover .dropdown-content {
339 border-color: rgba( 0, 0, 0, 0.25 );
342 .customize-section input[type="text"].color-picker-hex {
345 font-family: monospace;
349 /* The centered cursor overlaps the placeholder in webkit. Hide it when selected. */
350 .customize-section input[type="text"].color-picker-hex:focus::-webkit-input-placeholder {
353 .customize-section input[type="text"].color-picker-hex:-moz-placeholder {
357 .customize-control-color .farbtastic-placeholder {
363 .customize-control-color .farbtastic {
370 .customize-control-image .library,
371 .customize-control-image .actions {
377 .customize-control-image.open .library,
378 .customize-control-image.open .actions {
382 .customize-section .customize-control-image .dropdown-content {
389 .customize-section .customize-control-image .dropdown-status {
393 .customize-section .customize-control-image .preview-thumbnail img {
401 .customize-section .customize-control-image .actions {
405 .customize-section .customize-control-image .library ul {
406 border-bottom: 1px solid #dfdfdf;
412 .customize-section .customize-control-image .library li {
418 border-color: transparent;
419 border-width: 1px 1px 0 1px;
422 .customize-section .customize-control-image .library li.library-selected {
428 border-color: #dfdfdf;
429 -webkit-border-radius: 3px 3px 0 0;
430 border-radius: 3px 3px 0 0 ;
433 .customize-section .customize-control-image .library-content {
440 .customize-section .customize-control-image .library-content.library-selected {
444 .customize-section .customize-control-image .library .thumbnail {
449 .customize-section .customize-control-image .library .thumbnail:hover img {
450 border-color: #21759b;
453 .customize-section .customize-control-image .library .thumbnail img {
461 border: 1px solid #dfdfdf;
464 .customize-section .customize-control-upload .upload-fallback,
465 .customize-section .customize-control-image .upload-fallback {
469 .customize-section .customize-control-upload .upload-dropzone,
470 .customize-section .customize-control-image .upload-dropzone {
473 border: 3px dashed #dfdfdf;
481 .customize-section .customize-control-upload .upload-dropzone.supports-drag-drop,
482 .customize-section .customize-control-image .upload-dropzone.supports-drag-drop {
484 -webkit-transition: border-color 0.1s;
485 -moz-transition: border-color 0.1s;
486 -ms-transition: border-color 0.1s;
487 -o-transition: border-color 0.1s;
488 transition: border-color 0.1s;
491 .customize-section .customize-control-upload .library ul li,
492 .customize-section .customize-control-image .library ul li {
496 .customize-section .customize-control-upload .upload-dropzone.supports-drag-drop.drag-over,
497 .customize-section .customize-control-image .upload-dropzone.supports-drag-drop.drag-over {
498 border-color: #83b4d8;
502 * iOS can't scroll iframes,
503 * instead it expands the iframe size to match the size of the content
505 .ios .wp-full-overlay {
509 .ios #customize-preview {
513 .ios #customize-controls .wp-full-overlay-sidebar-content {
514 -webkit-overflow-scrolling: touch;
533 border: 1px solid #dfdfdf;
535 -webkit-border-radius: 3px;