local_ntp.css revision a93a17c8d99d686bd4a1511e5504e5e6cc9fcadf 
1/* Copyright 2013 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. */
4body {
5  background-attachment: fixed !important;
6  background-color: white;
7  cursor: default;
8  font-family: arial, sans-serif;
9  margin: 0;
10  overflow-x: hidden;
11}
12
13body.hide-ntp {
14  overflow: hidden;
15}
16
17#ntp-contents {
18  text-align: -webkit-center;
19}
20
21body.hide-ntp #ntp-contents {
22  display: none;
23}
24
25body.fakebox-animate #ntp-contents {
26  -webkit-transition: opacity 100ms linear;
27  opacity: 0.2;
28}
29
30/* Hide suggestions during the fakebox animation. */
31body.fakebox-animate #active-suggestions-container {
32  height: 0;
33  visibility: hidden;
34}
35
36body.fakebox-animate .suggestion-contents {
37  visibility: hidden;
38}
39
40body.google-page #mv-top-margin {
41  display: none;
42}
43
44#logo {
45  background: -webkit-image-set(
46      url(images/google_logo.png) 1x,
47      url(images/2x/google_logo.png) 2x) no-repeat;
48  height: 95px;
49  margin-bottom: 24px;
50  margin-top: 134px;
51  width: 275px;
52}
53
54body.custom-theme #logo {
55  background: -webkit-image-set(
56      url(images/white_google_logo.png) 1x,
57      url(images/2x/white_google_logo.png) 2x) no-repeat;
58}
59
60#fakebox {
61  /* Use GPU compositing if available. */
62  -webkit-transform: translate3d(0, 0, 0);
63  -webkit-transition: -webkit-transform 100ms linear;
64  background-color: #fff;
65  border: 1px solid #b9b9b9;
66  border-radius: 1px;
67  border-top-color: #a0a0a0;
68  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
69  cursor: text;
70  font-size: 18px;
71  height: 36px;
72  max-width: 620px;
73  width: 300px;
74}
75
76#fakebox:hover {
77  border: 1px solid #a9a9a9;
78  border-top-color: #909090;
79}
80
81body.fakebox-focused #fakebox {
82  border: 1px solid rgb(77, 144, 254);
83}
84
85body.fakebox-animate #fakebox {
86  -webkit-transform: translateY(-100px);
87}
88
89#fakebox > input {
90  bottom: 0;
91  left: 0;
92  opacity: 0;
93  position: absolute;
94  right: 0;
95  top: 0;
96}
97
98#cursor {
99  background: #333;
100  bottom: 5px;
101  position: absolute;
102  top: 5px;
103  visibility: hidden;
104  width: 1px;
105}
106
107@-webkit-keyframes blink {
108  0% {
109    opacity: 1;
110  }
111  61.55% {
112    opacity: 0;
113  }
114}
115body.fakebox-focused #cursor {
116  -webkit-animation: blink 1.3s step-end infinite;
117  visibility: inherit;
118}
119
120#most-visited {
121  -webkit-user-select: none;
122  margin-top: 51px;
123  text-align: -webkit-center;
124}
125
126.custom-theme .mv-title,
127.custom-theme #mv-msg {
128  color: #fff;
129  text-shadow: black 0 1px 3px;
130}
131
132.custom-theme #mv-notice-links span {
133  color: #fff;
134  text-shadow: rgb(17, 85, 204) 0 1px 3px;
135}
136
137#mv-tiles {
138  /* Use GPU compositing if available. */
139  -webkit-transform: translate3d(0, 0, 0);
140  height: 260px;
141  overflow: hidden;
142  padding: 0 1em;
143  white-space: nowrap;
144  width: 304px;
145}
146
147@media only screen and (min-width:660px) {
148  #fakebox,
149  #mv-tiles {
150    width: 458px;
151  }
152}
153
154@media only screen and (min-width:820px) {
155  #fakebox,
156  #mv-tiles {
157    width: 618px;
158  }
159}
160
161.mv-row {
162  margin-bottom: 50px;
163}
164
165.mv-row:last-child {
166  margin-bottom: 0;
167}
168
169.mv-tile:first-child {
170  -webkit-margin-start: -1px;
171}
172
173.mv-tile {
174  -webkit-margin-start: 20px;
175  -webkit-transform: translate3d(0, 0, 0);
176  -webkit-transition-duration: 200ms;
177  -webkit-transition-property: -webkit-transform, margin, opacity, width;
178  background: -webkit-linear-gradient(#f2f2f2, #e8e8e8);
179  border: 1px solid transparent;
180  border-radius: 3px;
181  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .09);
182  display: inline-block;
183  height: 83px;
184  width: 138px;
185}
186
187.mv-tile.mv-tile-hide {
188  -webkit-margin-end: -10px;
189  opacity: 0;
190  width: 10px;
191}
192
193/* Class applied to tiles to trigger the blacklist animation. */
194.mv-tile.mv-blacklist {
195  -webkit-transform: scale(0.5);
196  opacity: 0;
197}
198
199.mv-page-ready {
200  border: 1px solid #c0c0c0;
201  cursor: pointer;
202}
203
204.mv-page-ready:hover {
205  border-color: #7f7f7f
206}
207
208.mv-thumb {
209  border: none;
210  cursor: pointer;
211  height: 83px;
212  left: 0;
213  position: absolute;
214  top: 0;
215  width: 138px;
216}
217
218.mv-title {
219  border: none;
220  bottom: -28px;
221  height: 18px;
222  left: 0;
223  position: absolute;
224  width: 140px;
225}
226
227.mv-x-hide .mv-x {
228  display: none;
229}
230
231/* An X button to blacklist a tile or hide the notification. */
232.mv-x {
233  background: transparent url(images/close_2.png);
234  border: none;
235  cursor: default;
236  height: 16px;
237  width: 16px;
238}
239
240.mv-x:hover {
241  background: transparent url(images/close_2_hover.png);
242}
243
244.mv-x:active {
245  background: transparent url(images/close_2_active.png);
246}
247
248.mv-page .mv-x {
249  -webkit-transition: opacity 500ms ease-in-out;
250  opacity: 0;
251  position: absolute;
252  right: 2px;
253  top: 2px;
254}
255
256.mv-page-ready:hover .mv-x {
257  -webkit-transition-delay: 500ms;
258  opacity: 1;
259}
260
261.mv-domain {
262  bottom: 24px;
263  color: #777;
264  margin: 0 7px;
265  position: absolute;
266}
267
268.mv-favicon {
269  bottom: -8px;
270  height: 16px;
271  left: 61px;
272  pointer-events: none;
273  position: absolute;
274  width: 16px;
275}
276
277/* The notification shown when a tile is blacklisted. */
278#mv-notice {
279  font-size: 75%;
280  font-weight: bold;
281  opacity: 1;
282  padding: 10px 0;
283}
284
285#mv-notice span {
286  cursor: default;
287}
288
289/* Links in the notification. */
290#mv-notice-links span {
291  -webkit-margin-start: 6px;
292  color: rgb(17, 85, 204);
293  cursor: pointer;
294  padding: 0 4px;
295}
296
297#mv-notice-links span:hover {
298  text-decoration: underline;
299}
300
301#mv-notice-links .mv-x {
302  -webkit-margin-start: 8px;
303  vertical-align: top;
304}
305
306#mv-notice.mv-notice-delayed-hide {
307  -webkit-transition-delay: 10s;
308  -webkit-transition-property: opacity;
309  opacity: 0;
310}
311
312#mv-notice.mv-notice-hide {
313  display: none;
314}
315
316#attribution {
317  -webkit-user-select: none;
318  bottom: 0;
319  color: #fff;
320  cursor: default;
321  font-size: 75%;
322  position: absolute;
323  right: 13px;
324  text-align: left;
325  z-index: -1;
326}
327
328#attribution img {
329  display: block;
330}
331
332.suggestions-box {
333  border-bottom: 1px #d9d9d9 solid;
334  padding-bottom: 6px;
335  padding-top: 6px;
336}
337
338.suggestion {
339  background: -webkit-image-set(
340      url(images/page_icon.png) 1x,
341      url(images/2x/page_icon.png) 2x) no-repeat;
342  border-radius: 2px;
343  height: 22px;
344  padding-bottom: 2px;
345  padding-top: 3px;
346  white-space: nowrap;
347}
348
349.search {
350  background: -webkit-image-set(
351      url(images/search_icon.png) 1x,
352      url(images/2x/search_icon.png) 2x) no-repeat;
353}
354
355.hovered {
356  background-color: #eee;
357}
358
359.selected {
360  background-color: rgba(181, 213, 255, 0.5);
361}
362
363.suggestion-contents {
364  -webkit-user-select: none;
365  border: none;
366  height: 22px;
367  overflow: hidden;
368  position: absolute;
369}
370
371#pending-suggestions-container {
372  display: none;
373}
374