.theme-install-overlay .previous-theme:before {
font: normal 20px/1 dashicons;
.theme-install-overlay .next-theme:before {
font: normal 20px/1 dashicons;
.theme-install-overlay .previous-theme.disabled,
.theme-install-overlay .next-theme.disabled,
.theme-install-overlay .previous-theme.disabled:hover,
.theme-install-overlay .previous-theme.disabled:focus,
.theme-install-overlay .next-theme.disabled:hover,
.theme-install-overlay .next-theme.disabled:focus {
.theme-install-overlay .close-full-overlay,
.theme-install-overlay .previous-theme,
.theme-install-overlay .next-theme {
.theme-install-overlay .close-full-overlay:before,
.theme-install-overlay .previous-theme:before,
.theme-install-overlay .next-theme:before {
.wp-core-ui .wp-full-overlay .collapse-sidebar {
background-color: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
.wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
.wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
.wp-full-overlay .collapse-sidebar-arrow,
.wp-full-overlay .collapse-sidebar-label {
.wp-full-overlay .collapse-sidebar-arrow {
margin: 0 2px; /* avoid the focus box-shadow to be cut-off */
.wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
.wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
0 0 2px 1px rgba(79, 148, 212, 0.8);
.wp-full-overlay .collapse-sidebar-label {
.wp-full-overlay.collapsed .collapse-sidebar-label {
.wp-full-overlay .collapse-sidebar-arrow:before {
font: normal 20px/1 dashicons;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
.wp-core-ui .wp-full-overlay.collapsed .collapse-sidebar {
.wp-full-overlay.collapsed .collapse-sidebar-arrow:before,
.rtl .wp-full-overlay .collapse-sidebar-arrow:before {
transform: rotate(180.001deg); /* Firefox: promoting to its own layer to trigger anti-aliasing */
.rtl .wp-full-overlay.collapsed .collapse-sidebar-arrow:before {
.wp-full-overlay-sidebar,
.wp-full-overlay .collapse-sidebar,
transition-property: left, right, top, bottom, width, margin;
transition-duration: 0.2s;
/* Device/preview size toggles */
background-color: #f0f0f1;
.expanded .wp-full-overlay-footer {
width: calc( 18% - 1px );
border-top: 1px solid #dcdcde;
.wp-full-overlay-footer .devices-wrapper {
.wp-full-overlay-footer .devices {
box-shadow: -20px 0 10px -5px #f0f0f1;
.wp-full-overlay-footer .devices button {
border-top: 1px solid transparent;
border-bottom: 4px solid transparent;
.15s background-color ease-in-out,
.15s border-color ease-in-out;
.wp-full-overlay-footer .devices button:focus {
.wp-full-overlay-footer .devices button:before {
-webkit-font-smoothing: antialiased;
font: normal 20px/30px "dashicons";
.wp-full-overlay-footer .devices button.active {
border-bottom-color: #1d2327;
.wp-full-overlay-footer .devices button:hover,
.wp-full-overlay-footer .devices button:focus {
.wp-full-overlay-footer .devices button:focus,
.wp-full-overlay-footer .devices button.active:hover {
border-bottom-color: #2271b1;
.wp-full-overlay-footer .devices button.active:before {
.wp-full-overlay-footer .devices button:hover:before,
.wp-full-overlay-footer .devices button:focus:before {
.wp-full-overlay-footer .devices .preview-desktop:before {
.wp-full-overlay-footer .devices .preview-tablet:before {
.wp-full-overlay-footer .devices .preview-mobile:before {
@media screen and (max-width: 1024px) {
.wp-full-overlay-footer .devices {
.collapsed .wp-full-overlay-footer .devices button:before {
.preview-mobile .wp-full-overlay-main {
margin: auto 0 auto -160px;
.preview-tablet .wp-full-overlay-main {
margin: auto 0 auto -360px;
width: 720px; /* Size is loosely based on a typical "tablet" device size. Intentionally ambiguous - this does not represent any particular device precisely. */
/*------------------------------------------------------------------------------
------------------------------------------------------------------------------*/
.no-customize-support .hide-if-no-customize,
.customize-support .hide-if-customize,
.no-customize-support.wp-core-ui .hide-if-no-customize,
.no-customize-support .wp-core-ui .hide-if-no-customize,
.customize-support.wp-core-ui .hide-if-customize,
.customize-support .wp-core-ui .hide-if-customize {
#customize-controls .notice.notification-overlay {
/* Make the Customizer and Theme installer overlays the only available content. */
.customize-loading #customize-container iframe {
#customize-container iframe,
.theme-install-overlay iframe {
transition: opacity 0.3s;
.theme-install-overlay.single-theme {
.single-theme .install-theme-info {
.theme-install-overlay .install-theme-info {
.install-theme-info .theme-install {
.install-theme-info .theme-name {
.install-theme-info .theme-screenshot {
border: 1px solid #c3c4c7;
.install-theme-info .theme-details {
.theme-details .theme-version {
.theme-details .theme-description {
.theme-install-overlay .wp-full-overlay-header .button {
.theme-install-overlay .wp-full-overlay-sidebar {
border-right: 1px solid #dcdcde;
.theme-install-overlay .wp-full-overlay-sidebar-content {
border-top: 1px solid #dcdcde;
border-bottom: 1px solid #dcdcde;
.theme-install-overlay .wp-full-overlay-main {
background-color: #f0f0f1;
.customize-loading #customize-container {
background-color: #f0f0f1;
#customize-preview.wp-full-overlay-main:before,
.customize-loading #customize-container:before,
#customize-controls .notice.notification-overlay.notification-loading:before,
.theme-install-overlay .wp-full-overlay-main:before {
transform: translateZ(0);
background: transparent url(../images/spinner.gif) no-repeat center center;
background-size: 20px 20px;
#customize-preview.wp-full-overlay-main.iframe-ready:before,
.theme-install-overlay.iframe-ready .wp-full-overlay-main:before {
-------------------------------------------------------------- */
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
.wp-full-overlay .collapse-sidebar-arrow {
background-image: url(../images/arrows-2x.png);
background-size: 15px 123px;
#customize-preview.wp-full-overlay-main:before,
.customize-loading #customize-container:before,
#customize-controls .notice.notification-overlay.notification-loading:before,
.theme-install-overlay .wp-full-overlay-main:before {
background-image: url(../images/spinner-2x.gif);
@media screen and (max-width: 782px) {
.available-theme .action-links .delete-theme {
.available-theme .action-links .delete-theme a {
.theme-install-overlay .wp-full-overlay-header .button {
.theme-browser .theme .theme-actions .button {
.theme-browser .theme.active .theme-actions,
.theme-browser .theme .theme-actions {
.upload-theme .wp-upload-form,
.upload-plugin .wp-upload-form {
.theme-info .updating-message:before,
.theme-info .updated-message:before,
.theme-install.updating-message:before {