/* 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 { height: 24px; 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; 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-customizer .wp-picker-input-wrap .button { margin-left: 6px; } .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: 65px; font-size: 12px; font-family: monospace; line-height: 1.4; margin: 0; vertical-align: top; } .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: 80px; padding: 6px 5px 5px; font-size: 16px; line-height: 1.15; } .wp-customizer .wp-picker-container input[type="text"].wp-color-picker { padding: 5px 5px 4px; } .wp-picker-container .wp-color-result.button { height: auto; padding: 0 0 0 40px; font-size: 14px; line-height: 2.1; } .wp-customizer .wp-picker-container .wp-color-result.button { font-size: 13px; line-height: 2; } .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; } } @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; } }