Make NTP look good with themes.

chrome/browser/resources/new_new_tab.css

 html {
   /* This is needed because of chrome://theme/css/new_tab.css */
   height: 100%;
 }
 
 body {
   margin: 0;
   height: 100%;
   overflow: auto;
   -webkit-user-select: none;
@@ skipping 13 matching lines @@
 }
 
 html[dir=rtl] #main {
   background-position-x: 100%;
 }
 
 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 * {
   -webkit-transition: none !important;
   -webkit-animation: none !important;
 }
 
 :link,
 :visited,
 .link {
@@ skipping 255 matching lines @@
 .section.disabled {
   display: none !important;
 }
 
 .section > div {
   padding-bottom: 20px;
 }
 
 #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
   a gear would be better. */
   background-image: url(chrome://theme/IDR_BALLOON_WRENCH);
   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;
 }
 
 .section > .maxiview {
   position: absolute;
 }
 
 .section > .miniview {
   display: none;
   position: fixed;
@@ skipping 54 matching lines @@
   }
 }
 
 /* Ensure we have at least 10px horizontal marging. */
 @media (max-width: 712px) {
   #main {
     margin-left: 10px;
     margin-right: 10px;
   }
 }