• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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
3 * found in the LICENSE file.
4 */
5
6.most-visited {
7  position: absolute;
8}
9
10.most-visited {
11  display: -webkit-box;
12  position: absolute;
13  text-decoration: none;
14  -webkit-box-orient: vertical;
15}
16
17.most-visited:focus {
18  outline: none;
19}
20
21.edit-mode-border {
22  display: -webkit-box;
23  -webkit-box-orient: vertical;
24}
25
26.fills-parent {
27  bottom: 0;
28  display: -webkit-box;
29  left: 0;
30  position: absolute;
31  right: 0;
32  top: 0;
33}
34
35/* filler mode: hide everything except the thumbnail --- leave a grey rectangle
36 * in its place. */
37.filler * {
38  visibility: hidden;
39}
40
41.filler {
42  pointer-events: none;
43}
44
45/* The point of edit-bar-wrapper is to clip the edit bar. Otherwise it can show
46 * through from behind the thumbnail (some themes have a partially transparent
47 * thumbnail border color). */
48.edit-bar-wrapper {
49  height: 23px;
50  overflow: hidden;
51  width: 100%;
52}
53
54/* The edit bar appears on hover. */
55.edit-bar {
56  border-top-left-radius: 5px;
57  border-top-right-radius: 5px;
58  box-sizing: border-box;
59  cursor: move;
60  display: -webkit-box;
61  font-size: 100%;
62  height: 100%;
63  line-height: 20px;
64  padding: 3px;
65  padding-bottom: 0;
66  position: relative;
67  top: 23px;
68  width: 100%;
69  -webkit-box-align: stretch;
70  -webkit-box-orient: horizontal;
71  -webkit-transition: top .15s;
72}
73
74.most-visited:focus .edit-bar,
75.most-visited:hover .edit-bar {
76  top: 0;
77}
78
79.most-visited:hover .edit-bar {
80  /* Delay the appearance of the edit bar on hover. */
81  -webkit-transition-delay: .5s;
82}
83
84.edit-bar > * {
85  display: block;
86  position: relative;
87}
88
89.edit-bar > .spacer {
90  -webkit-box-flex: 1;
91}
92
93.edit-bar > .pin,
94.edit-bar > .remove {
95  width: 16px;
96  height: 16px;
97  cursor: pointer;
98  background-image: no-repeat 50% 50%;
99}
100
101.edit-bar > .pin {
102  background-image: url('../ntp/ntp_pin_off.png');
103}
104
105.edit-bar > .pin:hover {
106  background-image: url('../ntp/ntp_pin_off_h.png');
107}
108
109.edit-bar > .pin:active {
110  background-image: url('../ntp/ntp_pin_off_p.png');
111}
112
113.pinned .edit-bar > .pin {
114  background-image: url('../ntp/ntp_pin_on.png');
115}
116
117.pinned .edit-bar > .pin:hover {
118  background-image: url(../ntp/ntp_pin_on_h.png');
119}
120
121.pinned .edit-bar > .pin:active {
122  background-image: url(../ntp/ntp_pin_on_p.png');
123}
124
125.edit-bar > .remove {
126  background-image: url('../ntp/ntp_close.png');
127}
128
129.edit-bar > .remove:hover {
130  background-image: url('../ntp/ntp_close_h.png');
131}
132
133.edit-bar > .remove:active {
134  background-image: url('../ntp/ntp_close_p.png');
135}
136
137.most-visited .title {
138  background: no-repeat 0 50%;
139  background-size: 16px;
140  bottom: 5px;
141  display: block;
142  left: 0;
143  overflow: hidden;
144  position: absolute;
145  right: 0;
146  text-align: left;
147  text-overflow: ellipsis;
148  white-space: nowrap;
149  -webkit-margin-start: 5px;
150  -webkit-padding-end: 0;
151  -webkit-padding-start: 20px;
152}
153
154.thumbnail {
155  background: no-repeat;
156  /* The extra 2% hides the scrollbar in the screenshot. */
157  background-size: 102%;
158  border-radius: 5px;
159}
160
161.filler .thumbnail {
162  /* TODO(estade): there seems to be a webkit bug where this border is not
163   * always removed when it should be. Investigate. */
164  border: 1px solid;
165  visibility: visible;
166}
167
168.thumbnail-wrapper {
169  border: 3px solid transparent;
170  border-radius: 5px;
171  box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0);
172  display: block;
173  position: relative;
174  z-index: 5;
175  -webkit-box-flex: 1;
176  -webkit-transition: background-color .15s,
177      border-top-left-radius 0, border-top-right-radius 0, box-shadow .15s;
178  /* The border radiuses have 0 transition duration but .15s delay, meaning they
179   * will snap into place after .15s. */
180  -webkit-transition-delay: 0, .15s, .15s, 0;
181}
182
183.filler .thumbnail-wrapper {
184  visibility: visible;
185}
186
187/* Filler tiles can't get focused, but focused tiles can become filler. */
188.most-visited:focus:not(.filler) .thumbnail-wrapper,
189.most-visited:hover .thumbnail-wrapper {
190  border-top-left-radius: 0;
191  border-top-right-radius: 0;
192  box-shadow: 0px 2px 2px hsla(0, 0%, 0%, .5);
193}
194
195.most-visited:hover .thumbnail-wrapper {
196  /* Make the corner radius transitions match the edit bar's slide. */
197  -webkit-transition-delay: 0, .5s, .5s, 0;
198}
199
200.most-visited:focus .thumbnail-wrapper {
201  /* In the focus case, the transition is not delayed. */
202  -webkit-transition-delay: 0, 0, 0, 0;
203}
204