WordPress/wp-admin/css/themes.css
Andrew Nacin ac3dd27737 Plugin/Theme Uploads: New capabilities; unify UIs; ensure compatibility with old filters.
Introduce upload_plugins and upload_themes capabilities to allow blocking of plugin and theme uploads, versus the old hacky (and not secure) ways of just hiding UI tabs. These are simply meta capabilities that map to install_plugins and install_themes.
 
Also:
 * Use the same nice design for the plugin upload screen as the theme upload screen.
 * Better compatibility for the old install_themes_tabs filter added in [29002]. see #28578.
 * Ensure using the install_plugins_tabs filter to remove the upload tab removes the new button.
 * Use 'Add Plugins' instead of 'Install Plugins' to match 'Add Themes'.

fixes #29236.

Built from https://develop.svn.wordpress.org/trunk@29634


git-svn-id: http://core.svn.wordpress.org/trunk@29408 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-27 01:32:18 +00:00

1736 lines
35 KiB
CSS

/*------------------------------------------------------------------------------
16.0 - Themes
------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------
16.1 - Manage Themes
------------------------------------------------------------------------------*/
.theme-browser .themes {
clear: both;
padding: 0 0 100px;
}
.themes-php .wrap h2 {
float: left;
margin-bottom: 15px;
}
.network-admin.themes-php .wrap h2 {
margin-bottom: 0;
}
.themes-php .wrap h2 .button {
margin-left: 20px;
}
/* Search form */
.themes-php .wp-filter-search {
position: relative;
top: -2px;
left: 20px;
margin: 0;
width: 280px;
font-size: 16px;
font-weight: 300;
line-height: 1.5;
}
/* Position admin messages */
.themes-php div.updated,
.themes-php div.error {
margin: 0 0 20px 0;
clear: both;
}
.themes-php div.updated a {
text-decoration: underline;
}
/**
* Main theme element
* (has flexible margins)
*/
.theme-browser .theme {
cursor: pointer;
float: left;
margin: 0 4% 4% 0;
position: relative;
width: 30.6%;
border: 1px solid #dedede;
-webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ie8 .theme-browser .theme {
width: 30%;
margin: 0 3% 4% 0;
}
.theme-browser .theme:nth-child(3n) {
margin-right: 0;
}
.theme-browser .theme:hover,
.theme-browser .theme:focus {
cursor: pointer;
}
.theme-browser .theme .theme-name {
font-size: 15px;
font-weight: 600;
height: 18px;
margin: 0;
padding: 15px;
-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
background: #fff;
background: rgba(255,255,255,0.65);
}
/* Activate and Customize buttons, shown on hover and focus */
.theme-browser .theme .theme-actions {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
-webkit-transition: opacity 0.1s ease-in-out;
transition: opacity 0.1s ease-in-out;
position: absolute;
bottom: 0;
right: 0;
height: 38px;
padding: 9px 10px 0 10px;
background: rgba(244, 244, 244, 0.7);
border-left: 1px solid rgba(0,0,0,0.05);
}
.theme-browser .theme:hover .theme-actions,
.theme-browser .theme.focus .theme-actions,
.theme-browser .theme:focus .theme-actions {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
opacity: 1;
}
.theme-browser .theme .theme-actions .button-primary {
margin-right: 3px;
}
.theme-browser .theme .theme-actions .button-secondary {
float: none;
margin-left: 3px;
}
/**
* Theme Screenshot
*
* Has a fixed aspect ratio of 1.5 to 1 regardless of screenshot size
* It is also responsive.
*/
.theme-browser .theme .theme-screenshot {
display: block;
overflow: hidden;
position: relative;
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.theme-browser .theme .theme-screenshot:after {
content: '';
display: block;
padding-top: 66.66666%; /* using a 3/2 aspect ratio */
}
.theme-browser .theme .theme-screenshot img {
height: auto;
position: absolute;
left: 0;
top: 0;
width: 100%;
-webkit-transform: translateZ( 0 ); /* Prevents rendering bugs in Chrome */
-webkit-transition: opacity 0.2s ease-in-out; /* Prevents rendering bugs in Chrome */
transition: opacity 0.2s ease-in-out;
}
.theme-browser .theme:hover .theme-screenshot,
.theme-browser .theme:focus .theme-screenshot {
background: #fff;
}
.theme-browser.rendered .theme:hover .theme-screenshot img,
.theme-browser.rendered .theme:focus .theme-screenshot img {
opacity: 0.4;
}
.theme-browser .theme .more-details {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
position: absolute;
top: 35%;
right: 25%;
left: 25%;
background: #222;
background: rgba(0,0,0,0.7);
color: #fff;
font-size: 15px;
text-shadow: 0 1px 0 rgba(0,0,0,0.6);
-webkit-font-smoothing: antialiased;
font-weight: 600;
padding: 15px 12px;
text-align: center;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: opacity 0.1s ease-in-out;
transition: opacity 0.1s ease-in-out;
}
.theme-browser .theme:focus {
border-color: #5b9dd9;
-webkit-box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
}
.theme-browser .theme:focus .more-details {
opacity: 1;
}
/* Current theme needs to have its action always on view */
.theme-browser .theme.active:focus .theme-actions {
display: block;
}
.theme-browser.rendered .theme:hover .more-details,
.theme-browser.rendered .theme:focus .more-details {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
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;
right: 0;
left: 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 6px 0 0;
opacity: 0.8;
position: relative;
top: 5px;
speak: none;
-webkit-font-smoothing: antialiased;
}
/**
* The currently active theme
*/
.theme-browser .theme.active .theme-name {
background: #2f2f2f;
color: #fff;
padding-right: 110px;
font-weight: 300;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.5);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.5);
}
.theme-browser .theme.active .theme-name span {
font-weight: 600;
}
.theme-browser .theme.active .theme-actions {
background: rgba(49,49,49,0.7);
border-left: none;
opacity: 1;
}
.theme-browser .theme.active .theme-actions .button-primary {
margin-right: 0;
}
.theme-browser .theme .theme-author {
background: #222;
color: #eee;
display: none;
font-size: 14px;
margin: 0 10px;
padding: 5px 10px;
position: absolute;
bottom: 56px;
}
.theme-browser .theme.display-author .theme-author {
display: block;
}
.theme-browser .theme.display-author .theme-author a {
color: inherit;
text-decoration: none;
}
/**
* Add new theme
*/
.theme-browser .theme.add-new-theme {
border: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.theme-browser .theme.add-new-theme a {
color: #999;
text-decoration: none;
display: block;
position: relative;
z-index: 1;
}
.theme-browser .theme.add-new-theme:after {
display: block;
content: '';
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
opacity: 1;
background: transparent;
background: rgba(0, 0, 0, 0);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 10% 0 0 0;
text-shadow: none;
border: 5px dashed #d5d2ca;
border: 5px dashed rgba(0, 0, 0, 0.1);
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.theme-browser .theme.add-new-theme span:after {
background: #e5e5e5;
background: rgba(153, 153, 153, 0.1);
-webkit-border-radius: 50%;
border-radius: 50%;
display: inline-block;
content: '\f132';
-webkit-font-smoothing: antialiased;
font: normal 74px/115px 'dashicons';
width: 100px;
height: 100px;
vertical-align: middle;
text-align: center;
color: rgb(153, 153, 153);
position: absolute;
top: 30%;
left: 50%;
margin-left: -50px;
text-indent: -4px;
padding: 0;
text-shadow: none;
z-index:4;
}
.rtl .theme-browser .theme.add-new-theme span:after {
text-indent: 4px;
}
.theme-browser .theme.add-new-theme:hover .theme-screenshot,
.theme-browser .theme.add-new-theme:focus .theme-screenshot {
background: none;
}
.theme-browser .theme.add-new-theme:hover span:after,
.theme-browser .theme.add-new-theme:focus span:after {
background: #fff;
color: #0074a2;
}
.theme-browser .theme.add-new-theme:hover:after,
.theme-browser .theme.add-new-theme:focus:after {
border-color: transparent;
color: #fff;
background: #0074a2;
content: '';
}
.theme-browser .theme.add-new-theme .theme-name {
background: none;
text-align: center;
-webkit-box-shadow: none;
box-shadow: none;
font-weight: 400;
position: relative;
top: 0;
margin-top: -10%;
margin-bottom: 10%;
}
.theme-browser .theme.add-new-theme:hover .theme-name,
.theme-browser .theme.add-new-theme:focus .theme-name {
color: #fff;
z-index: 2;
}
/**
* Theme Overlay
* Shown when clicking a theme
*/
.theme-overlay .theme-backdrop {
position: absolute;
left: -20px;
right: 0;
top: 0;
bottom: 0;
background: #f1f1f1;
background: rgba( 238, 238, 238, 0.9 );
z-index: 10;
}
.theme-overlay .theme-header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 48px;
border-bottom: 1px solid #ddd;
}
.theme-overlay .theme-header .close {
cursor: pointer;
height: 48px;
width: 50px;
text-align: center;
float: right;
border: 0;
border-left: 1px solid #ddd;
background-color: transparent;
-webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
transition: color .1s ease-in-out, background .1s ease-in-out;
}
.theme-overlay .theme-header .close:before {
font: normal 22px/50px 'dashicons' !important;
color: #777;
display: inline-block;
content: '\f335';
font-weight: 300;
}
/* Left and right navigation */
.theme-overlay .theme-header .right,
.theme-overlay .theme-header .left {
cursor: pointer;
color: #777;
background-color: transparent;
height: 48px;
width: 54px;
float: left;
text-align: center;
border: 0;
border-right: 1px solid #ddd;
-webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
transition: color .1s ease-in-out, background .1s ease-in-out;
}
.theme-overlay .theme-header .close:focus,
.theme-overlay .theme-header .close:hover,
.theme-overlay .theme-header .right:focus,
.theme-overlay .theme-header .right:hover,
.theme-overlay .theme-header .left:focus,
.theme-overlay .theme-header .left:hover {
background: #ddd;
border-color: #ccc;
color: #000;
}
.theme-overlay .theme-header .close:focus:before,
.theme-overlay .theme-header .close:hover:before {
color: #000;
}
.theme-overlay .theme-header .close:focus,
.theme-overlay .theme-header .right:focus,
.theme-overlay .theme-header .left:focus {
-webkit-box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8);
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8);
}
.theme-overlay .theme-header .left.disabled,
.theme-overlay .theme-header .right.disabled,
.theme-overlay .theme-header .left.disabled:hover,
.theme-overlay .theme-header .right.disabled:hover {
color: #ccc;
background: inherit;
cursor: inherit;
}
.theme-overlay .theme-header .right:before,
.theme-overlay .theme-header .left:before {
font: normal 20px/50px 'dashicons' !important;
display: inline;
font-weight: 300;
}
.theme-overlay .theme-header .left:before,
.rtl .theme-overlay .theme-header .right:before {
content: '\f341';
}
.theme-overlay .theme-header .right:before,
.rtl .theme-overlay .theme-header .left:before {
content: '\f345';
}
.theme-overlay .theme-wrap {
clear: both;
position: fixed;
top: 9%;
left: 190px;
right: 30px;
bottom: 3%;
background: #fff;
-webkit-box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
z-index: 20;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.theme-overlay .theme-wrap:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
body.folded .theme-overlay .theme-wrap {
left: 70px;
}
.theme-overlay .theme-about {
position: absolute;
top: 49px;
bottom: 57px;
left: 0;
right: 0;
overflow: auto;
padding: 2% 4%;
}
.theme-overlay .theme-about:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.theme-overlay .theme-actions {
position: absolute;
text-align: center;
bottom: 0;
left: 0;
right: 0;
padding: 10px 25px 5px;
background: #f3f3f3;
z-index: 30;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-top: 1px solid #eee;
}
.ie8 .theme-overlay .theme-actions {
border: 1px solid #eee;
}
.theme-overlay .theme-actions a {
margin-right: 5px;
margin-bottom: 5px;
}
.theme-overlay .theme-actions .delete-theme {
color: #a00;
position: absolute;
right: 10px;
bottom: 5px;
text-decoration: none;
border-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
background: transparent;
}
.theme-overlay .theme-actions .delete-theme:hover,
.theme-overlay .theme-actions .delete-theme:focus {
background: #d54e21;
color: #fff;
border-color: #d54e21;
}
.theme-overlay .theme-actions .active-theme,
.theme-overlay.active .theme-actions .inactive-theme {
display: none;
}
.theme-overlay .theme-actions .inactive-theme,
.theme-overlay.active .theme-actions .active-theme {
display: block;
}
/**
* Theme Screenshots gallery
*/
.theme-overlay .theme-screenshots {
float: left;
margin: 0 30px 0 0;
width: 55%;
max-width: 880px;
text-align: center;
}
/* First screenshot, shown big */
.theme-overlay .screenshot {
border: 1px solid #fff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
position: relative;
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
}
.theme-overlay .screenshot:after {
content: '';
display: block;
padding-top: 75%; /* using a 4/3 aspect ratio */
}
.theme-overlay .screenshot img {
height: auto;
position: absolute;
left: 0;
top: 0;
width: 100%;
}
/* Handles old 300px screenshots */
.theme-overlay.small-screenshot .theme-screenshots {
position: absolute;
width: 302px;
}
.theme-overlay.small-screenshot .theme-info {
margin-left: 350px;
width: auto;
}
/* Other screenshots, shown small and square */
.theme-overlay .screenshot.thumb {
background: #ccc;
border: 1px solid #eee;
float: none;
display: inline-block;
margin: 10px 5px 0;
width: 140px;
height: 80px;
cursor: pointer;
}
.theme-overlay .screenshot.thumb:after {
content: '';
display: block;
padding-top: 100%; /* using a 1/1 aspect ratio */
}
.theme-overlay .screenshot.thumb img {
cursor: pointer;
height: auto;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
}
.theme-overlay .screenshot.selected {
background: transparent;
border: 2px solid #2ea2cc;
}
.theme-overlay .screenshot.selected img {
opacity: 0.8;
}
/* No screenshot placeholder */
.theme-browser .theme .theme-screenshot.blank,
.theme-overlay .screenshot.blank {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=);
}
/**
* Theme heading information
*/
.theme-overlay .theme-info {
width: 40%;
float: left;
}
.theme-overlay .current-label {
background: #333;
color: #fff;
font-size: 11px;
display: inline-block;
padding: 2px 8px;
-webkit-border-radius: 2px;
border-radius: 2px;
margin: 0 0 -10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.theme-overlay .theme-name {
color: #222;
font-size: 32px;
font-weight: 100;
margin: 10px 0 0;
line-height: 1.3;
}
.theme-overlay .theme-version {
color: #999;
font-size: 13px;
font-weight: 400;
float: none;
display: inline-block;
margin-left: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.theme-overlay .theme-author {
color: #686868;
font-size: 16px;
font-weight: 400;
margin: 15px 0 25px;
}
.theme-overlay .theme-author a {
text-decoration: none;
}
.theme-overlay .theme-description {
color: #555;
font-size: 15px;
font-weight: 400;
line-height: 1.5;
margin: 30px 0 0 0;
}
.theme-overlay .theme-tags {
border-top: 3px solid #eee;
color: #888;
font-size: 13px;
font-weight: 400;
margin: 30px 0 0 0;
padding-top: 20px;
}
.theme-overlay .theme-tags span {
color: #444;
font-weight: bold;
margin-right: 5px;
}
/* Theme Updates info */
.theme-overlay .theme-update-message {
background: #fef7f1;
border: 1px solid #eee;
border-left: 4px solid #d54e21;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 5px 20px 10px;
}
.theme-overlay .theme-update {
color: #222;
font-size: 18px;
display: inline-block;
line-height: 40px;
margin: 0;
}
.theme-overlay .parent-theme {
background: #f7fcfe;
border: 1px solid #eee;
border-left: 4px solid #2ea2cc;
font-size: 14px;
font-weight: normal;
margin-top: 30px;
padding: 10px 10px 10px 20px;
}
.theme-overlay .parent-theme strong {
font-weight: 700;
}
/**
* Single Theme Mode
* Displays detailed view inline when a user has no switch capabilities
*/
.single-theme .theme-overlay .theme-backdrop,
.single-theme .theme-overlay .theme-header,
.single-theme .theme {
display: none;
}
.single-theme .theme-overlay .theme-wrap {
clear: both;
min-height: 330px;
position: relative;
left: auto;
right: auto;
top: auto;
bottom: auto;
}
.single-theme .theme-overlay .theme-about {
padding: 30px 30px 70px;
position: static;
}
.single-theme .theme-overlay .theme-actions {
position: absolute;
}
/**
* Basic Responsive structure...
*
* Shuffles theme columns around based on screen width
*/
@media only screen and (min-width: 2000px) {
#wpwrap .theme-browser .theme {
width: 17.6%;
margin: 0 3% 3% 0;
}
#wpwrap .theme-browser .theme:nth-child(3n),
#wpwrap .theme-browser .theme:nth-child(4n) {
margin-right: 3%;
}
#wpwrap .theme-browser .theme:nth-child(5n) {
margin-right: 0;
}
}
@media only screen and (min-width: 1680px) {
.theme-overlay .theme-wrap {
width: 1450px;
margin: 0 auto;
}
}
/* Maximum screenshot width reaches 440px */
@media only screen and (min-width: 1640px) {
.theme-browser .theme {
width: 22.7%;
margin: 0 3% 3% 0;
}
.theme-browser .theme .theme-screenshot:after {
padding-top: 75%; /* using a 4/3 aspect ratio */
}
.theme-browser .theme:nth-child(3n) {
margin-right: 3%;
}
.theme-browser .theme:nth-child(4n) {
margin-right: 0;
}
}
/* Maximum screenshot width reaches 440px */
@media only screen and (max-width: 1120px) {
.theme-browser .theme {
width: 47.5%;
margin-right: 0;
}
.theme-browser .theme:nth-child(even) {
margin-right: 0;
}
.theme-browser .theme:nth-child(odd) {
margin-right: 5%;
}
}
/* Admin menu is folded */
@media only screen and (max-width: 900px) {
.theme-overlay .theme-wrap {
left: 65px;
}
}
@media only screen and (max-width: 780px) {
body.folded .theme-overlay .theme-wrap,
.theme-overlay .theme-wrap {
top: 0; /* The adminmenu isn't fixed on mobile, so this can use the full viewport height */
right: 0;
bottom: 0;
left: 0;
padding: 70px 20px 20px;
border: none;
z-index: 500; /* should overlap #wpadminbar, which is 500 on mobile. */
position: fixed;
}
.theme-browser .theme.active .theme-name span {
/* Hide the "Active: " label on smaller screens. */
display: none;
}
.theme-overlay .theme-screenshots {
width: 40%;
}
.theme-overlay .theme-info {
width: 50%;
}
.single-theme .theme-wrap {
padding: 10px;
}
.theme-browser .theme .theme-actions {
padding: 5px 10px 4px 10px;
}
.theme-overlay.small-screenshot .theme-screenshots {
position: static;
float: none;
max-width: 302px;
}
.theme-overlay.small-screenshot .theme-info {
margin-left: 0;
width: auto;
}
.theme:not(.active):hover .theme-actions,
.theme:not(.active):focus .theme-actions,
.theme:hover .more-details,
.theme:focus .more-details {
display: none;
}
.theme-browser.rendered .theme:hover .theme-screenshot img,
.theme-browser.rendered .theme:focus .theme-screenshot img {
opacity: 1.0;
}
}
@media only screen and (max-width: 480px) {
.theme-browser .theme {
width: 100%;
margin-right: 0;
}
.theme-browser .theme:nth-child(2n),
.theme-browser .theme:nth-child(3n) {
margin-right: 0;
}
}
@media only screen and (max-width: 650px) {
.theme-overlay .theme-update,
.theme-overlay .theme-description {
margin-left: 0;
}
.theme-overlay .theme-actions .delete-theme {
position: relative;
right: auto;
bottom: auto;
}
.theme-overlay .theme-actions .inactive-theme {
display: inline;
}
.theme-overlay .theme-screenshots {
width: 100%;
float: none;
}
.theme-overlay .theme-info {
width: 100%;
}
.theme-overlay .theme-author {
margin: 5px 0 15px 0;
}
.theme-overlay .current-label {
margin-top: 10px;
font-size: 13px;
}
.themes-php .wrap h2 {
width: 100%;
}
.themes-php .wp-filter-search {
float: none;
clear: both;
left: 0;
top: 0;
right: 0;
margin: 10px 0;
width: 100%;
}
.theme-browser .theme.add-new-theme span:after {
font: normal 60px/90px 'dashicons';
width: 80px;
height: 80px;
top: 30%;
left: 50%;
text-indent: 0;
margin-left: -40px;
}
.single-theme .theme-wrap {
margin: 0 -12px 0 -10px;
padding: 10px;
}
.single-theme .theme-overlay .theme-about {
padding: 10px;
overflow: visible;
}
.single-theme .current-label {
display: none;
}
.single-theme .theme-overlay .theme-actions {
position: static;
}
}
.broken-themes {
clear: both;
}
.broken-themes table {
text-align: left;
width: 50%;
border-spacing: 3px;
padding: 3px;
}
/*------------------------------------------------------------------------------
16.2 - Install Themes
------------------------------------------------------------------------------*/
/* Already installed theme */
.theme-browser .theme .theme-installed {
background: #0074a2;
}
.theme-browser .theme .theme-installed:before {
content: '\f147';
}
.theme-browser .theme.is-installed .theme-actions .button-primary {
display: none !important;
}
.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 {
display: none;
}
.theme-install-php.show-upload-theme a.browse-themes {
display: inline;
}
.upload-theme,
.upload-plugin {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: none;
margin: 0;
padding: 0;
width: 100%;
overflow: hidden;
position: relative;
top: 10px;
}
body.show-upload-theme .upload-theme,
.upload-plugin {
display: block;
}
.upload-theme .wp-upload-form,
.upload-plugin .wp-upload-form {
background: #fafafa;
border: 1px solid #e5e5e5;
padding: 30px;
margin: 30px auto;
max-width: 380px;
}
.upload-theme .install-help,
.upload-plugin .install-help {
color: #999;
font-size: 18px;
font-style: normal;
margin: 0;
padding: 40px 0 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 {
color: #999;
font-size: 18px;
font-style: normal;
margin: 0;
padding: 0;
text-align: center;
display: none;
}
body.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;
}
@media only screen and (max-width: 1120px) {
.upload-theme .wp-upload-form {
margin: 20px 0;
max-width: 100%;
}
.upload-theme .install-help {
font-size: 15px;
padding: 20px 0 0;
text-align: left;
}
}
.rating {
margin: 30px 0;
}
.rating span:before {
color: #e6b800;
content: "\f154";
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 20px/1 'dashicons';
vertical-align: top;
}
/* Half stars */
.rating-10 span.one:before,
.rating-30 span.two:before,
.rating-50 span.three:before,
.rating-70 span.four:before,
.rating-90 span.five:before {
content: "\f459";
}
/* Full stars */
.rating-20 span.one:before {
content: "\f155";
}
.rating-30 span.one:before,
.rating-40 span.one:before,
.rating-40 span.two:before {
content: "\f155";
}
.rating-50 span.one:before,
.rating-50 span.two:before,
.rating-60 span.one:before,
.rating-60 span.two:before,
.rating-60 span.three:before {
content: "\f155";
}
.rating-70 span.one:before,
.rating-70 span.two:before,
.rating-70 span.three:before,
.rating-80 span.one:before,
.rating-80 span.two:before,
.rating-80 span.three:before,
.rating-80 span.four:before {
content: "\f155";
}
.rating-90 span.one:before,
.rating-90 span.two:before,
.rating-90 span.three:before,
.rating-90 span.four:before,
.rating-100 span.one:before,
.rating-100 span.two:before,
.rating-100 span.three:before,
.rating-100 span.four:before,
.rating-100 span.five:before {
content: "\f155";
}
.rating .ratings {
display: inline;
margin-left: 10px;
line-height: 20px;
color: #999;
}
/*------------------------------------------------------------------------------
16.3 - Custom Header Screen
------------------------------------------------------------------------------*/
.appearance_page_custom-header #headimg {
border: 1px solid #DFDFDF;
overflow: hidden;
width: 100%;
}
.appearance_page_custom-header #upload-form p label {
font-size: 12px;
}
.appearance_page_custom-header .available-headers .default-header {
float: left;
margin: 0 20px 20px 0;
}
.appearance_page_custom-header .random-header {
clear: both;
margin: 0 20px 20px 0;
vertical-align: middle;
}
.appearance_page_custom-header .available-headers label input,
.appearance_page_custom-header .random-header label input {
margin-right: 10px;
}
.appearance_page_custom-header .available-headers label img {
vertical-align: middle;
}
/*------------------------------------------------------------------------------
16.4 - Custom Background Screen
------------------------------------------------------------------------------*/
div#custom-background-image {
min-height: 100px;
border: 1px solid #dfdfdf;
}
div#custom-background-image img {
max-width: 400px;
max-height: 300px;
}
/*------------------------------------------------------------------------------
23.0 - Full Overlay w/ Sidebar
------------------------------------------------------------------------------*/
body.full-overlay-active {
overflow: hidden;
}
.wp-full-overlay {
background: transparent;
z-index: 500000;
position: fixed;
overflow: visible;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
min-width: 0;
}
.wp-full-overlay-sidebar {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: fixed;
width: 300px;
height: 100%;
top: 0;
bottom: 0;
left: 0;
padding: 0;
margin: 0;
z-index: 10;
overflow: auto;
background: #eee;
border-right: none;
}
.wp-full-overlay.collapsed .wp-full-overlay-sidebar {
overflow: visible;
}
.wp-full-overlay.collapsed,
.wp-full-overlay.expanded .wp-full-overlay-sidebar {
margin-left: 0 !important;
}
.wp-full-overlay.expanded {
margin-left: 300px;
}
.wp-full-overlay.collapsed .wp-full-overlay-sidebar {
margin-left: -300px;
}
.wp-full-overlay-sidebar:after {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 3px;
z-index: 1000;
}
.wp-full-overlay-main {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 100%;
}
.wp-full-overlay-sidebar .wp-full-overlay-header {
position: absolute;
left: 0;
right: 0;
height: 45px;
padding: 0 15px;
line-height: 45px;
z-index: 10;
margin: 0;
border-top: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.wp-full-overlay-sidebar .wp-full-overlay-header a.back {
margin-top: 9px;
}
.wp-full-overlay-sidebar .wp-full-overlay-footer {
bottom: 0;
border-bottom: none;
border-top: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
position: absolute;
top: 45px;
bottom: 45px;
left: 0;
right: 0;
overflow: auto;
}
/* Close & Navigation Links */
.theme-install-overlay .wp-full-overlay-sidebar .wp-full-overlay-header {
padding: 0;
}
.theme-install-overlay .close-full-overlay,
.theme-install-overlay .previous-theme,
.theme-install-overlay .next-theme {
display: block;
position: relative;
float: left;
width: 45px;
height: 45px;
padding-right: 2px;
background: #eee;
border-right: 1px solid #ddd;
color: #444;
cursor: pointer;
text-decoration: none;
-webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
transition: color .1s ease-in-out, background .1s ease-in-out;
}
.theme-install-overlay .close-full-overlay:hover,
.theme-install-overlay .close-full-overlay:focus,
.theme-install-overlay .previous-theme:hover,
.theme-install-overlay .previous-theme:focus,
.theme-install-overlay .next-theme:hover,
.theme-install-overlay .next-theme:focus {
background: #ddd;
border-color: #ccc;
color: #000;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.theme-install-overlay .close-full-overlay:before {
font: normal 22px/1 dashicons;
content: "\f335";
position: relative;
top: 7px;
left: 13px;
}
.theme-install-overlay .previous-theme:before {
font: normal 20px/1 dashicons;
content: "\f341";
position: relative;
top: 6px;
left: 14px;
}
.theme-install-overlay .next-theme:before {
font: normal 20px/1 dashicons;
content: "\f345";
position: relative;
top: 6px;
left: 13px;
}
.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 {
color: #bbb;
background: #eee;
cursor: default;
pointer-events: none;
}
.rtl .theme-install-overlay .previous-theme:before {
content: "\f345";
}
.rtl .theme-install-overlay .next-theme:before {
content: "\f341";
}
/* Collapse Button */
.wp-full-overlay a.collapse-sidebar {
position: absolute;
bottom: 12px;
left: 0;
z-index: 50;
display: block;
width: 19px;
height: 19px;
margin-left: 15px;
padding: 0;
-webkit-border-radius: 50%;
border-radius: 50%;
color: #777;
text-decoration: none;
}
.wp-full-overlay a.collapse-sidebar:hover {
color: #0074a2;
}
.wp-full-overlay.collapsed .collapse-sidebar {
position: absolute;
left: 100%;
}
.wp-full-overlay .collapse-sidebar-arrow {
position: static;
margin-top: 0;
margin-left: 0;
display: block;
width: auto;
height: auto;
background: none;
}
.wp-full-overlay .collapse-sidebar-arrow:before {
-webkit-border-radius: 50%;
border-radius: 50%;
float: left;
content: "\f148";
background: #eee;
font: normal 20px/1 'dashicons';
speak: none;
display: block;
padding: 0;
text-indent: 0;
text-align: center;
position: relative;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: none !important;
}
.wp-full-overlay.collapsed .collapse-sidebar-arrow:before,
.rtl .wp-full-overlay .collapse-sidebar-arrow:before {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.rtl .wp-full-overlay.collapsed .collapse-sidebar-arrow:before {
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.wp-full-overlay.collapsed .collapse-sidebar-arrow {
background-position: -1px -109px;
}
.wp-full-overlay .collapse-sidebar-label {
position: absolute;
left: 100%;
line-height: 20px;
margin-left: 10px;
}
.wp-full-overlay.collapsed .collapse-sidebar-label {
display: none;
}
/* Animations */
.wp-full-overlay,
.wp-full-overlay-sidebar,
.wp-full-overlay .collapse-sidebar,
.wp-full-overlay-main {
-webkit-transition-property: left, right, top, bottom, width, margin;
transition-property: left, right, top, bottom, width, margin;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
}
/*------------------------------------------------------------------------------
24.0 - Customize Loader
------------------------------------------------------------------------------*/
.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 {
display: none;
}
#customize-container {
display: none;
background: #fff;
z-index: 500000;
position: fixed;
overflow: visible;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
}
.customize-active #customize-container {
display: block;
}
.customize-loading #customize-container iframe {
opacity: 0;
}
.customize-loading #customize-container {
background: #fff url(../images/spinner.gif) no-repeat fixed center center;
-webkit-background-size: 20px 20px;
background-size: 20px 20px;
}
#customize-container iframe,
.theme-install-overlay iframe {
height: 100%;
width: 100%;
z-index: 20;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
#customize-container .collapse-sidebar {
bottom: 16px;
}
#customize-controls {
margin-top: 0;
}
.theme-install-overlay {
display: none;
}
.theme-install-overlay.single-theme {
display: block;
}
.install-theme-info {
display: none;
padding: 10px 20px 60px;
}
.single-theme .install-theme-info {
padding-top: 15px;
}
.theme-install-overlay .install-theme-info {
display: block;
}
.install-theme-info .theme-install {
float: right;
margin-top: 18px;
}
.install-theme-info .theme-name {
font-size: 16px;
line-height: 24px;
margin-bottom: 0;
margin-top: 0;
}
.install-theme-info .theme-screenshot {
margin-top: 15px;
width: 258px;
border: 1px solid #ccc;
}
.install-theme-info .theme-details {
overflow: hidden;
}
.theme-details .theme-version {
margin: 15px 0;
float: left;
}
.theme-details .star-rating {
margin: 7px 0;
float: right;
}
.theme-details .theme-description {
float: left;
color: #777;
line-height: 20px;
max-width: 100%;
}
.theme-install-overlay .wp-full-overlay-header .theme-install {
float: right;
margin: 8px 10px 0 0;
/* For when .theme-install is a span rather than a.button-primary (already installed theme) */
line-height: 26px;
}
.theme-install-overlay .wp-full-overlay-sidebar {
background: #eee;
border-right: 1px solid #ddd;
}
.theme-install-overlay .wp-full-overlay-sidebar-content {
background: #fff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.theme-install-overlay .wp-full-overlay-main {
background: #fff url(../images/spinner.gif) no-repeat center center;
-webkit-background-size: 20px 20px;
background-size: 20px 20px;
}
/* =Media Queries
-------------------------------------------------------------- */
/**
* HiDPI Displays
*/
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
.wp-full-overlay .collapse-sidebar-arrow {
background-image: url(../images/arrows-2x.png);
-webkit-background-size: 15px 123px;
background-size: 15px 123px;
}
.customize-loading #customize-container,
.theme-install-overlay .wp-full-overlay-main {
background-image: url(../images/spinner-2x.gif);
}
}
@media screen and ( max-width: 782px ) {
.available-theme .action-links .delete-theme {
float: none;
margin: 0;
padding: 0;
clear: both;
}
.available-theme .action-links .delete-theme a {
padding: 0;
}
}