mirror of
https://github.com/WordPress/WordPress.git
synced 2024-11-14 22:56:19 +01:00
ecdd9d8390
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. Merges [46866] to the 5.3 branch. Fixes #48420. Built from https://develop.svn.wordpress.org/branches/5.3@46867 git-svn-id: http://core.svn.wordpress.org/branches/5.3@46667 1a063a9b-81f0-0310-95a4-ce76da25c4cd
181 lines
3.6 KiB
CSS
181 lines
3.6 KiB
CSS
/* rtl:ignore */
|
|
.wp-color-picker {
|
|
width: 80px;
|
|
direction: ltr;
|
|
}
|
|
|
|
.wp-picker-container .hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* Needs higher specificiity. */
|
|
.wp-picker-container .wp-color-result.button {
|
|
min-height: 30px;
|
|
margin: 0 0px 6px 6px;
|
|
padding: 0 30px 0 0;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.wp-color-result-text {
|
|
background: #f7f7f7;
|
|
border-radius: 2px 0 0 2px;
|
|
border-right: 1px solid #ccc;
|
|
color: #555;
|
|
display: block;
|
|
line-height: 2.54545455; /* 28px */
|
|
padding: 0 6px;
|
|
text-align: center;
|
|
}
|
|
|
|
.wp-color-result:hover,
|
|
.wp-color-result:focus {
|
|
background: #fafafa;
|
|
border-color: #999;
|
|
color: #23282d;
|
|
}
|
|
|
|
.wp-color-result:hover:after,
|
|
.wp-color-result:focus:after {
|
|
color: #23282d;
|
|
border-color: #a0a5aa;
|
|
border-right: 1px solid #999;
|
|
}
|
|
|
|
.wp-picker-container {
|
|
display: inline-block;
|
|
}
|
|
|
|
.wp-color-result:focus {
|
|
border-color: #5b9dd9;
|
|
box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
|
|
}
|
|
|
|
.wp-color-result:active {
|
|
/* See Trac ticket #39662 */
|
|
transform: none !important;
|
|
}
|
|
|
|
.wp-picker-open + .wp-picker-input-wrap {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.wp-picker-input-wrap label {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
/* For the old `custom-background` page, to override the inline-block and margins from `.form-table td fieldset label`. */
|
|
.form-table .wp-picker-input-wrap label {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.wp-picker-input-wrap .button.wp-picker-default,
|
|
.wp-customizer .wp-picker-input-wrap .button.wp-picker-default {
|
|
margin-right: 6px;
|
|
padding: 0 8px;
|
|
line-height: 2.54545455; /* 28px */
|
|
min-height: 30px;
|
|
}
|
|
|
|
.wp-picker-container .iris-square-slider .ui-slider-handle:focus {
|
|
background-color: #555
|
|
}
|
|
|
|
.wp-picker-container .iris-picker {
|
|
border-radius: 0;
|
|
border-color: #ddd;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.wp-picker-container input[type="text"].wp-color-picker {
|
|
width: 4rem;
|
|
font-size: 12px;
|
|
font-family: monospace;
|
|
line-height: 2.33333333; /* 28px */
|
|
margin: 0;
|
|
padding: 0 5px;
|
|
vertical-align: top;
|
|
min-height: 30px;
|
|
}
|
|
|
|
.wp-color-picker::-webkit-input-placeholder {
|
|
color: #72777c;
|
|
}
|
|
|
|
.wp-color-picker::-moz-placeholder {
|
|
color: #72777c;
|
|
opacity: 1;
|
|
}
|
|
|
|
.wp-color-picker:-ms-input-placeholder {
|
|
color: #72777c;
|
|
}
|
|
|
|
.wp-picker-container input[type="text"].iris-error {
|
|
background-color: #ffebe8;
|
|
border-color: #c00;
|
|
color: #000;
|
|
}
|
|
|
|
.iris-picker .ui-square-handle:focus,
|
|
.iris-picker .iris-strip .ui-slider-handle:focus {
|
|
box-shadow:
|
|
0 0 0 1px #5b9dd9,
|
|
0 0 2px 1px rgba(30, 140, 190, 0.8);
|
|
}
|
|
|
|
.iris-picker .iris-palette:focus {
|
|
box-shadow:
|
|
inset 0 0 5px rgba(0, 0, 0, 0.4),
|
|
0 0 0 1px #5b9dd9,
|
|
0 0 2px 1px rgba(30, 140, 190, 0.8);
|
|
}
|
|
|
|
@media screen and (max-width: 782px) {
|
|
.wp-picker-container input[type="text"].wp-color-picker {
|
|
width: 5rem;
|
|
font-size: 16px;
|
|
line-height: 1.875; /* 30px */
|
|
min-height: 32px;
|
|
}
|
|
|
|
.wp-customizer .wp-picker-container input[type="text"].wp-color-picker {
|
|
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 {
|
|
padding: 0 40px 0 0;
|
|
font-size: 14px;
|
|
line-height: 2.14285714; /* 30px */
|
|
}
|
|
|
|
.wp-customizer .wp-picker-container .wp-color-result.button {
|
|
font-size: 14px;
|
|
line-height: 2.14285714; /* 30px */
|
|
}
|
|
|
|
.wp-picker-container .wp-color-result-text {
|
|
padding: 0 14px;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
}
|
|
|
|
.wp-customizer .wp-picker-container .wp-color-result-text {
|
|
padding: 0 10px;
|
|
}
|
|
}
|