Changeset 26788

Timestamp:

12/08/2013 04:11:20 AM (11 years ago)

Author:

iammattthomas

Message:

A small adjustment to the page background color per yesterday's conversation with nacin, from #eee to #f3f3f3. This retains enough contrast with white widget containers while making for a more comfortable reading experiences on pages that heavily use the default background color, like the About page. A few adjustments to go along with it:

• Horizontal rules on the About page are lighter, to match their previous level of contrast with #eee
• Eliminated the .flush-top class on <hr>s on the About page since we want the styles applied to all About page <hr>s.
• Color schemes should match the bottom border of active tabs to the scheme's body-background variable.
• Lighten the comment background color on the Dashboard activity widget to keep adequate contrast with the new lighter body background.

See #25858.

Location:

trunk/src/wp-admin

Files:

• about.php (modified) (5 diffs)
• css/colors.css (modified) (5 diffs)
• css/colors/_admin.scss (modified) (1 diff)
• css/colors/_variables.scss (modified) (1 diff)
• css/wp-admin.css (modified) (3 diffs)

trunk/src/wp-admin/about.php

@@ -58 +58 @@
 </div>
 
-<hr class="flush-top">
+<hr>
 
 <div class="changelog">
@@ -74 +74 @@
 </div>
 
-<hr class="flush-top">
+<hr>
 
 <div class="changelog about-colors">
@@ -95 +95 @@
 </div>
 
-<hr class="flush-top">
+<hr>
 
 <div class="changelog">
@@ -115 +115 @@
 </div>
 
-<hr class="flush-top">
+<hr>
 
 <div class="changelog">
@@ -130 +130 @@
 </div>
 
-<hr class="flush-top">
+<hr>
 
 <div class="return-to-dashboard">

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

@@ -18 +18 @@
 
 html {
-    background: #eee;
+    background: #f3f3f3;
 }
 
@@ -115 +115 @@
 ul#adminmenu a.wp-has-current-submenu:after,
 ul#adminmenu > li.current > a.current:after {
-    border-right-color: #eee;
+    border-right-color: #f3f3f3;
 }
 
@@ -1761 +1761 @@
     background: none;
     border-color: #ccc;
-    border-bottom-color: #eee;
+    border-bottom-color: #f3f3f3;
 }
 
@@ -1790 +1790 @@
 .about-wrap h2 .nav-tab-active {
     border-color: #ccc;
-    border-bottom-color: #eee;
+    border-bottom-color: #f3f3f3;
 }
 
@@ -1965 +1965 @@
 
 body.login {
-    background: #eee;
+    background: #f3f3f3;
 }
 

trunk/src/wp-admin/css/colors/_admin.scss

@@ -145 +145 @@
 #adminmenu li.opensub > a.menu-top div.wp-menu-image:before {
     color: $menu-highlight-icon;
+}
+
+
+/* Active tabs use a bottom border color that matches the page background color. */
+
+.about-wrap h2 .nav-tab-active,
+.nav-tab-active,
+.nav-tab-active:hover {
+    border-bottom-color: $body-background;
 }
 

trunk/src/wp-admin/css/colors/_variables.scss

@@ -13 +13 @@
 // global
 
-$body-background: #eee !default;
+$body-background: #f3f3f3 !default;
 
 $link: #0074a2 !default;

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

@@ -3299 +3299 @@
 
 #activity-widget #the-comment-list .comment {
-    background: #f5f5f5;
+    background: #fafafa;
     padding: 12px;
     position: relative;
@@ -7846 +7846 @@
     border: 0;
     height: 0;
-    border-top: 1px solid rgba(0, 0, 0, 0.05);
+    margin: 0;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
 
@@ -7925 +7926 @@
 
 .about-wrap .about-overview-img {
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     margin: 0;
-}
-
-.about-wrap hr.flush-top {
-    margin-top: 0;
-    border-top: 1px solid #ccc;
 }