src/chrome/browser/resources/local_ntp/local_ntp.css

   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 }