.wp-color-picker { width: 80px; } .wp-picker-container .hidden { display: none; } .wp-color-result { background-color: #f7f7f7; border: 1px solid #ccc; border-radius: 3px; cursor: pointer; display: inline-block; height: 22px; margin: 0 0px 6px 6px; position: relative; top: 1px; user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; vertical-align: bottom; display: inline-block; padding-right: 30px; -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.08); box-shadow: 0 1px 0 rgba(0,0,0,.08); } .wp-color-result:after { background: #f7f7f7; border-radius: 2px 0 0 2px; border-right: 1px solid #ccc; color: #555; content: attr( title ); display: block; font-size: 11px; line-height: 22px; padding: 0 6px; position: relative; left: 0; text-align: center; top: 0; -webkit-box-shadow: inset 0 1px 0 #fff; box-shadow: inset 0 1px 0 #fff; } .wp-color-result:hover { background: #fafafa; border-color: #999; color: #222; } .wp-color-result:hover:after { color: #222; border-color: #aaa; border-right: 1px solid #999; } .wp-color-result.wp-picker-open { top: 0; } .wp-color-result.wp-picker-open:after { content: attr( data-current ); } .wp-picker-container, .wp-picker-container:active { display: inline-block; outline: 0; } .wp-color-result:focus { border-color: #888; -webkit-box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.2 ); box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.2 ); } .wp-color-result:focus:after { border-color: #888; } .wp-picker-open + .wp-picker-input-wrap { display: inline-block; vertical-align: top; } /* Match the style of the color picker button */ .wp-picker-input-wrap .button.button-small { line-height: 22px; height: 24px; font-size: 11px; } .wp-picker-container .button { margin-right: 6px; } .wp-picker-container .iris-square-slider .ui-slider-handle:focus { background-color: #555 } .wp-picker-container .iris-picker { border-color: #dfdfdf; margin-top: 6px; } input[type="text"].iris-error { background-color: #ffebe8; border-color: #c00; color: #000; }