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

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: CSSOM Created 4 years 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 76 matching lines...) Expand 10 before | Expand all | Expand 10 after
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
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
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
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 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698