X-Git-Url: https://scripts.mit.edu/gitweb/autoinstalls/wordpress.git/blobdiff_plain/4713a14935b83517997f3c88f808eb41da55033d..8d3bb1a5dcfdea9857d3c88c3751f09593e34dc8:/wp-admin/css/themes.css diff --git a/wp-admin/css/themes.css b/wp-admin/css/themes.css index 13076cbf..ab67ad06 100644 --- a/wp-admin/css/themes.css +++ b/wp-admin/css/themes.css @@ -9,50 +9,36 @@ .theme-browser .themes { clear: both; - padding: 0 0 100px; } -.themes-php .wrap h2 { - float: left; +.themes-php:not(.network-admin) .wrap h1 { margin-bottom: 15px; } -.network-admin.themes-php .wrap h2 { - margin-bottom: 0; -} - -.themes-php .wrap h2 .button { +.themes-php .wrap h1 .button { margin-left: 20px; } -.themes-php .wrap .theme-count, -.theme-navigation .theme-count { - color: #fff; - -webkit-border-radius: 30px; - border-radius: 30px; - background: #777; - font-size: 14px; - padding: 4px 10px; - font-weight: 600; - margin-left: 5px; - margin-right: 20px; +/* Search form */ +.themes-php .wp-filter-search { position: relative; - top: -3px; -} - -.theme-navigation a { - text-decoration:none; + 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; +.theme .notice, +.theme .notice.is-dismissible { + left: 0; + margin: 0; + position: absolute; + right: 0; + top: 0; } /** @@ -65,7 +51,7 @@ margin: 0 4% 4% 0; position: relative; width: 30.6%; - border: 1px solid #dedede; + border: 1px solid #ddd; -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; @@ -143,12 +129,13 @@ display: block; overflow: hidden; position: relative; + -webkit-backface-visibility: hidden; /* Prevents flicker of the screenshot on hover. */ -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } .theme-browser .theme .theme-screenshot:after { - content: ''; + content: ""; display: block; padding-top: 66.66666%; /* using a 3/2 aspect ratio */ } @@ -159,8 +146,7 @@ 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 */ + -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } @@ -179,9 +165,9 @@ opacity: 0; position: absolute; top: 35%; - right: 25%; - left: 25%; - background: #222; + right: 20%; + left: 20%; + background: #23282d; background: rgba(0,0,0,0.7); color: #fff; font-size: 15px; @@ -195,13 +181,17 @@ -webkit-transition: opacity 0.1s ease-in-out; transition: opacity 0.1s ease-in-out; } + .theme-browser .theme:focus { - outline: 1px dotted #222; + 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; @@ -213,48 +203,11 @@ 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; + background: #23282d; color: #fff; padding-right: 110px; font-weight: 300; @@ -262,6 +215,10 @@ box-shadow: inset 0 1px 1px rgba(0,0,0,0.5); } +.theme-browser .customize-control .theme.active .theme-name { + padding-right: 15px; +} + .theme-browser .theme.active .theme-name span { font-weight: 600; } @@ -277,7 +234,7 @@ } .theme-browser .theme .theme-author { - background: #222; + background: #23282d; color: #eee; display: none; font-size: 14px; @@ -306,18 +263,15 @@ } .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 { +.theme-browser .theme.add-new-theme a:after { display: block; - content: ''; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - opacity: 1; + content: ""; background: transparent; background: rgba(0, 0, 0, 0); position: absolute; @@ -325,12 +279,10 @@ left: 0; right: 0; bottom: 0; - padding: 10% 0 0 0; + padding: 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; @@ -342,9 +294,9 @@ -webkit-border-radius: 50%; border-radius: 50%; display: inline-block; - content: '\f132'; + content: "\f132"; -webkit-font-smoothing: antialiased; - font: normal 74px/115px 'dashicons'; + font: normal 74px/115px dashicons; width: 100px; height: 100px; vertical-align: middle; @@ -364,23 +316,23 @@ text-indent: 4px; } -.theme-browser .theme.add-new-theme:hover .theme-screenshot, -.theme-browser .theme.add-new-theme:focus .theme-screenshot { +.theme-browser .theme.add-new-theme a:hover .theme-screenshot, +.theme-browser .theme.add-new-theme a:focus .theme-screenshot { background: none; } -.theme-browser .theme.add-new-theme:hover span:after, -.theme-browser .theme.add-new-theme:focus span:after { +.theme-browser .theme.add-new-theme a:hover span:after, +.theme-browser .theme.add-new-theme a:focus span:after { background: #fff; - color: #0074a2; + color: #0073aa; } -.theme-browser .theme.add-new-theme:hover:after, -.theme-browser .theme.add-new-theme:focus:after { +.theme-browser .theme.add-new-theme a:hover:after, +.theme-browser .theme.add-new-theme a:focus:after { border-color: transparent; color: #fff; - background: #0074a2; - content: ''; + background: #0073aa; + content: ""; } .theme-browser .theme.add-new-theme .theme-name { @@ -391,29 +343,17 @@ font-weight: 400; position: relative; top: 0; - margin-top: -10%; - margin-bottom: 10%; + margin-top: -18px; + padding-top: 0; + padding-bottom: 48px; } -.theme-browser .theme.add-new-theme:hover .theme-name, -.theme-browser .theme.add-new-theme:focus .theme-name { +.theme-browser .theme.add-new-theme a:hover .theme-name, +.theme-browser .theme.add-new-theme a:focus .theme-name { color: #fff; z-index: 2; } -/* - * The search form - */ -.themes-php .theme-search { - position: relative; - top: -2px; - left: 20px; - font-size: 16px; - font-weight: 300; - line-height: 1.5; - width: 280px; -} - /** * Theme Overlay * Shown when clicking a theme @@ -426,11 +366,7 @@ bottom: 0; background: #f1f1f1; background: rgba( 238, 238, 238, 0.9 ); - z-index: 10; -} - -body.theme-overlay-open { - overflow: hidden; + z-index: 10000; /* Over WP Pointers. */ } .theme-overlay .theme-header { @@ -442,6 +378,10 @@ body.theme-overlay-open { border-bottom: 1px solid #ddd; } +.theme-overlay .theme-header button { + padding: 0; +} + .theme-overlay .theme-header .close { cursor: pointer; height: 48px; @@ -451,18 +391,15 @@ body.theme-overlay-open { border: 0; border-left: 1px solid #ddd; background-color: transparent; -} - -.theme-overlay .theme-header .close:hover:before, -.theme-overlay .theme-header .close:focus:before { - color: #fff; + -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 30px/50px 'dashicons' !important; - color: #777; + font: normal 22px/50px dashicons !important; + color: #72777c; display: inline-block; - content: '\f335'; + content: "\f335"; font-weight: 300; } @@ -470,7 +407,7 @@ body.theme-overlay-open { .theme-overlay .theme-header .right, .theme-overlay .theme-header .left { cursor: pointer; - color: #777; + color: #72777c; background-color: transparent; height: 48px; width: 54px; @@ -478,16 +415,32 @@ body.theme-overlay-open { 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: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 { - background: #0074a2; - color: #fff; + -webkit-box-shadow: none; + box-shadow: none; + outline: none; } .theme-overlay .theme-header .left.disabled, @@ -501,25 +454,17 @@ body.theme-overlay-open { .theme-overlay .theme-header .right:before, .theme-overlay .theme-header .left:before { - font: normal 20px/50px 'dashicons' !important; + font: normal 20px/50px dashicons !important; display: inline; font-weight: 300; } .theme-overlay .theme-header .left:before { - content: '\f340'; + content: "\f341"; } .theme-overlay .theme-header .right:before { - content: '\f344'; -} - -.rtl .theme-overlay .theme-header .left:before { - content: '\f345'; -} - -.rtl .theme-overlay .theme-header .right:before { - content: '\f341'; + content: "\f345"; } .theme-overlay .theme-wrap { @@ -532,21 +477,14 @@ body.theme-overlay-open { 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; + z-index: 10000; /* Over WP Pointers. */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; + -webkit-overflow-scrolling: touch; } -.theme-overlay .theme-wrap:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; -} - -body.folded .theme-overlay .theme-wrap { +body.folded .theme-browser ~ .theme-overlay .theme-wrap { left: 70px; } @@ -559,13 +497,6 @@ body.folded .theme-overlay .theme-wrap { 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; @@ -591,11 +522,15 @@ body.folded .theme-overlay .theme-wrap { margin-bottom: 5px; } +/* Hide-if-customize for items we can't add classes to */ +.customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-header"], +.customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-background"] { + display: none; +} + +.broken-themes a.delete-theme, .theme-overlay .theme-actions .delete-theme { color: #a00; - position: absolute; - right: 10px; - bottom: 5px; text-decoration: none; border-color: transparent; -webkit-box-shadow: none; @@ -603,6 +538,14 @@ body.folded .theme-overlay .theme-wrap { background: transparent; } +.theme-overlay .theme-actions .delete-theme { + position: absolute; + right: 10px; + bottom: 5px; +} + +.broken-themes a.delete-theme:hover, +.broken-themes a.delete-theme:focus, .theme-overlay .theme-actions .delete-theme:hover, .theme-overlay .theme-actions .delete-theme:focus { background: #d54e21; @@ -644,7 +587,7 @@ body.folded .theme-overlay .theme-wrap { } .theme-overlay .screenshot:after { - content: ''; + content: ""; display: block; padding-top: 75%; /* using a 4/3 aspect ratio */ } @@ -679,7 +622,7 @@ body.folded .theme-overlay .theme-wrap { } .theme-overlay .screenshot.thumb:after { - content: ''; + content: ""; display: block; padding-top: 100%; /* using a 1/1 aspect ratio */ } @@ -696,7 +639,7 @@ body.folded .theme-overlay .theme-wrap { .theme-overlay .screenshot.selected { background: transparent; - border: 2px solid #2ea2cc; + border: 2px solid #00a0d2; } .theme-overlay .screenshot.selected img { @@ -718,7 +661,7 @@ body.folded .theme-overlay .theme-wrap { } .theme-overlay .current-label { - background: #333; + background: #32373c; color: #fff; font-size: 11px; display: inline-block; @@ -733,31 +676,30 @@ body.folded .theme-overlay .theme-wrap { } .theme-overlay .theme-name { - color: #222; + color: #23282d; font-size: 32px; font-weight: 100; margin: 10px 0 0; line-height: 1.3; + word-wrap: break-word; + overflow-wrap: break-word; } .theme-overlay .theme-version { - color: #999; + color: #72777c; 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; + margin: 15px 0 25px; + color: #72777c; font-size: 16px; font-weight: 400; - margin: 15px 0 25px; + line-height: inherit; } .theme-overlay .theme-author a { @@ -774,7 +716,7 @@ body.folded .theme-overlay .theme-wrap { .theme-overlay .theme-tags { border-top: 3px solid #eee; - color: #888; + color: #82878c; font-size: 13px; font-weight: 400; margin: 30px 0 0 0; @@ -783,34 +725,16 @@ body.folded .theme-overlay .theme-wrap { .theme-overlay .theme-tags span { color: #444; - font-weight: bold; + font-weight: 600; 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; + border-left: 4px solid #00a0d2; font-size: 14px; - font-weight: normal; + font-weight: 400; margin-top: 30px; padding: 10px 10px 10px 20px; } @@ -837,6 +761,7 @@ body.folded .theme-overlay .theme-wrap { right: auto; top: auto; bottom: auto; + z-index: 10; } .single-theme .theme-overlay .theme-about { @@ -927,7 +852,7 @@ body.folded .theme-overlay .theme-wrap { left: 0; padding: 70px 20px 20px; border: none; - z-index: 500; /* should overlap #wpadminbar, which is 500 on mobile. */ + z-index: 100000; /* should overlap #wpadminbar. */ position: fixed; } @@ -988,7 +913,6 @@ body.folded .theme-overlay .theme-wrap { } @media only screen and (max-width: 650px) { - .theme-overlay .theme-update, .theme-overlay .theme-description { margin-left: 0; } @@ -1021,11 +945,7 @@ body.folded .theme-overlay .theme-wrap { font-size: 13px; } - .themes-php .wrap h2 { - width: 100%; - } - - .themes-php .theme-search { + .themes-php .wp-filter-search { float: none; clear: both; left: 0; @@ -1033,10 +953,11 @@ body.folded .theme-overlay .theme-wrap { right: 0; margin: 10px 0; width: 100%; + max-width: 280px; } .theme-browser .theme.add-new-theme span:after { - font: normal 60px/90px 'dashicons'; + font: normal 60px/90px dashicons; width: 80px; height: 80px; top: 30%; @@ -1079,285 +1000,103 @@ body.folded .theme-overlay .theme-wrap { /* Already installed theme */ .theme-browser .theme .theme-installed { - background: #0074a2; + background: #0073aa; } -.theme-browser .theme .theme-installed:before { - content: '\f147'; +.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-navigation { - background: #fff; - -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1); - box-shadow: 0 1px 1px 0 rgba(0,0,0,.1); - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - color: #555; - display: inline-block; - font-size: 13px; - margin: 20px 0 30px; +.theme-install-php .wp-filter { padding: 0 20px; - position: relative; - width: 100%; } + .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-theme, +.upload-plugin { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: none; - margin: 0px 0 0; - padding: 0; + margin: 0; + padding: 50px 0; width: 100%; overflow: hidden; position: relative; top: 10px; } -body.show-upload-theme .upload-theme { + +.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-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 { - color: #999; +.upload-theme .install-help, +.upload-plugin .install-help { + color: #555d66; /* #f1f1f1 background */ font-size: 18px; font-style: normal; margin: 0; - padding: 40px 0 0; + padding: 0; text-align: center; } -body.show-upload-theme .upload-theme + .theme-navigation, -body.show-upload-theme .upload-theme + .theme-navigation + .theme-browser { - display: none; -} -.theme-navigation .theme-count { - margin-left: 0; - position: absolute; - top: 12px; -} -.theme-count + .theme-section { - margin-left: 60px; -} -.theme-section, -.theme-filter { - border-bottom: 4px solid #fff; - color: #666; - cursor: pointer; - display: inline-block; - margin: 0 10px; - padding: 15px 0; -} -.theme-section.current, -.theme-filter.current { - border-bottom: 4px solid #666; - color: #222; -} -.theme-top-filters { - display: inline-block; -} -.theme-navigation .more-filters { - color: #666; - cursor: pointer; - display: inline-block; - margin: 0 10px; - padding: 4px 6px; -} -body.more-filters-opened .more-filters, -body.more-filters-opened .more-filters:before { - background: #777; - -webkit-border-radius: 2px; - border-radius: 2px; - border: none; - color: #fff; -} - -body.more-filters-opened .more-filters:hover, -body.more-filters-opened .more-filters:focus, -body.more-filters-opened .more-filters:hover:before, -body.more-filters-opened .more-filters:focus:before { - background: rgb(46, 162, 204); -} -.theme-install-php .theme-search { - position: absolute; - right: 10px; - top: 9px; - font-size: 16px; - font-weight: 300; - line-height: 1.5; - width: 280px; -} -.more-filters:before { - color: #777; - text-align: center; - margin: 0 5px 0 0; - content: "\f111"; - display: inline-block; - width: 16px; - height: 16px; - -webkit-font-smoothing: antialiased; - font-size: 16px; - line-height: 1; - font-family: "dashicons"; - text-decoration: inherit; - font-weight: normal; - font-style: normal; - vertical-align: top; - -webkit-transition: color .1s ease-in 0; - transition: color .1s ease-in 0; - text-align: center; -} -.more-filters.current:before { - color: #fff; -} -.more-filters-container { - display: none; - padding: 20px; - border-top: 1px solid #eee; - margin: 0 -20px; - background: #fafafa; -} -body.more-filters-opened .more-filters-container { - display: block; - overflow: hidden; -} -body.more-filters-opened .theme-section.current { - border-bottom: none; -} -body.more-filters-opened .theme-browser, -body.more-filters-opened.filters-applied.loading-themes .theme-browser { - display: none; -} -body.more-filters-opened.filters-applied .theme-browser { - display: block; -} -.more-filters-container .filters-group { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - float: left; - width: 19%; - background: #fff; - margin: 0 1% 0 0; - border: 1px solid #e5e5e5; - -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04); - box-shadow: 0 1px 1px rgba(0,0,0,0.04); - padding: 10px; -} -.more-filters-container .wide-filters-group { - width: 38%; -} -.more-filters-container .feature-name { - margin: 0; - position: relative; -} -.more-filters-container ol { - list-style-type: none; - margin: 20px 0 0; - font-size: 12px; -} -.more-filters-container li { - display: inline-block; - vertical-align: top; - list-style-type: none; - margin: 5px 0; - padding-right: 25px; - width: 160px; -} -.theme-navigation .more-filters-container .apply-filters { - margin: 0 0 20px; -} -.theme-navigation .more-filters-container .clear-filters { - display: none; - margin: 0 0 20px 10px; -} -.more-filters-container .apply-filters span { - display: inline-block; - font-size: 12px; - text-indent: 10px; - opacity: 0.8; -} -.more-filters-container .filtering-by { - display: none; - margin: 0; -} -.more-filters-container .filtering-by > span { - font-weight: 600; -} -.more-filters-container .filtering-by .tags { - display: inline; -} -.more-filters-container .filtering-by .tag { - background: #fff; - border: 1px solid #e5e5e5; - -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04); - box-shadow: 0 1px 1px rgba(0,0,0,0.04); - font-size: 11px; - margin: 0 5px; - padding: 4px 8px; -} -.more-filters-container .filtering-by a { - margin-left: 10px; -} -body.filters-applied .more-filters-container .filters-group, -body.filters-applied .more-filters-container a.button, -body.filters-applied .more-filters-container br { - display: none !important; -} -body.filters-applied .more-filters-container .filtering-by { - display: block; -} -body.filters-applied .more-filters-container { - padding: 20px; -} p.no-themes { - color: #999; + clear: both; + color: #666; font-size: 18px; font-style: normal; margin: 0; - padding: 0; + padding: 100px 0; text-align: center; 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; } @media only screen and (max-width: 1120px) { - .theme-install-php .theme-search { - margin: 20px 0; - position: static; - width: 100%; - } - .more-filters-container { - border-bottom: 1px solid #eee; - } .upload-theme .wp-upload-form { margin: 20px 0; max-width: 100%; @@ -1367,94 +1106,25 @@ body.show-upload-theme p.no-themes { padding: 20px 0 0; text-align: left; } - .more-filters-container .filters-group { - margin-bottom: 0; - margin-top: 5px; - width: 100%; - } - .more-filters-container .filters-group li { - margin: 10px 0; - } } -@media only screen and (max-width: 782px) { - .more-filters-container .filters-group { - width: 100%; - } - .more-filters-container .filters-group li { - width: 100%; - } +.theme-details .theme-rating { + line-height: 23px; } -.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 { +.theme-details .star-rating { display: inline; - margin-left: 10px; - line-height: 20px; - color: #999; } -.loading-themes .theme-browser, -.error .theme-browser { - display: none; + +.theme-details .num-ratings, +.theme-details .no-rating { + font-size: 11px; + color: #72777c; } -.loading-themes .spinner { + +.theme-details .no-rating { display: block; - margin: 40px auto 0; - float: none; + line-height: 20px; } /*------------------------------------------------------------------------------ @@ -1462,7 +1132,7 @@ body.show-upload-theme p.no-themes { ------------------------------------------------------------------------------*/ .appearance_page_custom-header #headimg { - border: 1px solid #DFDFDF; + border: 1px solid #ddd; overflow: hidden; width: 100%; } @@ -1498,7 +1168,7 @@ body.show-upload-theme p.no-themes { div#custom-background-image { min-height: 100px; - border: 1px solid #dfdfdf; + border: 1px solid #ddd; } div#custom-background-image img { @@ -1540,7 +1210,6 @@ body.full-overlay-active { padding: 0; margin: 0; z-index: 10; - overflow: auto; background: #eee; border-right: none; } @@ -1563,7 +1232,7 @@ body.full-overlay-active { } .wp-full-overlay-sidebar:after { - content: ''; + content: ""; display: block; position: absolute; top: 0; @@ -1617,70 +1286,172 @@ body.full-overlay-active { overflow: auto; } -/* Close Link */ -.wp-full-overlay .close-full-overlay { +/* 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: #b4b9be; + background: #eee; + cursor: default; + pointer-events: none; +} + +.theme-install-overlay .close-full-overlay, +.theme-install-overlay .previous-theme, +.theme-install-overlay .next-theme { + border-left: 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; + left: 0; } /* Collapse Button */ -.wp-full-overlay a.collapse-sidebar { - position: absolute; - bottom: 12px; +.wp-core-ui .wp-full-overlay .collapse-sidebar { + position: fixed; + bottom: 0; left: 0; - z-index: 50; - display: block; - width: 19px; - height: 19px; - margin-left: 15px; - padding: 0; + padding: 9px 0 9px 10px; + height: 45px; + color: #656a6f; + outline: 0; + line-height: 1; + background-color: transparent !important; + border: none !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + -webkit-border-radius: 0 !important; + border-radius: 0 !important; +} + +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus { + color: #0073aa; +} + +.wp-full-overlay .collapse-sidebar-arrow, +.wp-full-overlay .collapse-sidebar-label { + display: inline-block; + vertical-align: middle; + line-height: 20px; +} + +.wp-full-overlay .collapse-sidebar-arrow { + width: 20px; + height: 20px; + margin: 0 2px; /* avoid the focus box-shadow to be cut-off */ -webkit-border-radius: 50%; border-radius: 50%; - color: #777; - text-decoration: none; + overflow: hidden; } -.wp-full-overlay a.collapse-sidebar:hover { - color: #0074a2; +.wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow, +.wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow { + -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); } -.wp-full-overlay.collapsed .collapse-sidebar { - position: absolute; - left: 100%; +.wp-full-overlay .collapse-sidebar-label { + margin-left: 3px; } -.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.collapsed .collapse-sidebar-label { + display: none; } .wp-full-overlay .collapse-sidebar-arrow:before { - -webkit-border-radius: 50%; - border-radius: 50%; - float: left; + display: block; content: "\f148"; background: #eee; - font: normal 20px/1 'dashicons'; + 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-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 { - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); + -webkit-transform: rotate(180.001deg); + -ms-transform: rotate(180.001deg); + transform: rotate(180.001deg); /* Firefox: promoting to its own layer to trigger anti-aliasing */ } .rtl .wp-full-overlay.collapsed .collapse-sidebar-arrow:before { @@ -1689,45 +1460,133 @@ body.full-overlay-active { transform: none; } -.wp-full-overlay.collapsed .collapse-sidebar-arrow { - background-position: -1px -109px; +/* 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; } -.wp-full-overlay .collapse-sidebar-label { - position: absolute; - left: 100%; - line-height: 20px; - margin-left: 10px; +/* Device/preview size toggles */ + +.wp-full-overlay { + background: #191e23; } -.wp-full-overlay.collapsed .collapse-sidebar-label { - display: none; +.wp-full-overlay-main { + background-color: #f1f1f1; } -.wp-full-overlay .theme-navigation { - padding: 10px 20px; - position: absolute; - bottom: 10px; - text-align: left; +.expanded .wp-full-overlay-footer { + position: fixed; + bottom: 0; + left: 0; + width: 300px; + height: 45px; + border-top: 1px solid #ddd; + background: #eee; } -.wp-full-overlay .theme-navigation .next-theme { + +.wp-full-overlay-footer .devices { float: right; } -.wp-full-overlay.no-navigation .theme-navigation { + +.wp-full-overlay-footer .devices button { + cursor: pointer; + background: transparent; + border: none; + height: 45px; + padding: 0 3px; + margin: 0 0 0 -4px; + -webkit-box-shadow: none; + 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; +} + +.wp-full-overlay-footer .devices button:focus { + -webkit-box-shadow: none; + box-shadow: none; + outline: none; +} + +.wp-full-overlay-footer .devices button:before { + display: inline-block; + -webkit-font-smoothing: antialiased; + font: normal 20px/30px "dashicons"; + vertical-align: top; + margin: 3px 0; + padding: 4px 8px; + color: #656a6f; +} + +.wp-full-overlay-footer .devices button.active { + border-bottom-color: #191e23; +} + +.wp-full-overlay-footer .devices button:hover, +.wp-full-overlay-footer .devices button:focus { + background-color: #fff; +} + +.wp-full-overlay-footer .devices button:focus { + background-color: #fff; + border-bottom-color: #0073aa; +} + +.wp-full-overlay-footer .devices button.active:before, +.wp-full-overlay-footer .devices button:hover:before, +.wp-full-overlay-footer .devices button:focus:before { + color: #191e23; +} + +.wp-full-overlay-footer .devices .preview-desktop:before { + content: "\f472"; +} + +.wp-full-overlay-footer .devices .preview-tablet:before { + content: "\f471"; +} + +.wp-full-overlay-footer .devices .preview-mobile:before { + content: "\f470"; +} + +@media screen and (max-width:1024px) { + .wp-full-overlay-footer .devices { + display: none; + } +} + +.collapsed .wp-full-overlay-footer .devices button:before { 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; +.preview-mobile .wp-full-overlay-main { + margin: auto 0 auto -160px; + width: 320px; + height: 480px; + max-height: 100%; + max-width: 100%; + left: 50%; } +.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. */ + height: 1080px; + max-height: 100%; + max-width: 100%; + left: 50%; +} + + /*------------------------------------------------------------------------------ 24.0 - Customize Loader ------------------------------------------------------------------------------*/ @@ -1762,12 +1621,6 @@ body.full-overlay-active { 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%; @@ -1777,10 +1630,6 @@ body.full-overlay-active { transition: opacity 0.3s; } -#customize-container .collapse-sidebar { - bottom: 16px; -} - #customize-controls { margin-top: 0; } @@ -1819,7 +1668,7 @@ body.full-overlay-active { } .install-theme-info .theme-screenshot { - margin-top: 15px; + margin: 15px 0; width: 258px; border: 1px solid #ccc; } @@ -1830,42 +1679,67 @@ body.full-overlay-active { .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; + color: #72777c; line-height: 20px; max-width: 100%; } -.theme-install-overlay .wp-full-overlay-header { - margin-top: 9px; -} - -.theme-install-overlay .wp-full-overlay-header .theme-install { +.theme-install-overlay .wp-full-overlay-header .button { 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; + 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; + position: absolute; + z-index: 0; + background-color: #f1f1f1; +} + +.customize-loading #customize-container { + background-color: #f1f1f1; +} + +#customize-preview.wp-full-overlay-main:before, +.customize-loading #customize-container:before, +.theme-install-overlay .wp-full-overlay-main:before { + content: ""; + display: block; + width: 20px; + height: 20px; + position: absolute; + left: 50%; + top: 50%; + z-index: -1; + margin: -10px 0 0 -10px; + -webkit-transform: translateZ(0); + transform: translateZ(0); + background: transparent url(../images/spinner.gif) no-repeat center center; -webkit-background-size: 20px 20px; background-size: 20px 20px; } +#customize-preview.wp-full-overlay-main.iframe-ready:before, +.theme-install-overlay.iframe-ready .wp-full-overlay-main:before { + background-image: none; +} + /* =Media Queries -------------------------------------------------------------- */ @@ -1873,7 +1747,6 @@ body.full-overlay-active { * 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 { @@ -1882,8 +1755,9 @@ body.full-overlay-active { background-size: 15px 123px; } - .customize-loading #customize-container, - .theme-install-overlay .wp-full-overlay-main { + #customize-preview.wp-full-overlay-main:before, + .customize-loading #customize-container:before, + .theme-install-overlay .wp-full-overlay-main:before { background-image: url(../images/spinner-2x.gif); } } @@ -1899,4 +1773,22 @@ body.full-overlay-active { .available-theme .action-links .delete-theme a { padding: 0; } + + .broken-themes table { + width: 100%; + } + + .theme-install-overlay .wp-full-overlay-header .theme-install { + margin-top: 6px; + 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; + } }