OLD | NEW |
| (Empty) |
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 /* ----------------------------------------------------------------------------- | |
6 Tile Page | |
7 ----------------------------------------------------------------------------- */ | |
8 | |
9 .tile-page { | |
10 overflow: hidden; | |
11 position: relative; | |
12 } | |
13 | |
14 .tile-page-frame { | |
15 margin: 0 auto; | |
16 overflow: hidden; | |
17 position: relative; | |
18 width: 748px; | |
19 } | |
20 | |
21 .tile-page-content { | |
22 overflow: hidden; | |
23 } | |
24 | |
25 .tile-grid { | |
26 display: block; | |
27 margin: 0 auto; | |
28 width: 732px; | |
29 } | |
30 | |
31 .tile-grid-content { | |
32 -webkit-transform: translate3d(0, 0, 0); | |
33 -webkit-transition: -webkit-transform 200ms; | |
34 } | |
35 | |
36 .tile-row { | |
37 -webkit-transition: opacity 200ms; | |
38 height: 100px; | |
39 text-align: start; | |
40 white-space: nowrap; | |
41 } | |
42 | |
43 /* ----------------------------------------------------------------------------- | |
44 Tile Grid Animation | |
45 ----------------------------------------------------------------------------- */ | |
46 | |
47 .animate-grid-width { | |
48 -webkit-transform: translate3d(0, 0, 0); | |
49 -webkit-transition: width 200ms; | |
50 } | |
51 | |
52 /* ----------------------------------------------------------------------------- | |
53 Tile Cell | |
54 ----------------------------------------------------------------------------- */ | |
55 | |
56 .tile-cell { | |
57 -webkit-transform: translate3d(0, 0, 0); | |
58 display: inline-block; | |
59 position: relative; | |
60 } | |
61 | |
62 .tile-cell:first-child { | |
63 -webkit-margin-start: 0; | |
64 } | |
65 | |
66 /* ----------------------------------------------------------------------------- | |
67 Tile Cell Animation | |
68 ----------------------------------------------------------------------------- */ | |
69 | |
70 .animate-grid-width .tile-cell { | |
71 -webkit-transition: margin 200ms; | |
72 -webkit-transition-property: margin, opacity, width; | |
73 } | |
74 | |
75 /* Animates entire columns of Tiles at once.*/ | |
76 .hide-col-0 .tile-cell:nth-child(1), | |
77 .hide-col-1 .tile-cell:nth-child(2), | |
78 .hide-col-2 .tile-cell:nth-child(3), | |
79 .hide-col-3 .tile-cell:nth-child(4), | |
80 .hide-col-4 .tile-cell:nth-child(5), | |
81 .hide-col-5 .tile-cell:nth-child(6), | |
82 .hide-col-6 .tile-cell:nth-child(7), | |
83 .hide-col-7 .tile-cell:nth-child(8), | |
84 .hide-col-8 .tile-cell:nth-child(9), | |
85 .hide-col-9 .tile-cell:nth-child(10) { | |
86 -webkit-margin-end: -10px; | |
87 opacity: 0; | |
88 width: 10px !important; | |
89 } | |
90 | |
91 /* ----------------------------------------------------------------------------- | |
92 Tile Position Animation | |
93 ----------------------------------------------------------------------------- */ | |
94 | |
95 .animate-tile-repositioning .tile { | |
96 -webkit-transition-duration: 200ms; | |
97 -webkit-transition-property: -webkit-transform, left, opacity, top; | |
98 position: absolute; | |
99 } | |
100 | |
101 .animate-tile-repositioning .tile:not(.target-tile) { | |
102 -webkit-transition-duration: 400ms; | |
103 } | |
104 | |
105 .animate-tile-repositioning.undo-removal .target-tile { | |
106 -webkit-transition-delay: 200ms; | |
107 } | |
108 | |
109 .animate-tile-repositioning .animate-hide-tile { | |
110 opacity: 0; | |
111 } | |
112 | |
113 .animate-tile-repositioning .animate-hide-tile.target-tile { | |
114 -webkit-transform: scale(0.5); | |
115 } | |
116 | |
117 /* ----------------------------------------------------------------------------- | |
118 Scroll Bars | |
119 ----------------------------------------------------------------------------- */ | |
120 | |
121 .scrollable { | |
122 overflow-y: auto; | |
123 } | |
124 | |
125 .scrollable .shadow-top { | |
126 -webkit-margin-end: 0; | |
127 -webkit-mask-box-image: -webkit-linear-gradient(left, | |
128 rgba(0, 0, 0, 0.1), | |
129 rgba(0, 0, 0, 0.8), | |
130 rgba(0, 0, 0, 0.1)); | |
131 background: -webkit-linear-gradient(top, | |
132 rgba(0, 0, 0, 0.2), | |
133 transparent); | |
134 height: 6px; | |
135 left: 0; | |
136 opacity: 0; | |
137 position: absolute; | |
138 top: 0; | |
139 width: 100%; | |
140 z-index: 1000; | |
141 } | |
142 | |
143 .scrollable .shadow-top::after { | |
144 border-top: 1px solid rgba(0, 0, 0, 0.3); | |
145 content: ''; | |
146 display: block; | |
147 height: 0; | |
148 left: 0; | |
149 position: absolute; | |
150 top: 0; | |
151 width: 100%; | |
152 } | |
153 | |
154 .scrollable .shadow-bottom { | |
155 -webkit-margin-end: 0; | |
156 -webkit-mask-box-image: -webkit-linear-gradient(left, | |
157 rgba(0, 0, 0, 0.1), | |
158 rgba(0, 0, 0, 0.8), | |
159 rgba(0, 0, 0, 0.1)); | |
160 background: -webkit-linear-gradient(bottom, | |
161 rgba(0, 0, 0, 0.2), | |
162 transparent); | |
163 bottom: 0; | |
164 height: 4px; | |
165 left: 0; | |
166 opacity: 1; | |
167 position: absolute; | |
168 width: 100%; | |
169 z-index: 1000; | |
170 } | |
171 | |
172 .scrollable .shadow-bottom::after { | |
173 border-bottom: 1px solid rgba(0, 0, 0, 0.3); | |
174 bottom: 0; | |
175 content: ''; | |
176 display: block; | |
177 height: 0; | |
178 left: 0; | |
179 position: absolute; | |
180 width: 100%; | |
181 } | |
182 | |
183 ::-webkit-scrollbar { | |
184 height: 12px; | |
185 width: 12px; | |
186 } | |
187 | |
188 ::-webkit-scrollbar-button { | |
189 height: 0; | |
190 width: 0; | |
191 } | |
192 | |
193 ::-webkit-scrollbar-button:start:decrement, | |
194 ::-webkit-scrollbar-button:end:increment { | |
195 display: block; | |
196 } | |
197 | |
198 ::-webkit-scrollbar-button:vertical:start:increment, | |
199 ::-webkit-scrollbar-button:vertical:end:decrement { | |
200 display: none; | |
201 } | |
202 | |
203 ::-webkit-scrollbar-track:vertical { | |
204 -webkit-border-end: none; | |
205 -webkit-border-start: 5px solid transparent; | |
206 background-clip: padding-box; | |
207 background-color: white; | |
208 } | |
209 | |
210 ::-webkit-scrollbar-track:horizontal { | |
211 background-clip: padding-box; | |
212 background-color: white; | |
213 border-bottom: none; | |
214 border-top: 5px solid transparent; | |
215 } | |
216 | |
217 ::-webkit-scrollbar-thumb { | |
218 -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.10), | |
219 inset 0 -1px 0 rgba(0, 0, 0, 0.07); | |
220 background-clip: padding-box; | |
221 background-color: rgba(0, 0, 0, 0.2); | |
222 min-height: 28px; | |
223 padding-top: 100px; | |
224 } | |
225 | |
226 ::-webkit-scrollbar-thumb:hover { | |
227 -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25); | |
228 background-color: rgba(0, 0, 0, 0.4); | |
229 } | |
230 | |
231 ::-webkit-scrollbar-thumb:active { | |
232 -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35); | |
233 background-color: rgba(0, 0, 0, 0.5); | |
234 } | |
235 | |
236 ::-webkit-scrollbar-thumb:vertical { | |
237 -webkit-border-end: none; | |
238 -webkit-border-start: 5px solid transparent; | |
239 border-bottom: none; | |
240 border-top: none; | |
241 } | |
242 | |
243 ::-webkit-scrollbar-thumb:horizontal { | |
244 border: none; | |
245 border-top: 5px solid transparent; | |
246 } | |
247 | |
248 ::-webkit-scrollbar-track:hover { | |
249 -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.10); | |
250 background-color: rgba(0, 0, 0, 0.05); | |
251 } | |
252 | |
253 ::-webkit-scrollbar-track:active { | |
254 -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.14), | |
255 inset -1px -1px 0 rgba(0, 0, 0, 0.07); | |
256 background-color: rgba(0, 0, 0, 0.05); | |
257 } | |
OLD | NEW |