Plugins/Themes: Increase size of drop region for uploads.

The native drop area surface is the `input[type="file"]` element, which is quite small on plugin and theme upload screens. A larger drop area makes it easier for users to successfully drag their file over the region.

Modify the CSS so that the file input occupies the full visual space.

Props ibrahimriaz, ronya4927, huzaifaalmesbah, noruzzaman, r1k0, nikunj8866, joedolson.
Fixes #64065.

git-svn-id: https://develop.svn.wordpress.org/trunk@61598 602fd350-edb4-49c9-b593-d223f7449a82

Author: joedolson

src/wp-admin/css/themes.css

@@ -1086,9 +1086,7 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
 
 .upload-theme .wp-upload-form,
 .upload-plugin .wp-upload-form {
-	background: #f6f7f7;
-	border: 1px solid #c3c4c7;
-	padding: 30px;
+	position: relative;
 	margin: 30px auto;
 	display: inline-flex;
 	justify-content: space-between;
@@ -1097,7 +1095,16 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
 
 .upload-theme .wp-upload-form input[type="file"],
 .upload-plugin .wp-upload-form input[type="file"] {
-	margin-right: 10px;
+	background: #f6f7f7;
+    border: 1px solid #c3c4c7;
+    margin: 0;
+    padding: 30px 128px 30px 30px;
+}
+
+.upload-plugin .wp-upload-form input[type=submit], 
+.upload-theme .wp-upload-form input[type=submit] {
+	position: absolute;
+	right: 30px;
 }
 
 .upload-theme .install-help,
@@ -1131,6 +1138,7 @@ p.no-themes-local {
 }
 
 @media only screen and (max-width: 1120px) {
+	.upload-plugin .wp-upload-form,
 	.upload-theme .wp-upload-form {
 		margin: 20px 0;
 		max-width: 100%;
@@ -2015,12 +2023,22 @@ body.full-overlay-active {
 		padding-bottom: 4px;
 	}
 
-	.upload-theme .wp-upload-form,
-	.upload-plugin .wp-upload-form {
-		display: block;
+	.upload-plugin .wp-upload-form,
+	.upload-theme .wp-upload-form {
+		width: 100%;
 	}
 
-	:is(.upload-theme, .upload-plugin) .wp-upload-form input[type="submit"] {
-		margin-top: 10px;
+	.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;
 	}
 }