diff --git a/src/wp-admin/css/color-picker.css b/src/wp-admin/css/color-picker.css index 9869ccb2cc..3d3e5e8964 100644 --- a/src/wp-admin/css/color-picker.css +++ b/src/wp-admin/css/color-picker.css @@ -10,7 +10,7 @@ /* Needs higher specificiity. */ .wp-picker-container .wp-color-result.button { - min-height: 28px; + min-height: 30px; margin: 0 6px 6px 0px; padding: 0 0 0 30px; font-size: 11px; @@ -22,7 +22,7 @@ border-left: 1px solid #ccc; color: #555; display: block; - line-height: 2.36363636; /* 26px */ + line-height: 2.54545455; /* 28px */ padding: 0 6px; text-align: center; } @@ -73,7 +73,9 @@ .wp-picker-input-wrap .button.wp-picker-default, .wp-customizer .wp-picker-input-wrap .button.wp-picker-default { margin-left: 6px; - padding: 2px 8px; + padding: 0 8px; + line-height: 2.54545455; /* 28px */ + min-height: 30px; } .wp-picker-container .iris-square-slider .ui-slider-handle:focus { @@ -87,14 +89,14 @@ } .wp-picker-container input[type="text"].wp-color-picker { - width: 65px; + width: 4rem; font-size: 12px; font-family: monospace; - line-height: 1.33333333; /* 16px */ + line-height: 2.33333333; /* 28px */ margin: 0; - padding: 5px; + padding: 0 5px; vertical-align: top; - min-height: 28px; + min-height: 30px; } .wp-color-picker::-webkit-input-placeholder { @@ -132,26 +134,38 @@ @media screen and (max-width: 782px) { .wp-picker-container input[type="text"].wp-color-picker { - width: 80px; - padding: 6px 5px 5px; + width: 5rem; font-size: 16px; - line-height: 1.15; + line-height: 1.875; /* 30px */ + min-height: 32px; } .wp-customizer .wp-picker-container input[type="text"].wp-color-picker { - padding: 5px 5px 4px; + padding: 0 5px; + } + + .wp-picker-input-wrap .button.wp-picker-default { + padding: 0 8px; + line-height: 2.14285714; /* 30px */ + min-height: 32px; + } + + .wp-customizer .wp-picker-input-wrap .button.wp-picker-default { + padding: 0 8px; + font-size: 14px; + line-height: 2.14285714; /* 30px */ + min-height: 32px; } .wp-picker-container .wp-color-result.button { - height: auto; padding: 0 0 0 40px; font-size: 14px; - line-height: 2.1; + line-height: 2.14285714; /* 30px */ } .wp-customizer .wp-picker-container .wp-color-result.button { - font-size: 13px; - line-height: 2; + font-size: 14px; + line-height: 2.14285714; /* 30px */ } .wp-picker-container .wp-color-result-text { @@ -164,14 +178,3 @@ padding: 0 10px; } } - -@media screen and (max-width: 640px) { - .wp-customizer .wp-picker-container .wp-color-result.button { - font-size: 14px; - line-height: 2.1; - } - - .wp-customizer .wp-picker-container input[type="text"].wp-color-picker { - padding: 6px 5px; - } -} diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index f03fe26854..cf4a75be4d 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -924,11 +924,11 @@ span.required, #delete-action { float: left; - line-height: 2.1; + line-height: 2.30769231; /* 30px */ } #delete-link { - line-height: 2.1; + line-height: 2.30769231; /* 30px */ vertical-align: middle; text-align: left; margin-left: 8px; @@ -945,7 +945,8 @@ span.required, } #publishing-action .spinner { - float: left; + float: none; + margin-top: 5px; } #misc-publishing-actions { @@ -1086,12 +1087,9 @@ th.action-links { } .wp-filter .search-form input[type="search"] { - margin: 0; + margin: 1px 0; width: 280px; max-width: 100%; - font-size: inherit; - /* inherits font size 13px */ - line-height: 2.15384615; /* 28px */ } .wp-filter .search-form select { diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index fbc6411488..b72c110a2c 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -159,6 +159,7 @@ body:not(.ready) #customize-save-button-wrapper .save { float: left; transform: none; margin-top: 0; + line-height: 2; } body:not(.ready) #publish-settings, @@ -912,12 +913,6 @@ p.customize-section-description { margin-bottom: 12px; } -.customize-control select, -.customize-control input[type="radio"], -.customize-control input[type="checkbox"] { - line-height: 2; -} - .customize-control input[type="text"], .customize-control input[type="password"], .customize-control input[type="email"], @@ -940,8 +935,6 @@ p.customize-section-description { .customize-control select { width: 100%; - height: 28px; - line-height: 2; } .customize-control select[multiple] { @@ -2871,15 +2864,11 @@ body.adding-widget .add-new-widget:before, } .wp-core-ui.wp-customizer .button { - padding: 6px 14px; - line-height: normal; + min-height: 30px; + padding: 0 14px; + line-height: 2; font-size: 14px; vertical-align: middle; - height: auto; - } - - #publish-settings { - height: 31px; } #customize-control-changeset_status .customize-inside-control-row { diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index 8eb9f90e74..485439bd87 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -28,7 +28,7 @@ label { input, select { - margin: 1px; + margin: 0 1px; } textarea.code { @@ -308,48 +308,41 @@ input[type="radio"].disabled:checked:before { ------------------------------------------------------------------------------*/ /* Select styles are based on the default button in buttons.css */ -.wp-admin select { - font-size: 13px; - line-height: 1.38461538; /* 18px */ +.wp-core-ui select { + font-size: 14px; + line-height: 2; /* 28px */ color: #32373c; border-color: #7e8993; box-shadow: none; border-radius: 3px; - padding: 3px 24px 3px 8px; - min-height: 28px; + padding: 0 24px 0 8px; + min-height: 30px; max-width: 25rem; - 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 5px top 55%; background-size: 16px 16px; cursor: pointer; -} + vertical-align: middle; +}e -/* 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 { +.wp-core-ui select:hover { color: #007cba; } -.wp-admin select:focus { +.wp-core-ui select:focus { border-color: #007cba; color: #016087; box-shadow: 0 0 0 1px #007cba; } -.wp-admin select:active { +.wp-core-ui select:active { border-color: #999; box-shadow: none; } -.wp-admin select.disabled, -.wp-admin select:disabled { +.wp-core-ui select.disabled, +.wp-core-ui select:disabled { color: #a0a5aa; border-color: #ddd; background-color: #f7f7f7; @@ -363,32 +356,32 @@ input[type="radio"].disabled:checked:before { /* 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 { +.wp-core-ui 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 { +.wp-core-ui select::-ms-value { background: transparent; color: #555; } -.wp-admin select:hover::-ms-value { +.wp-core-ui select:hover::-ms-value { color: #007cba; } -.wp-admin select:focus::-ms-value { +.wp-core-ui select:focus::-ms-value { color: #016087; } -.wp-admin select.disabled::-ms-value, -.wp-admin select:disabled::-ms-value { +.wp-core-ui select.disabled::-ms-value, +.wp-core-ui select:disabled::-ms-value { color: #a0a5aa; } /* Hide the native down arrow for select element on IE. */ -.wp-admin select::-ms-expand { +.wp-core-ui select::-ms-expand { display: none; } @@ -407,7 +400,7 @@ input[type="radio"].disabled:checked:before { margin-top: 0; } -.wp-admin select[multiple] { +.wp-core-ui select[multiple] { height: auto; padding-right: 8px; background: #fff; @@ -484,14 +477,7 @@ input[type="number"].tiny-text { #doaction, #doaction2, #post-query-submit { - margin: 1px 8px 0 0; -} - -.tablenav #changeit, -.tablenav #delete_all, -.tablenav #clear-recent-list, -.wp-filter #delete_all { - margin-top: 1px; + margin: 0 8px 0 0; } .tablenav .actions select { @@ -508,6 +494,10 @@ input[type="number"].tiny-text { .wp-cancel-pw > .dashicons { position: relative; top: 3px; + width: 1.25rem; + height: 1.25rem; + top: 0.25rem; + font-size: 20px; } .wp-cancel-pw .dashicons-no { @@ -601,9 +591,12 @@ fieldset label, .wp-pwd [type="password"] { margin-bottom: 0; /* Same height as the buttons */ - line-height: 20px; - min-height: 28px; - max-height: 40px; + min-height: 30px; +} + +/* Hide the Edge "reveal password" native button */ +.wp-pwd input::-ms-reveal { + display: none; } #pass1-text, @@ -1325,6 +1318,8 @@ table.form-table td .updated p { input[type="week"] { -webkit-appearance: none; padding: 3px 10px; + /* Only necessary for IE11 */ + min-height: 40px; } ::-webkit-datetime-edit { @@ -1376,7 +1371,7 @@ table.form-table td .updated p { margin-top: 10px; } - .wp-admin select, + .wp-core-ui select, .wp-admin .form-table select { min-height: 40px; font-size: 16px; @@ -1526,6 +1521,10 @@ table.form-table td .updated p { font-size: 14px; } + .background-position-control .button-group > label { + font-size: 0; + } + .form-table fieldset label { display: block; } @@ -1561,10 +1560,14 @@ table.form-table td .updated p { position: absolute; right: 0; top: 0; + width: 2.375rem; + height: 2.375rem; + min-width: 40px; + min-height: 40px; } .wp-pwd button.wp-hide-pw { - right: 40px; + right: 2.5rem; } .wp-pwd button.button:hover, @@ -1585,6 +1588,7 @@ table.form-table td .updated p { .wp-pwd [type="text"], .wp-pwd [type="password"] { line-height: 2; + padding-right: 5rem; } .wp-cancel-pw .dashicons-no { diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css index 3de3f014c1..4e4f75aba5 100644 --- a/src/wp-admin/css/list-tables.css +++ b/src/wp-admin/css/list-tables.css @@ -638,6 +638,7 @@ th.asc a:focus span.sorting-indicator { clear: both; height: 30px; margin: 6px 0 4px; + padding-top: 5px; vertical-align: middle; } @@ -647,7 +648,7 @@ th.asc a:focus span.sorting-indicator { .tablenav .tablenav-pages { float: right; - margin: 3px 0 9px; + margin: 0 0 9px; } .tablenav .no-pages, @@ -659,12 +660,12 @@ th.asc a:focus span.sorting-indicator { .tablenav .tablenav-pages .tablenav-pages-navspan { display: inline-block; vertical-align: baseline; - min-width: 28px; - min-height: 28px; + min-width: 30px; + min-height: 30px; margin: 0; padding: 0 4px; font-size: 16px; - line-height: 1.5; + line-height: 1.625; /* 26px */ text-align: center; } @@ -678,8 +679,7 @@ th.asc a:focus span.sorting-indicator { } .tablenav .actions { - overflow: hidden; - padding: 2px 8px 0 0; + padding: 0 8px 0 0; } .wp-filter .actions { @@ -1034,11 +1034,9 @@ tr.inline-edit-row td, .inline-edit-row fieldset input[name=hh], .inline-edit-row fieldset input[name=mn], .inline-edit-row fieldset input[name=aa] { - font-size: 12px; - line-height: 1.16666666; vertical-align: middle; text-align: center; - padding: 6px 4px; + padding: 0 4px; } .inline-edit-row fieldset label input.inline-edit-password-input { @@ -1952,6 +1950,15 @@ div.action-links, box-sizing: border-box; } + .inline-edit-row fieldset input[name=jj], + .inline-edit-row fieldset input[name=hh], + .inline-edit-row fieldset input[name=mn], + .inline-edit-row fieldset input[name=aa] { + font-size: 16px; + line-height: 2; + padding: 3px 4px; + } + .inline-edit-row fieldset ul.cat-checklist label, .inline-edit-row #bulk-titles div { font-size: 16px; diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css index e4f73890ee..2b26a75f49 100644 --- a/src/wp-admin/css/themes.css +++ b/src/wp-admin/css/themes.css @@ -34,7 +34,6 @@ body.js .theme-browser.search-loading { left: 20px; margin: 0; width: 280px; - font-size: inherit; } /* Position admin messages */ diff --git a/src/wp-includes/css/buttons.css b/src/wp-includes/css/buttons.css index c2388cd19f..86844ddde0 100644 --- a/src/wp-includes/css/buttons.css +++ b/src/wp-includes/css/buttons.css @@ -46,8 +46,8 @@ TABLE OF CONTENTS: display: inline-block; text-decoration: none; font-size: 13px; - line-height: 2; - min-height: 28px; + line-height: 2.15384615; /* 28px */ + min-height: 30px; margin: 0; padding: 0 10px; cursor: pointer; @@ -71,15 +71,15 @@ TABLE OF CONTENTS: .wp-core-ui .button.button-large, .wp-core-ui .button-group.button-large .button { - min-height: 30px; - line-height: 2.15384615; - padding: 0 12px 2px; + min-height: 32px; + line-height: 2.30769231; /* 30px */ + padding: 0 12px; } .wp-core-ui .button.button-small, .wp-core-ui .button-group.button-small .button { - min-height: 24px; - line-height: 2; + min-height: 26px; + line-height: 2.18181818; /* 24px */ padding: 0 8px; font-size: 11px; } @@ -349,11 +349,11 @@ TABLE OF CONTENTS: input#publish, input#save-post, a.preview { - padding: 1px 14px; - line-height: 2; + padding: 0 14px; + line-height: 2.71428571; /* 38px */ font-size: 14px; vertical-align: middle; - height: auto; + min-height: 40px; margin-bottom: 4px; } @@ -377,10 +377,9 @@ TABLE OF CONTENTS: /* Reset responsive styles in Press This, Customizer */ .wp-core-ui.wp-customizer .button { - padding: 0 10px 1px; font-size: 13px; - line-height: 2; - min-height: 28px; + line-height: 2.15384615; /* 28px */ + min-height: 30px; margin: 0; vertical-align: inherit; } diff --git a/src/wp-includes/css/editor.css b/src/wp-includes/css/editor.css index 79528811ab..fe3bd106fa 100644 --- a/src/wp-includes/css/editor.css +++ b/src/wp-includes/css/editor.css @@ -1201,9 +1201,10 @@ i.mce-i-wp_code:before { .wp-media-buttons span.wp-media-buttons-icon { display: inline-block; - width: 18px; - height: 18px; - vertical-align: text-top; + width: 20px; + height: 20px; + line-height: 1; + vertical-align: middle; margin: 0 2px; } @@ -1776,7 +1777,9 @@ div.wp-link-input input { width: 300px; padding: 3px; box-sizing: border-box; - line-height: 1.28571429; + line-height: 1.28571429; /* 18px */ + /* Override value inherited from default input fields. */ + min-height: 26px; } .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 31b2ce866e..fbacc6251c 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -73,7 +73,7 @@ .media-frame select, .wp-admin .media-frame select { - min-height: 28px; + min-height: 30px; vertical-align: middle; } @@ -120,6 +120,12 @@ line-height: 2.15384615; /* 28px */ } +/* Search field in the Media Library toolbar */ +.media-frame.mode-grid .wp-filter input[type="search"] { + font-size: 14px; + line-height: 2; +} + .media-frame input[type="text"]:focus, .media-frame input[type="password"]:focus, .media-frame input[type="number"]:focus,