mirror of
https://github.com/WordPress/WordPress.git
synced 2024-09-09 14:18:11 +02:00
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. Built from https://develop.svn.wordpress.org/trunk@46866 git-svn-id: http://core.svn.wordpress.org/trunk@46666 1a063a9b-81f0-0310-95a4-ce76da25c4cd
181 lines
3.5 KiB
CSS
181 lines
3.5 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 6px 6px 0px;
|
|
padding: 0 0 0 30px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.wp-color-result-text {
|
|
background: #f7f7f7;
|
|
border-radius: 0 2px 2px 0;
|
|
border-left: 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-left: 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-left: 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 0 0 40px;
|
|
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;
|
|
}
|
|
}
|