Upstream Android NTP resources.

chrome/browser/resources/ntp_android/bookmarks.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. */
+
+/* Begin top bar */
+
+#bookmarks_title_wrapper {
+  border-bottom: 1px solid #d0d0d0;
+  display: -webkit-box;
+  font-size: 17px;
+  height: 44px;
+  line-height: 44px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.section-title {
+  -webkit-box-flex: 1;
+  -webkit-box-orient: horizontal;
+  display: -webkit-box;
+  overflow: hidden;
+  position: absolute;
+}
+
+.section-title-mask {
+  -webkit-box-flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+
+.overflow-left-mask {
+  background: -webkit-gradient(
+    linear,
+    left center,
+    right center,
+    from(rgba(50,50,50,0.3)),
+    to(rgba(0,0,0,0))
+  );
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 10px;
+}
+
+.overflow-right-mask {
+  background: -webkit-gradient(
+    linear,
+    left center,
+    right center,
+    from(rgba(0,0,0,0)),
+    to(rgba(50,50,50,0.2))
+  );
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 10px;
+}
+
+.bookmark-separator {
+  background-image: url(images/breadcrumb_mdpi.png);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 8px 20px; /* this matches the background image size */
+  height: 44px;
+  width: 10px;
+}
+
+#bookmarks_title_wrapper .title-crumb {
+  color: #555;
+  margin: 0 10px;
+}
+
+#bookmarks_title_wrapper .title-crumb-active {
+  font-weight: bold;
+  margin-right: 0;
+  padding-right: 10px;
+}
+
+/* Begin Bookmark Cell Items */
+
+.favicon-cell {
+  -webkit-tap-highlight-color: transparent;
+  -webkit-transition: background 300ms linear;
+  display: inline-block;
+  height: 105px;
+  padding: 11px;
+  text-align: center;
+  vertical-align: top;
+  width: 80px;
+}
+
+.favicon-cell-active {
+  -webkit-tap-highlight-color: transparent;
+  background: rgba(51, 181, 229, .4);
+}
+
+.favicon-box {
+  -webkit-border-radius: 10px;
+  -webkit-box-orient: vertical;
+  -webkit-box-pack: center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  display: -webkit-box;
+  height: 64px; /* icon container size */
+  margin: auto; /* horizontally center */
+  position: relative;
+  text-align: center;
+  width: 64px; /* icon container size */
+}
+
+.favicon-box.folder {
+  background-image: url(images/bookmark_folder_mdpi.png);
+}
+
+.favicon-cell .title {
+  height: 30px;
+  line-height: 18px;
+  overflow: hidden;
+  padding-bottom: 8px;
+  padding-top: 10px;
+}
+
+.favicon-icon {
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 100%;
+  width: 100%;
+}
+
+.favicon-icon.document {
+  left: 0;
+  position: absolute;
+  top: 0;
+}
+
+.bookmark-border {
+  background-image: url(images/bookmark_border_mdpi.png);
+  background-size: 100%;
+  height: 64px;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 64px;
+}
+
+.favicon-box.document {
+  /* a 'document' favicon looks like a little web page with the favicon
+     in top left corner */
+  background-image: url(images/bookmark_bg_mdpi.png);
+  margin: auto; /* horizontally center */
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.favicon-box.document .fold-container {
+  position: absolute;
+  right: 7px;
+  top: 3px;
+}
+
+.favicon-box.document .fold {
+  box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.2);
+  height: 12px;
+  width: 12px;
+}
+
+.favicon-box.document .active-shade {
+  /* Shade overlay for favicon's when pressed */
+  background-color: #000;
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.favicon-box.document .active-shade:active {
+  opacity: 0.15;
+}
+
+.favicon-box.document .color-strip {
+  /* the color strip is an overlay across the bottom of the icon */
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+  bottom: 3px;
+  height: 4px;
+  left: 7px;
+  position: absolute;
+  width: 50px;
+}
+
+.favicon-box.document .favicon-icon {
+  background-size: 16px 16px;
+}
+
+.favicon-icon.touch-icon {
+  background-size: 100%;
+  border-radius: 16px; /* remove any junk in the corners of the favicon */
+  height: 57px; /* touch-icon size */
+  margin: auto; /* horizontally center */
+  margin-bottom: 4px;
+  margin-top: 3px; /* (64 - 57) / 2 = 3.5 */
+  width: 57px; /* touch-icon size */
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 1.32) {
+  .favicon-box.document .fold {
+    /* this is to make the canvas scale properly */
+    height: 16px;
+    width: 16px;
+    zoom: 0.75;
+  }
+  .favicon-box.document {
+    background-image: url(images/bookmark_bg_tvdpi.png);
+  }
+  .bookmark-border {
+    background-image: url(images/bookmark_border_tvdpi.png);
+  }
+  .favicon-box.folder {
+    background-image: url(images/bookmark_folder_tvdpi.png);
+  }
+  .bookmark-separator {
+    background-image: url(images/breadcrumb_tvdpi.png);
+  }
+
+  /* tweaked spacing, presumably because of rounding error */
+  .favicon-box.document .fold-container {
+    right: 8px;
+  }
+  .favicon-box.document .color-strip {
+    left: 8px;
+    width: 48px;
+  }
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
+  .favicon-box.document .fold {
+    /* this is to make the canvas scale properly */
+    height: 18px;
+    width: 18px;
+    zoom: 0.66;
+  }
+  .favicon-box.document {
+    background-image: url(images/bookmark_bg_hdpi.png);
+  }
+  .bookmark-border {
+    background-image: url(images/bookmark_border_hdpi.png);
+  }
+  .favicon-box.folder {
+    background-image: url(images/bookmark_folder_hdpi.png);
+  }
+  .bookmark-separator {
+    background-image: url(images/breadcrumb_hdpi.png);
+  }
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 2.0) {
+  .favicon-box.document .fold {
+    /* this is to make the canvas scale properly */
+    height: 24px;
+    width: 24px;
+    zoom: 0.5;
+  }
+  .favicon-box.document {
+    background-image: url(images/bookmark_bg_xhdpi.png);
+  }
+  .bookmark-border {
+    background-image: url(images/bookmark_border_xhdpi.png);
+  }
+  .favicon-box.folder {
+    background-image: url(images/bookmark_folder_xhdpi.png);
+  }
+  .bookmark-separator {
+    background-image: url(images/breadcrumb_xhdpi.png);
+  }
+}