new_tab.css revision ddb351dbec246cf1fab5ec20d2d5520909041de1 
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 * This is the stylesheet used by the touch-enabled new tab page
6 */
7
8html {
9  /* It's necessary to put this here instead of in body in order to get the
10     background-size of 100% to work properly */
11  height: 100%;
12}
13
14body {
15  background-size: auto 100%;
16  margin: 0;
17  /* Don't highlight links when they're tapped.  Safari has bugs here that
18     show up as flicker when dragging in some situations */
19  -webkit-tap-highlight-color: transparent;
20  /* Don't allow selecting text - can occur when dragging */
21  -webkit-user-select: none;
22}
23
24body,
25button span {
26  font-family: segoe ui, arial, helvetica, sans-serif;
27  font-size: 14px;
28}
29
30#card-slider-frame {
31  /* Must match #footer height. */
32  bottom: 50px;
33  overflow: hidden;
34  /* We want this to fill the window except for the region used
35     by footer */
36  position: fixed;
37  top: 0;
38  width: 100%;
39  -webkit-mask-image: -webkit-linear-gradient(bottom, transparent, black 30px);
40}
41
42#page-list {
43  /* fill the apps-frame */
44  height: 100%;
45  display: -webkit-box;
46}
47
48#footer {
49  background-color: rgba(255, 255, 255, 0.8);
50  bottom: 0;
51  position: fixed;
52  width: 100%;
53}
54
55/* TODO(estade): remove this border hack and replace with a webkit-gradient
56 * border-image on #footer once WebKit supports border-image-slice.
57 * See https://bugs.webkit.org/show_bug.cgi?id=20127 */
58#footer-border {
59  background: -webkit-gradient(linear, left top, right top,
60                               from(#eee), color-stop(0.5, #ccc), to(#eee));
61  height: 1px;
62}
63
64#footer-content {
65  display: -webkit-box;
66  height: 49px;
67  -webkit-box-align: center;
68}
69
70#footer-content > * {
71  margin: 0 9px;
72}
73
74/* TODO(estade): theme this color. */
75#footer-content span {
76  color: #888;
77}
78
79/* TODO(estade): handle overflow better? I tried overflow-x: hidden and
80   overflow-y: visible (for the new dot animation), but this makes a scroll
81   bar appear */
82#dot-list {
83  display: -webkit-box;
84  height: 100%;
85  list-style-type: none;
86  margin: 0;
87  padding: 0;
88  /* Expand to take up all available horizontal space.  */
89  -webkit-box-flex: 1;
90  /* Center child dots. */
91  -webkit-box-pack: center;
92}
93
94/* TODO(estade): improve focus indicator. */
95.dot {
96  border-top: 5px solid rgba(0, 0, 0, .1);
97  color: rgba(0, 0, 0, 0.2);
98  cursor: pointer;
99  font-size: 9pt;
100  height: 100%;
101  margin: 0 10px;
102  padding-top: 5px;
103  text-align: left;
104  width: 60px;
105  -webkit-box-sizing: border-box;
106  -webkit-padding-start: 5px;
107  -webkit-transition: -webkit-transform 500ms,
108                      background-color 250ms;
109}
110
111.dot.selected {
112  border-top: 5px solid rgba(0, 0, 0, .4);
113  color: rgba(0, 0, 0, 0.4);
114}
115
116.dot:hover {
117  background-color: rgba(0, 0, 0, .05);
118}
119
120.dot.new {
121  -webkit-transform: translate(0, 40px);
122}
123
124#trash {
125  position: absolute;
126  width: 110px;
127  height: 100%;
128  right: 0;
129  bottom: 0;
130  background-image: url('../shared/images/trash.png');
131  background-size: 40px 40px;
132  background-repeat: no-repeat;
133  background-position: 40px 12px;
134  /* Work-around chromium bug 74730 by using translate instead of the
135     GPU-accelerated translate3d */
136  -webkit-transform: translate(80px, 0);
137  -webkit-transition-property: -webkit-transform;
138  -webkit-transition-duration: 500ms;
139}
140
141#trash.hover {
142  background-image: url('../shared/images/trash-open.png');
143}
144
145.app.trashing img {
146  opacity: 0.3;
147}
148
149#footer.rearrange-mode #trash {
150  -webkit-transform: translate(0, 0);
151}
152