diff -r 3d4e9c994f10 -r a86126ab1dd4 wp/wp-admin/css/color-picker.css --- a/wp/wp-admin/css/color-picker.css Tue Oct 22 16:11:46 2019 +0200 +++ b/wp/wp-admin/css/color-picker.css Tue Dec 15 13:49:49 2020 +0100 @@ -10,7 +10,7 @@ /* Needs higher specificiity. */ .wp-picker-container .wp-color-result.button { - height: 24px; + min-height: 30px; margin: 0 6px 6px 0px; padding: 0 0 0 30px; font-size: 11px; @@ -22,7 +22,7 @@ border-left: 1px solid #ccc; color: #555; display: block; - line-height: 2; + line-height: 2.54545455; /* 28px */ padding: 0 6px; text-align: center; } @@ -70,9 +70,14 @@ margin: 0 !important; } -.wp-picker-input-wrap .button, -.wp-customizer .wp-picker-input-wrap .button { +.wp-picker-input-wrap .button.wp-picker-default, +.wp-picker-input-wrap .button.wp-picker-clear, +.wp-customizer .wp-picker-input-wrap .button.wp-picker-default, +.wp-customizer .wp-picker-input-wrap .button.wp-picker-clear { margin-left: 6px; + padding: 0 8px; + line-height: 2.54545455; /* 28px */ + min-height: 30px; } .wp-picker-container .iris-square-slider .ui-slider-handle:focus { @@ -86,12 +91,14 @@ } .wp-picker-container input[type="text"].wp-color-picker { - width: 65px; + width: 4rem; font-size: 12px; font-family: monospace; - line-height: 1.4; + line-height: 2.33333333; /* 28px */ margin: 0; + padding: 0 5px; vertical-align: top; + min-height: 30px; } .wp-color-picker::-webkit-input-placeholder { @@ -115,40 +122,52 @@ .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); + border-color: #007cba; + border-style: solid; + box-shadow: 0 0 0 1px #007cba; + outline: 2px solid transparent; } .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); + box-shadow: 0 0 0 2px #007cba; } @media screen and (max-width: 782px) { .wp-picker-container input[type="text"].wp-color-picker { - width: 80px; - padding: 6px 5px 5px; + width: 5rem; font-size: 16px; - line-height: 1.15; + line-height: 1.875; /* 30px */ + min-height: 32px; } .wp-customizer .wp-picker-container input[type="text"].wp-color-picker { - padding: 5px 5px 4px; + padding: 0 5px; + } + + .wp-picker-input-wrap .button.wp-picker-default, + .wp-picker-input-wrap .button.wp-picker-clear { + padding: 0 8px; + line-height: 2.14285714; /* 30px */ + min-height: 32px; + } + + .wp-customizer .wp-picker-input-wrap .button.wp-picker-default, + .wp-customizer .wp-picker-input-wrap .button.wp-picker-clear { + padding: 0 8px; + font-size: 14px; + line-height: 2.14285714; /* 30px */ + min-height: 32px; } .wp-picker-container .wp-color-result.button { - height: auto; padding: 0 0 0 40px; font-size: 14px; - line-height: 2.1; + line-height: 2.14285714; /* 30px */ } .wp-customizer .wp-picker-container .wp-color-result.button { - font-size: 13px; - line-height: 2; + font-size: 14px; + line-height: 2.14285714; /* 30px */ } .wp-picker-container .wp-color-result-text { @@ -161,14 +180,3 @@ 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; - } -}