Changeset 62199

Timestamp:

04/02/2026 11:09:08 PM (3 weeks 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.

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

File:

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

trunk/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;