|
1 body { |
|
2 overflow: hidden; |
|
3 -webkit-text-size-adjust: 100%; |
|
4 } |
|
5 |
|
6 #customize-controls a { |
|
7 text-decoration: none; |
|
8 } |
|
9 |
|
10 #customize-controls h3 { |
|
11 font-size: 14px; |
|
12 } |
|
13 |
|
14 #customize-controls img { |
|
15 max-width: 100%; |
|
16 } |
|
17 |
|
18 #customize-controls .submit { |
|
19 text-align: center; |
|
20 } |
|
21 |
|
22 #customize-controls .description { |
|
23 color: #666666; |
|
24 } |
|
25 |
1 #customize-header-actions .button-primary { |
26 #customize-header-actions .button-primary { |
2 float: left; |
27 float: left; |
|
28 margin-top: 9px; |
3 } |
29 } |
4 |
30 |
5 #customize-header-actions .spinner { |
31 #customize-header-actions .spinner { |
6 float: left; |
32 margin-top: 13px; |
7 margin-right: 0; |
|
8 margin-left: 4px; |
33 margin-left: 4px; |
9 } |
34 } |
10 |
35 |
|
36 .saving #customize-header-actions .spinner { |
|
37 visibility: visible; |
|
38 } |
|
39 |
|
40 #customize-header-actions { |
|
41 border-bottom: 1px solid #ddd; |
|
42 } |
|
43 |
|
44 #customize-header-actions .secondary-actions { |
|
45 display: none; |
|
46 } |
|
47 |
|
48 #customize-controls .wp-full-overlay-sidebar-content { |
|
49 overflow-y: auto; |
|
50 overflow-x: hidden; |
|
51 } |
|
52 |
|
53 #customize-info { |
|
54 border: none; |
|
55 border-top: 1px solid #ddd; |
|
56 } |
|
57 |
|
58 #customize-info .accordion-section-title { |
|
59 background-color: #fff; |
|
60 color: #666666; |
|
61 border-right: none; |
|
62 border-left: none; |
|
63 border-bottom: 1px solid #eeeeee; |
|
64 } |
|
65 |
|
66 #customize-info.open .accordion-section-title:after, |
|
67 #customize-info .accordion-section-title:hover:after, |
|
68 #customize-info .accordion-section-title:focus:after { |
|
69 color: #555555; |
|
70 } |
|
71 |
|
72 #customize-info .preview-notice { |
|
73 font-size: 13px; |
|
74 line-height: 24px; |
|
75 } |
|
76 |
|
77 #customize-info .theme-name { |
|
78 font-size: 20px; |
|
79 font-weight: 200; |
|
80 line-height: 24px; |
|
81 display: block; |
|
82 } |
|
83 |
|
84 #customize-info .theme-screenshot { |
|
85 width: 258px; |
|
86 } |
|
87 |
|
88 #customize-info .theme-description { |
|
89 margin-top: 1em; |
|
90 color: #666666; |
|
91 line-height: 20px; |
|
92 } |
|
93 |
|
94 #customize-theme-controls .control-section { |
|
95 border: none; |
|
96 } |
|
97 |
|
98 #customize-theme-controls .accordion-section-title { |
|
99 color: #555555; |
|
100 background-color: #fff; |
|
101 border-bottom: 1px solid #eeeeee; |
|
102 } |
|
103 |
|
104 #customize-theme-controls .accordion-section-content { |
|
105 color: #555555; |
|
106 background: #fff; |
|
107 } |
|
108 |
|
109 #customize-info.open .accordion-section-title, |
|
110 #customize-info .accordion-section-title:hover, |
|
111 #customize-info .accordion-section-title:focus, |
|
112 #customize-theme-controls .control-section:hover > .accordion-section-title, |
|
113 #customize-theme-controls .control-section .accordion-section-title:hover, |
|
114 #customize-theme-controls .control-section.open .accordion-section-title, |
|
115 #customize-theme-controls .control-section .accordion-section-title:focus { |
|
116 color: #23282d; |
|
117 background: #f5f5f5; |
|
118 } |
|
119 |
|
120 .js .control-section:hover .accordion-section-title, |
|
121 .js .control-section .accordion-section-title:hover, |
|
122 .js .control-section.open .accordion-section-title, |
|
123 .js .control-section .accordion-section-title:focus { |
|
124 background: #f5f5f5; |
|
125 } |
|
126 |
|
127 #customize-theme-controls .control-section:hover > .accordion-section-title:after, |
|
128 #customize-theme-controls .control-section .accordion-section-title:hover:after, |
|
129 #customize-theme-controls .control-section.open .accordion-section-title:after, |
|
130 #customize-theme-controls .control-section .accordion-section-title:focus:after { |
|
131 color: #555; |
|
132 } |
|
133 |
|
134 #customize-info.open, |
|
135 #customize-theme-controls .control-section.open { |
|
136 border-bottom: 1px solid #eeeeee; |
|
137 } |
|
138 |
|
139 #customize-theme-controls .control-section.open .accordion-section-title { |
|
140 border-bottom-color: #eeeeee !important; |
|
141 } |
|
142 |
|
143 #customize-theme-controls .control-section:last-of-type.open, |
|
144 #customize-theme-controls .control-section:last-of-type > .accordion-section-title { |
|
145 border-bottom-color: #ddd; |
|
146 } |
|
147 |
|
148 #customize-theme-controls > ul, |
|
149 #customize-theme-controls .accordion-section-content { |
|
150 margin: 0; |
|
151 } |
|
152 |
|
153 .control-section.control-panel > .accordion-section-title { |
|
154 padding-left: 54px; |
|
155 } |
|
156 |
|
157 .control-section.control-panel > .accordion-section-title:after { |
|
158 content: "\f341"; |
|
159 background: #f5f5f5; |
|
160 color: #555; |
|
161 width: 38px; |
|
162 height: 100%; |
|
163 margin: -11px 0 -11px -10px; /* compensate for positioning */ |
|
164 line-height: 45px; |
|
165 padding-right: 5px; |
|
166 border-right: 1px solid #eee; |
|
167 z-index: 0; |
|
168 } |
|
169 |
|
170 #customize-theme-controls .control-section.control-panel > h3.accordion-section-title:focus:after, |
|
171 #customize-theme-controls .control-section.control-panel > h3.accordion-section-title:hover:after { |
|
172 background: #ddd; |
|
173 color: #000; |
|
174 border: 1px solid #d9d9d9; |
|
175 border-left: none; |
|
176 margin-top: -12px; |
|
177 line-height: 44px; |
|
178 z-index: 1; |
|
179 } |
|
180 |
|
181 .accordion-sub-container.control-panel-content { |
|
182 display: none; |
|
183 position: absolute; |
|
184 right: 300px; |
|
185 top: 0; |
|
186 width: 300px; |
|
187 border-top: 1px solid #ddd; |
|
188 -webkit-transition: right ease-in-out .18s; |
|
189 transition: right ease-in-out .18s; |
|
190 } |
|
191 |
|
192 .accordion-sub-container.control-panel-content.animating { |
|
193 display: block; |
|
194 } |
|
195 |
|
196 .current-panel .accordion-sub-container.control-panel-content { |
|
197 width: 100%; |
|
198 } |
|
199 |
|
200 .customize-overlay-close, |
|
201 .customize-controls-close { |
|
202 display: block; |
|
203 position: absolute; |
|
204 top: 0; |
|
205 right: 0; |
|
206 width: 45px; |
|
207 height: 45px; |
|
208 padding: 0 0 0 2px; |
|
209 background: #eee; |
|
210 border: none; |
|
211 border-left: 1px solid #ddd; |
|
212 color: #444; |
|
213 text-align: right; |
|
214 cursor: pointer; |
|
215 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; |
|
216 transition: color .1s ease-in-out, background .1s ease-in-out; |
|
217 -webkit-box-sizing: content-box; |
|
218 -moz-box-sizing: content-box; |
|
219 box-sizing: content-box; |
|
220 } |
|
221 |
|
222 .customize-overlay-close { |
|
223 right: auto; |
|
224 left: 0; |
|
225 border-left: 0; |
|
226 border-right: 1px solid #ddd; |
|
227 } |
|
228 |
|
229 .control-panel-back { |
|
230 display: block; |
|
231 position: fixed; |
|
232 top: 0; |
|
233 z-index: 99; |
|
234 right: -48px; |
|
235 width: 45px; |
|
236 height: 45px; |
|
237 padding-left: 2px; |
|
238 background: #eee; |
|
239 border-left: 1px solid #ddd; |
|
240 cursor: pointer; |
|
241 -webkit-transition: right .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out; |
|
242 transition: right .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out; |
|
243 } |
|
244 |
|
245 .ios .control-panel-back { |
|
246 -webkit-transition: right 0s; |
|
247 transition: right 0s; |
|
248 } |
|
249 |
|
250 .collapsed .control-panel-back { |
|
251 display: none; |
|
252 } |
|
253 |
|
254 .customize-overlay-close:focus, |
|
255 .customize-overlay-close:hover, |
|
256 .customize-controls-close:focus, |
|
257 .customize-controls-close:hover, |
|
258 .control-panel-back:focus, |
|
259 .control-panel-back:hover, |
|
260 .customize-controls-preview-toggle:focus, |
|
261 .customize-controls-preview-toggle:hover { |
|
262 background: #ddd; |
|
263 border-color: #ccc; |
|
264 color: #000; |
|
265 outline: none; |
|
266 -webkit-box-shadow: none; |
|
267 box-shadow: none; |
|
268 } |
|
269 |
|
270 .customize-overlay-close:before, |
|
271 .customize-controls-close:before { |
|
272 font: normal 22px/45px dashicons; |
|
273 content: "\f335"; |
|
274 position: relative; |
|
275 top: 1px; |
|
276 right: 13px; |
|
277 } |
|
278 |
|
279 .control-panel-back:before { |
|
280 font: normal 20px/45px dashicons; |
|
281 content: "\f345"; |
|
282 position: relative; |
|
283 top: 1px; |
|
284 right: 13px; |
|
285 } |
|
286 |
|
287 .in-sub-panel .control-panel-back { |
|
288 right: 0; |
|
289 } |
|
290 |
|
291 .current-panel > .accordion-section-title { |
|
292 height: 22px; |
|
293 } |
|
294 |
|
295 .wp-full-overlay-sidebar .wp-full-overlay-header { |
|
296 -webkit-transition: padding ease-in-out .18s; |
|
297 transition: padding ease-in-out .18s; |
|
298 } |
|
299 |
|
300 .in-sub-panel .wp-full-overlay-sidebar .wp-full-overlay-header { |
|
301 padding-right: 62px; |
|
302 } |
|
303 |
|
304 #customize-info, |
|
305 #customize-theme-controls > ul > .accordion-section { |
|
306 position: relative; |
|
307 right: 0; |
|
308 -webkit-transition: right ease-in-out .18s; |
|
309 transition: right ease-in-out .18s; |
|
310 } |
|
311 |
|
312 .ios #customize-info, |
|
313 .ios #customize-theme-controls > ul > .accordion-section { |
|
314 -webkit-transition: right 0s; |
|
315 transition: right 0s; |
|
316 } |
|
317 |
|
318 .in-sub-panel #customize-info, |
|
319 .in-sub-panel #customize-theme-controls > ul > .accordion-section { |
|
320 right: -300px; |
|
321 width: 300px; |
|
322 } |
|
323 |
|
324 .in-sub-panel #customize-theme-controls .accordion-section.current-panel { |
|
325 width: 100%; |
|
326 } |
|
327 |
|
328 #customize-theme-controls .control-section.current-panel { |
|
329 padding: 0; |
|
330 } |
|
331 |
|
332 #customize-theme-controls .control-section > h3.accordion-section-title { |
|
333 position: relative; |
|
334 right: 0; |
|
335 } |
|
336 |
|
337 #customize-theme-controls .control-section.current-panel > h3.accordion-section-title { |
|
338 right: -354px; |
|
339 -webkit-transition: right ease-in-out .18s; |
|
340 transition: right ease-in-out .18s; |
|
341 } |
|
342 |
|
343 .ios #customize-theme-controls .control-section.current-panel > h3.accordion-section-title { |
|
344 -webkit-transition: right 0s; |
|
345 transition: right 0s; |
|
346 } |
|
347 |
|
348 .control-section.control-panel .accordion-section-title .panel-title { |
|
349 font-size: 20px; |
|
350 font-weight: 200; |
|
351 line-height: 24px; |
|
352 display: block; |
|
353 border: none; |
|
354 } |
|
355 |
|
356 .control-section.control-panel .preview-notice { |
|
357 font-size: 13px; |
|
358 line-height: 24px; |
|
359 } |
|
360 |
|
361 p.customize-section-description { |
|
362 font-style: normal; |
|
363 } |
|
364 |
11 .customize-control { |
365 .customize-control { |
|
366 width: 100%; |
12 float: right; |
367 float: right; |
13 } |
368 clear: both; |
14 |
369 margin-bottom: 8px; |
15 .customize-control-radio input, |
370 } |
|
371 |
|
372 .customize-control select, |
|
373 .customize-control input[type="radio"], |
|
374 .customize-control input[type="checkbox"] { |
|
375 line-height: 28px; |
|
376 } |
|
377 |
|
378 .customize-control input[type="text"], |
|
379 .customize-control input[type="password"], |
|
380 .customize-control input[type="email"], |
|
381 .customize-control input[type="number"], |
|
382 .customize-control input[type="search"], |
|
383 .customize-control input[type="tel"], |
|
384 .customize-control input[type="url"] { |
|
385 width: 98%; |
|
386 line-height: 18px; |
|
387 margin: 0; |
|
388 } |
|
389 |
|
390 .customize-control-hidden { |
|
391 margin: 0; |
|
392 } |
|
393 |
|
394 .customize-control-textarea textarea { |
|
395 width: 100%; |
|
396 resize: vertical; |
|
397 } |
|
398 |
|
399 .customize-control select { |
|
400 min-width: 50%; |
|
401 max-width: 100%; |
|
402 height: 28px; |
|
403 line-height: 28px; |
|
404 } |
|
405 |
|
406 .customize-control select[multiple] { |
|
407 height: auto; |
|
408 } |
|
409 |
|
410 .customize-control-title { |
|
411 display: block; |
|
412 font-size: 14px; |
|
413 line-height: 24px; |
|
414 font-weight: 600; |
|
415 margin-bottom: 5px; |
|
416 } |
|
417 |
|
418 .customize-control-description { |
|
419 display: block; |
|
420 font-style: italic; |
|
421 line-height: 18px; |
|
422 margin-bottom: 5px; |
|
423 } |
|
424 |
|
425 .customize-control-color .color-picker, |
|
426 .customize-control-checkbox label, |
|
427 .customize-control-upload div { |
|
428 line-height: 28px; |
|
429 } |
|
430 |
16 .customize-control-checkbox input { |
431 .customize-control-checkbox input { |
17 margin-right: 0; |
|
18 margin-left: 5px; |
432 margin-left: 5px; |
19 } |
433 } |
|
434 |
|
435 .customize-control-radio { |
|
436 padding: 5px 0 10px; |
|
437 } |
|
438 |
|
439 .customize-control-radio .customize-control-title { |
|
440 margin-bottom: 0; |
|
441 line-height: 22px; |
|
442 } |
|
443 |
|
444 .customize-control-radio .customize-control-title + .customize-control-description { |
|
445 margin-top: 7px; |
|
446 } |
|
447 |
|
448 .customize-control-radio label { |
|
449 line-height: 32px; |
|
450 } |
|
451 |
|
452 .customize-control-radio input { |
|
453 margin-left: 5px; |
|
454 } |
|
455 |
|
456 .customize-control .attachment-thumb.type-icon { |
|
457 float: right; |
|
458 margin: 10px; |
|
459 width: auto; |
|
460 } |
|
461 |
|
462 .customize-control .attachment-title { |
|
463 font-weight: bold; |
|
464 margin: 0; |
|
465 padding: 5px 10px; |
|
466 } |
|
467 |
|
468 .customize-control .attachment-meta { |
|
469 white-space: nowrap; |
|
470 overflow: hidden; |
|
471 text-overflow: ellipsis; |
|
472 margin: 0; |
|
473 padding: 0 10px; |
|
474 } |
|
475 |
|
476 .customize-control .attachment-meta-title { |
|
477 padding-top: 7px; |
|
478 } |
|
479 |
|
480 .customize-control .thumbnail-image { |
|
481 line-height: 0; |
|
482 } |
|
483 |
|
484 .customize-control .thumbnail-image img { |
|
485 cursor: pointer; |
|
486 } |
|
487 |
|
488 #customize-controls .thumbnail-audio .thumbnail { |
|
489 max-width: 64px; |
|
490 max-height: 64px; |
|
491 margin: 10px; |
|
492 float: right; |
|
493 } |
|
494 |
|
495 #customize-preview iframe { |
|
496 width: 100%; |
|
497 height: 100%; |
|
498 } |
|
499 |
|
500 .wp-full-overlay-sidebar { |
|
501 background: #eeeeee; |
|
502 border-left: 1px solid #ddd; |
|
503 } |
|
504 |
|
505 .collapse-sidebar { |
|
506 background-color: transparent !important; |
|
507 border: none !important; |
|
508 -webkit-box-shadow: none !important; |
|
509 box-shadow: none !important; |
|
510 -webkit-border-radius: 0 !important; |
|
511 border-radius: 0 !important; |
|
512 } |
|
513 |
|
514 |
|
515 .collapse-sidebar:active, |
|
516 .collapse-sidebar:active .collapse-sidebar-label, |
|
517 .collapse-sidebar:active .collapse-sidebar-arrow:before { |
|
518 text-shadow: none; |
|
519 } |
|
520 |
|
521 .collapsed .collapse-sidebar-arrow:before { |
|
522 color: #82878c; |
|
523 } |
|
524 |
|
525 /* Style for custom settings */ |
20 |
526 |
21 /* |
527 /* |
22 * Dropdowns |
528 * Dropdowns |
23 */ |
529 */ |
24 .accordion-section .dropdown { |
530 .accordion-section .dropdown { |
25 float: right; |
531 float: right; |
|
532 display: block; |
|
533 position: relative; |
|
534 cursor: pointer; |
26 } |
535 } |
27 |
536 |
28 .accordion-section .dropdown-content { |
537 .accordion-section .dropdown-content { |
|
538 overflow: hidden; |
29 float: right; |
539 float: right; |
30 margin-right: 0px; |
540 min-width: 30px; |
|
541 height: 16px; |
|
542 line-height: 16px; |
31 margin-left: 16px; |
543 margin-left: 16px; |
32 -webkit-border-radius: 0 3px 3px 0; |
544 padding: 4px 5px; |
33 border-radius: 0 3px 3px 0; |
545 border: 2px solid #eeeeee; |
|
546 -webkit-user-select: none; |
|
547 -moz-user-select: none; |
|
548 -ms-user-select: none; |
|
549 user-select: none; |
34 } |
550 } |
35 |
551 |
36 .customize-control .dropdown-arrow { |
552 .customize-control .dropdown-arrow { |
37 right: auto; |
553 position: absolute; |
|
554 top: 0; |
|
555 bottom: 0; |
38 left: 0; |
556 left: 0; |
39 |
557 width: 20px; |
40 border-color: #ccc; |
558 background: #eeeeee; |
41 border-style: solid; |
|
42 border-width: 1px 0 1px 1px; |
|
43 -webkit-border-radius: 3px 0 0 3px; |
|
44 border-radius: 3px 0 0 3px; |
|
45 } |
559 } |
46 |
560 |
47 .customize-control .dropdown-arrow:after { |
561 .customize-control .dropdown-arrow:after { |
48 right: auto; |
562 content: "\f140"; |
49 left: 4px; |
563 font: normal 20px/1 'dashicons'; |
50 } |
564 speak: none; |
51 |
565 display: block; |
52 /* |
566 padding: 0; |
53 * Color Picker |
567 text-indent: 0; |
|
568 text-align: center; |
|
569 position: relative; |
|
570 -webkit-font-smoothing: antialiased; |
|
571 -moz-osx-font-smoothing: grayscale; |
|
572 text-decoration: none !important; |
|
573 color: #32373c; |
|
574 } |
|
575 |
|
576 .customize-control .dropdown-status { |
|
577 color: #32373c; |
|
578 background: #eeeeee; |
|
579 display: none; |
|
580 max-width: 112px; |
|
581 } |
|
582 |
|
583 /* Color Picker */ |
|
584 .customize-control-color .color-picker-hex { |
|
585 display: none; |
|
586 } |
|
587 |
|
588 .customize-control-color.open .color-picker-hex { |
|
589 display: block; |
|
590 } |
|
591 |
|
592 .customize-control-color .dropdown { |
|
593 margin-left: 5px; |
|
594 margin-bottom: 5px; |
|
595 } |
|
596 |
|
597 .customize-control-color .dropdown .dropdown-content { |
|
598 background-color: #555555; |
|
599 border: 1px solid rgba(0, 0, 0, 0.15); |
|
600 } |
|
601 |
|
602 .customize-control-color .dropdown:hover .dropdown-content { |
|
603 border-color: rgba(0, 0, 0, 0.25); |
|
604 } |
|
605 |
|
606 /** |
|
607 * iOS can't scroll iframes, |
|
608 * instead it expands the iframe size to match the size of the content |
54 */ |
609 */ |
55 .customize-control-color .dropdown { |
610 .ios .wp-full-overlay { |
56 margin-right: 0; |
611 position: relative; |
57 margin-left: 5px; |
612 } |
58 } |
613 |
59 |
614 .ios #customize-preview { |
60 .accordion-section input[type="text"].color-picker-hex { |
615 position: relative; |
61 direction: ltr; |
616 } |
62 } |
617 |
63 |
618 .ios #customize-controls .wp-full-overlay-sidebar-content { |
64 /* |
619 -webkit-overflow-scrolling: touch; |
65 * Image Picker |
620 } |
|
621 |
|
622 /** Media controls **/ |
|
623 |
|
624 .customize-control-media .current, |
|
625 .customize-control-upload .current, |
|
626 .customize-control-image .current, |
|
627 .customize-control-background .current, |
|
628 .customize-control-header .current { |
|
629 margin-bottom: 8px; |
|
630 } |
|
631 |
|
632 .customize-control-header .uploaded { |
|
633 margin-bottom: 18px; |
|
634 } |
|
635 |
|
636 .customize-control-header .uploaded button:not(.random), |
|
637 .customize-control-header .default button:not(.random) { |
|
638 width: 100%; |
|
639 padding: 0; |
|
640 margin: 0; |
|
641 background: none; |
|
642 border: none; |
|
643 color: inherit; |
|
644 cursor: pointer; |
|
645 } |
|
646 |
|
647 .customize-control-header button img { |
|
648 display: block; |
|
649 } |
|
650 |
|
651 .customize-control-media .remove-button, |
|
652 .customize-control-media .default-button, |
|
653 .customize-control-media .upload-button, |
|
654 .customize-control-upload .remove-button, |
|
655 .customize-control-upload .default-button, |
|
656 .customize-control-upload .upload-button, |
|
657 .customize-control-image .remove-button, |
|
658 .customize-control-image .default-button, |
|
659 .customize-control-image .upload-button, |
|
660 .customize-control-background .remove-button, |
|
661 .customize-control-background .default-button, |
|
662 .customize-control-background .upload-button, |
|
663 .customize-control-header button.new, |
|
664 .customize-control-header button.remove { |
|
665 white-space: normal; |
|
666 width: 48%; |
|
667 height: auto; |
|
668 } |
|
669 |
|
670 .customize-control-media .current .container, |
|
671 .customize-control-upload .current .container, |
|
672 .customize-control-image .current .container, |
|
673 .customize-control-background .current .container, |
|
674 .customize-control-header .current .container { |
|
675 overflow: hidden; |
|
676 -webkit-border-radius: 2px; |
|
677 border: 1px solid #eee; |
|
678 -webkit-border-radius: 2px; |
|
679 border-radius: 2px; |
|
680 } |
|
681 |
|
682 .customize-control-media .current .container, |
|
683 .customize-control-upload .current .container, |
|
684 .customize-control-background .current .container, |
|
685 .customize-control-image .current .container { |
|
686 min-height: 40px; |
|
687 } |
|
688 |
|
689 .customize-control-media .placeholder, |
|
690 .customize-control-upload .placeholder, |
|
691 .customize-control-image .placeholder, |
|
692 .customize-control-background .placeholder, |
|
693 .customize-control-header .placeholder { |
|
694 width: 100%; |
|
695 position: relative; |
|
696 text-align: center; |
|
697 cursor: default; |
|
698 } |
|
699 |
|
700 .customize-control-media .inner, |
|
701 .customize-control-upload .inner, |
|
702 .customize-control-image .inner, |
|
703 .customize-control-background .inner, |
|
704 .customize-control-header .inner { |
|
705 display: none; |
|
706 position: absolute; |
|
707 width: 100%; |
|
708 color: #555; |
|
709 white-space: nowrap; |
|
710 text-overflow: ellipsis; |
|
711 overflow: hidden; |
|
712 } |
|
713 |
|
714 .customize-control-media .inner, |
|
715 .customize-control-upload .inner, |
|
716 .customize-control-background .inner, |
|
717 .customize-control-image .inner { |
|
718 display: block; |
|
719 min-height: 40px; |
|
720 } |
|
721 |
|
722 .customize-control-media .inner, |
|
723 .customize-control-upload .inner, |
|
724 .customize-control-image .inner, |
|
725 .customize-control-background .inner, |
|
726 .customize-control-header .inner, |
|
727 .customize-control-header .inner .dashicons { |
|
728 line-height: 20px; |
|
729 top: 10px; |
|
730 } |
|
731 |
|
732 .customize-control-header .list .inner, |
|
733 .customize-control-header .list .inner .dashicons { |
|
734 top: 9px; |
|
735 } |
|
736 |
|
737 .customize-control-header .header-view { |
|
738 position: relative; |
|
739 width: 100%; |
|
740 margin-bottom: 5px; |
|
741 } |
|
742 |
|
743 .customize-control-header .header-view:last-child { |
|
744 margin-bottom: 0px; |
|
745 } |
|
746 |
|
747 /* Convoluted, but 'outline' support isn't good enough yet */ |
|
748 .customize-control-header .header-view:after { |
|
749 border: 0; |
|
750 } |
|
751 .customize-control-header .header-view.selected:after { |
|
752 content: ''; |
|
753 position: absolute; |
|
754 height: auto; |
|
755 top: 0; right: 0; bottom: 0; left: 0; |
|
756 border: 4px solid #00a0d2; |
|
757 -webkit-border-radius: 2px; |
|
758 border-radius: 2px; |
|
759 } |
|
760 .customize-control-header .header-view.button.selected { |
|
761 border: 0; |
|
762 } |
|
763 |
|
764 /* Header control: overlay "close" button */ |
|
765 |
|
766 .customize-control-header .uploaded .header-view .close { |
|
767 font-size: 2em; |
|
768 color: grey; |
|
769 position: absolute; |
|
770 visibility: hidden; |
|
771 top: 10px; |
|
772 left: 10px; |
|
773 z-index: 1; |
|
774 width: 20px; |
|
775 height: 20px; |
|
776 cursor: pointer; |
|
777 } |
|
778 |
|
779 .customize-control-header .uploaded .header-view .close:hover { |
|
780 color: black; |
|
781 text-shadow: |
|
782 1px -1px 0 #fff, |
|
783 -1px -1px 0 #fff, |
|
784 1px 1px 0 #fff, |
|
785 -1px 1px 0 #fff; |
|
786 } |
|
787 |
|
788 .customize-control-header .header-view:hover .close { |
|
789 visibility: visible; |
|
790 } |
|
791 |
|
792 /* Header control: randomiz(s)er */ |
|
793 |
|
794 .customize-control-header .random.placeholder { |
|
795 cursor: pointer; |
|
796 -webkit-border-radius: 2px; |
|
797 border-radius: 2px; |
|
798 height: 40px; |
|
799 } |
|
800 |
|
801 .customize-control-header button.random { |
|
802 width: 100%; |
|
803 height: auto; |
|
804 min-height: 40px; |
|
805 white-space: normal; |
|
806 } |
|
807 |
|
808 .customize-control-header button.random .dice { |
|
809 margin-top: 4px; |
|
810 } |
|
811 |
|
812 .customize-control-header .placeholder:hover .dice, |
|
813 .customize-control-header .header-view:hover > button.random .dice { |
|
814 -webkit-animation: dice-color-change 3s infinite; |
|
815 animation: dice-color-change 3s infinite; |
|
816 } |
|
817 |
|
818 @-webkit-keyframes dice-color-change { |
|
819 0% { color: #d4b146; } |
|
820 50% { color: #ef54b0; } |
|
821 75% { color: #7190d3; } |
|
822 100% { color: #d4b146; } |
|
823 } |
|
824 |
|
825 @keyframes dice-color-change { |
|
826 0% { color: #d4b146; } |
|
827 50% { color: #ef54b0; } |
|
828 75% { color: #7190d3; } |
|
829 100% { color: #d4b146; } |
|
830 } |
|
831 |
|
832 .customize-control-media .actions, |
|
833 .customize-control-upload .actions, |
|
834 .customize-control-image .actions, |
|
835 .customize-control-background .actions, |
|
836 .customize-control-header .actions { |
|
837 margin-bottom: 32px; |
|
838 } |
|
839 |
|
840 .customize-control-header .choice { |
|
841 position: relative; |
|
842 display: block; |
|
843 margin-bottom: 9px; |
|
844 } |
|
845 |
|
846 .customize-control-header .uploaded div:last-child > .choice { |
|
847 margin-bottom: 0; |
|
848 } |
|
849 |
|
850 .customize-control-media img, |
|
851 .customize-control-upload img, |
|
852 .customize-control-image img, |
|
853 .customize-control-background img, |
|
854 .customize-control-header img { |
|
855 width: 100%; |
|
856 -webkit-border-radius: 2px; |
|
857 border-radius: 2px; |
|
858 } |
|
859 |
|
860 .customize-control-media .remove-button, |
|
861 .customize-control-media .default-button, |
|
862 .customize-control-upload .remove-button, |
|
863 .customize-control-upload .default-button, |
|
864 .customize-control-image .remove-button, |
|
865 .customize-control-image .default-button, |
|
866 .customize-control-background .remove-button, |
|
867 .customize-control-background .default-button, |
|
868 .customize-control-header .remove { |
|
869 float: right; |
|
870 margin-left: 3px; |
|
871 } |
|
872 |
|
873 .customize-control-media .upload-button, |
|
874 .customize-control-upload .upload-button, |
|
875 .customize-control-image .upload-button, |
|
876 .customize-control-background .upload-button, |
|
877 .customize-control-header .new { |
|
878 float: left; |
|
879 } |
|
880 |
|
881 /** |
|
882 * Themes |
66 */ |
883 */ |
67 .accordion-section .customize-control-image .actions { |
884 @-webkit-keyframes customize-reload { |
68 text-align: left; |
885 0% { opacity: 0; } |
69 } |
886 100% { opacity: 1; } |
70 |
887 } |
71 .customize-control-image .library, |
888 |
72 .customize-control-image .actions, |
889 @keyframes customize-reload { |
73 .accordion-section .customize-control-image .library ul, |
890 0% { opacity: 0; } |
74 .accordion-section .customize-control-image .library li, |
891 100% { opacity: 1; } |
75 .accordion-section .customize-control-image .library-content { |
892 } |
76 float: right; |
893 |
77 } |
894 /* #customize-container is reused from customize-loader.js, hence the naming. */ |
|
895 .wp-customizer .customize-loading #customize-container { |
|
896 display: block; |
|
897 -webkit-animation: customize-reload .75s; /* Can't use `transition` because `display` changes here. */ |
|
898 animation: customize-reload .75s; |
|
899 } |
|
900 |
|
901 .control-section-themes .accordion-section-title { |
|
902 cursor: default; |
|
903 } |
|
904 |
|
905 #customize-theme-controls .control-section-themes .accordion-section-title:hover, |
|
906 #customize-theme-controls .control-section-themes .accordion-section-title:focus { |
|
907 color: #555555; |
|
908 background-color: #fff; |
|
909 } |
|
910 |
|
911 .control-section-themes .accordion-section-title { |
|
912 margin: 15px 0; |
|
913 } |
|
914 |
|
915 .customize-themes-panel .accordion-section-title { |
|
916 margin: 15px -8px; |
|
917 } |
|
918 |
|
919 .control-section-themes .accordion-section-title { |
|
920 padding-left: 100px; /* Space for the button */ |
|
921 } |
|
922 |
|
923 .control-section-themes .accordion-section-title span { |
|
924 font-size: small; |
|
925 display: block; |
|
926 font-weight: 400; |
|
927 } |
|
928 |
|
929 .control-section-themes .accordion-section-title .change-theme, |
|
930 .control-section-themes .accordion-section-title .customize-theme { |
|
931 position: absolute; |
|
932 left: 10px; |
|
933 top: 50%; |
|
934 margin-top: -14px; |
|
935 font-weight: normal; |
|
936 } |
|
937 |
|
938 .customize-themes-panel { |
|
939 display: none; |
|
940 padding: 0 8px; |
|
941 background: #f1f1f1; |
|
942 box-sizing: border-box; |
|
943 -webkit-box-sizing: border-box; |
|
944 -moz-box-sizing: border-box; |
|
945 box-sizing: border-box; |
|
946 } |
|
947 |
|
948 |
|
949 .customize-themes-panel > h2 { |
|
950 padding: 15px 8px 0 8px; |
|
951 } |
|
952 |
|
953 .control-section.open .customize-themes-panel { |
|
954 display: block; |
|
955 } |
|
956 |
|
957 #customize-theme-controls .customize-themes-panel .accordion-section-content { |
|
958 background: transparent; |
|
959 display: block; |
|
960 } |
|
961 |
|
962 .customize-control.customize-control-theme { |
|
963 margin-bottom: 8px; |
|
964 } |
|
965 |
|
966 .wp-customizer .theme-browser .themes { |
|
967 padding-bottom: 8px; |
|
968 } |
|
969 |
|
970 .wp-customizer .theme-browser .theme { |
|
971 margin: 0; |
|
972 width: 100%; |
|
973 } |
|
974 |
|
975 .wp-customizer .theme-browser .theme .theme-actions { |
|
976 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; |
|
977 opacity: 1; |
|
978 } |
|
979 |
|
980 #customize-controls h3.theme-name { |
|
981 font-size: 15px; |
|
982 } |
|
983 |
|
984 #customize-controls .theme-overlay .theme-name { |
|
985 font-size: 32px; |
|
986 } |
|
987 |
|
988 .wp-customizer #themes-filter { |
|
989 font-size: 16px; |
|
990 font-weight: 300; |
|
991 line-height: 1.5; |
|
992 width: 100%; |
|
993 } |
|
994 |
|
995 #accordion-section-themes .accordion-section-title:after { |
|
996 display: none; |
|
997 } |
|
998 |
|
999 #customize-theme-controls .control-section-themes.current-panel > h3.accordion-section-title { |
|
1000 right: 0; |
|
1001 } |
|
1002 |
|
1003 .customize-themes-panel.control-panel-content { |
|
1004 position: absolute; |
|
1005 right: -100%; |
|
1006 top: 0; |
|
1007 width: 100%; |
|
1008 border-top: 1px solid #ddd; |
|
1009 } |
|
1010 |
|
1011 .in-themes-panel #customize-info, |
|
1012 .in-themes-panel #customize-theme-controls > ul > .accordion-section { |
|
1013 right: 100%; |
|
1014 } |
|
1015 |
|
1016 /* Details View */ |
|
1017 .wp-customizer .theme-overlay { |
|
1018 display: none; |
|
1019 } |
|
1020 |
|
1021 .wp-customizer.modal-open .theme-overlay { |
|
1022 position: fixed; |
|
1023 right: 0; |
|
1024 top: 0; |
|
1025 left: 0; |
|
1026 bottom: 0; |
|
1027 z-index: 109; |
|
1028 } |
|
1029 |
|
1030 .wp-customizer .theme-overlay .theme-backdrop { |
|
1031 background: rgba( 238, 238, 238, 0.75 ); |
|
1032 position: fixed; |
|
1033 z-index: 110; |
|
1034 } |
|
1035 |
|
1036 .wp-customizer .theme-overlay .theme-wrap { |
|
1037 right: 90px; |
|
1038 left: 90px; |
|
1039 top: 45px; |
|
1040 bottom: 45px; |
|
1041 z-index: 120; |
|
1042 max-width: 1740px; /* To ensure that theme screenshots are not displayed larger than 880px wide. */ |
|
1043 } |
|
1044 |
|
1045 .wp-customizer .theme-overlay .theme-actions { |
|
1046 text-align: left; /* Because there's only one action, match the pattern of media modals and right-align the action. */ |
|
1047 } |
|
1048 |
|
1049 .modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content { |
|
1050 overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */ |
|
1051 } |
|
1052 |
|
1053 .ie8 .wp-customizer .theme-overlay .theme-header, |
|
1054 .ie8 .wp-customizer .theme-overlay .theme-about, |
|
1055 .ie8 .wp-customizer .theme-overlay .theme-actions { |
|
1056 position: static; |
|
1057 } |
|
1058 |
|
1059 /* Small Screens */ |
|
1060 @media (max-width:850px), (max-height:472px) { |
|
1061 .wp-customizer .theme-overlay .theme-wrap { |
|
1062 right: 0; |
|
1063 left: 0; |
|
1064 top: 0; |
|
1065 bottom: 0; |
|
1066 } |
|
1067 } |
|
1068 |
|
1069 /* Handle cheaters. */ |
|
1070 body.cheatin { |
|
1071 font-size: medium; |
|
1072 height: auto; |
|
1073 background: #fff; |
|
1074 margin: 50px auto 2em; |
|
1075 padding: 1em 2em; |
|
1076 max-width: 700px; |
|
1077 min-width: 0; |
|
1078 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.13); |
|
1079 box-shadow: 0 1px 3px rgba(0,0,0,0.13); |
|
1080 } |
|
1081 |
|
1082 body.cheatin p { |
|
1083 font-size: 14px; |
|
1084 line-height: 1.5; |
|
1085 margin: 25px 0 20px; |
|
1086 } |
|
1087 |
|
1088 /* Responsive */ |
|
1089 .customize-controls-preview-toggle { |
|
1090 display: none; |
|
1091 } |
|
1092 |
|
1093 @media only screen and (max-width: 780px) { |
|
1094 .wp-customizer .theme:not(.active):hover .theme-actions, |
|
1095 .wp-customizer .theme:not(.active):focus .theme-actions { |
|
1096 display: block; |
|
1097 } |
|
1098 |
|
1099 .wp-customizer .theme-browser .theme.active .theme-name span { |
|
1100 display: inline; |
|
1101 } |
|
1102 } |
|
1103 |
|
1104 @media screen and ( max-width: 640px ) { |
|
1105 #customize-controls { |
|
1106 width: 100%; |
|
1107 } |
|
1108 |
|
1109 .wp-full-overlay.expanded { |
|
1110 margin-right: 0; |
|
1111 } |
|
1112 |
|
1113 .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content { |
|
1114 bottom: 0; |
|
1115 } |
|
1116 |
|
1117 .customize-controls-preview-toggle { |
|
1118 display: block; |
|
1119 position: absolute; |
|
1120 top: 0; |
|
1121 right: 48px; |
|
1122 line-height: 45px; |
|
1123 font-size: 14px; |
|
1124 padding: 0 12px 0 12px; |
|
1125 margin: 0; |
|
1126 height: 45px; |
|
1127 background: #eee; |
|
1128 border-left: 1px solid #ddd; |
|
1129 color: #444; |
|
1130 cursor: pointer; |
|
1131 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; |
|
1132 transition: color .1s ease-in-out, background .1s ease-in-out; |
|
1133 } |
|
1134 |
|
1135 #customize-footer-actions, |
|
1136 #customize-preview, |
|
1137 .customize-controls-preview-toggle .controls, |
|
1138 .preview-only .wp-full-overlay-sidebar-content, |
|
1139 .preview-only .customize-controls-preview-toggle .preview { |
|
1140 display: none; |
|
1141 } |
|
1142 |
|
1143 .customize-controls-preview-toggle .preview:before, |
|
1144 .customize-controls-preview-toggle .controls:before { |
|
1145 font: normal 20px/1 dashicons; |
|
1146 content: "\f177"; |
|
1147 position: relative; |
|
1148 top: 4px; |
|
1149 margin-left: 6px; |
|
1150 } |
|
1151 |
|
1152 .customize-controls-preview-toggle .controls:before { |
|
1153 content: "\f100"; |
|
1154 } |
|
1155 |
|
1156 .preview-only #customize-controls { |
|
1157 height: 45px; |
|
1158 } |
|
1159 |
|
1160 .preview-only #customize-preview, |
|
1161 .preview-only .customize-controls-preview-toggle .controls { |
|
1162 display: block; |
|
1163 } |
|
1164 |
|
1165 #customize-preview { |
|
1166 top: 45px; |
|
1167 bottom: 0; |
|
1168 height: auto; |
|
1169 } |
|
1170 |
|
1171 .wp-core-ui.wp-customizer .button { |
|
1172 padding: 6px 14px; |
|
1173 line-height: normal; |
|
1174 font-size: 14px; |
|
1175 vertical-align: middle; |
|
1176 height: auto; |
|
1177 margin-bottom: 4px; |
|
1178 } |
|
1179 |
|
1180 .adding-widget #customize-header-actions .primary-actions { |
|
1181 display: none; |
|
1182 } |
|
1183 |
|
1184 .adding-widget #customize-header-actions .secondary-actions { |
|
1185 display: block; |
|
1186 } |
|
1187 |
|
1188 #customize-header-actions .button-primary { |
|
1189 margin-top: 6px; |
|
1190 } |
|
1191 } |