Administration: Attempt to even-out the new Up/Down arrows in metabox…

… headings and make them look a bit better. Also group them a little closer together in an attempt to reduce confusion of having two down arrows next to one another. Move the focus outline to the button instead of only the icon.

Fixes #39074.

git-svn-id: https://develop.svn.wordpress.org/trunk@48465 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/css/common.css

@@ -2027,6 +2027,7 @@ html.wp-toolbar {
 .postbox .handle-order-higher,
 .postbox .handle-order-lower {
 	color: #72777c;
+	width: 1.62rem;
 }
 
 /* Post box order buttons in the block editor meta boxes area. */
@@ -2055,6 +2056,10 @@ html.wp-toolbar {
 	line-height: 1;
 }
 
+.postbox.closed {
+	border-bottom: 0;
+}
+
 /* user-select is not a part of the CSS standard - may change behavior in the future */
 .postbox .hndle,
 .stuffbox .hndle {
@@ -3021,13 +3026,21 @@ img {
 }
 
 .postbox .handle-order-higher .order-higher-indicator::before,
-.postbox .handle-order-lower .order-lower-indicator::before,
+.postbox .handle-order-lower .order-lower-indicator::before {
+	position: relative;
+    top: 0.11rem;
+	width: 20px;
+	height: 20px;
+}
+
 .postbox .handlediv .toggle-indicator::before {
 	width: 20px;
 	border-radius: 50%;
 }
 
 .postbox .handlediv .toggle-indicator::before {
+	position: relative;
+	top: 0.05rem;
 	text-indent: -1px; /* account for the dashicon glyph uneven horizontal alignment */
 }
 
@@ -3044,17 +3057,17 @@ img {
 .postbox .handle-order-higher:focus,
 .postbox .handle-order-lower:focus,
 .postbox .handlediv:focus {
-	box-shadow: none;
+	box-shadow:
+		0 0 0 1px #5b9dd9,
+		0 0 2px 1px rgba(30, 140, 190, 0.8);
 	/* Only visible in Windows High Contrast mode */
 	outline: 1px solid transparent;
 }
 
 .postbox .handle-order-higher:focus .order-higher-indicator::before,
 .postbox .handle-order-lower:focus .order-lower-indicator::before,
 .postbox .handlediv:focus .toggle-indicator::before {
-	box-shadow:
-		0 0 0 1px #5b9dd9,
-		0 0 2px 1px rgba(30, 140, 190, 0.8);
+	box-shadow: none;
 	/* Only visible in Windows High Contrast mode */
 	outline: 1px solid transparent;
 }