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