wp/wp-admin/css/color-picker.css
changeset 16 a86126ab1dd4
parent 9 177826044cd9
child 18 be944660c56a
--- 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;
-	}
-}