Make NTP look good with themes.

chrome/browser/resources/new_new_tab.css

Index: chrome/browser/resources/new_new_tab.css
diff --git a/chrome/browser/resources/new_new_tab.css b/chrome/browser/resources/new_new_tab.css
index 8987445873ffbffc0e48ee68ef95c2e0d2edb84b..b6451c634fb48ddc69a28acafe46f87ff47f0184 100644
--- a/chrome/browser/resources/new_new_tab.css
+++ b/chrome/browser/resources/new_new_tab.css
@@ -31,6 +31,15 @@ html[mode=app-launcher] #main {
   min-height: 50px;
 }
 
+#top-spacer {
+  position: fixed;
+  top: 0px;

[arv (Not doing code reviews), 2010/09/01 20:55:42]

Don't use units for 0

+  left: 0px;
+  width: 100%;
+  height: 5px;
+  z-index: 2;
+}
+
 html[anim=false] *,
 .no-anim, .no-anim *,
 .loading * {
@@ -306,67 +315,80 @@ html[dir=rtl] #option-menu > [command=hide]:before {
 
 #apps-section-content {
   /* This one is special because the app buttons already have a lot of empty
-  space around them. */
+     space around them. */
   margin-top: -5px;
   padding-bottom: 5px;
 }
 
 .section > h2 {
-  display: block;
   font-family: Helvetica, Arial, sans-serif;
   font-size: 16px;
   font-weight: normal;
   margin: 0;
-  padding: 15px 0;
   position: fixed;
   z-index: 2;
 }
 
-.section:not(.hidden) > h2 {
-  background-position: 0 0, 0 100%;
-  background-repeat: no-repeat;
-  background-size: 100% 39px, 100% 10px;
-}
-
-.section:not(.hidden) + .section > h2 {
-  background-position: 0 0, 0 100%;
-  background-repeat: no-repeat;
-  background-size: 100% 10px, 100% 39px;
-}
-
 .section:not([noexpand]) > h2 {
   cursor: pointer;
 }
 
 .section > h2 > .disclosure {
-  margin-left: -13px;
-  padding-right: 4px;
+  position: absolute;
+  left: -15px;
+  top: 19px;
 }
 
 .section:not(.hidden) > h2 > .disclosure {
   -webkit-transform:rotate(90deg);
 }
 
-.section > h2 > .back {
+.section > h2 > .mask {
+  padding: 15px 0;
+}
+
+.section:not(.hidden) > h2 > .mask {
+  /* NOTE: 0.75 ~= 29/39 (for 10px of gradient) */
+  -webkit-mask-image: 
+      -webkit-gradient(linear, 0% 0%, 0% 100%, from(black),
+                       color-stop(0.75, black), to(transparent));
+}
+
+.section:not(.hidden) + .section > h2 > .mask {
+  /* NOTE: 0.25 ~= 10/39 (for 10px of gradient) */
+  -webkit-mask-image: 
+      -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent),
+                       color-stop(0.25, black), to(black));
+}
+
+.section > h2 .back {
   position: absolute;
-  bottom: 5px;
   left: 0;
+  top: 24px;
   width: 100%;
-  height: 19px;
-  background-repeat: no-repeat;
+  height: 24px;
   z-index: 1;
 }
 
-.section > h2 > span {
+.section > h2 span {
   padding-right: 5px;
   position: relative;
   z-index: 2;
 }
 
-.section > h2 > .settings {
+.section > h2 .settings-wrapper {
   position: absolute;
-  top: 18px;
+  top: 13px;
   right: 0;
+  width: 21px;
+  height: 21px;
+  z-index: 3;
+}
+
+.section > h2 .settings {
+  position: absolute;
+  left: 5px;
+  top: 5px;
   width: 11px;
   height: 11px;
   /* TODO(aa): Need a better image. This one is semi-transparent. Also, I think
@@ -375,12 +397,9 @@ html[dir=rtl] #option-menu > [command=hide]:before {
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 100%;
-  border-style: solid;
-  border-width: 0 5px 0 6px;
-  z-index: 2;
 }
 
-.section.hidden > h2 > .settings {
+.section.hidden > h2 .settings-wrapper {
   display: none;
 }