Home | History | Annotate | Download | only in ntp4 
      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 }
    194