diff -r 490d5cc509ed -r cf61fcea0001 wp/wp-admin/css/themes.css --- a/wp/wp-admin/css/themes.css Tue Jun 09 11:14:17 2015 +0000 +++ b/wp/wp-admin/css/themes.css Mon Oct 14 17:39:30 2019 +0200 @@ -7,25 +7,27 @@ 16.1 - Manage Themes ------------------------------------------------------------------------------*/ +body.js .theme-browser.search-loading { + display: none; +} + .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; } /* Search form */ +.themes-php .search-form { + display: inline; +} + .themes-php .wp-filter-search { position: relative; top: -2px; @@ -38,15 +40,13 @@ } /* Position admin messages */ -.themes-php div.updated, -.themes-php div.error, -.themes-php div.notice { - 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; } /** @@ -59,11 +59,8 @@ 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); + border: 1px solid #ddd; 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; } @@ -87,7 +84,6 @@ 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; @@ -100,13 +96,8 @@ .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; + height: auto; background: rgba(244, 244, 244, 0.7); border-left: 1px solid rgba(0,0,0,0.05); } @@ -122,7 +113,7 @@ margin-right: 3px; } -.theme-browser .theme .theme-actions .button-secondary { +.theme-browser .theme .theme-actions .button { float: none; margin-left: 3px; } @@ -137,12 +128,12 @@ display: block; overflow: hidden; position: relative; - -webkit-transition: opacity 0.2s ease-in-out; + -webkit-backface-visibility: hidden; /* Prevents flicker of the screenshot on hover. */ 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 */ } @@ -153,7 +144,6 @@ left: 0; top: 0; width: 100%; - -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } @@ -172,8 +162,8 @@ opacity: 0; position: absolute; top: 35%; - right: 25%; - left: 25%; + right: 20%; + left: 20%; background: #23282d; background: rgba(0,0,0,0.7); color: #fff; @@ -183,15 +173,12 @@ 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 ); } @@ -211,51 +198,13 @@ } /** - * 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; - -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); } @@ -273,6 +222,21 @@ opacity: 1; } +.theme-id-container { + position: relative; +} + +.theme-browser .theme.active .theme-actions, +.theme-browser .theme .theme-actions { + position: absolute; + top: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + right: 0; + padding: 10px 15px; + box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); +} + .theme-browser .theme.active .theme-actions .button-primary { margin-right: 0; } @@ -302,12 +266,10 @@ */ .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; @@ -316,7 +278,7 @@ .theme-browser .theme.add-new-theme a:after { display: block; - content: ''; + content: ""; background: transparent; background: rgba(0, 0, 0, 0); position: absolute; @@ -328,20 +290,17 @@ text-shadow: none; border: 5px dashed #d5d2ca; border: 5px dashed rgba(0, 0, 0, 0.1); - -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'; + content: "\f132"; -webkit-font-smoothing: antialiased; - font: normal 74px/115px 'dashicons'; + font: normal 74px/115px dashicons; width: 100px; height: 100px; vertical-align: middle; @@ -377,13 +336,12 @@ border-color: transparent; color: #fff; background: #0073aa; - content: ''; + 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; @@ -411,7 +369,7 @@ bottom: 0; background: #f1f1f1; background: rgba( 238, 238, 238, 0.9 ); - z-index: 10; + z-index: 10000; /* Over WP Pointers. */ } .theme-overlay .theme-header { @@ -436,15 +394,14 @@ 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; + font: normal 22px/50px dashicons !important; + color: #72777c; display: inline-block; - content: '\f335'; + content: "\f335"; font-weight: 300; } @@ -452,7 +409,7 @@ .theme-overlay .theme-header .right, .theme-overlay .theme-header .left { cursor: pointer; - color: #777; + color: #72777c; background-color: transparent; height: 48px; width: 54px; @@ -460,7 +417,6 @@ 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; } @@ -483,7 +439,6 @@ .theme-overlay .theme-header .close:focus, .theme-overlay .theme-header .right:focus, .theme-overlay .theme-header .left:focus { - -webkit-box-shadow: none; box-shadow: none; outline: none; } @@ -499,7 +454,7 @@ .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; } @@ -512,8 +467,6 @@ content: "\f345"; } - - .theme-overlay .theme-wrap { clear: both; position: fixed; @@ -522,24 +475,13 @@ 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; + z-index: 10000; /* Over WP Pointers. */ 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; } @@ -552,13 +494,6 @@ 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; @@ -569,8 +504,6 @@ 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; } @@ -595,7 +528,6 @@ color: #a00; text-decoration: none; border-color: transparent; - -webkit-box-shadow: none; box-shadow: none; background: transparent; } @@ -632,24 +564,21 @@ float: left; margin: 0 30px 0 0; width: 55%; - max-width: 880px; + max-width: 1200px; /* Recommended theme screenshot width, set here to avoid stretching */ 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: ''; + content: ""; display: block; padding-top: 75%; /* using a 4/3 aspect ratio */ } @@ -684,7 +613,7 @@ } .theme-overlay .screenshot.thumb:after { - content: ''; + content: ""; display: block; padding-top: 100%; /* using a 1/1 aspect ratio */ } @@ -728,7 +657,6 @@ font-size: 11px; display: inline-block; padding: 2px 8px; - -webkit-border-radius: 2px; border-radius: 2px; margin: 0 0 -10px; -webkit-user-select: none; @@ -743,10 +671,12 @@ 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; @@ -755,10 +685,11 @@ } .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 { @@ -784,34 +715,16 @@ .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: #23282d; - 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 #00a0d2; font-size: 14px; - font-weight: normal; + font-weight: 400; margin-top: 30px; padding: 10px 10px 10px 20px; } @@ -838,6 +751,7 @@ right: auto; top: auto; bottom: auto; + z-index: 10; } .single-theme .theme-overlay .theme-about { @@ -989,7 +903,6 @@ } @media only screen and (max-width: 650px) { - .theme-overlay .theme-update, .theme-overlay .theme-description { margin-left: 0; } @@ -1022,23 +935,18 @@ 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; + margin: -5px 0 20px 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%; @@ -1083,41 +991,61 @@ .theme-browser .theme .theme-installed { 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-install-php .wp-filter { + padding-left: 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; - -moz-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; @@ -1128,34 +1056,29 @@ } .upload-theme .install-help, .upload-plugin .install-help { - color: #999; + 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 + .wp-filter, -body.show-upload-theme .upload-theme + .wp-filter + .theme-browser { - display: none; -} -p.no-themes { +p.no-themes, +p.no-themes-local { 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; @@ -1173,65 +1096,23 @@ } } -.rating { - margin: 15px 0 0; -} -.rating span:before { - color: #e6b800; - content: "\f154"; - display: inline-block; - -webkit-font-smoothing: antialiased; - font: normal 20px/1 'dashicons'; - vertical-align: top; +.theme-details .theme-rating { + line-height: 23px; } -/* 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"; + +.theme-details .star-rating { + display: inline; } -.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"; + +.theme-details .num-ratings, +.theme-details .no-rating { + font-size: 11px; + color: #72777c; } -.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 .no-rating { display: block; line-height: 20px; - color: #999; } /*------------------------------------------------------------------------------ @@ -1239,7 +1120,7 @@ ------------------------------------------------------------------------------*/ .appearance_page_custom-header #headimg { - border: 1px solid #DFDFDF; + border: 1px solid #ddd; overflow: hidden; width: 100%; } @@ -1275,7 +1156,7 @@ div#custom-background-image { min-height: 100px; - border: 1px solid #dfdfdf; + border: 1px solid #ddd; } div#custom-background-image img { @@ -1283,12 +1164,128 @@ max-height: 300px; } +.background-position-control input[type="radio"]:checked ~ .button { + background: #eee; + border-color: #999; + 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; + 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; + 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; + 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 { + border-radius: 0; + 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 -1px 0 0 !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 { + 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 { + border-radius: 3px 0 0; +} + +.background-position-control .button-group:first-child > label:first-child .dashicons { + -webkit-transform: rotate( 45deg ); + transform: rotate( 45deg ); +} + +.background-position-control .button-group:first-child > label:last-child .button { + border-radius: 0 3px 0 0; +} + +.background-position-control .button-group:first-child > label:last-child .dashicons { + -webkit-transform: rotate( -45deg ); + transform: rotate( -45deg ); +} + +.background-position-control .button-group:last-child > label:first-child .button { + border-radius: 0 0 0 3px; +} + +.background-position-control .button-group:last-child > label:first-child .dashicons { + -webkit-transform: rotate( -45deg ); + transform: rotate( -45deg ); +} + +.background-position-control .button-group:last-child > label:last-child .button { + border-radius: 0 0 3px 0; +} + +.background-position-control .button-group:last-child > label:last-child .dashicons { + -webkit-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 { @@ -1305,11 +1302,11 @@ } .wp-full-overlay-sidebar { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; position: fixed; - width: 300px; + min-width: 300px; + max-width: 600px; + width: 18%; height: 100%; top: 0; bottom: 0; @@ -1338,8 +1335,28 @@ margin-left: -300px; } +@media screen and (min-width: 1667px) { + .wp-full-overlay.expanded { + margin-left: 18%; + } + + .wp-full-overlay.collapsed .wp-full-overlay-sidebar { + margin-left: -18%; + } +} + +@media screen and (min-width: 3333px) { + .wp-full-overlay.expanded { + margin-left: 600px; + } + + .wp-full-overlay.collapsed .wp-full-overlay-sidebar { + margin-left: -600px; + } +} + .wp-full-overlay-sidebar:after { - content: ''; + content: ""; display: block; position: absolute; top: 0; @@ -1358,16 +1375,6 @@ height: 100%; } -#customize-preview.wp-full-overlay-main { - background: 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 { - background: none; -} - .wp-full-overlay-sidebar .wp-full-overlay-header { position: absolute; left: 0; @@ -1378,7 +1385,6 @@ z-index: 10; margin: 0; border-top: none; - -webkit-box-shadow: none; box-shadow: none; } @@ -1390,7 +1396,6 @@ bottom: 0; border-bottom: none; border-top: none; - -webkit-box-shadow: none; box-shadow: none; } @@ -1422,7 +1427,6 @@ 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; } @@ -1436,7 +1440,6 @@ border-color: #ccc; color: #000; outline: none; - -webkit-box-shadow: none; box-shadow: none; } @@ -1476,100 +1479,235 @@ pointer-events: none; } -/* Collapse Button */ -.wp-full-overlay a.collapse-sidebar { - position: absolute; - bottom: 12px; +.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; - 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 { +/* Collapse Button */ +.wp-core-ui .wp-full-overlay .collapse-sidebar { + position: fixed; + bottom: 0; + left: 0; + padding: 9px 0 9px 10px; + height: 45px; + color: #656a6f; + outline: 0; + line-height: 1; + background-color: transparent !important; + border: none !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 { color: #0073aa; } -.wp-full-overlay.collapsed .collapse-sidebar { - position: absolute; - left: 100%; +.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 { - position: static; - margin-top: 0; - margin-left: 0; - display: block; - width: auto; - height: auto; - background: none; + width: 20px; + height: 20px; + margin: 0 2px; /* avoid the focus box-shadow to be cut-off */ + border-radius: 50%; + overflow: hidden; +} + +.wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow, +.wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow { + box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); +} + +.wp-full-overlay .collapse-sidebar-label { + margin-left: 3px; +} + +.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); + transform: rotate(180.001deg); /* Firefox: promoting to its own layer to trigger anti-aliasing */ } .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; } +/* Device/preview size toggles */ + +.wp-full-overlay { + background: #191e23; +} + +.wp-full-overlay-main { + background-color: #f1f1f1; +} + +.expanded .wp-full-overlay-footer { + position: fixed; + bottom: 0; + left: 0; + min-width: 299px; + max-width: 599px; + width: 18%; + width: calc( 18% - 1px ); + height: 45px; + border-top: 1px solid #ddd; + background: #eee; +} + +.wp-full-overlay-footer .devices-wrapper { + float: right; +} + +.wp-full-overlay-footer .devices { + position: relative; + background: #eee; + box-shadow: -20px 0 10px -5px #eee; +} + +.wp-full-overlay-footer .devices button { + cursor: pointer; + background: transparent; + border: none; + height: 45px; + padding: 0 3px; + margin: 0 0 0 -4px; + box-shadow: none; + border-top: 1px solid transparent; + border-bottom: 4px solid transparent; + 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 { + 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, +.wp-full-overlay-footer .devices button.active:hover { + border-bottom-color: #0073aa; +} + +.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: #0073aa; +} + +.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; +} + +.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 ------------------------------------------------------------------------------*/ @@ -1583,9 +1721,9 @@ display: none; } -#customize-container { - display: none; - background: #fff; +#customize-container, +#customize-controls .notice.notification-overlay { + background: #eee; z-index: 500000; position: fixed; overflow: visible; @@ -1595,34 +1733,28 @@ right: 0; height: 100%; } +#customize-container { + display: none; +} -.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 { 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; } @@ -1661,7 +1793,7 @@ } .install-theme-info .theme-screenshot { - margin-top: 15px; + margin: 15px 0; width: 258px; border: 1px solid #ccc; } @@ -1672,22 +1804,16 @@ .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 .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) */ @@ -1706,11 +1832,39 @@ } .theme-install-overlay .wp-full-overlay-main { - background: #fff url(../images/spinner.gif) no-repeat center center; - -webkit-background-size: 20px 20px; + 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, +#customize-controls .notice.notification-overlay.notification-loading: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; 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 -------------------------------------------------------------- */ @@ -1722,19 +1876,15 @@ (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-preview.wp-full-overlay-main, - .customize-loading #customize-container, - .theme-install-overlay .wp-full-overlay-main { + #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); } - - .theme-install-overlay .wp-full-overlay-header .theme-install { - margin-top: 2px; - } } @media screen and ( max-width: 782px ) { @@ -1757,4 +1907,23 @@ margin-top: 6px; line-height: normal; } + + .theme-browser .theme .theme-actions .button { + margin-bottom: 0; + } + + .theme-browser .theme.active .theme-actions, + .theme-browser .theme .theme-actions { + padding-top: 8px; + padding-bottom: 8px; + } } + +@media aural { + .theme .notice:before, + .theme-info .updating-message:before, + .theme-info .updated-message:before, + .theme-install.updating-message:before { + speak: none; + } +}