[ntp4] More UI refinements.

chrome/browser/resources/ntp4/most_visited_page.css

 /* Copyright (c) 2011 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 .most-visited {
   position: absolute;
 }
 
 .most-visited {
@@ skipping 44 matching lines @@
   opacity: 1;
   -webkit-transition-delay: 0.5s;
 }
 
 .close-button:hover {
   -webkit-transition-delay: 0;
 }
 
 .most-visited .favicon {
   background: no-repeat 5px 50%;
-  background-size: 32px;
+  background-size: 16px;

[Evan Stade, 2011/08/29 21:28:53]

I think you can do background-size 100% maybe

[csilv, 2011/08/29 22:56:52]

Wouldn't that display the globe icon at 32x32?  In the meeting we decided to
contraint to 16px

[Evan Stade, 2011/08/29 23:06:45]

or just leave it off
we want to request the 16x16 globe icon anyway so we don't have to scale

[csilv, 2011/08/30 00:45:29]

Done.

   bottom: 7px;
   box-sizing: border-box;
   display: block;
-  height: 32px;
+  height: 16px;
   position: absolute;
   width: 100%;
 }
 
 .most-visited .color-stripe {
   border-bottom-left-radius: 3px 3px;
   border-bottom-right-radius: 3px 3px;
   /* Matches height of title.  */
-  bottom: 23px;
+  bottom: 31px;
   height: 3px;
-  opacity: 0.5;
   position: absolute;
   width: 100%;
   z-index: 100;
 }
 
 .most-visited .title {
   display: block;
   height: 23px;
   line-height: 23px;
   overflow: hidden;
+  padding-top: 8px;

[Evan Stade, 2011/08/29 21:28:53]

just add this to line height. And then you'll need to update the JS
heightForWidth function.

[csilv, 2011/08/29 22:56:52]

line-height doesn't quite work because the text will be aligned to the vertical
center.  We'd have to add 16 to the line-height in order to add 8px to the
spacing.  However, that would give us unwanted padding on the bottom.

I've fixed the implementaiton for heightForWidth and added a similar function
for bookmarks.

[Evan Stade, 2011/08/29 23:06:45]

if that's the case then I'm sure we can either bottom-align the text or we
should remove the line-height property altogether and adjust padding-top as
appropriate.

[csilv, 2011/08/30 00:45:29]

There's not a general CSS way to make text align to the bottom putting the text
into a sub-element.  I've taken your advice and got rid of the line-height
attribute since it's not really necessary.

   text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .thumbnail {
   background: no-repeat;
   background-size: 100%;
   border-radius: 3px;
   /* These max dimensions are not necessary, as the sizing logic in the .js
@@ skipping 59 matching lines @@
  * Override opacity of the tile to 1, so that the new tile animation
  * occurs simultaneously with the trash animation. */
 .tile.dragging.finishing-drag {
   opacity: 1;
 }
 
 /* Don't display the new tile until there's something to show.  */
 .blacklisted {
   opacity: 0;
 }