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 60 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
71 background: rgb(242,242,242); | 71 background: rgb(242,242,242); |
72 border: 1px solid transparent; | 72 border: 1px solid transparent; |
73 border-radius: 2px; | 73 border-radius: 2px; |
74 height: calc(130px - 2px); | 74 height: calc(130px - 2px); |
75 line-height: 100%; | 75 line-height: 100%; |
76 margin: 0 8px; | 76 margin: 0 8px; |
77 width: calc(156px - 2px); | 77 width: calc(156px - 2px); |
78 } | 78 } |
79 | 79 |
80 .mv-tile { | 80 .mv-tile { |
81 -webkit-transition-duration: 200ms; | |
82 -webkit-transition-property: -webkit-transform, border, | |
83 box-shadow, margin, opacity, width; | |
84 cursor: pointer; | 81 cursor: pointer; |
| 82 transition-duration: 200ms; |
| 83 transition-property: transform, border, box-shadow, margin, opacity, width; |
85 } | 84 } |
86 | 85 |
87 .thumb-ntp .mv-tile:focus:not(:hover) { | 86 .thumb-ntp .mv-tile:focus:not(:hover) { |
88 -webkit-filter: brightness(75%); | 87 -webkit-filter: brightness(75%); |
89 box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2); | 88 box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2); |
90 } | 89 } |
91 | 90 |
92 .mv-tile.blacklisted { | 91 .mv-tile.blacklisted { |
93 -webkit-transform: scale(0, 0); | |
94 border: none !important; | 92 border: none !important; |
95 margin: 0; | 93 margin: 0; |
| 94 transform: scale(0, 0); |
96 width: 0; | 95 width: 0; |
97 } | 96 } |
98 | 97 |
99 .thumb-ntp .mv-tile:hover { | 98 .thumb-ntp .mv-tile:hover { |
100 box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2); | 99 box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2); |
101 } | 100 } |
102 | 101 |
103 .mv-tile.mv-blacklist { | 102 .mv-tile.mv-blacklist { |
104 opacity: 0; | 103 opacity: 0; |
105 } | 104 } |
106 | 105 |
107 .mv-tile.mv-blacklist { | 106 .mv-tile.mv-blacklist { |
108 -webkit-transform: scale(0, 0); | |
109 -webkit-transform-origin: 0 41px; | |
110 margin-left: 0; | 107 margin-left: 0; |
111 margin-right: 0; | 108 margin-right: 0; |
| 109 transform: scale(0, 0); |
| 110 transform-origin: 0 41px; |
112 width: 0; | 111 width: 0; |
113 } | 112 } |
114 | 113 |
115 .mv-title { | 114 .mv-title { |
116 border: none; | 115 border: none; |
117 overflow: hidden; | 116 overflow: hidden; |
118 position: absolute; | 117 position: absolute; |
119 text-overflow: clip; | 118 text-overflow: clip; |
120 } | 119 } |
121 | 120 |
(...skipping 79 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
201 border: 8px solid #f2f2f2; | 200 border: 8px solid #f2f2f2; |
202 border-radius: 50%; | 201 border-radius: 50%; |
203 content: ''; | 202 content: ''; |
204 display: block; | 203 display: block; |
205 height: 0; | 204 height: 0; |
206 margin: 39px 66px; | 205 margin: 39px 66px; |
207 width: 0; | 206 width: 0; |
208 } | 207 } |
209 | 208 |
210 .mv-x { | 209 .mv-x { |
211 -webkit-transition: opacity 150ms; | |
212 border: none; | 210 border: none; |
213 cursor: pointer; | 211 cursor: pointer; |
214 opacity: 0; | 212 opacity: 0; |
215 position: absolute; | 213 position: absolute; |
| 214 transition: opacity 150ms; |
216 } | 215 } |
217 | 216 |
218 .thumb-ntp .mv-x { | 217 .thumb-ntp .mv-x { |
219 background: linear-gradient(to left, rgb(242,242,242) 60%, transparent); | 218 background: linear-gradient(to left, rgb(242,242,242) 60%, transparent); |
220 height: 30px; | 219 height: 30px; |
221 right: 0; | 220 right: 0; |
222 width: 40px; | 221 width: 40px; |
223 } | 222 } |
224 | 223 |
225 /* We use ::after without content to provide the masked X element. The "bottom" | 224 /* We use ::after without content to provide the masked X element. The "bottom" |
(...skipping 27 matching lines...) Expand all Loading... |
253 | 252 |
254 .thumb-ntp .mv-x:hover::after { | 253 .thumb-ntp .mv-x:hover::after { |
255 background-color: rgb(90,90,90); | 254 background-color: rgb(90,90,90); |
256 } | 255 } |
257 | 256 |
258 .thumb-ntp .mv-x:active::after { | 257 .thumb-ntp .mv-x:active::after { |
259 background-color: rgb(66,133,244); | 258 background-color: rgb(66,133,244); |
260 } | 259 } |
261 | 260 |
262 .mv-tile:hover .mv-x { | 261 .mv-tile:hover .mv-x { |
263 -webkit-transition-delay: 500ms; | |
264 opacity: 1; | 262 opacity: 1; |
| 263 transition-delay: 500ms; |
265 } | 264 } |
266 | 265 |
267 .mv-x:hover { | 266 .mv-x:hover { |
268 -webkit-transition: none; | 267 transition: none; |
269 } | 268 } |
270 | 269 |
271 .mv-favicon { | 270 .mv-favicon { |
272 background-size: 16px; | 271 background-size: 16px; |
273 height: 16px; | 272 height: 16px; |
274 left: 7px; | 273 left: 7px; |
275 margin: 0; | 274 margin: 0; |
276 pointer-events: none; | 275 pointer-events: none; |
277 position: absolute; | 276 position: absolute; |
278 top: 7px; | 277 top: 7px; |
(...skipping 14 matching lines...) Expand all Loading... |
293 } | 292 } |
294 | 293 |
295 .mv-favicon img { | 294 .mv-favicon img { |
296 height: 100%; | 295 height: 100%; |
297 width: 100%; | 296 width: 100%; |
298 } | 297 } |
299 | 298 |
300 .mv-favicon.failed-favicon img { | 299 .mv-favicon.failed-favicon img { |
301 display: none; | 300 display: none; |
302 } | 301 } |
OLD | NEW |