7441dea279830c30b242956a57cd611576f59edb
[autoinstalls/wordpress.git] / wp-admin / css / customize-controls.css
1 body {
2         overflow: hidden;
3 }
4
5 #customize-controls a {
6         text-decoration: none;
7 }
8
9 .customize-section {
10         border-top: 1px solid #fff;
11         border-bottom: 1px solid #dfdfdf;
12         margin: 0;
13 }
14
15 .control-section.customize-section:hover,
16 .control-section.customize-section.open {
17         border-top-color: #808080;
18 }
19
20 .control-section.customize-section:hover {
21         border-bottom-color: #6d6d6d;
22 }
23
24 .customize-section.open:hover {
25         border-bottom-color: #dfdfdf;
26 }
27
28 .customize-section:last-child {
29         box-shadow: 0 1px 0 0px #fff;
30 }
31
32 .customize-section-title {
33         margin: 0;
34         padding: 15px 20px;
35         position: relative;
36
37         cursor: pointer;
38
39         -webkit-user-select: none;
40         -moz-user-select: none;
41         user-select: none;
42 }
43
44 .customize-section-title:focus {
45         outline: none;
46 }
47
48 .cannot-expand .customize-section-title {
49         cursor: auto;
50 }
51
52 .customize-section-content {
53         display: none;
54         padding: 10px 20px 15px;
55         overflow: hidden;
56 }
57
58 .control-section .customize-section-title {
59         padding: 10px 20px;
60         font-size: 15px;
61         font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
62         font-weight: normal;
63         text-shadow: 0 1px 0 #fff;
64         background: #f5f5f5;
65         background-image: -webkit-gradient(linear, left bottom, left top, from(#eee), to(#f5f5f5));
66         background-image: -webkit-linear-gradient(bottom, #eee, #f5f5f5);
67         background-image:    -moz-linear-gradient(bottom, #eee, #f5f5f5);
68         background-image:      -o-linear-gradient(bottom, #eee, #f5f5f5);
69         background-image: linear-gradient(to top, #eee, #f5f5f5);
70 }
71
72 .control-section:hover .customize-section-title,
73 .control-section .customize-section-title:hover,
74 .control-section.open .customize-section-title,
75 .control-section .customize-section-title:focus {
76         color: #fff;
77         text-shadow: 0 -1px 0 #333;
78         background: #808080;
79         background-image: -webkit-gradient(linear, left bottom, left top, from(#6d6d6d), to(#808080));
80         background-image: -webkit-linear-gradient(bottom, #6d6d6d, #808080);
81         background-image:    -moz-linear-gradient(bottom, #6d6d6d, #808080);
82         background-image:      -o-linear-gradient(bottom, #6d6d6d, #808080);
83         background-image: linear-gradient(to top, #6d6d6d, #808080);
84 }
85
86 .control-section.open .customize-section-title {
87         border-bottom: 1px solid #6d6d6d;
88 }
89
90 .customize-section.open .customize-section-content {
91         display: block;
92         background: #fdfdfd;
93 }
94
95 .customize-section-title:after {
96         content: '';
97         width: 0;
98         height: 0;
99         border-color: #ccc transparent;
100         border-style: solid;
101         border-width: 6px 6px 0;
102         position: absolute;
103         top: 25px;
104         right: 20px;
105         z-index: 1;
106 }
107
108 .cannot-expand .customize-section-title:after {
109         display: none;
110 }
111
112 .customize-section-title:hover:after,
113 .customize-section-title:focus:after {
114         border-color: #aaa transparent;
115 }
116
117 .control-section .customize-section-title:hover:after,
118 .control-section .customize-section-title:focus:after {
119         border-color: #eee transparent;
120 }
121
122 .control-section .customize-section-title:after {
123         top: 15px;
124 }
125
126 #customize-info .customize-section-content {
127         background: transparent;
128 }
129
130 #customize-info .preview-notice {
131         font-size: 13px;
132         line-height: 24px;
133         color: #999;
134 }
135
136 #customize-info .theme-name {
137         font-size: 20px;
138         font-weight: 200;
139         line-height: 24px;
140         color: #333;
141         display: block;
142         text-shadow: 0 1px 0 #fff;
143 }
144
145 #customize-info .theme-screenshot {
146         width: 258px;
147         border: 1px solid #ccc;
148 }
149
150 #customize-info .theme-description {
151         margin-top: 1em;
152         color: #777;
153         line-height: 20px;
154 }
155
156 #customize-controls .submit {
157         text-align: center;
158 }
159
160 #customize-theme-controls > ul,
161 #customize-theme-controls .customize-section-content {
162         margin: 0;
163 }
164
165 #customize-header-actions .button-primary {
166         float: right;
167         margin-top: 10px;
168 }
169
170 #customize-header-actions .spinner {
171         margin-top: 16px;
172         margin-right: 4px;
173 }
174
175 .saving #customize-header-actions .spinner {
176         display: block;
177 }
178
179 .customize-control {
180         width: 100%;
181         float: left;
182         clear: both;
183         margin-bottom: 8px;
184 }
185
186 .customize-control-title {
187         display: block;
188         line-height: 24px;
189         font-weight: bold;
190 }
191
192 .customize-control select,
193 .customize-control input[type="text"],
194 .customize-control input[type="radio"],
195 .customize-control input[type="checkbox"],
196 .customize-control-color .color-picker,
197 .customize-control-checkbox label,
198 .customize-control-upload div {
199         line-height: 28px;
200 }
201
202 .customize-control input[type="text"] {
203         width: 98%;
204         line-height: 18px;
205         margin: 0;
206 }
207
208 .customize-control select {
209         min-width: 50%;
210         max-width: 100%;
211         height: 28px;
212         line-height: 28px;
213 }
214
215 .customize-control-checkbox input {
216         margin-right: 5px;
217 }
218
219 .customize-control-radio {
220         padding: 5px 0 10px;
221 }
222
223 .customize-control-radio .customize-control-title {
224         margin-bottom: 0;
225         line-height: 22px;
226 }
227
228 .customize-control-radio label {
229         line-height: 20px;
230 }
231
232 .customize-control-radio input {
233         margin-right: 5px;
234 }
235
236 #customize-preview iframe {
237         width: 100%;
238         height: 100%;
239 }
240
241 /*
242  * Style for custom settings
243  */
244
245 /*
246  * Dropdowns
247  */
248 .customize-section .dropdown {
249         float: left;
250         display: block;
251         position: relative;
252         cursor: pointer;
253
254         -webkit-border-radius: 3px;
255         border-radius: 3px;
256 }
257
258 .customize-section .dropdown-content {
259         overflow: hidden;
260         float: left;
261         min-width: 30px;
262         height: 16px;
263         line-height: 16px;
264         margin-right: 16px;
265         padding: 4px 5px;
266         background-color: #eee;
267         border: 1px solid #ccc;
268         -webkit-border-radius: 3px 0 0 3px;
269         border-radius: 3px 0 0 3px;
270
271         -webkit-user-select: none;
272         -moz-user-select: none;
273         user-select: none;
274 }
275
276 .customize-control .dropdown-arrow {
277         position: absolute;
278         top: 0;
279         bottom: 0;
280         right: 0;
281         width: 15px;
282
283         border-color: #ccc;
284         border-style: solid;
285         border-width: 1px 1px 1px 0;
286         -webkit-border-radius: 0 3px 3px 0;
287         border-radius: 0 3px 3px 0;
288 }
289
290 .customize-control .dropdown-arrow:after {
291         content: '';
292         width: 0;
293         height: 0;
294         border-color: #ccc transparent;
295         border-style: solid;
296         border-width: 4px 4px 0 4px;
297         position: absolute;
298         top: 50%;
299         margin-top: -1px;
300         right: 4px;
301         z-index: 1;
302 }
303
304 .customize-section .dropdown:hover .dropdown-content,
305 .customize-control .dropdown:hover .dropdown-arrow {
306         border-color: #aaa;
307 }
308
309 .customize-section .dropdown:hover .dropdown-arrow:after {
310         border-color: #aaa transparent;
311 }
312
313 .customize-control .dropdown-status {
314         display: none;
315         max-width: 112px;
316         color: #777;
317 }
318
319 /*
320  * Color Picker
321  */
322 .customize-control-color .color-picker-hex {
323         display: none;
324 }
325
326 .customize-control-color.open .color-picker-hex {
327         display: block;
328 }
329
330 .customize-control-color .dropdown {
331         margin-right: 5px;
332         margin-bottom: 5px;
333 }
334
335 .customize-control-color .dropdown .dropdown-content {
336         background-color: #fff;
337         border: 1px solid rgba( 0, 0, 0, 0.15 );
338 }
339
340 .customize-control-color .dropdown:hover .dropdown-content {
341         border-color: rgba( 0, 0, 0, 0.25 );
342 }
343
344 .customize-section input[type="text"].color-picker-hex {
345         width: 65px;
346         font-family: monospace;
347         text-align: center;
348         line-height: 16px;
349 }
350
351 /* The centered cursor overlaps the placeholder in webkit. Hide it when selected. */
352 .customize-section input[type="text"].color-picker-hex:focus::-webkit-input-placeholder {
353         color: transparent;
354 }
355 .customize-section input[type="text"].color-picker-hex:-moz-placeholder {
356         color: #999;
357 }
358
359 /*
360  * Image Picker
361  */
362 .customize-control-image .library,
363 .customize-control-image .actions {
364         display: none;
365         float: left;
366         width: 100%;
367 }
368
369 .customize-control-image.open .library,
370 .customize-control-image.open .actions {
371         display: block;
372 }
373
374 .customize-section .customize-control-image .dropdown-content {
375         height: auto;
376         min-height: 24px;
377         min-width: 40px;
378         padding: 0;
379 }
380
381 .customize-section .customize-control-image .dropdown-status {
382         padding: 4px 5px;
383 }
384
385 .customize-section .customize-control-image .preview-thumbnail img {
386         display: block;
387         width: 100%;
388         max-width: 122px;
389         max-height: 98px;
390         margin: 0 auto;
391 }
392
393 .customize-section .customize-control-image .actions {
394         text-align: right;
395 }
396
397 .customize-section .customize-control-image .library ul {
398         border-bottom: 1px solid #dfdfdf;
399         float: left;
400         width: 100%;
401         margin: 10px 0 0;
402 }
403
404 .customize-section .customize-control-image .library li {
405         color: #999;
406         float: left;
407         padding: 3px 5px;
408         margin: 0;
409         border-style: solid;
410         border-color: transparent;
411         border-width: 1px 1px 0 1px;
412 }
413
414 .customize-section .customize-control-image .library li.library-selected {
415         margin-bottom: -1px;
416         padding-bottom: 4px;
417
418         color: #777;
419         background: #fdfdfd;
420         border-color: #dfdfdf;
421         -webkit-border-radius: 3px 3px 0 0;
422         border-radius: 3px 3px 0 0 ;
423 }
424
425 .customize-section .customize-control-image .library-content {
426         display: none;
427         width: 100%;
428         float: left;
429         padding: 10px 0;
430 }
431
432 .customize-section .customize-control-image .library-content.library-selected {
433         display: block;
434 }
435
436 .customize-section .customize-control-image .library .thumbnail {
437         display: block;
438         width: 100%;
439 }
440
441 .customize-section .customize-control-image .library .thumbnail:hover img {
442         border-color: #21759b;
443 }
444
445 .customize-section .customize-control-image .library .thumbnail img {
446         display: block;
447         max-width: 90%;
448         max-height: 80px;
449
450         margin: 5px auto;
451         padding: 4px;
452         background: #fff;
453         border: 1px solid #dfdfdf;
454 }
455
456 .customize-section .customize-control-upload .upload-fallback,
457 .customize-section .customize-control-image .upload-fallback {
458         display: none;
459 }
460
461 .customize-section .customize-control-upload .upload-dropzone,
462 .customize-section .customize-control-image .upload-dropzone {
463         display: none;
464         padding: 15px 10px;
465         border: 3px dashed #dfdfdf;
466         margin: 5px auto;
467         text-align: center;
468         color: #777;
469         position: relative;
470         cursor: default;
471 }
472
473 .customize-section .customize-control-upload .upload-dropzone.supports-drag-drop,
474 .customize-section .customize-control-image .upload-dropzone.supports-drag-drop {
475         display: block;
476         -webkit-transition: border-color 0.1s;
477         -moz-transition:    border-color 0.1s;
478         -ms-transition:     border-color 0.1s;
479         -o-transition:      border-color 0.1s;
480         transition:         border-color 0.1s;
481 }
482
483 .customize-section .customize-control-upload .library ul li,
484 .customize-section .customize-control-image .library ul li {
485         cursor: pointer;
486 }
487
488 .customize-section .customize-control-upload .upload-dropzone.supports-drag-drop.drag-over,
489 .customize-section .customize-control-image .upload-dropzone.supports-drag-drop.drag-over {
490         border-color: #83b4d8;
491 }
492
493 /**
494  * iOS can't scroll iframes,
495  * instead it expands the iframe size to match the size of the content
496  */
497 .ios .wp-full-overlay {
498         position: relative;
499 }
500
501 .ios #customize-preview {
502         position: relative;
503 }
504
505 .ios #customize-controls .wp-full-overlay-sidebar-content {
506         -webkit-overflow-scrolling: touch;
507 }
508
509 /**
510  * Handle cheaters.
511  */
512 body.cheatin {
513         min-width: 0;
514         background: #f9f9f9;
515         padding: 50px;
516 }
517
518 body.cheatin p {
519         max-width: 700px;
520         margin: 0 auto;
521         padding: 2em;
522         font-size: 14px;
523         background: #fff;
524         border: 1px solid #dfdfdf;
525         -webkit-border-radius: 3px;
526         border-radius:         3px;
527 }