• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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