Changeset 46242

Timestamp:

09/23/2019 03:09:59 PM (7 years ago)

Author:

afercia

Message:

Accessibility: Improve and modernize user interface controls for better contrast. Second part: tables, meta boxes, and other user interface elements.

Introduces better contrast for borders of the following user interface elements:

• Tables
• Screen Options and Help
• Admin notices
• Welcome panel
• Meta boxes (post boxes)
• Cards
• Health Check accordions and headings
• Theme and Plugin upload forms

Props kjellr, melchoyce, karmatosed, audrasjb.
Fixes #48101.

Location:

trunk/src/wp-admin/css

Files:

• common.css (modified) (9 diffs)
• dashboard.css (modified) (1 diff)
• edit.css (modified) (4 diffs)
• forms.css (modified) (1 diff)
• nav-menus.css (modified) (1 diff)
• site-health.css (modified) (1 diff)
• themes.css (modified) (1 diff)

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

@@ -191 +191 @@
 .imgedit-group,
 .comment-ays {
-        border: 1px solid #e5e5e5;
+        border: 1px solid #ccd0d4;
         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
 }
@@ -485 +485 @@
 .widefat thead th,
 .widefat thead td {
-        border-bottom: 1px solid #e1e1e1;
+        border-bottom: 1px solid #ccd0d4;
 }
 
 .widefat tfoot th,
 .widefat tfoot td {
-        border-top: 1px solid #e1e1e1;
+        border-top: 1px solid #ccd0d4;
         border-bottom: none;
 }
@@ -772 +772 @@
 .postbox .hndle,
 .stuffbox .hndle {
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid #ccd0d4;
 }
 
@@ -1000 +1000 @@
         width: 100%;
         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
-        border: 1px solid #e5e5e5;
+        border: 1px solid #ccd0d4;
         background: #fff;
         color: #555;
@@ -1367 +1367 @@
 div.error {
         background: #fff;
-        border-left: 4px solid #fff;
-        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+        border: 1px solid #ccd0d4;
+        border-left-width: 4px;
+        box-shadow: 0 1px 1px rgba(0,0,0,.04)
         margin: 5px 15px 2px;
         padding: 1px 12px;
@@ -1671 +1672 @@
         position: relative;
         background-color: #fff;
-        border: 1px solid #ddd;
+        border: 1px solid #ccd0d4;
         border-top: none;
         box-shadow: 0 1px 0 rgba(0, 0, 0, 0.025);
@@ -1688 +1689 @@
 
 #screen-meta-links .show-settings {
-        border: 1px solid #ddd;
+        border: 1px solid #ccd0d4;
         border-top: none;
-        border-bottom-color: #ccc;
+        border-bottom-color: #ccd0d4;
         height: auto;
         margin-bottom: 0;
@@ -1837 +1838 @@
         left: 150px;
         right: 170px;
-        border: 1px solid #e1e1e1;
+        border: 1px solid #ccd0d4;
         border-top: none;
         border-bottom: none;
@@ -1890 +1891 @@
 
 .contextual-help-tabs .active a {
-        border-color: #e1e1e1;
+        border-color: #ccd0d4;
         color: #32373c;
 }

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

@@ -104 +104 @@
         margin: 16px 0;
         padding: 23px 10px 0;
-        border: 1px solid #e5e5e5;
+        border: 1px solid #ccd0d4;
         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
         background: #fff;

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

@@ -154 +154 @@
         position: relative;
         min-width: 255px;
-        border: 1px solid #e5e5e5;
+        border: 1px solid #ccd0d4;
         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
         background: #fff;
@@ -310 +310 @@
         width: 100%;
         border-spacing: 0;
-        border: 1px solid #e5e5e5;
+        border: 1px solid #ccd0d4;
         border-top: none;
         background-color: #f7f7f7;
@@ -361 +361 @@
 .wp-editor-expand #wp-content-editor-tools {
         z-index: 1000;
-        border-bottom: 1px solid #e5e5e5;
+        border-bottom: 1px solid #ccd0d4;
 }
 
@@ -378 +378 @@
 
 .wp-editor-expand #post-status-info {
-        border-top: 1px solid #e5e5e5;
+        border-top: 1px solid #ccd0d4;
 }
 

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

@@ -795 +795 @@
         min-width: 255px;
         max-width: 520px;
-        border: 1px solid #e5e5e5;
+        border: 1px solid #ccd0d4;
         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
         background: #fff;

trunk/src/wp-admin/css/nav-menus.css

@@ -648 +648 @@
         position: relative;
         z-index: 10; /* Keep .item-title's shadow from appearing on top of .menu-item-settings */
-        border: 1px solid #e5e5e5;
+        border: 1px solid #ccd0d4;
         border-top: none;
         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);

trunk/src/wp-admin/css/site-health.css

@@ -274 +274 @@
 
 .health-check-accordion {
-        border: 1px solid #e2e4e7;
+        border: 1px solid #ccd0d4;
 }
 
 .health-check-accordion-heading {
         margin: 0;
-        border-top: 1px solid #e2e4e7;
+        border-top: 1px solid #ccd0d4;
         font-size: inherit;
         line-height: inherit;

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

@@ -1048 +1048 @@
 .upload-plugin .wp-upload-form {
         background: #fafafa;
-        border: 1px solid #e5e5e5;
+        border: 1px solid #ccd0d4;
         padding: 30px;
         margin: 30px auto;