chrome/browser/resources/ntp4/tile_page.css

   1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
   2  * Use of this source code is governed by a BSD-style license that can be
   3  * found in the LICENSE file. */
   4
   5 .tile-page {
   6   -webkit-box-orient: vertical;
   7   display: -webkit-box;
   8   height: 100%;
   9   position: relative;
  10   width: 100%;
  11 }
  12
  13 .tile-page-scrollbar {
  14   -webkit-box-sizing: border-box;
  15   margin: 0 4px;
  16   pointer-events: none;
  17   position: absolute;
  18   right: 0;
  19   width: 5px;
  20   z-index: 5;
  21 }
  22
  23 .tile-page-content {
  24   -webkit-box-flex: 1;
  25   /* Don't apply clip mask to padding. */
  26   -webkit-mask-clip: content-box;
  27   /* TODO(estade): this mask is disabled for technical reasons. It negatively
  28    * impacts performance of page switching, also it causes problems with Mac
  29    * text: http://crbug.com/86955
  30   -webkit-mask-image: -webkit-linear-gradient(bottom, transparent, black 30px);
  31   */
  32   /* The following four properties are necessary so that the mask won't clip
  33    * the scrollbar. */
  34   box-sizing: border-box;
  35   overflow-y: scroll;
  36   /* Scrollbar width(13px) + balance right padding.  */
  37   padding-left: 93px;
  38   padding-right: 80px;
  39   /* This value is mirrored in TilePage.updateTopMargin_ */
  40   padding-top: 60px;
  41   position: relative;
  42   text-align: center;
  43   width: 100%;
  44 }
  45
  46 .top-margin {
  47   /* The only reason height is set to 1px, rather than left at 0, is that
  48    * otherwise webkit collapses the top and bottom margins. */
  49   height: 1px;
  50 }
  51
  52 .tile-grid {
  53   position: relative;
  54   width: 100%;
  55 }
  56
  57 .tile {
  58   -webkit-print-color-adjust: exact;
  59   /* Don't offer the context menu on long-press. */
  60   -webkit-touch-callout: none;
  61   -webkit-user-drag: element;
  62   display: inline-block;
  63   position: absolute;
  64 }
  65
  66 /* NOTE: Dopplegangers nest themselves inside of other tiles, so don't
  67  * accidentally double apply font-size to them. */
  68 .tile:not(.doppleganger) {
  69   font-size: 1.2em;
  70 }
  71
  72 /* Not real but not a doppleganger: show nothing. This state exists for a
  73  * webstore tile that's on the same page as a [+]. */
  74 .tile:not(.real):not(.doppleganger) {
  75   display: none;
  76 }
  77
  78 /* I don't know why this is necessary. -webkit-user-drag: element on .tile
  79  * should be enough. If we don't do this, we get 2 drag representations for
  80  * the image. */
  81 .tile img {
  82   -webkit-user-drag: none;
  83 }
  84
  85 .doppleganger {
  86   left: 0 !important;
  87   right: 0 !important;
  88   top: 0 !important;
  89 }
  90
  91 .tile.dragging {
  92   opacity: 0;
  93 }
  94
  95 .tile.drag-representation {
  96   -webkit-transition: opacity 200ms;
  97   pointer-events: none;
  98   position: fixed;
  99   z-index: 3;
 100 }
 101
 102 .tile.drag-representation.placing > * {
 103   -webkit-transition: -webkit-transform 200ms;
 104 }
 105
 106 /* When a drag finishes while we're not showing the page where the tile
 107  * belongs, the tile shrinks to a dot. */
 108 .tile.drag-representation.dropped-on-other-page > * {
 109    -webkit-transform: scale(0) rotate(0);
 110 }
 111
 112 .tile.drag-representation.deleting > * {
 113   -webkit-transform: scale(0) rotate(360deg);
 114   -webkit-transition: -webkit-transform 600ms;
 115 }
 116
 117 .animating-tile-page .tile,
 118 .tile.drag-representation.placing {
 119   -webkit-transition: left 200ms, right 200ms, top 200ms;
 120 }
 121
 122 .hovering-on-trash {
 123   opacity: 0.6;
 124 }
 125
 126 .animating-tile-page .top-margin {
 127   -webkit-transition: margin-bottom 200ms;
 128 }
 129
 130 .animating-tile-page #notification-container {
 131   -webkit-transition: margin 200ms, opacity 200ms;
 132 }
 133
 134 @-webkit-keyframes bounce {
 135   0% {
 136     -webkit-transform: scale(0, 0);
 137   }
 138
 139   60% {
 140     -webkit-transform: scale(1.2, 1.2);
 141   }
 142
 143   100% {
 144     -webkit-transform: scale(1, 1);
 145   }
 146 }
 147
 148 .tile > .new-tile-contents {
 149   -webkit-animation: bounce 500ms ease-in-out;
 150 }
 151
 152 @-webkit-keyframes blipout {
 153   0% {
 154     -webkit-transform: scale(1, 1);
 155   }
 156
 157   60% {
 158     -webkit-animation-timing-function: ease-in;
 159     -webkit-transform: scale(1.3, 0.02);
 160     opacity: 1;
 161   }
 162
 163   90% {
 164     -webkit-transform: scale(0.3, 0.02);
 165     opacity: 0.7;
 166   }
 167
 168   100% {
 169     -webkit-animation-timing-function: linear;
 170     -webkit-transform: scale(0.3, 0.02);
 171     opacity: 0;
 172   }
 173 }
 174
 175 .tile > .removing-tile-contents {
 176   -webkit-animation: blipout 300ms;
 177   -webkit-animation-fill-mode: forwards;
 178   pointer-events: none;
 179 }
 180
 181 .tile-page:not(.selected-card) * {
 182   -webkit-transition: none !important;
 183 }
 184
 185 /** Scrollbars ****************************************************************/
 186
 187 .tile-page-content::-webkit-scrollbar {
 188   width: 13px;
 189 }
 190
 191 .tile-page-content::-webkit-scrollbar-button {
 192   display: none;
 193 }