NTP: Fix visual issues when sections are closed.

See image here: http://imgur.com/XdxX6

BUG=55148
TEST=Close one or more sections in NTP. Font on collapsed menus
should be the same as section headers.

Review URL: http://codereview.chromium.org/3526009

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@61128 0039d316-1c4b-4281-b951-d872f2087c98

2 files changed, 12 insertions, 5 deletions

diff --git a/chrome/browser/resources/new_new_tab.css b/chrome/browser/resources/new_new_tab.css
index cb3c784..9d72dff 100644
--- a/chrome/browser/resources/new_new_tab.css
+++ b/chrome/browser/resources/new_new_tab.css
@@ -373,19 +373,24 @@ html[dir=rtl] .section-close-button {
   -webkit-appearance: none;
   background: none;
   border: 0;
+  cursor: pointer;
   font: inherit;
   margin: 0;
-  margin-right: 10px;
+  margin-right: 1.5em;
   padding: 0;
 
-  /* from .section > h2 */
+  /* Note: The font here should end up the same as .section > h2. A different
+  percentage is needed because the parent element here has a different size. */
   font-family: Helvetica, Arial, sans-serif;
-  font-size: 133%;
+  font-size: 122%;
   font-weight: normal;
 }
 
 #closed-sections-bar > button > img {
   -webkit-transform: rotate(90deg);
+  position: relative;
+  top: -2px;
+  margin-left: 1px;
 }
 
 .maxiview {
diff --git a/chrome/browser/resources/new_tab_theme.css b/chrome/browser/resources/new_tab_theme.css
index 88e3fcc..7500a4f 100644
--- a/chrome/browser/resources/new_tab_theme.css
+++ b/chrome/browser/resources/new_tab_theme.css
@@ -102,7 +102,8 @@ body {
   color: $$5; /* COLOR_NTP_LINK_UNDERLINE */
 }
 
-.section > h2 {
+.section > h2,
+#closed-sections-bar > button {
   color: $$7; /* COLOR_NTP_SECTION_HEADER_TEXT */
 }
 
@@ -110,7 +111,8 @@ body {
   color: $$8; /* COLOR_NTP_SECTION_HEADER_TEXT_HOVER */
 }
 
-.section.hidden:not([noexpand]) > h2:hover {
+.section.hidden:not([noexpand]) > h2:hover,
+#closed-sections-bar > button:hover {
   color: $$8; /* COLOR_NTP_SECTION_HEADER_TEXT_HOVER */
 }