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