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.



git-svn-id: https://develop.svn.wordpress.org/trunk@26788 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/about.php

@@ -57,7 +57,7 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 	</div>
 </div>
 
-<hr class="flush-top">
+<hr>
 
 <div class="changelog">
 	<div class="feature-section col two-col">
@@ -73,7 +73,7 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 	</div>
 </div>
 
-<hr class="flush-top">
+<hr>
 
 <div class="changelog about-colors">
 	<div class="feature-section col one-col">
@@ -94,7 +94,7 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 	</div>
 </div>
 
-<hr class="flush-top">
+<hr>
 
 <div class="changelog">
 	<div class="feature-section col two-col">
@@ -114,7 +114,7 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 	</div>
 </div>
 
-<hr class="flush-top">
+<hr>
 
 <div class="changelog">
 	<h2 class="about-headline-callout"><?php echo ( 'Twenty Fourteen, a sleek new magazine&nbsp;theme' ); ?></h2>
@@ -129,7 +129,7 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 	</div>
 </div>
 
-<hr class="flush-top">
+<hr>
 
 <div class="return-to-dashboard">
 	<?php if ( current_user_can( 'update_core' ) && isset( $_GET['updated'] ) ) : ?>

src/wp-admin/css/colors.css

@@ -17,7 +17,7 @@ TABLE OF CONTENTS:
 ------------------------------------------------------------------------------*/
 
 html {
-	background: #eee;
+	background: #f3f3f3;
 }
 
 /* Checkbooms */
@@ -114,7 +114,7 @@ input[type=radio]:checked:before {
 
 ul#adminmenu a.wp-has-current-submenu:after,
 ul#adminmenu > li.current > a.current:after {
-	border-right-color: #eee;
+	border-right-color: #f3f3f3;
 }
 
 .row-actions {
@@ -1760,7 +1760,7 @@ div.widgets-sortables,
 	color: #000;
 	background: none;
 	border-color: #ccc;
-	border-bottom-color: #eee;
+	border-bottom-color: #f3f3f3;
 }
 
 h2.nav-tab-wrapper, h3.nav-tab-wrapper {
@@ -1789,7 +1789,7 @@ h2.nav-tab-wrapper, h3.nav-tab-wrapper {
 
 .about-wrap h2 .nav-tab-active {
 	border-color: #ccc;
-	border-bottom-color: #eee;
+	border-bottom-color: #f3f3f3;
 }
 
 .about-wrap h2,
@@ -1964,7 +1964,7 @@ a .mceIcon:hover {
 }
 
 body.login {
-	background: #eee;
+	background: #f3f3f3;
 }
 
 .login #nav a,

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

@@ -147,6 +147,15 @@ strong .post-com-count span {
 }
 
 
+/* 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;
+}
+
+
 /* Admin Menu: submenu */
 
 #adminmenu .wp-submenu,

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

@@ -12,7 +12,7 @@ $notification-color: #d54e21 !default;
 
 // global
 
-$body-background: #eee !default;
+$body-background: #f3f3f3 !default;
 
 $link: #0074a2 !default;
 $link-focus: lighten( $link, 10% ) !default;

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

@@ -3298,7 +3298,7 @@ form.initial-form.quickpress-open input#title {
 }
 
 #activity-widget #the-comment-list .comment {
-	background: #f5f5f5;
+	background: #fafafa;
 	padding: 12px;
 	position: relative;
 }
@@ -7845,7 +7845,8 @@ body.press-this {
 .about-wrap hr {
 	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);
 }
 
 .about-wrap img {
@@ -7924,15 +7925,10 @@ body.press-this {
 }
 
 .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;
-}
-
 .about-colors-img img,
 .about-themes-img img {
 	margin: 0 0;