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