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

Side by Side Diff: chrome/browser/resources/ntp4/new_tab.css

Issue 8786010: NTP4: Dragging app over trash should be more apparent. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: rebasing estade's one line color change Created 9 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 | Annotate | Revision Log
OLDNEW
1 /* Copyright (c) 2011 The Chromium Authors. All rights reserved. 1 /* Copyright (c) 2011 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 5
6 html { 6 html {
7 font-family: segoe ui, arial, helvetica, sans-serif; 7 font-family: segoe ui, arial, helvetica, sans-serif;
8 font-size: 14px; 8 font-size: 14px;
9 /* It's necessary to put this here instead of in body in order to get the 9 /* It's necessary to put this here instead of in body in order to get the
10 background-size of 100% to work properly */ 10 background-size of 100% to work properly */
(...skipping 222 matching lines...) Expand 10 before | Expand all | Expand 10 after
233 -webkit-box-flex: 1; 233 -webkit-box-flex: 1;
234 } 234 }
235 235
236 #login-status-dismiss { 236 #login-status-dismiss {
237 min-width: 6em; 237 min-width: 6em;
238 } 238 }
239 239
240 /* Trash. *********************************************************************/ 240 /* Trash. *********************************************************************/
241 241
242 #trash { 242 #trash {
243 -webkit-transition: top 200ms, opacity 0;
244 -webkit-transition-delay: 0, 200ms;
243 color: #7F7F7F; 245 color: #7F7F7F;
244 height: 100%; 246 height: 100%;
245 position: absolute; 247 position: absolute;
246 opacity: 0; 248 opacity: 0;
247 right: 0; 249 right: 0;
248 top: 50px; 250 top: 50px;
249 -webkit-transition: top 200ms, opacity 0; 251 }
250 -webkit-transition-delay: 0, 200ms; 252
253 html[dir='rtl'] #trash {
254 left: 0;
255 right: auto;
251 } 256 }
252 257
253 #footer.showing-trash-mode #trash { 258 #footer.showing-trash-mode #trash {
259 -webkit-transition-delay: 0, 0;
260 -webkit-transition-duration: 0, 200ms;
261 opacity: 0.75;
262 top: 0;
263 }
264
265 #footer.showing-trash-mode #trash.drag-target {
254 opacity: 1; 266 opacity: 1;
255 top: 0;
256 -webkit-transition-delay: 0, 0;
257 } 267 }
258 268
259 #trash > span { 269 #trash > span {
260 background-image: url('images/trash.png'); 270 display: inline-block;
261 background-position: 7px; 271 }
262 background-repeat: no-repeat; 272
273 #trash > span:not([class]) {
274 -webkit-padding-end: 7px;
275 -webkit-padding-start: 30px;
263 border: 1px dashed #7f7f7f; 276 border: 1px dashed #7f7f7f;
264 border-radius: 4px; 277 border-radius: 4px;
265 display: inline-block;
266 font-size: 84%; 278 font-size: 84%;
267 padding-bottom: 9px; 279 padding-bottom: 9px;
268 padding-top: 10px; 280 padding-top: 10px;
269 position: relative; 281 position: relative;
270 top: 7px; 282 top: 7px;
271 -webkit-padding-end: 7px; 283 }
272 -webkit-padding-start: 30px; 284
285 #trash > .can,
286 #trash > .lid {
287 background: url('images/trash.png') 0 0 no-repeat;
288 position: absolute;
289 }
290
291 #trash > .lid {
292 -webkit-transition: -webkit-transform 200ms;
293 -webkit-transform-origin: -7% 100%;
294 height: 6px;
295 left: 10px;
296 top: 18px;
297 width: 14px;
298 }
299
300 html[dir='rtl'] #trash > .lid {
301 -webkit-transform-origin: 107% 100%;
302 left: auto;
303 /* NOTE: Intentionally different than LTR value. */
304 right: 9px;
305 }
306
307 #trash > .can {
308 background-position: -1px -4px;
309 border-radius: 0 0 2px 2px;
310 height: 12px;
311 left: 11px;
312 top: 22px;
313 width: 11px;
314 }
315
316 html[dir='rtl'] #trash > .can {
317 left: auto;
318 right: 11px;
319 }
320
321 #footer.showing-trash-mode #trash.drag-target .lid {
322 -webkit-transform: rotate(-45deg);
323 }
324
325 html[dir='rtl'] #footer.showing-trash-mode #trash.drag-target .lid {
326 -webkit-transform: rotate(45deg);
273 } 327 }
274 328
275 /* Page switcher buttons. *****************************************************/ 329 /* Page switcher buttons. *****************************************************/
276 330
277 .page-switcher { 331 .page-switcher {
278 background-color: transparent; 332 background-color: transparent;
279 border: none; 333 border: none;
280 bottom: 0; 334 bottom: 0;
281 font-size: 40px; 335 font-size: 40px;
282 padding: 0; 336 padding: 0;
283 position: absolute; 337 position: absolute;
284 margin: 0; 338 margin: 0;
285 max-width: 150px; 339 max-width: 150px;
286 min-width: 90px; 340 min-width: 90px;
287 outline: none; 341 outline: none;
288 top: 0; 342 top: 0;
289 z-index: 5; 343 z-index: 5;
290 -webkit-transition: width 150ms, right 150ms, background-color 150ms; 344 -webkit-transition: width 150ms, right 150ms, background-color 150ms;
291 } 345 }
OLDNEW
« no previous file with comments | « chrome/browser/resources/ntp4/images/trash.png ('k') | chrome/browser/resources/ntp4/new_tab.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698