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