[ntp4] Bookmarks page implementation, first-pass.

chrome/browser/resources/ntp4/bookmarks_page.css

Index: chrome/browser/resources/ntp4/bookmarks_page.css
===================================================================
--- chrome/browser/resources/ntp4/bookmarks_page.css	(revision 96479)
+++ chrome/browser/resources/ntp4/bookmarks_page.css	(working copy)
@@ -3,13 +3,147 @@
  * found in the LICENSE file.
  */
 
-.bookmarks {
+/* Bookmark Tiles ************************************************************/
+
+.bookmark {
+  display: -webkit-box;
   position: absolute;
+  -webkit-box-orient: vertical;
 }
 
-/* TODO(csilv): Remove this placeholder. */
-.placeholder {
-  color: #999;
-  font-size: 20px;
-  padding-top: 80px;
+.bookmark-fills-parent {
+  bottom: 0;
+  display: -webkit-box;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
 }
+
+.bookmark .close-button {
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 5;
+  -webkit-transition: opacity 0.15s;
+}
+
+html[dir=rtl] .bookmark .close-button {
+  left: 0;
+  right: auto;
+}
+
+.bookmark:hover .close-button {
+  opacity: 1;
+  -webkit-transition-delay: 0.5s;
+}
+
+.bookmark .favicon {
+  background: no-repeat 50% 50%;
+  background-size: 32px;
+}
+
+.bookmark .color-stripe {
+  border-bottom-left-radius: 3px 3px;
+  border-bottom-right-radius: 3px 3px;
+  bottom: 23px;
+  height: 3px;
+  opacity: 0.5;
+  position: absolute;
+  width: 100%;
+  z-index: 100;
+}
+
+.bookmark .title {
+  cursor: pointer;
+  display: block;
+  height: 23px;
+  line-height: 23px;
+  overflow: hidden;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bookmark .button {
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0.2);
+  border: 1px solid transparent;
+  border-radius: 5px;
+  bottom: 70px;
+  position: relative;
+  z-index: 5;
+  -webkit-box-flex: 1;
+  -webkit-transition: background-color .15s;  
+}
+
+.bookmark:hover .button {
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.bookmark .button-frame {
+  background: -webkit-gradient(radial, 50% 25%, 0, 50% 50%, 80, from(#fff),
+      color-stop(0.68, #f5f5f5), to(#e5e5e5));
+  border-radius: 5px;
+}
+
+/* The bookmark gets a shadow when clicked, but not when the click is on the
+ * close button. */
+.bookmark:active .close-button:not(:active) + .button-frame {
+  -webkit-box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.2);
+}
+
+/* Bookmark Titles ************************************************************/
+
+#bookmarks_title_wrapper {
+  background: #fff;
+  background-position: left;
+  background-repeat: no-repeat;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  color: #777;
+  display: -webkit-box;
+  font-size: 16px;
+  height: 48px;
+  line-height: 48px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#bookmarks_title_wrapper .title-crumb {
+  cursor: pointer;
+  margin: 0 25px;
+}
+
+#bookmarks_title_wrapper .title-crumb-active {
+  color: #7f7f7f;
+  cursor: default;
+  font-weight: bold;
+  margin-right: 0;
+  padding-right: 10px;
+}
+
+.section-title {
+  display: -webkit-box;
+  left: 0;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  -webkit-box-flex: 1;
+  -webkit-box-orient: horizontal;
+}
+
+.section-title-mask {
+  background: #fff;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  -webkit-box-flex: 1;
+}
+
+.bookmark-separator {
+  background: -webkit-canvas(bookmark-chevron) center center no-repeat;
+  height: 44px;
+  margin: 2px 0;
+  width: 10px;
+}