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 76 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
87 .icon-ntp .mv-tile, | 87 .icon-ntp .mv-tile, |
88 .icon-ntp .mv-empty-tile { | 88 .icon-ntp .mv-empty-tile { |
89 border: none; | 89 border: none; |
90 border-radius: 2px; | 90 border-radius: 2px; |
91 height: calc(102px + 18px - 12px); | 91 height: calc(102px + 18px - 12px); |
92 margin: 0 12px 4px 12px; | 92 margin: 0 12px 4px 12px; |
93 width: calc(48px + 2 * 18px); | 93 width: calc(48px + 2 * 18px); |
94 } | 94 } |
95 | 95 |
96 .mv-tile { | 96 .mv-tile { |
97 -webkit-transition-duration: 200ms; | |
98 -webkit-transition-property: -webkit-transform, border, | |
99 box-shadow, margin, opacity, width; | |
100 cursor: pointer; | 97 cursor: pointer; |
| 98 transition-duration: 200ms; |
| 99 transition-property: transform, border, box-shadow, margin, opacity, width; |
101 } | 100 } |
102 | 101 |
103 .thumb-ntp .mv-tile:focus:not(:hover) { | 102 .thumb-ntp .mv-tile:focus:not(:hover) { |
104 -webkit-filter: brightness(75%); | 103 -webkit-filter: brightness(75%); |
105 box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2); | 104 box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2); |
106 } | 105 } |
107 | 106 |
108 .icon-ntp .mv-tile:focus { | 107 .icon-ntp .mv-tile:focus { |
109 background: rgba(0,0,0,0.2); | 108 background: rgba(0,0,0,0.2); |
110 } | 109 } |
111 | 110 |
112 .icon-ntp.dark .mv-tile:focus { | 111 .icon-ntp.dark .mv-tile:focus { |
113 background: rgba(255,255,255,0.2); | 112 background: rgba(255,255,255,0.2); |
114 } | 113 } |
115 | 114 |
116 .mv-tile.blacklisted { | 115 .mv-tile.blacklisted { |
117 -webkit-transform: scale(0, 0); | |
118 border: none !important; | 116 border: none !important; |
119 margin: 0; | 117 margin: 0; |
| 118 transform: scale(0, 0); |
120 width: 0; | 119 width: 0; |
121 } | 120 } |
122 | 121 |
123 .thumb-ntp .mv-tile:hover { | 122 .thumb-ntp .mv-tile:hover { |
124 box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2); | 123 box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2); |
125 } | 124 } |
126 | 125 |
127 .mv-tile.mv-blacklist { | 126 .mv-tile.mv-blacklist { |
128 opacity: 0; | 127 opacity: 0; |
129 } | 128 } |
130 | 129 |
131 .mv-tile.mv-blacklist { | 130 .mv-tile.mv-blacklist { |
132 -webkit-transform: scale(0, 0); | |
133 -webkit-transform-origin: 0 41px; | |
134 margin-left: 0; | 131 margin-left: 0; |
135 margin-right: 0; | 132 margin-right: 0; |
| 133 transform: scale(0, 0); |
| 134 transform-origin: 0 41px; |
136 width: 0; | 135 width: 0; |
137 } | 136 } |
138 | 137 |
139 .mv-title { | 138 .mv-title { |
140 border: none; | 139 border: none; |
141 overflow: hidden; | 140 overflow: hidden; |
142 position: absolute; | 141 position: absolute; |
143 text-overflow: clip; | 142 text-overflow: clip; |
144 } | 143 } |
145 | 144 |
(...skipping 100 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
246 border: 8px solid #f2f2f2; | 245 border: 8px solid #f2f2f2; |
247 border-radius: 50%; | 246 border-radius: 50%; |
248 content: ''; | 247 content: ''; |
249 display: block; | 248 display: block; |
250 height: 0; | 249 height: 0; |
251 margin: 39px 66px; | 250 margin: 39px 66px; |
252 width: 0; | 251 width: 0; |
253 } | 252 } |
254 | 253 |
255 .mv-x { | 254 .mv-x { |
256 -webkit-transition: opacity 150ms; | |
257 border: none; | 255 border: none; |
258 cursor: pointer; | 256 cursor: pointer; |
259 opacity: 0; | 257 opacity: 0; |
260 position: absolute; | 258 position: absolute; |
| 259 transition: opacity 150ms; |
261 } | 260 } |
262 | 261 |
263 .thumb-ntp .mv-x { | 262 .thumb-ntp .mv-x { |
264 background: linear-gradient(to left, rgb(242,242,242) 60%, transparent); | 263 background: linear-gradient(to left, rgb(242,242,242) 60%, transparent); |
265 height: 30px; | 264 height: 30px; |
266 right: 0; | 265 right: 0; |
267 width: 40px; | 266 width: 40px; |
268 } | 267 } |
269 | 268 |
270 .icon-ntp .mv-x { | 269 .icon-ntp .mv-x { |
(...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
326 .thumb-ntp .mv-x:active::after { | 325 .thumb-ntp .mv-x:active::after { |
327 background-color: rgb(66,133,244); | 326 background-color: rgb(66,133,244); |
328 } | 327 } |
329 | 328 |
330 .icon-ntp .mv-x:hover::after, | 329 .icon-ntp .mv-x:hover::after, |
331 .icon-ntp .mv-x:active::after { | 330 .icon-ntp .mv-x:active::after { |
332 background-color: inherit; | 331 background-color: inherit; |
333 } | 332 } |
334 | 333 |
335 .mv-tile:hover .mv-x { | 334 .mv-tile:hover .mv-x { |
336 -webkit-transition-delay: 500ms; | |
337 opacity: 1; | 335 opacity: 1; |
| 336 transition-delay: 500ms; |
338 } | 337 } |
339 | 338 |
340 .icon-ntp .mv-tile:hover .mv-x { | 339 .icon-ntp .mv-tile:hover .mv-x { |
341 -webkit-transition-delay: 800ms; | 340 transition-delay: 800ms; |
342 } | 341 } |
343 | 342 |
344 .mv-x:hover { | 343 .mv-x:hover { |
345 -webkit-transition: none; | 344 transition: none; |
346 } | 345 } |
347 | 346 |
348 .mv-favicon { | 347 .mv-favicon { |
349 background-size: 16px; | 348 background-size: 16px; |
350 height: 16px; | 349 height: 16px; |
351 left: 7px; | 350 left: 7px; |
352 margin: 0; | 351 margin: 0; |
353 pointer-events: none; | 352 pointer-events: none; |
354 position: absolute; | 353 position: absolute; |
355 top: 7px; | 354 top: 7px; |
(...skipping 14 matching lines...) Expand all Loading... |
370 } | 369 } |
371 | 370 |
372 .mv-favicon img { | 371 .mv-favicon img { |
373 height: 100%; | 372 height: 100%; |
374 width: 100%; | 373 width: 100%; |
375 } | 374 } |
376 | 375 |
377 .mv-favicon.failed-favicon img { | 376 .mv-favicon.failed-favicon img { |
378 display: none; | 377 display: none; |
379 } | 378 } |
OLD | NEW |