chrome/browser/resources/ntp4/tile_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. */

.tile-page {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  height: 100%;
  position: relative;
  width: 100%;
}

.tile-page-scrollbar {
  -webkit-box-sizing: border-box;
  margin: 0 4px;
  pointer-events: none;
  position: absolute;
  right: 0;
  width: 5px;
  z-index: 5;
}

.tile-page-content {
  -webkit-box-flex: 1;
  /* Don't apply clip mask to padding. */
  -webkit-mask-clip: content-box;
  /* TODO(estade): this mask is disabled for technical reasons. It negatively
   * impacts performance of page switching, also it causes problems with Mac
   * text: http://crbug.com/86955
  -webkit-mask-image: -webkit-linear-gradient(bottom, transparent, black 30px);
  */
  /* The following four properties are necessary so that the mask won't clip
   * the scrollbar. */
  box-sizing: border-box;
  overflow-y: scroll;
  /* Scrollbar width(13px) + balance right padding.  */
  padding-left: 93px;
  padding-right: 80px;
  /* This value is mirrored in TilePage.updateTopMargin_ */
  padding-top: 60px;
  position: relative;
  text-align: center;
  width: 100%;
}

.top-margin {
  /* The only reason height is set to 1px, rather than left at 0, is that
   * otherwise webkit collapses the top and bottom margins. */
  height: 1px;
}

.tile-grid {
  position: relative;
  width: 100%;
}

.tile {
  -webkit-print-color-adjust: exact;
  /* Don't offer the context menu on long-press. */
  -webkit-touch-callout: none;
  -webkit-user-drag: element;
  display: inline-block;
  position: absolute;
}

/* NOTE: Dopplegangers nest themselves inside of other tiles, so don't
 * accidentally double apply font-size to them. */
.tile:not(.doppleganger) {
  font-size: 1.2em;
}

/* Not real but not a doppleganger: show nothing. This state exists for a
 * webstore tile that's on the same page as a [+]. */
.tile:not(.real):not(.doppleganger) {
  display: none;
}

/* I don't know why this is necessary. -webkit-user-drag: element on .tile
 * should be enough. If we don't do this, we get 2 drag representations for
 * the image. */
.tile img {
  -webkit-user-drag: none;
}

.doppleganger {
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
}

.tile.dragging {
  opacity: 0;
}

.tile.drag-representation {
  pointer-events: none;
  position: fixed;
  transition: opacity 200ms;
  z-index: 3;
}

.tile.drag-representation.placing > * {
  transition: transform 200ms;
}

/* When a drag finishes while we're not showing the page where the tile
 * belongs, the tile shrinks to a dot. */
.tile.drag-representation.dropped-on-other-page > * {
   transform: scale(0) rotate(0);
}

.tile.drag-representation.deleting > * {
  transform: scale(0) rotate(360deg);
  transition: transform 600ms;
}

.animating-tile-page .tile,
.tile.drag-representation.placing {
  transition: left 200ms, right 200ms, top 200ms;
}

.hovering-on-trash {
  opacity: 0.6;
}

.animating-tile-page .top-margin {
  transition: margin-bottom 200ms;
}

@keyframes bounce {
  0% {
    transform: scale(0, 0);
  }

  60% {
    transform: scale(1.2, 1.2);
  }

  100% {
    transform: scale(1, 1);
  }
}

.tile > .new-tile-contents {
  animation: bounce 500ms ease-in-out;
}

@keyframes blipout {
  0% {
    transform: scale(1, 1);
  }

  60% {
    animation-timing-function: ease-in;
    opacity: 1;
    transform: scale(1.3, 0.02);
  }

  90% {
    opacity: 0.7;
    transform: scale(0.3, 0.02);
  }

  100% {
    animation-timing-function: linear;
    opacity: 0;
    transform: scale(0.3, 0.02);
  }
}

.tile > .removing-tile-contents {
  animation: blipout 300ms;
  animation-fill-mode: forwards;
  pointer-events: none;
}

.tile-page:not(.selected-card) * {
  transition: none !important;
}

/** Scrollbars ****************************************************************/

.tile-page-content::-webkit-scrollbar {
  width: 13px;
}

.tile-page-content::-webkit-scrollbar-button {
  display: none;
}