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