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 |