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