Help style refresh, part 1. A few elements left to add/tweak. see #18690.

git-svn-id: http://svn.automattic.com/wordpress/trunk@18866 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/colors-fresh.dev.css

@@ -788,16 +788,16 @@ table.widefat span.spam a,
 	border-color: #ccc;
 }
 
-.contextual-help-tabs a {
-	border-top-color: #f9f9f9;
-	border-bottom-color: #dfdfdf;
-}
-
 .contextual-help-tabs a:hover {
 	background-color: #EAF2FA;
 	color: #333;
 }
 
+.contextual-help-tabs .active {
+	border-color: #ccc;
+}
+
+.contextual-help-tabs .active,
 .contextual-help-tabs .active a,
 .contextual-help-tabs .active a:hover {
 	background: #fff;
@@ -805,11 +805,12 @@ table.widefat span.spam a,
 }
 
 .contextual-help-sidebar {
-	background-color: #f9f9f9;
+	background-color: #f1f1f1;
 }
 
 .contextual-help-tabs-wrap {
 	border-color: #dfdfdf;
+	background-color: #fff;
 }
 
 .login #backtoblog a {

wp-admin/css/wp-admin.dev.css

@@ -1543,7 +1543,10 @@ form.upgrade .hint {
 	float: left;
 	width: 150px;
 	margin: 0;
-	overflow: auto;
+}
+
+.contextual-help-tabs ul {
+	margin: 1em 0;
 }
 
 .contextual-help-tabs li {
@@ -1554,12 +1557,14 @@ form.upgrade .hint {
 .contextual-help-tabs a {
 	display: block;
 	padding: 5px 5px 5px 12px;
-
-	font-weight: bold;
 	line-height: 18px;
 	text-decoration: none;
+}
 
-	border-width: 1px 0;
+.contextual-help-tabs .active {
+	padding: 0 2px;
+	margin: -1px -1px -1px -3px;
+	border-width: 1px 0 1px 1px;
 	border-style: solid;
 }
 

wp-admin/includes/screen.php

@@ -659,7 +659,8 @@ final class WP_Screen {
 		?>
 		<div id="screen-meta" class='metabox-prefs'>
 			<div id="contextual-help-wrap" class="hidden">
-				<ul class="contextual-help-tabs">
+				<div class="contextual-help-tabs">
+					<ul>
 					<?php foreach ( $this->_help_tabs as $i => $tab ):
 						$link_id  = "tab-link-{$tab['id']}";
 						$panel_id = "tab-panel-{$tab['id']}";
@@ -672,7 +673,8 @@ final class WP_Screen {
 							</a>
 						</li>
 					<?php endforeach; ?>
-				</ul>
+					</ul>
+				</div>
 
 				<div class="contextual-help-sidebar">
 					<?php echo $this->_help_sidebar; ?>