Administration: Standardize form control height and alignment across the admin.
This improves the appearance of various form controls in the admin and addresses some visual inconsistencies in WordPress 5.3. Props afercia, audrasjb, jameskoster, GDragoN, azaozz, michaelarestad, murgroland, SamuelFernandez, chetan200891, veminom, dlh. Fixes #48420. git-svn-id: https://develop.svn.wordpress.org/trunk@46866 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Sergey Biryukov
parent
bdca31b322
commit
f090f8528c
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -34,7 +34,6 @@ body.js .theme-browser.search-loading {
|
|||
left: 20px;
|
||||
margin: 0;
|
||||
width: 280px;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
/* Position admin messages */
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue