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