]> scripts.mit.edu Git - autoinstalls/wordpress.git/blob - wp-admin/css/themes.css
988db9925ac276ac7b808dc73fc566c1ad425832
[autoinstalls/wordpress.git] / wp-admin / css / themes.css
1 /*------------------------------------------------------------------------------
2   16.0 - Themes
3 ------------------------------------------------------------------------------*/
4
5
6 /*------------------------------------------------------------------------------
7   16.1 - Manage Themes
8 ------------------------------------------------------------------------------*/
9
10 .theme-browser .themes {
11         clear: both;
12 }
13
14 .themes-php .wrap h1 {
15         float: left;
16         margin-bottom: 15px;
17 }
18
19 .network-admin.themes-php .wrap h1 {
20         margin-bottom: 0;
21 }
22
23 .themes-php .wrap h1 .button {
24         margin-left: 20px;
25 }
26
27 /* Search form */
28 .themes-php .wp-filter-search {
29         position: relative;
30         top: -2px;
31         left: 20px;
32         margin: 0;
33         width: 280px;
34         font-size: 16px;
35         font-weight: 300;
36         line-height: 1.5;
37 }
38
39 /* Position admin messages */
40 .themes-php div.updated,
41 .themes-php div.error,
42 .themes-php div.notice {
43         margin: 0 0 20px 0;
44         clear: both;
45 }
46
47 /**
48  * Main theme element
49  * (has flexible margins)
50  */
51 .theme-browser .theme {
52         cursor: pointer;
53         float: left;
54         margin: 0 4% 4% 0;
55         position: relative;
56         width: 30.6%;
57         border: 1px solid #ddd;
58         -webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
59         box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
60         -webkit-box-sizing: border-box;
61         -moz-box-sizing: border-box;
62         box-sizing: border-box;
63 }
64
65 .ie8 .theme-browser .theme {
66         width: 30%;
67         margin: 0 3% 4% 0;
68 }
69
70 .theme-browser .theme:nth-child(3n) {
71         margin-right: 0;
72 }
73
74 .theme-browser .theme:hover,
75 .theme-browser .theme:focus {
76         cursor: pointer;
77 }
78
79 .theme-browser .theme .theme-name {
80         font-size: 15px;
81         font-weight: 600;
82         height: 18px;
83         margin: 0;
84         padding: 15px;
85         -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
86         box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
87         overflow: hidden;
88         white-space: nowrap;
89         text-overflow: ellipsis;
90         background: #fff;
91         background: rgba(255,255,255,0.65);
92 }
93
94 /* Activate and Customize buttons, shown on hover and focus */
95 .theme-browser .theme .theme-actions {
96         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
97         opacity: 0;
98         -webkit-transition: opacity 0.1s ease-in-out;
99         transition: opacity 0.1s ease-in-out;
100         position: absolute;
101         bottom: 0;
102         right: 0;
103         height: 38px;
104         padding: 9px 10px 0 10px;
105         background: rgba(244, 244, 244, 0.7);
106         border-left: 1px solid rgba(0,0,0,0.05);
107 }
108
109 .theme-browser .theme:hover .theme-actions,
110 .theme-browser .theme.focus .theme-actions,
111 .theme-browser .theme:focus .theme-actions {
112         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
113         opacity: 1;
114 }
115
116 .theme-browser .theme .theme-actions .button-primary {
117         margin-right: 3px;
118 }
119
120 .theme-browser .theme .theme-actions .button-secondary {
121         float: none;
122         margin-left: 3px;
123 }
124
125 /**
126  * Theme Screenshot
127  *
128  * Has a fixed aspect ratio of 1.5 to 1 regardless of screenshot size
129  * It is also responsive.
130  */
131 .theme-browser .theme .theme-screenshot {
132         display: block;
133         overflow: hidden;
134         position: relative;
135         -webkit-backface-visibility: hidden; /* Prevents flicker of the screenshot on hover. */
136         -webkit-transition: opacity 0.2s ease-in-out;
137         transition: opacity 0.2s ease-in-out;
138 }
139
140 .theme-browser .theme .theme-screenshot:after {
141         content: "";
142         display: block;
143         padding-top: 66.66666%; /* using a 3/2 aspect ratio */
144 }
145
146 .theme-browser .theme .theme-screenshot img {
147         height: auto;
148         position: absolute;
149         left: 0;
150         top: 0;
151         width: 100%;
152         -webkit-transition: opacity 0.2s ease-in-out;
153         transition: opacity 0.2s ease-in-out;
154 }
155
156 .theme-browser .theme:hover .theme-screenshot,
157 .theme-browser .theme:focus .theme-screenshot {
158         background: #fff;
159 }
160
161 .theme-browser.rendered .theme:hover .theme-screenshot img,
162 .theme-browser.rendered .theme:focus .theme-screenshot img {
163         opacity: 0.4;
164 }
165
166 .theme-browser .theme .more-details {
167         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
168         opacity: 0;
169         position: absolute;
170         top: 35%;
171         right: 25%;
172         left: 25%;
173         background: #23282d;
174         background: rgba(0,0,0,0.7);
175         color: #fff;
176         font-size: 15px;
177         text-shadow: 0 1px 0 rgba(0,0,0,0.6);
178         -webkit-font-smoothing: antialiased;
179         font-weight: 600;
180         padding: 15px 12px;
181         text-align: center;
182         -webkit-border-radius: 3px;
183         border-radius: 3px;
184         -webkit-transition: opacity 0.1s ease-in-out;
185         transition: opacity 0.1s ease-in-out;
186 }
187
188 .theme-browser .theme:focus {
189         border-color: #5b9dd9;
190         -webkit-box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
191         box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
192 }
193
194 .theme-browser .theme:focus .more-details {
195         opacity: 1;
196 }
197
198 /* Current theme needs to have its action always on view */
199 .theme-browser .theme.active:focus .theme-actions {
200         display: block;
201 }
202
203 .theme-browser.rendered .theme:hover .more-details,
204 .theme-browser.rendered .theme:focus .more-details {
205         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
206         opacity: 1;
207 }
208
209 /**
210  * Displays a theme update notice
211  * when an update is available.
212  */
213 .theme-browser .theme .theme-update,
214 .theme-browser .theme .theme-installed {
215         background: #d54e21;
216         background: rgba(213, 78, 33, 0.95);
217         color: #fff;
218         display: block;
219         font-size: 13px;
220         font-weight: 400;
221         height: 48px;
222         line-height: 48px;
223         padding: 0 10px;
224         position: absolute;
225         top: 0;
226         right: 0;
227         left: 0;
228         border-bottom: 1px solid rgba(0,0,0,0.25);
229         overflow: hidden;
230 }
231
232 .theme-browser .theme .theme-update:before,
233 .theme-browser .theme .theme-installed:before {
234         content: "\f463";
235         display: inline-block;
236         font: normal 20px/1 dashicons;
237         margin: 0 6px 0 0;
238         opacity: 0.8;
239         position: relative;
240         top: 5px;
241         speak: none;
242         -webkit-font-smoothing: antialiased;
243 }
244
245
246 /**
247  * The currently active theme
248  */
249 .theme-browser .theme.active .theme-name {
250         background: #23282d;
251         color: #fff;
252         padding-right: 110px;
253         font-weight: 300;
254         -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.5);
255         box-shadow: inset 0 1px 1px rgba(0,0,0,0.5);
256 }
257
258 .theme-browser .customize-control .theme.active .theme-name {
259         padding-right: 15px;
260 }
261
262 .theme-browser .theme.active .theme-name span {
263         font-weight: 600;
264 }
265
266 .theme-browser .theme.active .theme-actions {
267         background: rgba(49,49,49,0.7);
268         border-left: none;
269         opacity: 1;
270 }
271
272 .theme-browser .theme.active .theme-actions .button-primary {
273         margin-right: 0;
274 }
275
276 .theme-browser .theme .theme-author {
277         background: #23282d;
278         color: #eee;
279         display: none;
280         font-size: 14px;
281         margin: 0 10px;
282         padding: 5px 10px;
283         position: absolute;
284         bottom: 56px;
285 }
286
287 .theme-browser .theme.display-author .theme-author {
288         display: block;
289 }
290
291 .theme-browser .theme.display-author .theme-author a {
292         color: inherit;
293         text-decoration: none;
294 }
295
296 /**
297  * Add new theme
298  */
299 .theme-browser .theme.add-new-theme {
300         border: none;
301         -webkit-box-shadow: none;
302         box-shadow: none;
303 }
304
305 .theme-browser .theme.add-new-theme a {
306         text-decoration: none;
307         display: block;
308         position: relative;
309         z-index: 1;
310 }
311
312 .theme-browser .theme.add-new-theme a:after {
313         display: block;
314         content: "";
315         background: transparent;
316         background: rgba(0, 0, 0, 0);
317         position: absolute;
318         top: 0;
319         left: 0;
320         right: 0;
321         bottom: 0;
322         padding: 0;
323         text-shadow: none;
324         border: 5px dashed #d5d2ca;
325         border: 5px dashed rgba(0, 0, 0, 0.1);
326         -webkit-box-sizing: border-box;
327         -moz-box-sizing: border-box;
328         box-sizing: border-box;
329 }
330
331 .theme-browser .theme.add-new-theme span:after {
332         background: #e5e5e5;
333         background: rgba(153, 153, 153, 0.1);
334         -webkit-border-radius: 50%;
335         border-radius: 50%;
336         display: inline-block;
337         content: "\f132";
338         -webkit-font-smoothing: antialiased;
339         font: normal 74px/115px dashicons;
340         width: 100px;
341         height: 100px;
342         vertical-align: middle;
343         text-align: center;
344         color: rgb(153, 153, 153);
345         position: absolute;
346         top: 30%;
347         left: 50%;
348         margin-left: -50px;
349         text-indent: -4px;
350         padding: 0;
351         text-shadow: none;
352         z-index:4;
353 }
354
355 .rtl .theme-browser .theme.add-new-theme span:after {
356         text-indent: 4px;
357 }
358
359 .theme-browser .theme.add-new-theme a:hover .theme-screenshot,
360 .theme-browser .theme.add-new-theme a:focus .theme-screenshot {
361         background: none;
362 }
363
364 .theme-browser .theme.add-new-theme a:hover span:after,
365 .theme-browser .theme.add-new-theme a:focus span:after {
366         background: #fff;
367         color: #0073aa;
368 }
369
370 .theme-browser .theme.add-new-theme a:hover:after,
371 .theme-browser .theme.add-new-theme a:focus:after {
372         border-color: transparent;
373         color: #fff;
374         background: #0073aa;
375         content: "";
376 }
377
378 .theme-browser .theme.add-new-theme .theme-name {
379         background: none;
380         text-align: center;
381         -webkit-box-shadow: none;
382         box-shadow: none;
383         font-weight: 400;
384         position: relative;
385         top: 0;
386         margin-top: -18px;
387         padding-top: 0;
388         padding-bottom: 48px;
389 }
390
391 .theme-browser .theme.add-new-theme a:hover .theme-name,
392 .theme-browser .theme.add-new-theme a:focus .theme-name {
393         color: #fff;
394         z-index: 2;
395 }
396
397 /**
398  * Theme Overlay
399  * Shown when clicking a theme
400  */
401 .theme-overlay .theme-backdrop {
402         position: absolute;
403         left: -20px;
404         right: 0;
405         top: 0;
406         bottom: 0;
407         background: #f1f1f1;
408         background: rgba( 238, 238, 238, 0.9 );
409         z-index: 10000; /* Over WP Pointers. */
410 }
411
412 .theme-overlay .theme-header {
413         position: absolute;
414         top: 0;
415         left: 0;
416         right: 0;
417         height: 48px;
418         border-bottom: 1px solid #ddd;
419 }
420
421 .theme-overlay .theme-header button {
422         padding: 0;
423 }
424
425 .theme-overlay .theme-header .close {
426         cursor: pointer;
427         height: 48px;
428         width: 50px;
429         text-align: center;
430         float: right;
431         border: 0;
432         border-left: 1px solid #ddd;
433         background-color: transparent;
434         -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
435         transition: color .1s ease-in-out, background .1s ease-in-out;
436 }
437
438 .theme-overlay .theme-header .close:before {
439         font: normal 22px/50px dashicons !important;
440         color: #72777c;
441         display: inline-block;
442         content: "\f335";
443         font-weight: 300;
444 }
445
446 /* Left and right navigation */
447 .theme-overlay .theme-header .right,
448 .theme-overlay .theme-header .left {
449         cursor: pointer;
450         color: #72777c;
451         background-color: transparent;
452         height: 48px;
453         width: 54px;
454         float: left;
455         text-align: center;
456         border: 0;
457         border-right: 1px solid #ddd;
458         -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
459         transition: color .1s ease-in-out, background .1s ease-in-out;
460 }
461
462 .theme-overlay .theme-header .close:focus,
463 .theme-overlay .theme-header .close:hover,
464 .theme-overlay .theme-header .right:focus,
465 .theme-overlay .theme-header .right:hover,
466 .theme-overlay .theme-header .left:focus,
467 .theme-overlay .theme-header .left:hover {
468         background: #ddd;
469         border-color: #ccc;
470         color: #000;
471 }
472
473 .theme-overlay .theme-header .close:focus:before,
474 .theme-overlay .theme-header .close:hover:before {
475         color: #000;
476 }
477
478 .theme-overlay .theme-header .close:focus,
479 .theme-overlay .theme-header .right:focus,
480 .theme-overlay .theme-header .left:focus {
481     -webkit-box-shadow: none;
482     box-shadow: none;
483     outline: none;
484 }
485
486 .theme-overlay .theme-header .left.disabled,
487 .theme-overlay .theme-header .right.disabled,
488 .theme-overlay .theme-header .left.disabled:hover,
489 .theme-overlay .theme-header .right.disabled:hover {
490         color: #ccc;
491         background: inherit;
492         cursor: inherit;
493 }
494
495 .theme-overlay .theme-header .right:before,
496 .theme-overlay .theme-header .left:before {
497         font: normal 20px/50px dashicons !important;
498         display: inline;
499         font-weight: 300;
500 }
501
502 .theme-overlay .theme-header .left:before {
503         content: "\f341";
504 }
505
506 .theme-overlay .theme-header .right:before {
507         content: "\f345";
508 }
509
510 .theme-overlay .theme-wrap {
511         clear: both;
512         position: fixed;
513         top: 9%;
514         left: 190px;
515         right: 30px;
516         bottom: 3%;
517         background: #fff;
518         -webkit-box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
519         box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
520         z-index: 10000; /* Over WP Pointers. */
521         -webkit-box-sizing: border-box;
522         -moz-box-sizing: border-box;
523         box-sizing: border-box;
524         -webkit-overflow-scrolling: touch;
525 }
526
527 body.folded .theme-overlay .theme-wrap {
528         left: 70px;
529 }
530
531 .theme-overlay .theme-about {
532         position: absolute;
533         top: 49px;
534         bottom: 57px;
535         left: 0;
536         right: 0;
537         overflow: auto;
538         padding: 2% 4%;
539 }
540
541 .theme-overlay .theme-actions {
542         position: absolute;
543         text-align: center;
544         bottom: 0;
545         left: 0;
546         right: 0;
547         padding: 10px 25px 5px;
548         background: #f3f3f3;
549         z-index: 30;
550         -webkit-box-sizing: border-box;
551         -moz-box-sizing: border-box;
552         box-sizing: border-box;
553         border-top: 1px solid #eee;
554 }
555
556 .ie8 .theme-overlay .theme-actions {
557         border: 1px solid #eee;
558 }
559
560 .theme-overlay .theme-actions a {
561         margin-right: 5px;
562         margin-bottom: 5px;
563 }
564
565 /* Hide-if-customize for items we can't add classes to */
566 .customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-header"],
567 .customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-background"] {
568         display: none;
569 }
570
571 .broken-themes a.delete-theme,
572 .theme-overlay .theme-actions .delete-theme {
573         color: #a00;
574         text-decoration: none;
575         border-color: transparent;
576         -webkit-box-shadow: none;
577         box-shadow: none;
578         background: transparent;
579 }
580
581 .theme-overlay .theme-actions .delete-theme {
582         position: absolute;
583         right: 10px;
584         bottom: 5px;
585 }
586
587 .broken-themes a.delete-theme:hover,
588 .broken-themes a.delete-theme:focus,
589 .theme-overlay .theme-actions .delete-theme:hover,
590 .theme-overlay .theme-actions .delete-theme:focus {
591         background: #d54e21;
592         color: #fff;
593         border-color: #d54e21;
594 }
595
596 .theme-overlay .theme-actions .active-theme,
597 .theme-overlay.active .theme-actions .inactive-theme {
598         display: none;
599 }
600
601 .theme-overlay .theme-actions .inactive-theme,
602 .theme-overlay.active .theme-actions .active-theme {
603         display: block;
604 }
605
606 /**
607  * Theme Screenshots gallery
608  */
609 .theme-overlay .theme-screenshots {
610         float: left;
611         margin: 0 30px 0 0;
612         width: 55%;
613         max-width: 880px;
614         text-align: center;
615 }
616
617 /* First screenshot, shown big */
618 .theme-overlay .screenshot {
619         border: 1px solid #fff;
620         -webkit-box-sizing: border-box;
621         -moz-box-sizing: border-box;
622         box-sizing: border-box;
623         overflow: hidden;
624         position: relative;
625         -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
626         box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
627 }
628
629 .theme-overlay .screenshot:after {
630         content: "";
631         display: block;
632         padding-top: 75%; /* using a 4/3 aspect ratio */
633 }
634
635 .theme-overlay .screenshot img {
636         height: auto;
637         position: absolute;
638         left: 0;
639         top: 0;
640         width: 100%;
641 }
642 /* Handles old 300px screenshots */
643 .theme-overlay.small-screenshot .theme-screenshots {
644         position: absolute;
645         width: 302px;
646 }
647 .theme-overlay.small-screenshot .theme-info {
648         margin-left: 350px;
649         width: auto;
650 }
651
652 /* Other screenshots, shown small and square */
653 .theme-overlay .screenshot.thumb {
654         background: #ccc;
655         border: 1px solid #eee;
656         float: none;
657         display: inline-block;
658         margin: 10px 5px 0;
659         width: 140px;
660         height: 80px;
661         cursor: pointer;
662 }
663
664 .theme-overlay .screenshot.thumb:after {
665         content: "";
666         display: block;
667         padding-top: 100%; /* using a 1/1 aspect ratio */
668 }
669
670 .theme-overlay .screenshot.thumb img {
671         cursor: pointer;
672         height: auto;
673         position: absolute;
674         left: 0;
675         top: 0;
676         width: 100%;
677         height: auto;
678 }
679
680 .theme-overlay .screenshot.selected {
681         background: transparent;
682         border: 2px solid #00a0d2;
683 }
684
685 .theme-overlay .screenshot.selected img {
686         opacity: 0.8;
687 }
688
689 /* No screenshot placeholder */
690 .theme-browser .theme .theme-screenshot.blank,
691 .theme-overlay .screenshot.blank {
692         background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=);
693 }
694
695 /**
696  * Theme heading information
697  */
698 .theme-overlay .theme-info {
699         width: 40%;
700         float: left;
701 }
702
703 .theme-overlay .current-label {
704         background: #32373c;
705         color: #fff;
706         font-size: 11px;
707         display: inline-block;
708         padding: 2px 8px;
709         -webkit-border-radius: 2px;
710         border-radius: 2px;
711         margin: 0 0 -10px;
712         -webkit-user-select: none;
713         -moz-user-select: none;
714         -ms-user-select: none;
715         user-select: none;
716 }
717
718 .theme-overlay .theme-name {
719         color: #23282d;
720         font-size: 32px;
721         font-weight: 100;
722         margin: 10px 0 0;
723         line-height: 1.3;
724 }
725
726 .theme-overlay .theme-version {
727         color: #72777c;
728         font-size: 13px;
729         font-weight: 400;
730         float: none;
731         display: inline-block;
732         margin-left: 10px;
733 }
734
735 .theme-overlay .theme-author {
736         margin: 15px 0 25px;
737         color: #72777c;
738         font-size: 16px;
739         font-weight: 400;
740         line-height: inherit;
741 }
742
743 .theme-overlay .theme-author a {
744         text-decoration: none;
745 }
746
747 .theme-overlay .theme-description {
748         color: #555;
749         font-size: 15px;
750         font-weight: 400;
751         line-height: 1.5;
752         margin: 30px 0 0 0;
753 }
754
755 .theme-overlay .theme-tags {
756         border-top: 3px solid #eee;
757         color: #82878c;
758         font-size: 13px;
759         font-weight: 400;
760         margin: 30px 0 0 0;
761         padding-top: 20px;
762 }
763
764 .theme-overlay .theme-tags span {
765         color: #444;
766         font-weight: bold;
767         margin-right: 5px;
768 }
769
770 .theme-overlay .parent-theme {
771         background: #f7fcfe;
772         border: 1px solid #eee;
773         border-left: 4px solid #00a0d2;
774         font-size: 14px;
775         font-weight: normal;
776         margin-top: 30px;
777         padding: 10px 10px 10px 20px;
778 }
779
780 .theme-overlay .parent-theme strong {
781         font-weight: 700;
782 }
783
784 /**
785  * Single Theme Mode
786  * Displays detailed view inline when a user has no switch capabilities
787  */
788 .single-theme .theme-overlay .theme-backdrop,
789 .single-theme .theme-overlay .theme-header,
790 .single-theme .theme {
791         display: none;
792 }
793
794 .single-theme .theme-overlay .theme-wrap {
795         clear: both;
796         min-height: 330px;
797         position: relative;
798         left: auto;
799         right: auto;
800         top: auto;
801         bottom: auto;
802         z-index: 10;
803 }
804
805 .single-theme .theme-overlay .theme-about {
806         padding: 30px 30px 70px;
807         position: static;
808 }
809
810 .single-theme .theme-overlay .theme-actions {
811         position: absolute;
812 }
813
814 /**
815  * Basic Responsive structure...
816  *
817  * Shuffles theme columns around based on screen width
818  */
819
820 @media only screen and (min-width: 2000px) {
821         #wpwrap .theme-browser .theme {
822                 width: 17.6%;
823                 margin: 0 3% 3% 0;
824         }
825
826         #wpwrap .theme-browser .theme:nth-child(3n),
827         #wpwrap .theme-browser .theme:nth-child(4n) {
828                 margin-right: 3%;
829         }
830
831         #wpwrap .theme-browser .theme:nth-child(5n) {
832                 margin-right: 0;
833         }
834 }
835
836 @media only screen and (min-width: 1680px) {
837         .theme-overlay .theme-wrap {
838                 width: 1450px;
839                 margin: 0 auto;
840         }
841 }
842
843 /* Maximum screenshot width reaches 440px */
844 @media only screen and (min-width: 1640px) {
845         .theme-browser .theme {
846                 width: 22.7%;
847                 margin: 0 3% 3% 0;
848         }
849         .theme-browser .theme .theme-screenshot:after {
850                 padding-top: 75%; /* using a 4/3 aspect ratio */
851         }
852
853         .theme-browser .theme:nth-child(3n) {
854                 margin-right: 3%;
855         }
856
857         .theme-browser .theme:nth-child(4n) {
858                 margin-right: 0;
859         }
860 }
861 /* Maximum screenshot width reaches 440px */
862 @media only screen and (max-width: 1120px) {
863         .theme-browser .theme {
864                 width: 47.5%;
865                 margin-right: 0;
866         }
867
868         .theme-browser .theme:nth-child(even) {
869                 margin-right: 0;
870         }
871
872         .theme-browser .theme:nth-child(odd) {
873                 margin-right: 5%;
874         }
875 }
876
877 /* Admin menu is folded */
878 @media only screen and (max-width: 900px) {
879         .theme-overlay .theme-wrap {
880                 left: 65px;
881         }
882 }
883
884 @media only screen and (max-width: 780px) {
885         body.folded .theme-overlay .theme-wrap,
886         .theme-overlay .theme-wrap {
887                 top: 0; /* The adminmenu isn't fixed on mobile, so this can use the full viewport height */
888                 right: 0;
889                 bottom: 0;
890                 left: 0;
891                 padding: 70px 20px 20px;
892                 border: none;
893                 z-index: 100000; /* should overlap #wpadminbar. */
894                 position: fixed;
895         }
896
897         .theme-browser .theme.active .theme-name span {
898                 /* Hide the "Active: " label on smaller screens. */
899                 display: none;
900         }
901
902         .theme-overlay .theme-screenshots {
903                 width: 40%;
904         }
905
906         .theme-overlay .theme-info {
907                 width: 50%;
908         }
909         .single-theme .theme-wrap {
910                 padding: 10px;
911         }
912
913         .theme-browser .theme .theme-actions {
914                 padding: 5px 10px 4px 10px;
915         }
916
917         .theme-overlay.small-screenshot .theme-screenshots {
918                 position: static;
919                 float: none;
920                 max-width: 302px;
921         }
922
923         .theme-overlay.small-screenshot .theme-info {
924                 margin-left: 0;
925                 width: auto;
926         }
927
928         .theme:not(.active):hover .theme-actions,
929         .theme:not(.active):focus .theme-actions,
930         .theme:hover .more-details,
931         .theme:focus .more-details {
932                 display: none;
933         }
934
935         .theme-browser.rendered .theme:hover .theme-screenshot img,
936         .theme-browser.rendered .theme:focus .theme-screenshot img {
937                 opacity: 1.0;
938         }
939 }
940
941 @media only screen and (max-width: 480px) {
942         .theme-browser .theme {
943                 width: 100%;
944                 margin-right: 0;
945         }
946
947         .theme-browser .theme:nth-child(2n),
948         .theme-browser .theme:nth-child(3n) {
949                 margin-right: 0;
950         }
951 }
952
953 @media only screen and (max-width: 650px) {
954         .theme-overlay .theme-update,
955         .theme-overlay .theme-description {
956                 margin-left: 0;
957         }
958
959         .theme-overlay .theme-actions .delete-theme {
960                 position: relative;
961                 right: auto;
962                 bottom: auto;
963         }
964
965         .theme-overlay .theme-actions .inactive-theme {
966                 display: inline;
967         }
968
969         .theme-overlay .theme-screenshots {
970                 width: 100%;
971                 float: none;
972         }
973
974         .theme-overlay .theme-info {
975                 width: 100%;
976         }
977
978         .theme-overlay .theme-author {
979                 margin: 5px 0 15px 0;
980         }
981
982         .theme-overlay .current-label {
983                 margin-top: 10px;
984                 font-size: 13px;
985         }
986
987         .themes-php .wp-filter-search {
988                 float: none;
989                 clear: both;
990                 left: 0;
991                 top: 0;
992                 right: 0;
993                 margin: 10px 0;
994                 width: 100%;
995                 max-width: 280px;
996         }
997
998         .theme-browser .theme.add-new-theme span:after {
999                 font: normal 60px/90px dashicons;
1000                 width: 80px;
1001                 height: 80px;
1002                 top: 30%;
1003                 left: 50%;
1004                 text-indent: 0;
1005                 margin-left: -40px;
1006         }
1007
1008         .single-theme .theme-wrap {
1009                 margin: 0 -12px 0 -10px;
1010                 padding: 10px;
1011         }
1012         .single-theme .theme-overlay .theme-about {
1013                 padding: 10px;
1014                 overflow: visible;
1015         }
1016         .single-theme .current-label {
1017                 display: none;
1018         }
1019         .single-theme .theme-overlay .theme-actions {
1020                 position: static;
1021         }
1022 }
1023
1024 .broken-themes {
1025         clear: both;
1026 }
1027
1028 .broken-themes table {
1029         text-align: left;
1030         width: 50%;
1031         border-spacing: 3px;
1032         padding: 3px;
1033 }
1034
1035
1036 /*------------------------------------------------------------------------------
1037   16.2 - Install Themes
1038 ------------------------------------------------------------------------------*/
1039
1040 /* Already installed theme */
1041 .theme-browser .theme .theme-installed {
1042         background: #0073aa;
1043 }
1044 .theme-browser .theme .theme-installed:before {
1045         content: "\f147";
1046 }
1047 .theme-browser .theme.is-installed .theme-actions .button-primary {
1048         display: none !important;
1049 }
1050
1051 .theme-install-php .wp-filter {
1052         padding: 0 20px;
1053 }
1054
1055 .theme-install-php a.upload,
1056 .theme-install-php a.browse-themes {
1057         cursor: pointer;
1058 }
1059 .theme-install-php a.browse-themes,
1060 .theme-install-php.show-upload-theme a.upload {
1061         display: none;
1062 }
1063 .theme-install-php.show-upload-theme a.browse-themes {
1064         display: inline;
1065 }
1066 .upload-theme,
1067 .upload-plugin {
1068         -webkit-box-sizing: border-box;
1069         -moz-box-sizing: border-box;
1070         box-sizing: border-box;
1071         display: none;
1072         margin: 0;
1073         padding: 0;
1074         width: 100%;
1075         overflow: hidden;
1076         position: relative;
1077         top: 10px;
1078 }
1079 body.show-upload-theme .upload-theme,
1080 .upload-plugin {
1081         display: block;
1082 }
1083 .upload-theme .wp-upload-form,
1084 .upload-plugin .wp-upload-form {
1085         background: #fafafa;
1086         border: 1px solid #e5e5e5;
1087         padding: 30px;
1088         margin: 30px auto;
1089         max-width: 380px;
1090 }
1091 .upload-theme .install-help,
1092 .upload-plugin .install-help {
1093         color: #555d66; /* #f1f1f1 background */
1094         font-size: 18px;
1095         font-style: normal;
1096         margin: 0;
1097         padding: 40px 0 0;
1098         text-align: center;
1099 }
1100 body.show-upload-theme .upload-theme + .wp-filter,
1101 body.show-upload-theme .upload-theme + .wp-filter + .theme-browser {
1102         display: none;
1103 }
1104
1105 p.no-themes {
1106         clear: both;
1107         color: #666;
1108         font-size: 18px;
1109         font-style: normal;
1110         margin: 0;
1111         padding: 100px 0;
1112         text-align: center;
1113         display: none;
1114 }
1115
1116 body.no-results p.no-themes {
1117         display: block;
1118 }
1119
1120 body.show-upload-theme p.no-themes {
1121         display: none !important;
1122 }
1123
1124 .theme-install-php .add-new-theme {
1125         display: none !important;
1126 }
1127
1128 @media only screen and (max-width: 1120px) {
1129         .upload-theme .wp-upload-form {
1130                 margin: 20px 0;
1131                 max-width: 100%;
1132         }
1133         .upload-theme .install-help {
1134                 font-size: 15px;
1135                 padding: 20px 0 0;
1136                 text-align: left;
1137         }
1138 }
1139
1140 .theme-details .theme-rating {
1141         line-height: 23px;
1142 }
1143
1144 .theme-details .star-rating {
1145         display: inline;
1146 }
1147
1148 .theme-details .num-ratings,
1149 .theme-details .no-rating {
1150         font-size: 11px;
1151         color: #72777c;
1152 }
1153
1154 .theme-details .no-rating {
1155         display: block;
1156         line-height: 20px;
1157 }
1158
1159 /*------------------------------------------------------------------------------
1160   16.3 - Custom Header Screen
1161 ------------------------------------------------------------------------------*/
1162
1163 .appearance_page_custom-header #headimg {
1164         border: 1px solid #ddd;
1165         overflow: hidden;
1166         width: 100%;
1167 }
1168
1169 .appearance_page_custom-header #upload-form p label {
1170         font-size: 12px;
1171 }
1172
1173 .appearance_page_custom-header .available-headers .default-header {
1174         float: left;
1175         margin: 0 20px 20px 0;
1176 }
1177
1178 .appearance_page_custom-header .random-header {
1179         clear: both;
1180         margin: 0 20px 20px 0;
1181         vertical-align: middle;
1182 }
1183
1184 .appearance_page_custom-header .available-headers label input,
1185 .appearance_page_custom-header .random-header label input {
1186         margin-right: 10px;
1187 }
1188
1189 .appearance_page_custom-header .available-headers label img {
1190         vertical-align: middle;
1191 }
1192
1193
1194 /*------------------------------------------------------------------------------
1195   16.4 - Custom Background Screen
1196 ------------------------------------------------------------------------------*/
1197
1198 div#custom-background-image {
1199         min-height: 100px;
1200         border: 1px solid #ddd;
1201 }
1202
1203 div#custom-background-image img {
1204         max-width: 400px;
1205         max-height: 300px;
1206 }
1207
1208 /*------------------------------------------------------------------------------
1209   23.0 - Full Overlay w/ Sidebar
1210 ------------------------------------------------------------------------------*/
1211
1212 body.full-overlay-active {
1213         overflow: hidden;
1214 }
1215
1216 .wp-full-overlay {
1217         background: transparent;
1218         z-index: 500000;
1219         position: fixed;
1220         overflow: visible;
1221         top: 0;
1222         bottom: 0;
1223         left: 0;
1224         right: 0;
1225         height: 100%;
1226         min-width: 0;
1227 }
1228
1229 .wp-full-overlay-sidebar {
1230         -webkit-box-sizing: border-box;
1231         -moz-box-sizing: border-box;
1232         box-sizing: border-box;
1233         position: fixed;
1234         width: 300px;
1235         height: 100%;
1236         top: 0;
1237         bottom: 0;
1238         left: 0;
1239         padding: 0;
1240         margin: 0;
1241         z-index: 10;
1242         background: #eee;
1243         border-right: none;
1244 }
1245
1246 .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
1247         overflow: visible;
1248 }
1249
1250 .wp-full-overlay.collapsed,
1251 .wp-full-overlay.expanded .wp-full-overlay-sidebar {
1252         margin-left: 0 !important;
1253 }
1254
1255 .wp-full-overlay.expanded {
1256         margin-left: 300px;
1257 }
1258
1259 .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
1260         margin-left: -300px;
1261 }
1262
1263 .wp-full-overlay-sidebar:after {
1264         content: "";
1265         display: block;
1266         position: absolute;
1267         top: 0;
1268         bottom: 0;
1269         right: 0;
1270         width: 3px;
1271         z-index: 1000;
1272 }
1273
1274 .wp-full-overlay-main {
1275         position: absolute;
1276         left: 0;
1277         right: 0;
1278         top: 0;
1279         bottom: 0;
1280         height: 100%;
1281 }
1282
1283 .wp-full-overlay-sidebar .wp-full-overlay-header {
1284         position: absolute;
1285         left: 0;
1286         right: 0;
1287         height: 45px;
1288         padding: 0 15px;
1289         line-height: 45px;
1290         z-index: 10;
1291         margin: 0;
1292         border-top: none;
1293         -webkit-box-shadow: none;
1294         box-shadow: none;
1295 }
1296
1297 .wp-full-overlay-sidebar .wp-full-overlay-header a.back {
1298         margin-top: 9px;
1299 }
1300
1301 .wp-full-overlay-sidebar .wp-full-overlay-footer {
1302         bottom: 0;
1303         border-bottom: none;
1304         border-top: none;
1305         -webkit-box-shadow: none;
1306         box-shadow: none;
1307 }
1308
1309 .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
1310         position: absolute;
1311         top: 45px;
1312         bottom: 45px;
1313         left: 0;
1314         right: 0;
1315         overflow: auto;
1316 }
1317
1318 /* Close & Navigation Links */
1319 .theme-install-overlay .wp-full-overlay-sidebar .wp-full-overlay-header {
1320         padding: 0;
1321 }
1322
1323 .theme-install-overlay .close-full-overlay,
1324 .theme-install-overlay .previous-theme,
1325 .theme-install-overlay .next-theme {
1326         display: block;
1327         position: relative;
1328         float: left;
1329         width: 45px;
1330         height: 45px;
1331         padding-right: 2px;
1332         background: #eee;
1333         border-right: 1px solid #ddd;
1334         color: #444;
1335         cursor: pointer;
1336         text-decoration: none;
1337         -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
1338         transition: color .1s ease-in-out, background .1s ease-in-out;
1339 }
1340
1341 .theme-install-overlay .close-full-overlay:hover,
1342 .theme-install-overlay .close-full-overlay:focus,
1343 .theme-install-overlay .previous-theme:hover,
1344 .theme-install-overlay .previous-theme:focus,
1345 .theme-install-overlay .next-theme:hover,
1346 .theme-install-overlay .next-theme:focus {
1347         background: #ddd;
1348         border-color: #ccc;
1349         color: #000;
1350         outline: none;
1351         -webkit-box-shadow: none;
1352         box-shadow: none;
1353 }
1354
1355 .theme-install-overlay .close-full-overlay:before {
1356         font: normal 22px/1 dashicons;
1357         content: "\f335";
1358         position: relative;
1359         top: 7px;
1360         left: 13px;
1361 }
1362
1363 .theme-install-overlay .previous-theme:before {
1364         font: normal 20px/1 dashicons;
1365         content: "\f341";
1366         position: relative;
1367         top: 6px;
1368         left: 14px;
1369 }
1370
1371 .theme-install-overlay .next-theme:before {
1372         font: normal 20px/1 dashicons;
1373         content: "\f345";
1374         position: relative;
1375         top: 6px;
1376         left: 13px;
1377 }
1378
1379 .theme-install-overlay .previous-theme.disabled,
1380 .theme-install-overlay .next-theme.disabled,
1381 .theme-install-overlay .previous-theme.disabled:hover,
1382 .theme-install-overlay .previous-theme.disabled:focus,
1383 .theme-install-overlay .next-theme.disabled:hover,
1384 .theme-install-overlay .next-theme.disabled:focus {
1385         color: #b4b9be;
1386         background: #eee;
1387         cursor: default;
1388         pointer-events: none;
1389 }
1390
1391 /* Collapse Button */
1392 .wp-core-ui .wp-full-overlay .collapse-sidebar {
1393         position: fixed;
1394         bottom: 8px;
1395         left: 10px;
1396         padding: 0;
1397         color: #656a6f;
1398         outline: 0;
1399         line-height: 1;
1400         background-color: transparent !important;
1401         border: none !important;
1402         -webkit-box-shadow: none !important;
1403         box-shadow: none !important;
1404         -webkit-border-radius: 0 !important;
1405         border-radius: 0 !important;
1406 }
1407
1408 .wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
1409 .wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
1410         color: #0073aa;
1411 }
1412
1413 .wp-full-overlay .collapse-sidebar-arrow,
1414 .wp-full-overlay .collapse-sidebar-label {
1415         display: inline-block;
1416         vertical-align: middle;
1417         line-height: 20px;
1418 }
1419
1420 .wp-full-overlay .collapse-sidebar-arrow {
1421         width: 20px;
1422         height: 20px;
1423         margin: 0 2px; /* avoid the focus box-shadow to be cut-off */
1424         -webkit-border-radius: 50%;
1425         border-radius: 50%;
1426         overflow: hidden;
1427 }
1428
1429 .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
1430 .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
1431     -webkit-box-shadow:
1432         0 0 0 1px #5b9dd9,
1433                 0 0 2px 1px rgba(30, 140, 190, .8);
1434     box-shadow:
1435         0 0 0 1px #5b9dd9,
1436                 0 0 2px 1px rgba(30, 140, 190, .8);
1437 }
1438
1439 .wp-full-overlay .collapse-sidebar-label {
1440         margin-left: 3px;
1441 }
1442
1443 .wp-full-overlay.collapsed .collapse-sidebar-label {
1444         display: none;
1445 }
1446
1447 .wp-full-overlay .collapse-sidebar-arrow:before {
1448         display: block;
1449         content: "\f148";
1450         background: #eee;
1451         font: normal 20px/1 dashicons;
1452         speak: none;
1453         padding: 0;
1454         -webkit-font-smoothing: antialiased;
1455         -moz-osx-font-smoothing: grayscale;
1456 }
1457
1458 /* rtl:ignore */
1459 .wp-full-overlay.collapsed .collapse-sidebar-arrow:before,
1460 .rtl .wp-full-overlay .collapse-sidebar-arrow:before {
1461         -webkit-transform: rotate(180.001deg);
1462         -ms-transform: rotate(180.001deg);
1463         transform: rotate(180.001deg); /* Firefox: promoting to its own layer to trigger anti-aliasing  */
1464 }
1465
1466 .rtl .wp-full-overlay.collapsed .collapse-sidebar-arrow:before {
1467         -webkit-transform: none;
1468         -ms-transform: none;
1469         transform: none;
1470 }
1471
1472 /* Animations */
1473 .wp-full-overlay,
1474 .wp-full-overlay-sidebar,
1475 .wp-full-overlay .collapse-sidebar,
1476 .wp-full-overlay-main {
1477         -webkit-transition-property: left, right, top, bottom, width, margin;
1478         transition-property: left, right, top, bottom, width, margin;
1479         -webkit-transition-duration: 0.2s;
1480         transition-duration: 0.2s;
1481 }
1482
1483 /* Device/preview size toggles */
1484
1485 .wp-full-overlay {
1486         background: #191e23;
1487 }
1488
1489 .wp-full-overlay-main {
1490         background-color: #f1f1f1;
1491 }
1492
1493 .expanded .wp-full-overlay-footer {
1494         position: fixed;
1495         bottom: 0;
1496         left: 0;
1497         width: 300px;
1498         height: 45px;
1499         border-top: 1px solid #ddd;
1500 }
1501
1502 .wp-full-overlay-footer .devices {
1503         float: right;
1504 }
1505
1506 .wp-full-overlay-footer .devices button {
1507         cursor: pointer;
1508         background: transparent;
1509         border: none;
1510         height: 45px;
1511         padding: 0 3px;
1512         margin: 0 0 0 -4px;
1513         -webkit-box-shadow: none;
1514         box-shadow: none;
1515         border-top: 1px solid transparent;
1516         border-bottom: 4px solid transparent;
1517         -webkit-transition: background .1s ease-in-out;
1518         transition: background .1s ease-in-out;
1519 }
1520
1521 .wp-full-overlay-footer .devices button:focus {
1522         -webkit-box-shadow: none;
1523         box-shadow: none;
1524         outline: none;
1525 }
1526
1527 .wp-full-overlay-footer .devices button:before {
1528         display: inline-block;
1529         -webkit-font-smoothing: antialiased;
1530         font: normal 20px/30px "dashicons";
1531         vertical-align: top;
1532         margin: 3px 0;
1533         padding: 4px 8px;
1534         color: #656a6f;
1535 }
1536
1537 .wp-full-overlay-footer .devices button.active {
1538         border-bottom-color: #191e23;
1539 }
1540
1541 .wp-full-overlay-footer .devices button:hover,
1542 .wp-full-overlay-footer .devices button:focus {
1543         background-color: #fff;
1544 }
1545
1546 .wp-full-overlay-footer .devices button:focus {
1547         background-color: #fff;
1548         border-bottom-color: #0073aa;
1549 }
1550
1551 .wp-full-overlay-footer .devices button.active:before,
1552 .wp-full-overlay-footer .devices button:hover:before,
1553 .wp-full-overlay-footer .devices button:focus:before {
1554         color: #191e23;
1555 }
1556
1557 .wp-full-overlay-footer .devices .preview-desktop:before {
1558         content: "\f472";
1559 }
1560
1561 .wp-full-overlay-footer .devices .preview-tablet:before {
1562         content: "\f471";
1563 }
1564
1565 .wp-full-overlay-footer .devices .preview-mobile:before {
1566         content: "\f470";
1567 }
1568
1569 @media screen and (max-width:1024px) {
1570         .wp-full-overlay-footer .devices {
1571                 display: none;
1572         }
1573 }
1574
1575 .collapsed .wp-full-overlay-footer .devices button:before {
1576         display: none;
1577 }
1578
1579 .preview-mobile .wp-full-overlay-main {
1580         margin: auto 0 auto -160px;
1581         width: 320px;
1582         height: 480px;
1583         max-height: 100%;
1584         max-width: 100%;
1585         left: 50%;
1586 }
1587
1588 .preview-tablet .wp-full-overlay-main {
1589         margin: auto 0 auto -3in;
1590         width: 6in; /* Size is loosely based on a typical "tablet" device size. Intentionally ambiguous - this does not represent any particular device precisely. */
1591         height: 9in;
1592         max-height: 100%;
1593         max-width: 100%;
1594         left: 50%;
1595 }
1596
1597
1598 /*------------------------------------------------------------------------------
1599   24.0 - Customize Loader
1600 ------------------------------------------------------------------------------*/
1601
1602 .no-customize-support .hide-if-no-customize,
1603 .customize-support .hide-if-customize,
1604 .no-customize-support.wp-core-ui .hide-if-no-customize,
1605 .no-customize-support .wp-core-ui .hide-if-no-customize,
1606 .customize-support.wp-core-ui .hide-if-customize,
1607 .customize-support .wp-core-ui .hide-if-customize {
1608         display: none;
1609 }
1610
1611 #customize-container {
1612         display: none;
1613         background: #fff;
1614         z-index: 500000;
1615         position: fixed;
1616         overflow: visible;
1617         top: 0;
1618         bottom: 0;
1619         left: 0;
1620         right: 0;
1621         height: 100%;
1622 }
1623
1624 .customize-active #customize-container {
1625         display: block;
1626 }
1627
1628 .customize-loading #customize-container iframe {
1629         opacity: 0;
1630 }
1631
1632 #customize-container iframe,
1633 .theme-install-overlay iframe {
1634         height: 100%;
1635         width: 100%;
1636         z-index: 20;
1637         -webkit-transition: opacity 0.3s;
1638         transition: opacity 0.3s;
1639 }
1640
1641 #customize-controls {
1642         margin-top: 0;
1643 }
1644
1645 .theme-install-overlay {
1646         display: none;
1647 }
1648
1649 .theme-install-overlay.single-theme {
1650         display: block;
1651 }
1652
1653 .install-theme-info {
1654         display: none;
1655         padding: 10px 20px 60px;
1656 }
1657
1658 .single-theme .install-theme-info {
1659         padding-top: 15px;
1660 }
1661
1662 .theme-install-overlay .install-theme-info {
1663         display: block;
1664 }
1665
1666 .install-theme-info .theme-install {
1667         float: right;
1668         margin-top: 18px;
1669 }
1670
1671 .install-theme-info .theme-name {
1672         font-size: 16px;
1673         line-height: 24px;
1674         margin-bottom: 0;
1675         margin-top: 0;
1676 }
1677
1678 .install-theme-info .theme-screenshot {
1679         margin: 15px 0;
1680         width: 258px;
1681         border: 1px solid #ccc;
1682 }
1683
1684 .install-theme-info .theme-details {
1685         overflow: hidden;
1686 }
1687
1688 .theme-details .theme-version {
1689         margin: 15px 0;
1690 }
1691
1692 .theme-details .theme-description {
1693         float: left;
1694         color: #72777c;
1695         line-height: 20px;
1696         max-width: 100%;
1697 }
1698
1699 .theme-install-overlay .wp-full-overlay-header .theme-install {
1700         float: right;
1701         margin: 8px 10px 0 0;
1702         /* For when .theme-install is a span rather than a.button-primary (already installed theme) */
1703         line-height: 26px;
1704 }
1705
1706 .theme-install-overlay .wp-full-overlay-sidebar {
1707         background: #eee;
1708         border-right: 1px solid #ddd;
1709 }
1710
1711 .theme-install-overlay .wp-full-overlay-sidebar-content {
1712         background: #fff;
1713         border-top: 1px solid #ddd;
1714         border-bottom: 1px solid #ddd;
1715 }
1716
1717 .theme-install-overlay .wp-full-overlay-main {
1718         position: absolute;
1719         z-index: 0;
1720         background-color: #f1f1f1;
1721 }
1722
1723 .customize-loading #customize-container {
1724         background-color: #f1f1f1;
1725 }
1726
1727 #customize-preview.wp-full-overlay-main:before,
1728 .customize-loading #customize-container:before,
1729 .theme-install-overlay .wp-full-overlay-main:before {
1730         content: "";
1731         display: block;
1732         width: 20px;
1733         height: 20px;
1734         position: absolute;
1735         left: 50%;
1736         top: 50%;
1737         z-index: -1;
1738         margin: -10px 0 0 -10px;
1739         -webkit-transform: translateZ(0);
1740         transform: translateZ(0);
1741         background: transparent url(../images/spinner.gif) no-repeat center center;
1742         -webkit-background-size: 20px 20px;
1743         background-size: 20px 20px;
1744 }
1745
1746 #customize-preview.wp-full-overlay-main.iframe-ready:before,
1747 .theme-install-overlay.iframe-ready .wp-full-overlay-main:before {
1748         background-image: none;
1749 }
1750
1751 /* =Media Queries
1752 -------------------------------------------------------------- */
1753
1754 /**
1755  * HiDPI Displays
1756  */
1757 @media print,
1758   (-webkit-min-device-pixel-ratio: 1.25),
1759   (min-resolution: 120dpi) {
1760         .wp-full-overlay .collapse-sidebar-arrow {
1761                 background-image: url(../images/arrows-2x.png);
1762                 -webkit-background-size: 15px 123px;
1763                 background-size: 15px 123px;
1764         }
1765
1766         #customize-preview.wp-full-overlay-main:before,
1767         .customize-loading #customize-container:before,
1768         .theme-install-overlay .wp-full-overlay-main:before {
1769                 background-image: url(../images/spinner-2x.gif);
1770         }
1771 }
1772
1773 @media screen and ( max-width: 782px ) {
1774         .available-theme .action-links .delete-theme {
1775                 float: none;
1776                 margin: 0;
1777                 padding: 0;
1778                 clear: both;
1779         }
1780
1781         .available-theme .action-links .delete-theme a {
1782                 padding: 0;
1783         }
1784
1785         .broken-themes table {
1786                 width: 100%;
1787         }
1788
1789         .theme-install-overlay .wp-full-overlay-header .theme-install {
1790                 margin-top: 6px;
1791                 line-height: normal;
1792         }
1793 }