Add theme browsing and theme switching to the Customizer

* Brings into core the Customizer Theme Switcher feature plugin
* You can now browse, preview, and activate themes right from the Customizer

fixes #31303.
props celloexpressions, afercia, westonruter, folletto, designsimply

git-svn-id: https://develop.svn.wordpress.org/trunk@31533 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/css/customize-controls.css

@@ -827,6 +827,176 @@ p.customize-section-description {
 	float: right;
 }
 
+/**
+ * Themes
+ */
+@-webkit-keyframes customize-reload {
+	0%   { opacity: 0; }
+	100% { opacity: 1; }
+}
+
+@-moz-keyframes customize-reload {
+	0%   { opacity: 0; }
+	100% { opacity: 1; }
+}
+
+@keyframes customize-reload {
+	0%   { opacity: 0; }
+	100% { opacity: 1; }
+}
+
+/* #customize-container is reused from customize-loader.js, hence the naming. */
+.wp-customizer .customize-loading #customize-container {
+	display: block;
+	-webkit-animation: customize-reload .75s; /* Can't use `transition` because `display` changes here. */
+	-moz-animation: customize-reload .75s;
+	animation: customize-reload .75s;
+}
+
+.customize-themes-panel {
+	display: none;
+	padding: 0 8px;
+	background: #f1f1f1;
+	box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+}
+
+.control-section.open .customize-themes-panel {
+	display: block;
+}
+
+#customize-theme-controls .customize-themes-panel .accordion-section-content {
+	background: transparent;
+	display: block;
+}
+
+.customize-control.customize-control-theme {
+	margin-bottom: 8px;
+}
+
+.wp-customizer .theme-browser .themes {
+	padding-bottom: 8px;
+}
+
+.wp-customizer .theme-browser .theme {
+	margin: 0;
+	width: 100%;
+}
+
+.wp-customizer .theme-browser .theme .theme-actions {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+	opacity: 1;
+}
+
+#customize-controls h3.theme-name {
+	font-size: 15px;
+}
+
+.wp-customizer .theme-browser .theme.active .theme-name {
+	padding-right: 15px;
+}
+
+.wp-customizer #themes-filter {
+	width: 100%;
+}
+
+/* Panel-like behavior */
+#accordion-section-themes .accordion-section-title:after {
+	content: "\f148";
+}
+
+.rtl #accordion-section-themes .accordion-section-title:after {
+	-webkit-transform: rotate(180deg);
+	-ms-transform: rotate(180deg);
+	transform: rotate(180deg);
+}
+
+#customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
+	left: 0;
+}
+
+.customize-themes-panel.control-panel-content {
+	position: absolute;
+	left: -100%;
+	top: 0;
+	width: 100%;
+	border-top: 1px solid #ddd;
+}
+
+.in-themes-panel #customize-info,
+.in-themes-panel #customize-theme-controls > ul > .accordion-section {
+	left: 100%;
+}
+
+.themes-panel-back:before {
+	top: 13px;
+	left: 14px;
+}
+
+.in-themes-panel .themes-panel-back {
+	left: 0;
+}
+
+.in-sub-panel .themes-panel-back {
+	display: none;
+}
+
+.control-panel-back.themes-panel-back:before {
+	content: "\f345";
+}
+
+.rtl .control-panel-back.themes-panel-back:before {
+	content: "\f341";
+}
+
+/* Details View */
+.wp-customizer .theme-overlay {
+	display: none;
+}
+
+.wp-customizer.modal-open .theme-overlay {
+	position: fixed;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 109;
+}
+
+.wp-customizer .theme-overlay .theme-backdrop {
+	background: rgba( 238, 238, 238, 0.75 );
+	position: fixed;
+	z-index: 110;
+}
+
+.wp-customizer .theme-overlay .theme-wrap {
+	left: 90px;
+	right: 90px;
+	top: 45px;
+	bottom: 45px;
+	z-index: 120;
+	max-width: 1740px; /* To ensure that theme screenshots are not displayed larger than 880px wide. */
+}
+
+.wp-customizer .theme-overlay .theme-actions {
+	text-align: right; /* Because there's only one action, match the pattern of media modals and right-align the action. */
+}
+
+.modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
+	overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
+}
+
+/* Small Screens */
+@media (max-width:850px), (max-height:472px) {
+	.wp-customizer .theme-overlay .theme-wrap {
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+	}	
+}
+
 
 /** Handle cheaters. */
 body.cheatin {