OLD | NEW |
1 /* Copyright 2015 The Chromium Authors. All rights reserved. | 1 /* Copyright 2015 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 | 4 |
5 body { | 5 body { |
6 -webkit-user-select: none; | 6 -webkit-user-select: none; |
7 background: none transparent; | 7 background: none transparent; |
8 color: #323232; | 8 color: #323232; |
9 margin: 0; | 9 margin: 0; |
10 overflow: hidden; | 10 overflow: hidden; |
(...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
63 white-space: nowrap; | 63 white-space: nowrap; |
64 width: calc(156px - 2px); | 64 width: calc(156px - 2px); |
65 } | 65 } |
66 | 66 |
67 .mv-tile.hidden, | 67 .mv-tile.hidden, |
68 .mv-empty-tile.hidden { | 68 .mv-empty-tile.hidden { |
69 display: none; | 69 display: none; |
70 } | 70 } |
71 | 71 |
72 .mv-tile { | 72 .mv-tile { |
73 -webkit-transition-duration: 200ms; | |
74 -webkit-transition-property: transform, border, | |
75 box-shadow, margin, opacity, width; | |
76 cursor: pointer; | 73 cursor: pointer; |
| 74 transition-duration: 200ms; |
| 75 transition-property: transform, border, box-shadow, margin, opacity, width; |
77 } | 76 } |
78 | 77 |
79 .mv-tile:focus:not(:hover) { | 78 .mv-tile:focus:not(:hover) { |
80 -webkit-filter: brightness(75%); | 79 -webkit-filter: brightness(75%); |
81 box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2); | 80 box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2); |
82 } | 81 } |
83 | 82 |
84 .mv-tile.blacklisted { | 83 .mv-tile.blacklisted { |
85 border: none !important; | 84 border: none !important; |
86 margin: 0; | 85 margin: 0; |
(...skipping 85 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
172 border: 8px solid #f2f2f2; | 171 border: 8px solid #f2f2f2; |
173 border-radius: 50%; | 172 border-radius: 50%; |
174 content: ''; | 173 content: ''; |
175 display: block; | 174 display: block; |
176 height: 0; | 175 height: 0; |
177 margin: 39px 66px; | 176 margin: 39px 66px; |
178 width: 0; | 177 width: 0; |
179 } | 178 } |
180 | 179 |
181 .mv-x { | 180 .mv-x { |
182 -webkit-transition: opacity 150ms; | |
183 background: linear-gradient(to left, rgb(242,242,242) 60%, transparent); | 181 background: linear-gradient(to left, rgb(242,242,242) 60%, transparent); |
184 border: none; | 182 border: none; |
185 cursor: pointer; | 183 cursor: pointer; |
186 height: 30px; | 184 height: 30px; |
187 opacity: 0; | 185 opacity: 0; |
188 position: absolute; | 186 position: absolute; |
189 right: 0; | 187 right: 0; |
| 188 transition: opacity 150ms; |
190 width: 40px; | 189 width: 40px; |
191 } | 190 } |
192 | 191 |
193 /* We use ::after without content to provide the masked X element. The "bottom" | 192 /* We use ::after without content to provide the masked X element. The "bottom" |
194 * div is actually just the gradient. */ | 193 * div is actually just the gradient. */ |
195 .mv-x::after { | 194 .mv-x::after { |
196 -webkit-mask-image: -webkit-image-set( | 195 -webkit-mask-image: -webkit-image-set( |
197 url(chrome-search://local-ntp/images/close_3_mask.png) 1x, | 196 url(chrome-search://local-ntp/images/close_3_mask.png) 1x, |
198 url(chrome-search://local-ntp/images/close_3_mask.png@2x) 2x); | 197 url(chrome-search://local-ntp/images/close_3_mask.png@2x) 2x); |
199 -webkit-mask-position: 12px 10px; | 198 -webkit-mask-position: 12px 10px; |
(...skipping 21 matching lines...) Expand all Loading... |
221 | 220 |
222 .mv-x:hover::after { | 221 .mv-x:hover::after { |
223 background-color: rgb(90,90,90); | 222 background-color: rgb(90,90,90); |
224 } | 223 } |
225 | 224 |
226 .mv-x:active::after { | 225 .mv-x:active::after { |
227 background-color: rgb(66,133,244); | 226 background-color: rgb(66,133,244); |
228 } | 227 } |
229 | 228 |
230 .mv-tile:hover .mv-x { | 229 .mv-tile:hover .mv-x { |
231 -webkit-transition-delay: 500ms; | |
232 opacity: 1; | 230 opacity: 1; |
| 231 transition-delay: 500ms; |
233 } | 232 } |
234 | 233 |
235 .mv-x:hover { | 234 .mv-x:hover { |
236 -webkit-transition: none; | 235 transition: none; |
237 } | 236 } |
238 | 237 |
239 .mv-favicon { | 238 .mv-favicon { |
240 background-size: 16px; | 239 background-size: 16px; |
241 height: 16px; | 240 height: 16px; |
242 left: 7px; | 241 left: 7px; |
243 margin: 0; | 242 margin: 0; |
244 pointer-events: none; | 243 pointer-events: none; |
245 position: absolute; | 244 position: absolute; |
246 top: 7px; | 245 top: 7px; |
(...skipping 14 matching lines...) Expand all Loading... |
261 } | 260 } |
262 | 261 |
263 .mv-favicon img { | 262 .mv-favicon img { |
264 height: 100%; | 263 height: 100%; |
265 width: 100%; | 264 width: 100%; |
266 } | 265 } |
267 | 266 |
268 .mv-favicon.failed-favicon img { | 267 .mv-favicon.failed-favicon img { |
269 display: none; | 268 display: none; |
270 } | 269 } |
OLD | NEW |