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