Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(40)

Side by Side Diff: chrome/browser/resources/local_ntp/most_visited_single.css

Issue 2535573002: Reduce usage of webkit CSS prefixes in chrome/browser/resources (Closed)
Patch Set: rebase Created 3 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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
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
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 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698