OLD | NEW |
1 /* Copyright (c) 2011 The Chromium Authors. All rights reserved. | 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 | 2 * Use of this source code is governed by a BSD-style license that can be |
3 * found in the LICENSE file. | 3 * found in the LICENSE file. */ |
4 */ | |
5 | 4 |
6 .tile-page { | 5 .tile-page { |
| 6 -webkit-box-orient: vertical; |
7 display: -webkit-box; | 7 display: -webkit-box; |
8 height: 100%; | 8 height: 100%; |
9 position: relative; | 9 position: relative; |
10 width: 100%; | 10 width: 100%; |
11 -webkit-box-orient: vertical; | |
12 } | 11 } |
13 | 12 |
14 .tile-page-scrollbar { | 13 .tile-page-scrollbar { |
| 14 -webkit-box-sizing: border-box; |
15 margin: 0 4px; | 15 margin: 0 4px; |
16 pointer-events: none; | 16 pointer-events: none; |
17 position: absolute; | 17 position: absolute; |
18 right: 0; | 18 right: 0; |
19 width: 5px; | 19 width: 5px; |
20 z-index: 5; | 20 z-index: 5; |
21 -webkit-box-sizing: border-box; | |
22 } | 21 } |
23 | 22 |
24 .tile-page-content { | 23 .tile-page-content { |
25 overflow-y: scroll; | 24 -webkit-box-flex: 1; |
26 /* This value is mirrored in TilePage.updateTopMargin_ */ | 25 /* Don't apply clip mask to padding. */ |
27 padding-top: 60px; | 26 -webkit-mask-clip: content-box; |
28 position: relative; | |
29 text-align: center; | |
30 width: 100%; | |
31 /* TODO(estade): this mask is disabled for technical reasons. It negatively | 27 /* TODO(estade): this mask is disabled for technical reasons. It negatively |
32 * impacts performance of page switching, also it causes problems with Mac | 28 * impacts performance of page switching, also it causes problems with Mac |
33 * text: http://crbug.com/86955 | 29 * text: http://crbug.com/86955 |
34 -webkit-mask-image: -webkit-linear-gradient(bottom, transparent, black 30px); | 30 -webkit-mask-image: -webkit-linear-gradient(bottom, transparent, black 30px); |
35 */ | 31 */ |
36 /* The following four properties are necessary so that the mask won't clip | 32 /* The following four properties are necessary so that the mask won't clip |
37 * the scrollbar. */ | 33 * the scrollbar. */ |
38 box-sizing: border-box; | 34 box-sizing: border-box; |
| 35 overflow-y: scroll; |
39 /* Scrollbar width(13px) + balance right padding. */ | 36 /* Scrollbar width(13px) + balance right padding. */ |
40 padding-left: 93px; | 37 padding-left: 93px; |
41 padding-right: 80px; | 38 padding-right: 80px; |
42 -webkit-box-flex: 1; | 39 /* This value is mirrored in TilePage.updateTopMargin_ */ |
43 /* Don't apply clip mask to padding. */ | 40 padding-top: 60px; |
44 -webkit-mask-clip: content-box; | 41 position: relative; |
| 42 text-align: center; |
| 43 width: 100%; |
45 } | 44 } |
46 | 45 |
47 .tile-grid { | 46 .tile-grid { |
48 position: relative; | 47 position: relative; |
49 width: 100%; | 48 width: 100%; |
50 } | 49 } |
51 | 50 |
52 .tile { | 51 .tile { |
53 display: inline-block; | |
54 position: absolute; | |
55 -webkit-print-color-adjust: exact; | 52 -webkit-print-color-adjust: exact; |
56 /* Don't offer the context menu on long-press. */ | 53 /* Don't offer the context menu on long-press. */ |
57 -webkit-touch-callout: none; | 54 -webkit-touch-callout: none; |
58 -webkit-user-drag: element; | 55 -webkit-user-drag: element; |
| 56 display: inline-block; |
| 57 position: absolute; |
59 } | 58 } |
60 | 59 |
61 /* I don't know why this is necessary. -webkit-user-drag: element on .tile | 60 /* I don't know why this is necessary. -webkit-user-drag: element on .tile |
62 * should be enough. If we don't do this, we get 2 drag representations for | 61 * should be enough. If we don't do this, we get 2 drag representations for |
63 * the image. */ | 62 * the image. */ |
64 .tile img { | 63 .tile img { |
65 -webkit-user-drag: none; | 64 -webkit-user-drag: none; |
66 } | 65 } |
67 | 66 |
68 .doppleganger { | 67 .doppleganger { |
69 left: 0 !important; | 68 left: 0 !important; |
70 right: 0 !important; | 69 right: 0 !important; |
71 top: 0 !important; | 70 top: 0 !important; |
72 } | 71 } |
73 | 72 |
74 .tile.dragging { | 73 .tile.dragging { |
75 opacity: 0; | 74 opacity: 0; |
76 } | 75 } |
77 | 76 |
78 .tile.drag-representation { | 77 .tile.drag-representation { |
| 78 -webkit-transition: opacity 200ms; |
79 pointer-events: none; | 79 pointer-events: none; |
80 position: fixed; | 80 position: fixed; |
81 z-index: 3; | 81 z-index: 3; |
82 -webkit-transition: opacity 200ms; | |
83 } | 82 } |
84 | 83 |
85 .tile.drag-representation.placing > * { | 84 .tile.drag-representation.placing > * { |
86 -webkit-transition: -webkit-transform 200ms; | 85 -webkit-transition: -webkit-transform 200ms; |
87 } | 86 } |
88 | 87 |
89 /* When a drag finishes while we're not showing the page where the tile | 88 /* When a drag finishes while we're not showing the page where the tile |
90 * belongs, the tile shrinks to a dot. */ | 89 * belongs, the tile shrinks to a dot. */ |
91 .tile.drag-representation.dropped-on-other-page > * { | 90 .tile.drag-representation.dropped-on-other-page > * { |
92 -webkit-transform: scale(0) rotate(0); | 91 -webkit-transform: scale(0) rotate(0); |
(...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
127 .tile > .new-tile-contents { | 126 .tile > .new-tile-contents { |
128 -webkit-animation: bounce 500ms ease-in-out; | 127 -webkit-animation: bounce 500ms ease-in-out; |
129 } | 128 } |
130 | 129 |
131 @-webkit-keyframes blipout { | 130 @-webkit-keyframes blipout { |
132 0% { | 131 0% { |
133 -webkit-transform: scale(1, 1); | 132 -webkit-transform: scale(1, 1); |
134 } | 133 } |
135 | 134 |
136 60% { | 135 60% { |
137 opacity: 1; | |
138 -webkit-animation-timing-function: ease-in; | 136 -webkit-animation-timing-function: ease-in; |
139 -webkit-transform: scale(1.3, 0.02); | 137 -webkit-transform: scale(1.3, 0.02); |
| 138 opacity: 1; |
140 } | 139 } |
141 | 140 |
142 90% { | 141 90% { |
143 opacity: 0.7; | |
144 -webkit-animation-timing-function: default; | 142 -webkit-animation-timing-function: default; |
145 -webkit-transform: scale(0.3, 0.02); | 143 -webkit-transform: scale(0.3, 0.02); |
| 144 opacity: 0.7; |
146 } | 145 } |
147 | 146 |
148 100% { | 147 100% { |
149 opacity: 0; | |
150 -webkit-animation-timing-function: linear; | 148 -webkit-animation-timing-function: linear; |
151 -webkit-transform: scale(0.3, 0.02); | 149 -webkit-transform: scale(0.3, 0.02); |
| 150 opacity: 0; |
152 } | 151 } |
153 } | 152 } |
154 | 153 |
155 .tile > .removing-tile-contents { | 154 .tile > .removing-tile-contents { |
| 155 -webkit-animation: blipout 300ms; |
156 pointer-events: none; | 156 pointer-events: none; |
157 -webkit-animation: blipout 300ms; | |
158 } | 157 } |
159 | 158 |
160 .tile-page:not(.selected-card) * { | 159 .tile-page:not(.selected-card) * { |
161 -webkit-transition: none !important; | 160 -webkit-transition: none !important; |
162 } | 161 } |
163 | 162 |
164 /** Scrollbars ****************************************************************/ | 163 /** Scrollbars ****************************************************************/ |
165 | 164 |
166 .tile-page-content::-webkit-scrollbar { | 165 .tile-page-content::-webkit-scrollbar { |
167 width: 13px; | 166 width: 13px; |
168 } | 167 } |
169 | 168 |
170 .tile-page-content::-webkit-scrollbar-button { | 169 .tile-page-content::-webkit-scrollbar-button { |
171 display: none; | 170 display: none; |
172 } | 171 } |
OLD | NEW |