From f93cd8ceeaf4290a438163844a6b0dc7e7abf4e9 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Mon, 30 Sep 2019 17:23:06 +0000
Subject: [PATCH] Accessibility: Improve and modernize user interface controls:
 Improve the new form controls styles and heights.

Improves cross-browsers rendering and addresses most of the reported edge cases.

See #47477.


git-svn-id: https://develop.svn.wordpress.org/trunk@46356 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/common.css         |  14 +-
 src/wp-admin/css/edit.css           |  11 +-
 src/wp-admin/css/forms.css          | 246 ++++++++++++++++------------
 src/wp-admin/css/list-tables.css    |  30 +---
 src/wp-admin/css/login.css          |   1 +
 src/wp-admin/css/themes.css         |   3 -
 src/wp-includes/css/buttons.css     |  23 +--
 src/wp-includes/css/editor.css      |  12 +-
 src/wp-includes/css/media-views.css |  64 +++++---
 9 files changed, 213 insertions(+), 191 deletions(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 3e7f537f60..5109c7845c 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -775,8 +775,7 @@ img.emoji {
 	border-bottom: 1px solid #ccd0d4;
 }
 
-.quicktags,
-.search {
+.quicktags {
 	background-color: #ccc;
 	color: #000;
 	font-size: 12px;
@@ -1080,18 +1079,15 @@ th.action-links {
 
 .wp-filter .search-form input[type="search"] {
 	margin: 0;
-	padding: 3px 5px;
 	width: 280px;
 	max-width: 100%;
-	font-size: 16px;
-	font-weight: 300;
-	line-height: 1.5;
+	font-size: inherit;
+	/* inherits font size 13px */
+	line-height: 2.15384615; /* 28px */
 }
 
 .wp-filter .search-form select {
 	margin: 0;
-	height: 32px;
-	vertical-align: top;
 }
 
 .wp-filter .search-form.search-plugins {
@@ -3910,7 +3906,7 @@ img {
 
 	.fileedit-sub input[type="submit"] {
 		margin-bottom: 0px;
-		padding: 8px 18px;
+		padding: 4px 18px;
 	}
 
 	#documentation label[for="docs-list"] {
diff --git a/src/wp-admin/css/edit.css b/src/wp-admin/css/edit.css
index 81eb38a585..48364c4e0a 100644
--- a/src/wp-admin/css/edit.css
+++ b/src/wp-admin/css/edit.css
@@ -71,7 +71,7 @@
 	color: #72777c;
 	position: absolute;
 	font-size: 1.7em;
-	padding: 11px 10px;
+	padding: 10px;
 	pointer-events: none;
 }
 
@@ -419,16 +419,15 @@ form#tags-filter {
 }
 
 #timestampdiv select {
-	height: 21px;
-	line-height: 1.16666666;
-	padding: 0;
 	vertical-align: top;
 	font-size: 12px;
+	line-height: 1.5; /* 18px */
 }
 
 #aa, #jj, #hh, #mn {
-	padding: 1px;
+	padding: 6px 1px;
 	font-size: 12px;
+	line-height: 1.16666666; /* 14px */
 }
 
 #jj, #hh, #mn {
@@ -494,8 +493,6 @@ form#tags-filter {
 }
 
 #timestampdiv input {
-	border-width: 1px;
-	border-style: solid;
 	text-align: center;
 }
 
diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
index 2c0e3723c4..fc3863ef2f 100644
--- a/src/wp-admin/css/forms.css
+++ b/src/wp-admin/css/forms.css
@@ -1,12 +1,42 @@
 /* Include margin and padding in the width calculation of input and textarea. */
 input,
