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 */ | |
5 | 4 |
6 .most-visited { | 5 .most-visited { |
7 position: absolute; | 6 position: absolute; |
8 z-index: 0; | 7 z-index: 0; |
9 } | 8 } |
10 | 9 |
11 .most-visited { | 10 .most-visited { |
| 11 -webkit-box-orient: vertical; |
12 display: -webkit-box; | 12 display: -webkit-box; |
13 position: absolute; | 13 position: absolute; |
14 text-decoration: none; | 14 text-decoration: none; |
15 -webkit-box-orient: vertical; | |
16 } | 15 } |
17 | 16 |
18 .most-visited:focus { | 17 .most-visited:focus { |
19 outline: none; | 18 outline: none; |
20 } | 19 } |
21 | 20 |
22 .fills-parent { | 21 .fills-parent { |
23 bottom: 0; | 22 bottom: 0; |
24 display: -webkit-box; | 23 display: -webkit-box; |
25 left: 0; | 24 left: 0; |
26 position: absolute; | 25 position: absolute; |
27 right: 0; | 26 right: 0; |
28 top: 0; | 27 top: 0; |
29 } | 28 } |
30 | 29 |
31 /* filler mode: hide everything except the thumbnail --- leave a grey rectangle | 30 /* filler mode: hide everything except the thumbnail --- leave a grey rectangle |
32 * in its place. */ | 31 * in its place. */ |
33 .filler * { | 32 .filler * { |
34 visibility: hidden; | 33 visibility: hidden; |
35 } | 34 } |
36 | 35 |
37 .filler { | 36 .filler { |
38 pointer-events: none; | 37 pointer-events: none; |
39 } | 38 } |
40 | 39 |
41 .most-visited .close-button { | 40 .most-visited .close-button { |
| 41 -webkit-transition: opacity 150ms; |
42 opacity: 0; | 42 opacity: 0; |
43 position: absolute; | 43 position: absolute; |
44 right: 0; | 44 right: 0; |
45 top: 0; | 45 top: 0; |
46 z-index: 5; | 46 z-index: 5; |
47 -webkit-transition: opacity 150ms; | |
48 } | 47 } |
49 | 48 |
50 html[dir=rtl] .most-visited .close-button { | 49 html[dir=rtl] .most-visited .close-button { |
51 left: 0; | 50 left: 0; |
52 right: auto; | 51 right: auto; |
53 } | 52 } |
54 | 53 |
55 .most-visited:hover .close-button { | 54 .most-visited:hover .close-button { |
| 55 -webkit-transition-delay: 500ms; |
56 opacity: 1; | 56 opacity: 1; |
57 -webkit-transition-delay: 500ms; | |
58 } | 57 } |
59 | 58 |
60 .most-visited .close-button:hover { | 59 .most-visited .close-button:hover { |
61 -webkit-transition: none; | 60 -webkit-transition: none; |
62 } | 61 } |
63 | 62 |
64 .most-visited .favicon { | 63 .most-visited .favicon { |
65 -webkit-margin-start: 5px; | 64 -webkit-margin-start: 5px; |
66 background: no-repeat left 50%; | 65 background: no-repeat left 50%; |
67 bottom: 7px; | 66 bottom: 7px; |
(...skipping 25 matching lines...) Expand all Loading... |
93 display: block; | 92 display: block; |
94 height: 23px; | 93 height: 23px; |
95 overflow: hidden; | 94 overflow: hidden; |
96 padding-top: 8px; | 95 padding-top: 8px; |
97 text-align: center; | 96 text-align: center; |
98 text-overflow: ellipsis; | 97 text-overflow: ellipsis; |
99 white-space: nowrap; | 98 white-space: nowrap; |
100 } | 99 } |
101 | 100 |
102 .thumbnail { | 101 .thumbnail { |
| 102 -webkit-transition: opacity 150ms; |
103 background: no-repeat; | 103 background: no-repeat; |
104 /* This shows for missing thumbnails. */ | 104 /* This shows for missing thumbnails. */ |
105 background-color: #eee; | 105 background-color: #eee; |
106 background-size: 100%; | 106 background-size: 100%; |
107 border-radius: 3px; | 107 border-radius: 3px; |
108 /* These max dimensions are not necessary, as the sizing logic in the .js | 108 /* These max dimensions are not necessary, as the sizing logic in the .js |
109 * should be sufficient, but they're here for extra insurance. We never want | 109 * should be sufficient, but they're here for extra insurance. We never want |
110 * to scale a thumbnail larger than this size. */ | 110 * to scale a thumbnail larger than this size. */ |
111 max-height: 132px; | 111 max-height: 132px; |
112 max-width: 212px; | 112 max-width: 212px; |
113 -webkit-transition: opacity 150ms; | |
114 } | 113 } |
115 | 114 |
116 .filler .thumbnail { | 115 .filler .thumbnail { |
117 /* TODO(estade): there seems to be a webkit bug where this border is not | 116 /* TODO(estade): there seems to be a webkit bug where this border is not |
118 * always removed when it should be. Investigate. */ | 117 * always removed when it should be. Investigate. */ |
119 border: 1px solid; | 118 border: 1px solid; |
120 visibility: visible; | 119 visibility: visible; |
121 } | 120 } |
122 | 121 |
123 .thumbnail-shield { | 122 .thumbnail-shield { |
124 border-radius: 3px; | |
125 background: -webkit-linear-gradient(rgba(255, 255, 255, 0), | 123 background: -webkit-linear-gradient(rgba(255, 255, 255, 0), |
126 rgba(255, 255, 255, 0) 50%, | 124 rgba(255, 255, 255, 0) 50%, |
127 rgba(255, 255, 255, 0.9)); | 125 rgba(255, 255, 255, 0.9)); |
| 126 border-radius: 3px; |
128 } | 127 } |
129 | 128 |
130 /* TODO(dbeam): Remove this when printing of -webkit-linear-gradient() works. */ | 129 /* TODO(dbeam): Remove this when printing of -webkit-linear-gradient() works. */ |
131 @media print { | 130 @media print { |
132 .thumbnail-shield { | 131 .thumbnail-shield { |
133 background: none; | 132 background: none; |
134 } | 133 } |
135 } | 134 } |
136 | 135 |
137 .most-visited:focus .thumbnail, | 136 .most-visited:focus .thumbnail, |
(...skipping 15 matching lines...) Expand all Loading... |
153 opacity: 0.9; | 152 opacity: 0.9; |
154 } | 153 } |
155 | 154 |
156 /* The thumbnail gets a shadow when clicked, but not when the click is on the | 155 /* The thumbnail gets a shadow when clicked, but not when the click is on the |
157 * close button. */ | 156 * close button. */ |
158 .most-visited:active .close-button:not(:active) + .thumbnail .thumbnail-shield { | 157 .most-visited:active .close-button:not(:active) + .thumbnail .thumbnail-shield { |
159 -webkit-box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.2); | 158 -webkit-box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.2); |
160 } | 159 } |
161 | 160 |
162 .thumbnail-wrapper { | 161 .thumbnail-wrapper { |
| 162 -webkit-box-flex: 1; |
| 163 -webkit-transition: background-color 150ms; |
163 border: 1px solid transparent; | 164 border: 1px solid transparent; |
164 border-radius: 3px; | 165 border-radius: 3px; |
165 display: block; | 166 display: block; |
166 position: relative; | 167 position: relative; |
167 z-index: 5; | 168 z-index: 5; |
168 -webkit-box-flex: 1; | |
169 -webkit-transition: background-color 150ms; | |
170 } | 169 } |
171 | 170 |
172 .filler .thumbnail-wrapper { | 171 .filler .thumbnail-wrapper { |
173 visibility: visible; | 172 visibility: visible; |
174 } | 173 } |
175 | 174 |
176 /* 'finishing-drag' is the state we are in after dropping on the trash can. | 175 /* 'finishing-drag' is the state we are in after dropping on the trash can. |
177 * Override opacity of the tile to 1, so that the new tile animation | 176 * Override opacity of the tile to 1, so that the new tile animation |
178 * occurs simultaneously with the trash animation. */ | 177 * occurs simultaneously with the trash animation. */ |
179 .tile.dragging.finishing-drag { | 178 .tile.dragging.finishing-drag { |
180 opacity: 1; | 179 opacity: 1; |
181 } | 180 } |
182 | 181 |
183 /* Don't display the new tile until there's something to show. */ | 182 /* Don't display the new tile until there's something to show. */ |
184 .blacklisted { | 183 .blacklisted { |
185 opacity: 0; | 184 opacity: 0; |
186 } | 185 } |
OLD | NEW |