/* Copyright (c) 2011 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file.
*
* This is the stylesheet used by the touch-enabled new tab page
*/
html {
/* It's necessary to put this here instead of in body in order to get the
background-size of 100% to work properly */
height: 100%;
}
body {
/* This newer linear-gradient form works on Chrome but not mobile Safari */
/*background: -webkit-linear-gradient(top,#252c39,#3e485b,#252c39); */
background: -webkit-gradient(linear, left top, left bottom, from(#252c39),
color-stop(0.5,#3e485b), to(#252c39));
background-size: auto 100%;
font-family: segoe ui, arial, helvetica, sans-serif;
font-size: 14px;
color: white;
margin: 0;
/* Don't highlight links when they're tapped. Safari has bugs here that
show up as flicker when dragging in some situations */
-webkit-tap-highlight-color: transparent;
/* Don't allow selecting text - can occur when dragging */
-webkit-user-select: none;
}
/* The frame is what the slider fits into
*/
#apps-frame {
/* We want this to fill the window except for the region used
by footer
*/
position: fixed;
width: 100%;
top: 0;
bottom: 60px; /* must match #footer height */
overflow: hidden;
}
/* The list holds all the pages and is what the touch events are attached to
*/
#apps-page-list {
/* fill the apps-frame */
height: 100%;
display: -webkit-box;
}
/* The apps-page is the slider card that is moved.
*/
.apps-page {
-webkit-box-sizing: border-box;
padding: 29px;
/* TODO(rbyers): Don't want the final row centered, but would like all rows
* centered. Really I want the page-content width determined by the boxes
* inside of it, but perhaps webkit-box doesn't support that.
* Note that instead of display:inline-block for the apps, I could use
* float:left and have a .app-container:first-child { clear:both; } rule,
* but I'd have to figure out some way to get the vertical position reset.
text-align:center; */
}
.app-container {
width: 128px;
height: 128px;
padding: 16px;
display: inline-block;
vertical-align: top;
}
.app {
text-align: center;
width: 128px;
height: 128px;
/* Animate effects to/from the grabbed state, and the position when drop
is cancelled. I'd like to also animate movement when an app is
re-positioned, but since chrome is doing the layout there is no property
to animate.
TODO(rbyers): Should we take over responsibility for app layout ourself
like the classic NTP's most-visited icons? Or should we extend webkit
somehow to support animation of the position of browser laid-out
elements. */
-webkit-transition-property: -webkit-transform, opacity, zIndex;
-webkit-transition-duration: 200ms;
/* Don't offer the context menu on long-press. */
-webkit-touch-callout: none;
/* Work-around regression bug 74802 */
-webkit-transform: scale3d(1, 1, 1);
}
.app span {
text-decoration: none;
/* TODO(rbyers): why isn't ellipsis working? */
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: white;
}
.app img {
display: block;
width: 96px;
height: 96px;
margin-left: auto;
margin-right: auto;
/* -webkit-mask-image set by JavaScript to the image source */
-webkit-mask-size: 100% 100%;
}
/* Pressed is set when an app is first touched.
By using the mask, pressing causes a darkening effect of just the image */
.app.grabber-pressed img {
opacity: 0.8;
}
/* Grabbed is set (and pressed is cleared) when the app has been held. */
.grabber-grabbed {
opacity: 0.8;
-webkit-transform: scale3d(1.4, 1.4, 1);
}
/* Dragging is set (without grabbed being cleared) when a grabbed app is
moved */
.grabber-dragging {
/* We need to ensure there is no animation applied to its position
(or the drag touch may stop being over top of it */
-webkit-transition: none !important;
/* Ensure the element has a large z-index so that we can get events
for it as it moves over other elements. This is animated as the
element flys back, so we want a large value that will stay large until
its almost home. */
z-index: 100;
}
#footer {
width: 100%;
position: absolute;
bottom: 0;
height: 60px; /* must match #apps-frame bottom */
overflow: hidden;
}
#dot-list {
text-align: center;
margin: 0;
padding: 0;
bottom: 0;
list-style-type: none;
margin-top: 20px;
}
.dot {
display: inline-block;
margin: 10px;
width: 10px;
height: 10px;
background-color: #3d465f;
-webkit-box-sizing: border-box;
border: 1px solid black;
-webkit-border-radius: 2px;
-webkit-transition-property: width, height, margin, -webkit-transform;
-webkit-transition-duration: 500ms;
/* Work-around regression bug 74802 */
-webkit-transform: translate3d(0, 0, 0);
}
#footer.rearrange-mode .dot {
margin: 0px 20px;
width: 30px;
height: 30px;
}
.dot.selected {
background-color: #b3bbd3;
}
.dot.new {
-webkit-transform: translate3d(0, 40px, 0);
}
#trash {
position: absolute;
width: 110px;
height: 100%;
right: 0px;
bottom: 0px;
background-image: url('../shared/images/trash.png');
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: 40px 12px;
/* Work-around chromium bug 74730 by using translate instead of the
GPU-accelerated translate3d */
-webkit-transform: translate(80px, 0);
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 500ms;
}
#trash.hover {
background-image: url('../shared/images/trash-open.png');
}
.app.trashing img {
opacity: 0.3;
}
#footer.rearrange-mode #trash {
-webkit-transform: translate(0, 0);
}
/* Ensure template items are never drawn when the page initially loads */
#app-template {
display: none;
}