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