| OLD | NEW |
| 1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 /* Copyright (c) 2012 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 .close-button { | 5 .close-button { |
| 6 background: no-repeat; | 6 background: no-repeat; |
| 7 background-color: transparent; | 7 background-color: transparent; |
| 8 /* TODO(estade): this should animate between states. */ | 8 /* TODO(estade): this should animate between states. */ |
| 9 background-image: -webkit-image-set( | 9 background-image: -webkit-image-set( |
| 10 url('../../../../ui/resources/default_100_percent/close_bar.png') 1x, | 10 url('../../../../ui/resources/default_100_percent/close_bar.png') 1x, |
| 11 url('../../../../ui/resources/default_200_percent/close_bar.png') 2x); | 11 url('../../../../ui/resources/default_200_percent/close_bar.png') 2x); |
| 12 border: 0; | 12 border: 0; |
| 13 cursor: default; | 13 cursor: default; |
| 14 display: inline-block; | 14 display: inline-block; |
| 15 height: 16px; | 15 height: 16px; |
| 16 padding: 0; | 16 padding: 0; |
| 17 position: absolute; | |
| 18 width: 16px; | 17 width: 16px; |
| 19 z-index: 999; | 18 z-index: 999; |
| 20 } | 19 } |
| 21 | 20 |
| 22 .close-button:hover, | 21 .close-button:hover, |
| 23 .close-button:focus { | 22 .close-button:focus { |
| 24 background-image: -webkit-image-set( | 23 background-image: -webkit-image-set( |
| 25 url('../../../../ui/resources/default_100_percent/close_bar_hover.png') | 24 url('../../../../ui/resources/default_100_percent/close_bar_hover.png') |
| 26 1x, | 25 1x, |
| 27 url('../../../../ui/resources/default_200_percent/close_bar_hover.png') | 26 url('../../../../ui/resources/default_200_percent/close_bar_hover.png') |
| 28 2x); | 27 2x); |
| 29 } | 28 } |
| 30 | 29 |
| 31 .close-button:active { | 30 .close-button:active { |
| 32 background-image: -webkit-image-set( | 31 background-image: -webkit-image-set( |
| 33 url('../../../../ui/resources/default_100_percent/close_bar_pressed.png') | 32 url('../../../../ui/resources/default_100_percent/close_bar_pressed.png') |
| 34 1x, | 33 1x, |
| 35 url('../../../../ui/resources/default_200_percent/close_bar_pressed.png') | 34 url('../../../../ui/resources/default_200_percent/close_bar_pressed.png') |
| 36 2x); | 35 2x); |
| 37 } | 36 } |
| 38 | 37 |
| 39 /* TODO(pedrosimonetti): Organize these rules. */ | 38 /* TODO(pedrosimonetti): Organize these rules. */ |
| 40 .thumbnail .close-button { | 39 .thumbnail .close-button { |
| 41 -webkit-transition: opacity 500ms ease-in-out; | 40 -webkit-transition: opacity 500ms ease-in-out; |
| 42 opacity: 0; | 41 opacity: 0; |
| 42 position: absolute; |
| 43 right: 2px; | 43 right: 2px; |
| 44 top: 2px; | 44 top: 2px; |
| 45 } | 45 } |
| 46 | 46 |
| 47 html[dir=rtl] .thumbnail .close-button { | 47 html[dir=rtl] .thumbnail .close-button { |
| 48 left: 0; | 48 left: 0; |
| 49 right: auto; | 49 right: auto; |
| 50 } | 50 } |
| 51 | 51 |
| 52 .thumbnail:hover .close-button { | 52 .thumbnail:hover .close-button { |
| 53 -webkit-transition-delay: 500ms; | 53 -webkit-transition-delay: 500ms; |
| 54 opacity: 1; | 54 opacity: 1; |
| 55 } | 55 } |
| 56 | 56 |
| 57 .thumbnail .close-button:hover { | 57 .thumbnail .close-button:hover { |
| 58 -webkit-transition: none; | 58 -webkit-transition: none; |
| 59 } | 59 } |
| OLD | NEW |