Changeset 46242

Timestamp:

09/23/2019 03:09:59 PM (4 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;