NTP5: Improving the Tile Page resize logic

chrome/browser/resources/ntp_search/new_tab.css

 /* Copyright (c) 2012 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. */
 
 /* -----------------------------------------------------------------------------
    General Styles
 ----------------------------------------------------------------------------- */
 
 body {
   background: whiteSmoke;
   /* TODO(pedrosimonetti): Confirm with designers/engineers what do we want
    * to do regarding font family, once AFAIK we want to use Arial always. */
-  font-family: Arial;
+  font-family: Arial !important;

[jeremycho_google, 2012/08/23 01:09:28]

Is this necessary?  I don't see font-family being overridden anywhere.

[pedrosimonetti2, 2012/08/24 00:22:15]

The font-family and size is being set using JavaScript (based on values that are
in loadTimeData), so the only way to override is to use !important. This is just
a temporary fix. We need to talk to UX folks to confirm we want the same font on
all platforms (which I'm 90% sure is what they want) and we need to confirm with
Evan which is the best place to put this change. Maybe in th C++ code where the
values that are passed to loadTimeData are defined.

[jeremycho_google, 2012/08/24 00:54:42]

Ah now I see where this happens.  Sounds like C++ might be the right place, but
I'm fine with doing that later.
On 2012/08/24 00:22:15, pedrosimonetti wrote:

   margin: 0;
   overflow: hidden;
   padding: 0;
 }
 
 #card-slider-frame {
+  -webkit-transition: opacity 250ms, -webkit-transform 250ms;
   bottom: 0;
   overflow: hidden;
   position: absolute;
   text-align: center;
   width: 100%;
 }
 
+.hide-card-slider {
+  -webkit-transform: translate3d(0, 170px, 0);
+  opacity: 0;
+}
+
 #page-list {
   display: -webkit-box;
   position: static;
 }
 
 #page-list-menu {
   margin: 8px auto 30px;
   text-align: center;
 }
 
 /* -----------------------------------------------------------------------------
    Dot List
 ----------------------------------------------------------------------------- */
 
 #dot-list {
   color: #666;
   height: 25px;
   list-style: none;
   margin: 0;
   overflow: hidden;
   padding: 0;
   text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
 }
 
 #dot-list li {
   display: inline-block;
+  font-size: 1.0833em;
   margin-left: 13px;
   margin-right: 13px;
   min-width: 55px;  /* TODO(pedrosimonetti): Confirm value with Marcin. */
   white-space: nowrap;
 }