-textarea {
+select,
+textarea,
+button {
 	box-sizing: border-box;
+	font-family: inherit;
+	font-size: inherit;
+	font-weight: inherit;
+}
+
+textarea,
+input {
+	font-size: 14px;
+}
+
+textarea {
+	overflow: auto;
+	padding: 2px 6px;
+	/* inherits font size 14px */
+	line-height: 1.42857143; /* 20px */
+	resize: vertical;
+}
+
+label {
+	cursor: pointer;
+}
+
+input,
+select {
+	margin: 1px;
+}
+
+textarea.code {
+	padding: 4px 6px 1px 6px;
 }
 
 input[type="text"],
 input[type="password"],
-input[type="checkbox"],
 input[type="color"],
 input[type="date"],
 input[type="datetime"],
@@ -15,22 +45,40 @@ input[type="email"],
 input[type="month"],
 input[type="number"],
 input[type="search"],
-input[type="radio"],
 input[type="tel"],
-input[type="text"],
 input[type="time"],
 input[type="url"],
 input[type="week"],
 select,
 textarea {
-	padding: 6px 8px;
 	box-shadow: 0 0 0 transparent;
-	transition: box-shadow 0.1s linear;
 	border-radius: 4px;
 	border: 1px solid #7e8993;
 	background-color: #fff;
 	color: #32373c;
-	outline: none;
+}
+
+input[type="text"],
+input[type="password"],
+input[type="date"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="email"],
+input[type="month"],
+input[type="number"],
+input[type="search"],
+input[type="tel"],
+input[type="time"],
+input[type="url"],
+input[type="week"] {
+	padding: 0 8px;
+	/* inherits font size 14px */
+	line-height: 2; /* 28px */
+}
+
+::-webkit-datetime-edit {
+	/* inherits font size 14px */
+	line-height: 1.85714286; /* 26px */
 }
 
 input[type="text"]:focus,
@@ -44,7 +92,6 @@ input[type="month"]:focus,
 input[type="number"]:focus,
 input[type="search"]:focus,
 input[type="tel"]:focus,
-input[type="text"]:focus,
 input[type="time"]:focus,
 input[type="url"]:focus,
 input[type="week"]:focus,
@@ -64,15 +111,10 @@ input[type="url"] {
 	direction: ltr;
 }
 
-/* Vertically align the number selector with the input. */
-input[type="number"] {
-	min-height: 28px;
-	line-height: 1;
-}
-
 input[type="checkbox"],
 input[type="radio"] {
 	border: 1px solid #7e8993;
+	border-radius: 4px;
 	background: #fff;
 	color: #555;
 	clear: none;
@@ -118,6 +160,7 @@ td > input[type="checkbox"],
 input[type="radio"] {
 	border-radius: 50%;
 	margin-right: 0.25rem;
+	/* 10px not sure if still necessary, comes from the MP6 redesign in r26072 */
 	line-height: 0.71428571;
 }
 
@@ -146,8 +189,9 @@ input[type="radio"]:checked::before {
 	width: 0.5rem; /* 8px */
 	height: 0.5rem; /* 8px */
 	margin: 0.1875rem; /* 3px */
-	line-height: 0.76190476;
 	background-color: #1e8cbe;
+	/* 16px not sure if still necessary, comes from the MP6 redesign in r26072 */
+	line-height: 1.14285714;
 }
 
 @-moz-document url-prefix() {
@@ -167,57 +211,11 @@ input[type="search"]::-webkit-search-decoration {
 	display: none;
 }
 
-.ie8 input[type="password"] {
-	font-family: sans-serif;
-}
-
-textarea,
-input,
-select,
-button {
-	font-family: inherit;
-	font-size: inherit;
-	font-weight: inherit;
-}
-
-textarea,
-input,
-select {
-	font-size: 14px;
-	padding: 3px 5px;
-}
-
-textarea {
-	overflow: auto;
-	padding: 2px 6px;
-	line-height: 1.4;
-	resize: vertical;
-}
-
 .wp-admin input[type="file"] {
 	padding: 3px 0;
 	cursor: pointer;
 }
 
-label {
-	cursor: pointer;
-}
-
-input,
-select {
-	margin: 1px;
-	padding: 3px 5px;
-}
-
-input.code {
-	padding-top: 6px;
-}
-
-textarea.code {
-	line-height: 1.4;
-	padding: 4px 6px 1px 6px;
-}
-
 input.readonly,
 input[readonly],
 textarea.readonly,
@@ -309,17 +307,27 @@ input[type="radio"].disabled:checked:before {
 
 /* Select styles are based on the default button in buttons.css */
 .wp-admin select {
-	color: #555;
+	font-size: 13px;
+	line-height: 1.38461538; /* 18px */
+	color: #32373c;
 	border-color: #7e8993;
 	box-shadow: none;
 	border-radius: 3px;
-	padding: 2px 24px 2px 8px;
+	padding: 3px 24px 3px 8px;
 	min-height: 28px;
 	vertical-align: middle;
 	-webkit-appearance: none;
 	/* The SVG is arrow-down-alt2 from Dashicons. */
-	background: #fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 4px top 50%;
+	background: #fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55%;
 	background-size: 16px 16px;
+	cursor: pointer;
+}
+
+/* Color and font size in the core form tables. */
+.wp-admin .form-table select {
+	font-size: 14px;
+	line-height: 1.28571428; /* 18px */
+	color: #32373c;
 }
 
 .wp-admin select:hover {
@@ -350,7 +358,40 @@ input[type="radio"].disabled:checked:before {
 	transform: none;
 }
 
+/* Reset Firefox inner outline that appears on :focus. */
+/* This ruleset overrides the color change on :focus thus needs to be after select:focus. */
+.wp-admin select:-moz-focusring {
+	color: transparent;
+	text-shadow: 0 0 0 #016087;
+}
+
+/* Remove background focus style from IE11 while keeping focus style available on option elements. */
+.wp-admin select::-ms-value {
+	background: transparent;
+	color: #555;
+}
+
+.wp-admin select:hover::-ms-value {
+	color: #007cba;
+}
+
+.wp-admin select:focus::-ms-value {
+	color: #016087;
+}
+
+.wp-admin select.disabled::-ms-value,
+.wp-admin select:disabled::-ms-value {
+	color: #a0a5aa;
+}
+
+/* Hide the native down arrow for select element on IE. */
+.wp-admin select::-ms-expand {
+	display: none;
+}
+
 .wp-admin .button-cancel {
+	display: inline-block;
+	min-height: 28px;
 	padding: 0 5px;
 	line-height: 2;
 }
@@ -359,8 +400,14 @@ input[type="radio"].disabled:checked:before {
 	max-width: 100%;
 }
 
+.misc-pub-post-status select {
+	margin-top: 0;
+}
+
 .wp-admin select[multiple] {
 	height: auto;
+	padding-right: 8px;
+	background: #fff;
 }
 
 .submit {
@@ -416,7 +463,7 @@ textarea.large-text {
 
 input.small-text {
 	width: 50px;
-	padding: 1px 6px;
+	padding: 0 6px;
 }
 
 input[type="number"].small-text {
@@ -450,14 +497,6 @@ input[type="number"].tiny-text {
 	max-width: 12.5rem;
 }
 
-.ie8 .tablenav .actions select {
-	width: 9.6875rem;
-}
-
-.ie8 .tablenav .actions select#cat {
-	width: 12.5rem;
-}
-
 #timezone_string option {
 	margin-left: 1em;
 }
@@ -590,18 +629,12 @@ p.search-box {
 .tablenav .search-plugins input[name="s"],
 .tagsdiv .newtag {
 	float: left;
-	height: 28px;
 	margin: 0 4px 0 0;
 }
 
 .js.plugins-php .search-box .wp-filter-search {
 	margin: 0;
 	width: 280px;
-	font-size: 16px;
-	font-weight: 300;
-	line-height: 1.5;
-	padding: 3px 5px;
-	height: 32px;
 }
 
 input[type="text"].ui-autocomplete-loading,
@@ -952,6 +985,7 @@ table.form-table td .updated p {
 
 .options-general-php input.small-text {
 	width: 56px;
+	margin: -2px 0;
 }
 
 .options-general-php .spinner {
@@ -1188,9 +1222,6 @@ table.form-table td .updated p {
 }
 
 .privacy_requests .next_steps .button {
-	height: auto;
-	line-height: 1.5;
-	padding: 4px 10px;
 	word-break: break-all;
 	white-space: unset;
 }
@@ -1242,7 +1273,6 @@ table.form-table td .updated p {
 }
 
 .wp-privacy-request-form input {
-	line-height: 1.5;
 	margin: 0;
 }
 
@@ -1278,21 +1308,24 @@ table.form-table td .updated p {
 	}
 
 	input[type="text"],
-	input[type="email"],
-	input[type="search"],
 	input[type="password"],
-	input[type="number"] {
+	input[type="date"],
+	input[type="datetime"],
+	input[type="datetime-local"],
+	input[type="email"],
+	input[type="month"],
+	input[type="number"],
+	input[type="search"],
+	input[type="tel"],
+	input[type="time"],
+	input[type="url"],
+	input[type="week"] {
 		-webkit-appearance: none;
-		padding: 6px 10px;
+		padding: 3px 10px;
 	}
 
-	input[type="number"] {
-		min-height: 40px;
-	}
-
-	input.code {
-		padding-bottom: 5px;
-		padding-top: 10px;
+	::-webkit-datetime-edit {
+		line-height: 1.875; /* 30px */
 	}
 
 	input[type="checkbox"],
@@ -1340,14 +1373,19 @@ table.form-table td .updated p {
 		margin-top: 10px;
 	}
 
-	#wpbody select {
-		min-height: 36px;
+	.wp-admin select,
+	.wp-admin .form-table select {
+		min-height: 40px;
 		font-size: 16px;
+		line-height: 1.625; /* 26px */
+		padding: 5px 24px 5px 8px;
 	}
 
 	.wp-admin .button-cancel {
-		padding: 0;
+		margin-bottom: 0;
+		padding: 2px 0;
 		font-size: 14px;
+		vertical-align: middle;
 	}
 
 	#adduser .form-field input,
@@ -1397,9 +1435,6 @@ table.form-table td .updated p {
 	.form-table span.description,
 	#profile-page .form-table textarea {
 		width: 100%;
-		font-size: 16px;
-		line-height: 1.5;
-		padding: 7px 10px;
 		display: block;
 		max-width: none;
 		box-sizing: border-box;
@@ -1410,10 +1445,6 @@ table.form-table td .updated p {
 		margin: -30px 3px 0 0;
 	}
 
-	#wpbody .form-table td select {
-		min-height: 40px;
-	}
-
 	input[type="text"].small-text,
 	input[type="search"].small-text,
 	input[type="password"].small-text,
@@ -1443,12 +1474,10 @@ table.form-table td .updated p {
 	}
 
 	p.search-box input[name="s"] {
-		height: auto;
 		float: none;
 		width: 100%;
 		margin-bottom: 10px;
 		vertical-align: middle;
-		-webkit-appearance: none;
 	}
 
 	p.search-box input[type="submit"] {
@@ -1550,6 +1579,11 @@ table.form-table td .updated p {
 		display: none;
 	}
 
+	.wp-pwd [type="text"],
+	.wp-pwd [type="password"] {
+		line-height: 2;
+	}
+
 	.wp-cancel-pw .dashicons-no {
 		display: inline-block;
 	}
diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css
index a475b3162e..0747dcf4db 100644
--- a/src/wp-admin/css/list-tables.css
+++ b/src/wp-admin/css/list-tables.css
@@ -622,8 +622,6 @@ th.asc a:focus span.sorting-indicator {
 
 .tablenav-pages .current-page {
 	margin: 0 2px 0 0;
-	padding-top: 5px;
-	padding-bottom: 5px;
 	font-size: 13px;
 	text-align: center;
 }
@@ -950,8 +948,8 @@ tr.inline-edit-row td,
 .inline-edit-row fieldset.inline-edit-date label {
 	display: inline-block;
 	margin: 0;
-	line-height: 1.5;
 	vertical-align: baseline;
+	line-height: 2;
 }
 
 .inline-edit-row fieldset label.inline-edit-tags {
@@ -975,11 +973,6 @@ tr.inline-edit-row td,
 	padding: 0;
 }
 
-.inline-edit-row fieldset.inline-edit-date select {
-	margin: 1px;
-	line-height: 2;
-}
-
 .inline-edit-row fieldset label span.input-text-wrap,
 .inline-edit-row fieldset .timestamp-wrap {
 	display: block;
@@ -1039,14 +1032,13 @@ tr.inline-edit-row td,
 
 .inline-edit-row fieldset input[name=jj],
 .inline-edit-row fieldset input[name=hh],
-.inline-edit-row fieldset input[name=mn] {
-	font-size: 12px;
-	width: 2.3em;
-}
-
+.inline-edit-row fieldset input[name=mn],
 .inline-edit-row fieldset input[name=aa] {
 	font-size: 12px;
-	width: 3.5em;
+	line-height: 1.16666666;
+	vertical-align: middle;
+	text-align: center;
+	padding: 6px 4px;
 }
 
 .inline-edit-row fieldset label input.inline-edit-password-input {
@@ -1988,16 +1980,6 @@ div.action-links,
 		margin-left: 0;
 	}
 
-	.inline-edit-row fieldset input[name=jj],
-	.inline-edit-row fieldset input[name=hh],
-	.inline-edit-row fieldset input[name=mn] {
-		width: 3em;
-	}
-
-	.inline-edit-row fieldset input[name=aa] {
-		width: 4.5em;
-	}
-
 	.inline-edit-row .inline-edit-or {
 		margin: 0 6px 0 0;
 	}
diff --git a/src/wp-admin/css/login.css b/src/wp-admin/css/login.css
index e555dedfa3..74d05cadb3 100644
--- a/src/wp-admin/css/login.css
+++ b/src/wp-admin/css/login.css
@@ -273,6 +273,7 @@ p {
 .login input[type="text"],
 .login input[type="password"] {
 	font-size: 24px;
+	line-height: 1.16666666; /* 28px */
 	width: 100%;
 	padding: 5px;
 	margin: 3px 6px 16px 0;
diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css
index 904fa5d6a9..790797b0ee 100644
--- a/src/wp-admin/css/themes.css
+++ b/src/wp-admin/css/themes.css
@@ -34,9 +34,6 @@ body.js .theme-browser.search-loading {
 	left: 20px;
 	margin: 0;
 	width: 280px;
-	font-size: 16px;
-	font-weight: 300;
-	line-height: 1.5;
 }
 
 /* Position admin messages */
diff --git a/src/wp-includes/css/buttons.css b/src/wp-includes/css/buttons.css
index 2ce245a09d..c6046e2e3b 100644
--- a/src/wp-includes/css/buttons.css
+++ b/src/wp-includes/css/buttons.css
@@ -80,7 +80,7 @@ TABLE OF CONTENTS:
 .wp-core-ui .button-group.button-small .button {
 	min-height: 24px;
 	line-height: 2;
-	padding: 0 8px 1px;
+	padding: 0 8px;
 	font-size: 11px;
 }
 
@@ -92,14 +92,6 @@ TABLE OF CONTENTS:
 	padding: 0 36px;
 }
 
-/* Only visible in Windows High Contrast mode */
-.wp-core-ui .button:active,
-.wp-core-ui .button:focus {
-	outline: 2px solid transparent;
-	/* Reset inherited offset from Gutenberg */
-	outline-offset: 0;
-}
-
 .wp-core-ui .button.hidden {
 	display: none;
 }
@@ -135,10 +127,7 @@ TABLE OF CONTENTS:
 
 .wp-core-ui .button.hover,
 .wp-core-ui .button:hover,
-.wp-core-ui .button-secondary:hover,
-.wp-core-ui .button.focus,
-.wp-core-ui .button:focus,
-.wp-core-ui .button-secondary:focus {
+.wp-core-ui .button-secondary:hover{
 	background: #f1f1f1;
 	border-color: #016087;
 	color: #016087;
@@ -151,6 +140,10 @@ TABLE OF CONTENTS:
 	border-color: #007cba;
 	color: #016087;
 	box-shadow: 0 0 0 1px #007cba;
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
+	/* Reset inherited offset from Gutenberg */
+	outline-offset: 0;
 }
 
 .wp-core-ui .button.active,
@@ -332,8 +325,8 @@ TABLE OF CONTENTS:
 	input#publish,
 	input#save-post,
 	a.preview {
-		padding: 6px 14px;
-		line-height: normal;
+		padding: 1px 14px;
+		line-height: 2;
 		font-size: 14px;
 		vertical-align: middle;
 		height: auto;
diff --git a/src/wp-includes/css/editor.css b/src/wp-includes/css/editor.css
index f3e410449f..987a2d26dc 100644
--- a/src/wp-includes/css/editor.css
+++ b/src/wp-includes/css/editor.css
@@ -1509,7 +1509,6 @@ i.mce-i-wp_code:before {
 }
 
 #wp-link .link-search-field {
-	float: left;
 	width: 250px;
 	max-width: 70%;
 }
@@ -1520,13 +1519,9 @@ i.mce-i-wp_code:before {
 	overflow: hidden;
 }
 
-#wp-link .link-search-wrapper span {
-	float: left;
-	margin-top: 4px;
-}
-
 #wp-link .link-search-wrapper .spinner {
-	margin-top: 5px;
+	float: none;
+	margin: -3px 0 0 4px;
 }
 
 #wp-link .link-target {
@@ -1553,7 +1548,7 @@ i.mce-i-wp_code:before {
 }
 
 .has-text-field #wp-link .query-results {
-	top: 200px;
+	top: 210px;
 }
 
 #wp-link li {
@@ -1781,6 +1776,7 @@ div.wp-link-input input {
 	width: 300px;
 	padding: 3px;
 	box-sizing: border-box;
+	line-height: 1.28571429;
 }
 
 .mce-toolbar div.wp-link-preview ~ .mce-btn,
diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index 243369ade0..d67a95f7f4 100644
--- a/src/wp-includes/css/media-views.css
+++ b/src/wp-includes/css/media-views.css
@@ -34,17 +34,6 @@
 	line-height: 1.2;
 }
 
-.media-frame input,
-.media-frame textarea {
-	padding: 6px 8px;
-}
-
-.media-frame select,
-.wp-admin .media-frame select {
-	min-height: 28px;
-	vertical-align: middle;
-}
-
 .media-frame a {
 	border-bottom: none;
 	color: #0073aa;
@@ -77,21 +66,58 @@
 	color: #fff;
 }
 
+.media-frame input,
+.media-frame textarea {
+	padding: 6px 8px;
+}
+
+.media-frame select,
+.wp-admin .media-frame select {
+	min-height: 28px;
+	vertical-align: middle;
+}
+
 .media-frame input[type="text"],
 .media-frame input[type="password"],
+.media-frame input[type="color"],
+.media-frame input[type="date"],
+.media-frame input[type="datetime"],
+.media-frame input[type="datetime-local"],
+.media-frame input[type="email"],
+.media-frame input[type="month"],
 .media-frame input[type="number"],
 .media-frame input[type="search"],
-.media-frame input[type="email"],
+.media-frame input[type="tel"],
+.media-frame input[type="time"],
 .media-frame input[type="url"],
+.media-frame input[type="week"],
 .media-frame textarea,
 .media-frame select {
-	padding: 6px 8px;
 	box-shadow: 0 0 0 transparent;
-	transition: box-shadow 0.1s linear;
-	border: 1px solid #7e8993;
 	border-radius: 4px;
+	border: 1px solid #7e8993;
+	background-color: #fff;
+	color: #32373c;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-	font-size: 12px;
+	font-size: 13px;
+}
+
+.media-frame input[type="text"],
+.media-frame input[type="password"],
+.media-frame input[type="date"],
+.media-frame input[type="datetime"],
+.media-frame input[type="datetime-local"],
+.media-frame input[type="email"],
+.media-frame input[type="month"],
+.media-frame input[type="number"],
+.media-frame input[type="search"],
+.media-frame input[type="tel"],
+.media-frame input[type="time"],
+.media-frame input[type="url"],
+.media-frame input[type="week"] {
+	padding: 0 8px;
+	/* inherits font size 13px */
+	line-height: 2.15384615; /* 28px */
 }
 
 .media-frame input[type="text"]:focus,
@@ -807,7 +833,7 @@
  * Search
  */
 .media-frame .search {
-	margin-top: 11px;
+	margin-top: 10px;
 	padding: 4px;
 	font-size: 13px;
 	color: #444;
@@ -1047,7 +1073,7 @@
 	display: block;
 	width: 100%;
 	margin: 0;
-	padding: 8px;
+	padding: 0 8px;
 	font-size: 12px;
 	border-radius: 0;
 }
@@ -1075,7 +1101,7 @@
 .attachments-browser .media-toolbar-primary > .media-button-group,
 .attachments-browser .media-toolbar-secondary > .media-button,
 .attachments-browser .media-toolbar-secondary > .media-button-group {
-	margin: 11px 0;
+	margin: 10px 0;
 }
 
 .attachments-browser .attachments {