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