diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css index 82fca781dfc5b..96e9576494734 100644 --- a/src/wp-admin/css/themes.css +++ b/src/wp-admin/css/themes.css @@ -1133,27 +1133,33 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap { display: block; } +/* Form is the drop zone (ticket #64065). Flex layout fixes Install Now alignment in all locales. */ .upload-theme .wp-upload-form, .upload-plugin .wp-upload-form { - position: relative; - margin: 30px auto; + box-sizing: border-box; display: inline-flex; - justify-content: space-between; + flex-wrap: nowrap; align-items: center; + gap: 15px; + background: #f6f7f7; + border: 1px solid #c3c4c7; + margin: 30px auto; + padding: 30px; } .upload-theme .wp-upload-form input[type="file"], .upload-plugin .wp-upload-form input[type="file"] { - background: #f6f7f7; - border: 1px solid #c3c4c7; - margin: 0; - padding: 30px 128px 30px 30px; + background: transparent; + border: none; + margin: 0; + padding: 0; + flex: 1; + min-width: 0; } -.upload-plugin .wp-upload-form input[type=submit], -.upload-theme .wp-upload-form input[type=submit] { - position: absolute; - right: 30px; +.upload-plugin .wp-upload-form input[type="submit"], +.upload-theme .wp-upload-form input[type="submit"] { + flex-shrink: 0; } .upload-theme .install-help, @@ -1191,6 +1197,7 @@ p.no-themes-local { .upload-theme .wp-upload-form { margin: 20px 0; max-width: 100%; + width: 100%; } .upload-theme .install-help { font-size: 15px; @@ -2071,19 +2078,17 @@ body.full-overlay-active { .upload-plugin .wp-upload-form, .upload-theme .wp-upload-form { width: 100%; + flex-direction: column; + align-items: stretch; } .upload-plugin .wp-upload-form input[type=file], .upload-theme .wp-upload-form input[type=file] { - padding: 30px 30px 80px; width: 100%; } :is(.upload-theme, .upload-plugin) .wp-upload-form input[type="submit"].button { - right: unset; - left: 50%; - transform: translateX(-50%) !important; - top: calc( 1.4em + 42px ); /* Line height of control + gap + top padding. */ - margin: 10px 0 0; + align-self: center; + margin-top: 10px; } }