Changeset 62204

Timestamp:

04/03/2026 08:22:46 PM (17 hours ago)

Author:

joedolson

Message:

Media: Update upload file overlay colors.

Update the colors used for the file upload overlay mask to use the new admin theme colors.

Reviewed by wildworks.
Merges 62199 to the 7.0 branch.

Props opurockey, huzaifaalmesbah, wildworks, audrasjb, manhar, joedolson.
Fixes #65001.

Location:

branches/7.0

Files:

• . (modified) (1 prop)
• src/wp-includes/css/media-views.css (modified) (16 diffs)

branches/7.0/src/wp-includes/css/media-views.css

@@ -57 +57 @@
     border-radius: 2px;
     box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
-    color: #043959;
+    color: var(--wp-admin-theme-color-darker-20, #183ad6);
     /* Only visible in Windows High Contrast mode */
     outline: 2px solid transparent;
@@ -245 +245 @@
 .media-modal-close:hover,
 .media-modal-close:active {
-    color: #135e96;
+    color: var(--wp-admin-theme-color, #3858e9);
 }
 
 .media-modal-close:focus {
-    color: #135e96;
-    border-color: #4f94d4;
-    box-shadow: 0 0 3px rgba(34, 113, 177, 0.8);
+    color: var(--wp-admin-theme-color, #3858e9);
+    border-color: var(--wp-admin-theme-color, #3858e9);
+    box-shadow: 0 0 3px rgba(var(--wp-admin-theme-color--rgb, 56, 88, 233), 0.8);
     /* Only visible in Windows High Contrast mode */
     outline: 2px solid transparent;
@@ -674 +674 @@
     line-height: 1.28571428;
     background: transparent;
-    color: #2271b1;
+    color: var(--wp-admin-theme-color, #3858e9);
     text-align: left;
     text-decoration: none;
@@ -685 +685 @@
 
 .media-menu .media-menu-item:active {
-    color: #2271b1;
+    color: var(--wp-admin-theme-color, #3858e9);
     outline: none;
 }
@@ -697 +697 @@
 .media-menu .media-menu-item:focus {
     box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
-    color: #043959;
+    color: var(--wp-admin-theme-color-darker-20, #183ad6);
     /* Only visible in Windows High Contrast mode */
     outline: 2px solid transparent;
@@ -740 +740 @@
 .media-router .media-menu-item:hover,
 .media-router .media-menu-item:active {
-    color: #2271b1;
+    color: var(--wp-admin-theme-color, #3858e9);
 }
 
@@ -750 +750 @@
 .media-router .media-menu-item:focus {
     box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
-    color: #043959;
+    color: var(--wp-admin-theme-color-darker-20, #183ad6);
     /* Only visible in Windows High Contrast mode */
     outline: 2px solid transparent;
@@ -1322 +1322 @@
 
 .uploader-inline .close:focus {
-    outline: 1px solid #4f94d4;
-    box-shadow: 0 0 3px rgba(34, 113, 177, 0.8);
+    outline: 1px solid var(--wp-admin-theme-color, #3858e9);
+    box-shadow: 0 0 3px rgba(var(--wp-admin-theme-color--rgb, 56, 88, 233), 0.8);
 }
 
@@ -1410 +1410 @@
     min-width: 20px;
     width: 0;
-    background: #2271b1;
+    background: var(--wp-admin-theme-color, #3858e9);
     border-radius: 10px;
     transition: width 300ms;
@@ -1528 +1528 @@
 .uploader-window,
 .wp-editor-wrap .uploader-editor.droppable {
-    background: rgba(10, 75, 120, 0.9);
+    background-color: rgba(var(--wp-admin-theme-color--rgb, 56, 88, 233), 0.9);
 }
 
@@ -1689 +1689 @@
     line-height: 1.4;
     border-right: 1px solid #dcdcde;
-    color: #2271b1;
+    color: var(--wp-admin-theme-color, #3858e9);
     text-decoration: none;
 }
@@ -1695 +1695 @@
 .media-selection .button-link:hover,
 .media-selection .button-link:focus {
-    color: #135e96;
+    color: var(--wp-admin-theme-color-darker-20, #183ad6);
 }
 
@@ -1753 +1753 @@
     box-shadow:
         0 0 0 1px #fff,
-        0 0 2px 3px #4f94d4;
+        0 0 2px 3px var(--wp-admin-theme-color, #3858e9);
     /* Only visible in Windows High Contrast mode */
     outline: 2px solid transparent;
@@ -1765 +1765 @@
     box-shadow:
         0 0 0 1px #fff,
-        0 0 0 3px #2271b1;
+        0 0 0 3px var(--wp-admin-theme-color, #3858e9);
 }
 
@@ -2045 +2045 @@
     padding: 0;
     background: transparent;
-    color: #2271b1;
+    color: var(--wp-admin-theme-color, #3858e9);
     font-size: 20px;
     line-height: 1;
@@ -2054 +2054 @@
 
 .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus {
-    color: #2271b1;
-    border-color: #2271b1;
-    box-shadow: 0 0 0 1px #2271b1;
+    color: var(--wp-admin-theme-color, #3858e9);
+    border-color: var(--wp-admin-theme-color, #3858e9);
+    box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #3858e9);
     /* Only visible in Windows High Contrast mode */
     outline: 2px solid transparent;