Changeset 62942

Timestamp:

07/30/2026 01:57:41 PM (10 days ago)

Author:

afercia

Message:

Administration: Improve consistency of the focus style across the admin.

After the admin reskin in WordPress 7.0, the focus style for various elements in the admin was slightly inconsistent especially regarding the overall border plus box-shadow thickness.
This change aims to fix most of the cases found and it's a consistency improvement over what it's in WordPress 7.0.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/12601

Props iamchitti, afercia.
Fixes #65645.

Location:

trunk/src

Files:

• wp-admin/css/edit.css (modified) (1 diff)
• wp-admin/css/forms.css (modified) (2 diffs)
• wp-admin/css/list-tables.css (modified) (2 diffs)
• wp-includes/css/media-views.css (modified) (1 diff)

trunk/src/wp-admin/css/edit.css

@@ -1391 +1391 @@
 
 div.tabs-panel-active:focus {
+        border-color: var(--wp-admin-theme-color);
         box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
         /* Only visible in Windows High Contrast mode */

trunk/src/wp-admin/css/forms.css

@@ -659 +659 @@
         border-color: var(--wp-admin-theme-color);
         border-radius: 2px;
-        box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
+        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
         /* Only visible in Windows High Contrast mode */
         outline: 2px solid transparent;
@@ -737 +737 @@
 #pass1:focus,
 #pass1-text:focus {
-        box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
+        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
+        border-color: var(--wp-admin-theme-color, #3858e9);
         /* Only visible in Windows High Contrast mode */
         outline: 2px solid transparent;

trunk/src/wp-admin/css/list-tables.css

@@ -770 +770 @@
         line-height: 1.84615384;
         text-decoration: none;
+        /* This border is needed for the focus style, which will change the border color. */
+        border: 1px solid transparent;
 }
 
@@ -779 +781 @@
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
+}
+
+.view-switch a:focus {
+        /* This focus style already inherits box-shadow and outline from the regular links focus style. */
+        border-color: var(--wp-admin-theme-color, #3858e9);
 }
 

trunk/src/wp-includes/css/media-views.css

@@ -137 +137 @@
 .media-frame select:focus {
         border-color: var(--wp-admin-theme-color, #3858e9);
-        /* Expand border by 0.5px for total 1.5px effect */
-        box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color, #3858e9);
+        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
         outline: 2px solid transparent;
 }