clear: both;
}
-.themes-php .wrap h1 {
- float: right;
+.themes-php:not(.network-admin) .wrap h1 {
margin-bottom: 15px;
}
-.network-admin.themes-php .wrap h1 {
- margin-bottom: 0;
-}
-
.themes-php .wrap h1 .button {
margin-right: 20px;
}
}
/* Position admin messages */
-.themes-php div.updated,
-.themes-php div.error,
-.themes-php div.notice {
- margin: 0 0 20px 0;
- clear: both;
+.theme .notice,
+.theme .notice.is-dismissible {
+ right: 0;
+ margin: 0;
+ position: absolute;
+ left: 0;
+ top: 0;
}
/**
margin-left: 3px;
}
-.theme-browser .theme .theme-actions .button-secondary {
+.theme-browser .theme .theme-actions .button {
float: none;
margin-right: 3px;
}
opacity: 0;
position: absolute;
top: 35%;
- left: 25%;
- right: 25%;
+ left: 20%;
+ right: 20%;
background: #23282d;
background: rgba(0,0,0,0.7);
color: #fff;
opacity: 1;
}
-/**
- * Displays a theme update notice
- * when an update is available.
- */
-.theme-browser .theme .theme-update,
-.theme-browser .theme .theme-installed {
- background: #d54e21;
- background: rgba(213, 78, 33, 0.95);
- color: #fff;
- display: block;
- font-size: 13px;
- font-weight: 400;
- height: 48px;
- line-height: 48px;
- padding: 0 10px;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- border-bottom: 1px solid rgba(0,0,0,0.25);
- overflow: hidden;
-}
-
-.theme-browser .theme .theme-update:before,
-.theme-browser .theme .theme-installed:before {
- content: "\f463";
- display: inline-block;
- font: normal 20px/1 dashicons;
- margin: 0 0 0 6px;
- opacity: 0.8;
- position: relative;
- top: 5px;
- speak: none;
- -webkit-font-smoothing: antialiased;
-}
-
-
/**
* The currently active theme
*/
-webkit-overflow-scrolling: touch;
}
-body.folded .theme-overlay .theme-wrap {
+body.folded .theme-browser ~ .theme-overlay .theme-wrap {
right: 70px;
}
font-weight: 100;
margin: 10px 0 0;
line-height: 1.3;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
}
.theme-overlay .theme-version {
.theme-overlay .theme-tags span {
color: #444;
- font-weight: bold;
+ font-weight: 600;
margin-left: 5px;
}
border: 1px solid #eee;
border-right: 4px solid #00a0d2;
font-size: 14px;
- font-weight: normal;
+ font-weight: 400;
margin-top: 30px;
padding: 10px 20px 10px 10px;
}
}
@media only screen and (max-width: 650px) {
- .theme-overlay .theme-update,
.theme-overlay .theme-description {
margin-right: 0;
}
.theme-browser .theme .theme-installed {
background: #0073aa;
}
-.theme-browser .theme .theme-installed:before {
+.theme-browser .theme .notice-success p:before {
+ color: #79ba49;
content: "\f147";
+ display: inline-block;
+ font: normal 20px/1 'dashicons';
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ vertical-align: top;
}
-.theme-browser .theme.is-installed .theme-actions .button-primary {
- display: none !important;
+
+.theme-install.updated-message:before {
+ content: '';
}
.theme-install-php .wp-filter {
- padding: 0 20px;
+ padding-right: 20px;
}
.theme-install-php a.upload,
.theme-install-php a.browse-themes {
cursor: pointer;
}
-.theme-install-php a.browse-themes,
-.theme-install-php.show-upload-theme a.upload {
+
+.upload-view-toggle .browse,
+.plugin-install-tab-upload .upload-view-toggle .upload {
display: none;
}
-.theme-install-php.show-upload-theme a.browse-themes {
+
+.plugin-install-tab-upload .upload-view-toggle .browse {
display: inline;
}
+
.upload-theme,
.upload-plugin {
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: none;
margin: 0;
- padding: 0;
+ padding: 50px 0;
width: 100%;
overflow: hidden;
position: relative;
top: 10px;
}
-body.show-upload-theme .upload-theme,
-.upload-plugin {
+
+.upload-plugin-wrap {
+ display: none;
+}
+
+.show-upload-view .upload-theme,
+.show-upload-view .upload-plugin,
+.show-upload-view .upload-plugin-wrap,
+.plugin-install-tab-upload .upload-plugin {
display: block;
}
+
.upload-theme .wp-upload-form,
.upload-plugin .wp-upload-form {
background: #fafafa;
font-size: 18px;
font-style: normal;
margin: 0;
- padding: 40px 0 0;
+ padding: 0;
text-align: center;
}
-body.show-upload-theme .upload-theme + .wp-filter,
-body.show-upload-theme .upload-theme + .wp-filter + .theme-browser {
- display: none;
-}
p.no-themes {
clear: both;
display: none;
}
-body.no-results p.no-themes {
+.no-results p.no-themes {
display: block;
}
-body.show-upload-theme p.no-themes {
- display: none !important;
-}
-
.theme-install-php .add-new-theme {
display: none !important;
}
max-height: 300px;
}
+.background-position-control input[type="radio"]:checked ~ .button {
+ background: #eee;
+ border-color: #999;
+ -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 );
+ box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 );
+ z-index: 1;
+}
+
+.background-position-control input[type="radio"]:focus ~ .button {
+ border-color: #5b9dd9;
+ -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 ), 0 0 3px rgba( 0, 115, 170, .8 );
+ box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 ), 0 0 3px rgba( 0, 115, 170, .8 );
+ color: #23282d;
+}
+
+.background-position-control .background-position-center-icon,
+.background-position-control .background-position-center-icon:before {
+ display: inline-block;
+ line-height: 1;
+ text-align: center;
+ -webkit-transition: background-color .1s ease-in 0;
+ transition: background-color .1s ease-in 0;
+}
+
+.background-position-control .background-position-center-icon {
+ height: 20px;
+ margin-top: 13px;
+ vertical-align: top;
+ width: 20px;
+}
+
+.background-position-control .background-position-center-icon:before {
+ background-color: #555;
+ -webkit-border-radius: 50%;
+ border-radius: 50%;
+ content: "";
+ height: 12px;
+ width: 12px;
+}
+
+.background-position-control .button:hover .background-position-center-icon:before,
+.background-position-control input[type="radio"]:focus ~ .button .background-position-center-icon:before {
+ background-color: #23282d;
+}
+
+.background-position-control .button-group {
+ display: block;
+}
+
+.background-position-control .button-group .button {
+ -webkit-border-radius: 0;
+ border-radius: 0;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ /* Following properties are overridden by buttons responsive styles (see: wp-includes/css/buttons.css). */
+ height: 40px !important;
+ line-height: 37px !important;
+ margin: 0 0 0 -1px !important;
+ padding: 0 10px 1px !important;
+ position: relative;
+}
+
+.background-position-control .button-group .button:active,
+.background-position-control .button-group .button:hover,
+.background-position-control .button-group .button:focus {
+ z-index: 1;
+}
+
+.background-position-control .button-group:last-child .button {
+ -webkit-box-shadow: 0 1px 0 #ccc;
+ box-shadow: 0 1px 0 #ccc;
+}
+
+.background-position-control .button-group > label {
+ margin: 0 !important;
+}
+
+.background-position-control .button-group:first-child > label:first-child .button {
+ -webkit-border-radius: 0 3px 0 0;
+ border-radius: 0 3px 0 0;
+}
+
+.background-position-control .button-group:first-child > label:first-child .dashicons {
+ -webkit-transform: rotate( -45deg );
+ -ms-transform: rotate( -45deg );
+ transform: rotate( -45deg );
+}
+
+.background-position-control .button-group:first-child > label:last-child .button {
+ -webkit-border-radius: 3px 0 0 0;
+ border-radius: 3px 0 0 0;
+}
+
+.background-position-control .button-group:first-child > label:last-child .dashicons {
+ -webkit-transform: rotate( 45deg );
+ -ms-transform: rotate( 45deg );
+ transform: rotate( 45deg );
+}
+
+.background-position-control .button-group:last-child > label:first-child .button {
+ -webkit-border-radius: 0 0 3px 0;
+ border-radius: 0 0 3px 0;
+}
+
+.background-position-control .button-group:last-child > label:first-child .dashicons {
+ -webkit-transform: rotate( 45deg );
+ -ms-transform: rotate( 45deg );
+ transform: rotate( 45deg );
+}
+
+.background-position-control .button-group:last-child > label:last-child .button {
+ -webkit-border-radius: 0 0 0 3px;
+ border-radius: 0 0 0 3px;
+}
+
+.background-position-control .button-group:last-child > label:last-child .dashicons {
+ -webkit-transform: rotate( -45deg );
+ -ms-transform: rotate( -45deg );
+ transform: rotate( -45deg );
+}
+
+.background-position-control .button-group .dashicons {
+ margin-top: 9px;
+}
+
+.background-position-control .button-group + .button-group {
+ margin-top: -1px;
+}
+
/*------------------------------------------------------------------------------
23.0 - Full Overlay w/ Sidebar
------------------------------------------------------------------------------*/
body.full-overlay-active {
overflow: hidden;
+ /* Hide all the content, the Customizer overlay is then made visible to be the only available content. */
+ visibility: hidden;
}
.wp-full-overlay {
pointer-events: none;
}
+.theme-install-overlay .close-full-overlay,
+.theme-install-overlay .previous-theme,
+.theme-install-overlay .next-theme {
+ border-right: 0;
+ border-top: 0;
+ border-bottom: 0;
+}
+
+.theme-install-overlay .close-full-overlay:before,
+.theme-install-overlay .previous-theme:before,
+.theme-install-overlay .next-theme:before {
+ top: 2px;
+ right: 0;
+}
+
/* Collapse Button */
.wp-core-ui .wp-full-overlay .collapse-sidebar {
position: fixed;
- bottom: 8px;
- right: 10px;
- padding: 0;
+ bottom: 0;
+ right: 0;
+ padding: 9px 10px 9px 0;
+ height: 45px;
color: #656a6f;
outline: 0;
line-height: 1;
box-shadow: none !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
+ z-index: -1; /* Below device buttons */
}
.wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
-moz-osx-font-smoothing: grayscale;
}
+.wp-core-ui .wp-full-overlay.collapsed .collapse-sidebar {
+ padding: 9px 10px;
+}
+
/* rtl:ignore */
.wp-full-overlay.collapsed .collapse-sidebar-arrow:before,
.rtl .wp-full-overlay .collapse-sidebar-arrow:before {
position: fixed;
bottom: 0;
right: 0;
- width: 300px;
+ width: 299px;
height: 45px;
border-top: 1px solid #ddd;
+ background: #eee;
}
.wp-full-overlay-footer .devices {
float: left;
+ background: #eee;
+ -webkit-box-shadow: 20px 0 10px -5px #eee;
+ box-shadow: 20px 0 10px -5px #eee;
}
.wp-full-overlay-footer .devices button {
box-shadow: none;
border-top: 1px solid transparent;
border-bottom: 4px solid transparent;
- -webkit-transition: background .1s ease-in-out;
- transition: background .1s ease-in-out;
+ -webkit-transition: .15s color ease-in-out,
+ .15s background-color ease-in-out,
+ .15s border-color ease-in-out;
+ transition: .15s color ease-in-out,
+ .15s background-color ease-in-out,
+ .15s border-color ease-in-out;
}
.wp-full-overlay-footer .devices button:focus {
background-color: #fff;
}
-.wp-full-overlay-footer .devices button:focus {
- background-color: #fff;
+.wp-full-overlay-footer .devices button:focus,
+.wp-full-overlay-footer .devices button.active:hover {
border-bottom-color: #0073aa;
}
-.wp-full-overlay-footer .devices button.active:before,
+.wp-full-overlay-footer .devices button.active:before {
+ color: #191e23;
+}
+
.wp-full-overlay-footer .devices button:hover:before,
.wp-full-overlay-footer .devices button:focus:before {
- color: #191e23;
+ color: #0073aa;
}
.wp-full-overlay-footer .devices .preview-desktop:before {
height: 100%;
}
-.customize-active #customize-container {
- display: block;
+/* Make the Customizer and Theme installer overlays the only available content. */
+#customize-container,
+.theme-install-overlay {
+ visibility: visible;
}
.customize-loading #customize-container iframe {
max-width: 100%;
}
-.theme-install-overlay .wp-full-overlay-header .theme-install {
+.theme-install-overlay .wp-full-overlay-header .button {
float: left;
margin: 8px 0 0 10px;
/* For when .theme-install is a span rather than a.button-primary (already installed theme) */
line-height: normal;
}
}
+
+@media aural {
+ .theme .notice:before,
+ .theme-info .updating-message:before,
+ .theme-info .updated-message:before,
+ .theme-install.updating-message:before {
+ speak: none;
+ }
+}