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 8 html { 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 14 body { 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 24 body, 25 button 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