WordPress/wp-admin/css/color-picker.css
Sergey Biryukov ecdd9d8390 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.
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
2019-12-09 20:28:04 +00:00

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;
}
}