Media: Use the default 40px button height in the media modal.

Buttons in the media modal and attachment detail modal defaulted to a 32px height via CSS overrides, while form elements such as input and select use the default 40px. Remove these overrides so buttons fall back to the default 40px height, resolving the size inconsistencies.

Props cbravobernal, huzaifaalmesbah, khokansardar, masteradhoc, muryam, noruzzaman, tusharaddweb, wildworks.
Fixes #65428.


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

Author: t-hamano

src/wp-admin/css/media.css

@@ -781,7 +781,7 @@ border color while dragging a file over the uploader drop area */
 	margin: 0 auto 16px;
 	max-width: 100%;
 	max-height: 90%;
-	max-height: calc( 100% - 42px ); /* leave space for actions underneath */
+	max-height: calc( 100% - 56px ); /* leave space for actions underneath */
 	background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7);
 	background-position: 0 0, 10px 10px;
 	background-size: 20px 20px;
@@ -795,12 +795,6 @@ border color while dragging a file over the uploader drop area */
 	text-align: center;
 }
 
-.edit-attachment-frame .button {
-	min-height: 32px;
-	line-height: 2.30769231; /* 30px for 32px height with 13px font */
-	padding: 0 12px;
-}
-
 .edit-attachment-frame .wp-media-wrapper {
 	margin-bottom: 12px;
 }

src/wp-includes/css/media-views.css

@@ -25,7 +25,7 @@
 
 .media-modal label {
 	font-size: 13px;
-}	
+}
 
 .media-modal .legend-inline {
 	position: absolute;
@@ -272,13 +272,6 @@
 	-webkit-font-smoothing: subpixel-antialiased;
 }
 
-.media-modal-content .button,
-.media-modal-content .button.button-large {
-	min-height: 32px;
-	line-height: 2.30769231; /* 30px for 32px height with 13px font */
-	padding: 0 12px;
-}
-
 .media-toolbar input[type="text"],
 .media-toolbar input[type="search"],
 .media-toolbar select {
@@ -327,8 +320,8 @@
 
 .media-frame-toolbar .media-toolbar-primary > .media-button,
 .media-frame-toolbar .media-toolbar-primary > .media-button-group {
-	margin-top: 14px;
-	margin-bottom: 14px;
+	margin-top: 10px;
+	margin-bottom: 10px;
 }
 
 .media-toolbar-primary {
@@ -349,21 +342,21 @@
 	align-items: end;
 }
 
-label[for="media-attachment-filters"] { 
-	grid-area: 1 / 1 / 2 / 2; 
+label[for="media-attachment-filters"] {
+	grid-area: 1 / 1 / 2 / 2;
 }
 
-select#media-attachment-filters { 
-	grid-area: 2 / 1 / 3 / 2; 
+select#media-attachment-filters {
+	grid-area: 2 / 1 / 3 / 2;
 }
 
-label[for="media-attachment-date-filters"] { 
-	grid-area: 1 / 2 / 2 / 3; 
+label[for="media-attachment-date-filters"] {
+	grid-area: 1 / 2 / 2 / 3;
 }
 
-select#media-attachment-date-filters { 
-	grid-area: 2 / 2 / 3 / 3; 
-} 
+select#media-attachment-date-filters {
+	grid-area: 2 / 2 / 3 / 3;
+}
 
 .media-toolbar-secondary > .spinner {
 	position: absolute;