Refactoring NTP5: new implementation of TilePage and MostVisitedPage (which now inherits from Thumb…

chrome/browser/resources/ntp_search/thumbnail_page.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. */
+
+.close-button {

[jeremycho_google, 2012/08/02 03:00:49]

Since close-button is most-visited specific, rename file?

[pedrosimonetti2, 2012/08/03 18:14:12]

I refactored the CSS and classNames in the code. close-button related rules are
in most_visited_page.css. Other rules here renamed to thumbnail.

On 2012/08/02 03:00:49, jeremycho wrote:

+  background: no-repeat;
+  background-color: transparent;
+  /* TODO(estade): this should animate between states. */
+  background-image: -webkit-image-set(
+      url('../../../../ui/resources/default_100_percent/close_bar.png') 1x,
+      url('../../../../ui/resources/default_200_percent/close_bar.png') 2x);
+  border: 0;
+  cursor: default;
+  display: inline-block;
+  height: 16px;
+  padding: 0;
+  position: absolute;
+  width: 16px;
+  z-index: 999;
+}
+
+.close-button:hover,
+.close-button:focus {
+  background-image: -webkit-image-set(
+      url('../../../../ui/resources/default_100_percent/close_bar_hover.png')
+          1x,
+      url('../../../../ui/resources/default_200_percent/close_bar_hover.png')
+          2x);
+}
+
+.close-button:active {
+  background-image: -webkit-image-set(
+      url('../../../../ui/resources/default_100_percent/close_bar_pressed.png')
+          1x,
+      url('../../../../ui/resources/default_200_percent/close_bar_pressed.png')
+          2x);
+}
+
+/* other */
+
+.most-visited {
+  display: block;
+  height: 100%;
+  position: relative;
+  width: 100%;
+}
+
+.most-visited .thumbnail-wrapper {
+  display: block;
+}
+
+.most-visited .thumbnail {
+  background-size: 100%;
+  display: block;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+
+.most-visited .title {
+  color: #777;
+  display: none;
+  font: 11px Arial;
+  overflow: hidden;
+  position: absolute;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+}
+
+.most-visited:hover .title {
+  bottom: -18px;
+  display: block;
+}
+
+.most-visited .close-button {
+  -webkit-transition: opacity 500ms ease-in-out;
+  opacity: 0;
+  right: 2px;
+  top: 2px;
+}
+
+html[dir=rtl] .most-visited .close-button {
+  left: 0;
+  right: auto;
+}
+
+.most-visited:hover .close-button {
+  -webkit-transition-delay: 500ms;
+  opacity: 1;
+}
+
+.most-visited .close-button:hover {
+  -webkit-transition: none;
+}