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: 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/google_logo.png@2x');
  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/white_google_logo.png@2x');
  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   cursor: text;
  61   font-size: 18px;
  62   height: 36px;
  63   line-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 .classical #fakebox {
  77   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  78 }
  79
  80 body.fakebox-focused #fakebox {
  81   border: 1px solid rgb(77, 144, 254);
  82 }
  83
  84 #fakebox > input {
  85   bottom: 0;
  86   box-sizing: border-box;
  87   left: 0;
  88   margin: 0;
  89   opacity: 0;
  90   padding-left: 8px;
  91   position: absolute;
  92   top: 0;
  93   width: 100%;
  94 }
  95
  96 body[dir=rtl] #fakebox > input {
  97   padding-left: 0;
  98   padding-right: 8px;
  99   right: 0;
 100 }
 101
 102 #fakebox-text {
 103   color: #bbb;
 104   font-family: arial, sans-serif;
 105   font-size: 16px;
 106   height: 16px;
 107   left: 9px;
 108   margin-top: 1px;
 109   position: absolute;
 110   vertical-align: middle;
 111   visibility: hidden;
 112 }
 113
 114 body[dir=rtl] #fakebox-text {
 115   left: auto;
 116   right: 9px;
 117 }
 118
 119 #cursor {
 120   background: #333;
 121   bottom: 5px;
 122   left: 9px;
 123   position: absolute;
 124   top: 5px;
 125   visibility: hidden;
 126   width: 1px;
 127 }
 128
 129 body[dir=rtl] #cursor {
 130   left: auto;
 131   right: 9px;
 132 }
 133
 134 @-webkit-keyframes blink {
 135   0% {
 136     opacity: 1;
 137   }
 138   61.55% {
 139     opacity: 0;
 140   }
 141 }
 142
 143 body.fakebox-drag-focused #fakebox-text,
 144 body.fakebox-focused #fakebox-text {
 145   visibility: inherit;
 146 }
 147
 148 body.fakebox-drag-focused #cursor {
 149   visibility: inherit;
 150 }
 151
 152 body.fakebox-focused #cursor {
 153   -webkit-animation: blink 1.3s step-end infinite;
 154   visibility: inherit;
 155 }
 156
 157 #most-visited {
 158   -webkit-user-select: none;
 159   text-align: -webkit-center;
 160 }
 161
 162 .classical #most-visited {
 163   margin-top: 51px;
 164 }
 165
 166 .md #most-visited {
 167   margin-top: 50px;
 168 }
 169
 170 #mv-tiles {
 171   margin: 0;
 172   position: relative;
 173   text-align: left;
 174 }
 175
 176 body[dir=rtl] #mv-tiles {
 177   text-align: right;
 178 }
 179
 180 .classical #mv-tiles {
 181   height: calc(2 * 138px);
 182   line-height: 138px;
 183 }
 184
 185 .md #mv-tiles {
 186   height: calc(2 * 126px);
 187   line-height: 126px;
 188 }
 189
 190 .mv-tile {
 191   display: inline-block;
 192   position: relative;
 193   vertical-align: top;
 194 }
 195
 196 .mv-page-ready {
 197   cursor: pointer;
 198   outline: none;
 199 }
 200
 201 .classical .mv-tile {
 202   background: linear-gradient(#f2f2f2, #e8e8e8);
 203   border-radius: 3px;
 204   box-shadow: inset 0 2px 3px rgba(0, 0, 0, .09);
 205   height: 85px;
 206   margin-left: 10px;
 207   margin-right: 10px;  /* Total horizontal margins add to TILE_MARGIN. */
 208   width: 140px;
 209 }
 210
 211 .classical .mv-page-ready {
 212   -webkit-transition-duration: 200ms;
 213   -webkit-transition-property: -webkit-transform, margin, opacity, width;
 214 }
 215
 216 .md .mv-tile {
 217   background: #f2f2f2;
 218   border-radius: 1px;
 219   height: 114px;
 220   margin-left: 6px;
 221   margin-right: 6px;
 222   width: 146px;
 223 }
 224
 225 .md .mv-page-ready {
 226   -webkit-transition-duration: 200ms;
 227   -webkit-transition-property: -webkit-transform, margin, opacity, width;
 228 }
 229
 230 .md.dark .mv-tile {
 231   background: #333;
 232 }
 233
 234 .mv-tile-inner {
 235   visibility: hidden;
 236 }
 237
 238 .mv-page-ready .mv-tile-inner {
 239   visibility: visible;
 240 }
 241
 242 /* Class applied to tiles to trigger the blacklist animation. */
 243 .mv-tile.mv-blacklist {
 244   opacity: 0;
 245 }
 246
 247 .classical .mv-tile.mv-blacklist {
 248   -webkit-transform: scale(0.5);
 249 }
 250
 251 .md .mv-tile.mv-blacklist {
 252   -webkit-transform: scale(0, 0);
 253   -webkit-transform-origin: 0 41px;
 254   margin-left: 0;
 255   margin-right: 0;
 256   width: 0;
 257 }
 258
 259 /* .mv-mask is used to alter tile appearance, including borders, shadows, */
 260 /* and backgrounds. */
 261 .mv-mask {
 262   background: transparent;
 263   border-style: solid;
 264   border-width: 1px;
 265   cursor: pointer;
 266   pointer-events: none;
 267   position: absolute;
 268 }
 269
 270 .classical .mv-mask {
 271   box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.09);
 272 }
 273
 274 .md .mv-mask {
 275   border-color: transparent;
 276   border-radius: 2px;
 277   height: 112px;
 278   width: 144px;
 279 }
 280
 281 /* Styling border. */
 282 .classical .mv-page-ready .mv-mask {
 283   border-style: solid;
 284 }
 285
 286 .default-theme.classical .mv-page-ready .mv-mask {
 287   border-color: #c0c0c0;
 288 }
 289
 290 .default-theme.classical .mv-page-ready:hover .mv-mask,
 291 .default-theme.classical .mv-page-ready:focus .mv-mask {
 292   border-color: #7f7f7f;
 293 }
 294
 295 .default-theme.md.old-hover .mv-page-ready:hover .mv-mask,
 296 .default-theme.md.old-hover .mv-page-ready:focus .mv-mask {
 297   border-color: #999;
 298 }
 299
 300 .default-theme.md.dark .mv-page-ready:hover .mv-mask,
 301 .default-theme.md.dark .mv-page-ready:focus .mv-mask,
 302 .default-theme.md.old-hover.dark .mv-page-ready:hover .mv-mask {
 303   border-color: #888;
 304 }
 305
 306 /* Styling shadow. */
 307 .md .mv-page-ready .mv-mask {
 308   -webkit-transition: box-shadow 200ms, border 200ms;
 309 }
 310 .default-theme.md .mv-page-ready:hover .mv-mask {
 311   box-shadow: 0 2px 8px rgba(0,0,0,0.3);
 312 }
 313
 314 .default-theme..md.dark .mv-page-ready:hover .mv-mask,
 315 .default-theme..md.old-hover .mv-page-ready:hover .mv-mask {
 316   box-shadow: none;
 317 }
 318
 319 /* Styling background. */
 320 .classical .mv-page:focus .mv-mask {
 321   -webkit-transition: background-color 100ms ease-in-out;
 322   background: linear-gradient(rgba(255, 255, 255, 0),
 323     rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.9));
 324   background-color: rgba(0, 0, 0, 0.35);
 325 }
 326
 327 .md .mv-page:focus .mv-mask {
 328   -webkit-transition: box-shadow 200ms, border 200ms,
 329       background-color 100ms ease-in-out, ;
 330   background: rgba(0, 0, 0, 0.3);
 331   border-color: rgba(0, 0, 0, 0.3);
 332 }
 333
 334 .mv-title {
 335   border: none;
 336   position: absolute;
 337 }
 338
 339 .classical .mv-title {
 340   bottom: -27px;
 341   height: 18px;
 342   left: 0;
 343   width: 140px;
 344 }
 345
 346 .md .mv-title {
 347   bottom: auto;
 348   height: 15px;
 349   left: 28px;
 350   top: 7px;
 351   width: 112px;
 352 }
 353
 354 @media (-webkit-min-device-pixel-ratio: 2) {
 355   .md .mv-title {
 356     top: 6px;
 357   }
 358 }
 359
 360 body[dir=rtl] .md .mv-title {
 361   left: auto;
 362   right: 28px;
 363 }
 364
 365 .mv-thumb {
 366   border: none;
 367   cursor: pointer;
 368   position: absolute;
 369 }
 370
 371 .classical .mv-thumb,
 372 .classical .mv-mask {
 373   height: 83px;
 374   width: 138px;
 375 }
 376
 377 .classical .mv-thumb {
 378   border-radius: 2px;
 379   left: 1px;
 380   top: 1px;
 381 }
 382
 383 .classical .mv-mask {
 384   border-radius: 3px;
 385   left: 0;
 386   top: 0;
 387 }
 388
 389 .md .mv-thumb,
 390 .md .mv-thumb-fallback {
 391   border-radius: 0;
 392   height: 82px;
 393   left: 4px;
 394   top: 28px;
 395   width: 138px;
 396 }
 397
 398 body[dir=rtl] .md .mv-thumb,
 399 body[dir=rtl] .md .mv-thumb-fallback {
 400   left: auto;
 401   right: 4px;
 402 }
 403
 404 .md .mv-thumb-fallback {
 405   background: #fff;
 406   padding: none;
 407   position: absolute;
 408 }
 409
 410 .md.dark .mv-thumb-fallback {
 411   background: #555;
 412 }
 413
 414 .md .mv-thumb-fallback .dot {
 415   background: #f2f2f2;
 416   border-radius: 16px;
 417   display: block;
 418   height: 32px;
 419   left: 50%;
 420   margin-left: -16px;
 421   margin-top: -16px;
 422   position: absolute;
 423   top: 50%;
 424   width: 32px;
 425 }
 426
 427 .md.dark .mv-thumb-fallback .dot {
 428   background: #333;
 429 }
 430
 431 .mv-x-hide .mv-x {
 432   display: none;
 433 }
 434
 435 /* An X button to blacklist a tile or hide the notification. */
 436 .mv-x {
 437   background-color: transparent;
 438   background-image: url(images/close_2.png);
 439   border: none;
 440   cursor: default;
 441   height: 16px;
 442   width: 16px;
 443 }
 444
 445 .mv-page .mv-x {
 446   -webkit-transition: opacity 150ms;
 447   opacity: 0;
 448   position: absolute;
 449 }
 450
 451 .mv-x:hover,
 452 #mv-notice-x:focus {
 453   background-image: url(images/close_2_hover.png);
 454 }
 455
 456 .mv-x:active {
 457   background-image: url(images/close_2_active.png);
 458 }
 459
 460 .classical .mv-page .mv-x {
 461   right: 2px;
 462   top: 2px;
 463 }
 464
 465 .md .mv-x {
 466   background-color: rgba(187,187,187,0.8);
 467   border-radius: 8px;
 468 }
 469
 470 .md.dark .mv-x {
 471   background-color: rgba(119,119,119,0.8);
 472 }
 473
 474 .md .mv-page .mv-x {
 475   right: 4px;
 476   top: 5px;
 477 }
 478
 479 body[dir=rtl] .classical .mv-page .mv-x {
 480   left: 2px;
 481   right: auto;
 482 }
 483
 484 body[dir=rtl] .md .mv-page .mv-x {
 485   left: 4px;
 486   right: auto;
 487 }
 488
 489 .mv-page-ready:hover .mv-x {
 490   -webkit-transition-delay: 500ms;
 491   opacity: 1;
 492 }
 493
 494 .mv-page-ready .mv-x:hover {
 495   -webkit-transition: none;
 496 }
 497
 498 .mv-favicon {
 499   background-size: 16px;
 500   height: 16px;
 501   pointer-events: none;
 502   position: absolute;
 503   width: 16px;
 504 }
 505
 506 .classical .mv-favicon {
 507   bottom: -7px;
 508   left: 62px;
 509 }
 510
 511 .md .mv-favicon {
 512   left: 6px;
 513   top: 6px;
 514 }
 515
 516 body[dir=rtl] .md .mv-favicon {
 517   left: auto;
 518   right: 6px;
 519   top: 6px;
 520 }
 521
 522 /* The notification shown when a tile is blacklisted. */
 523 #mv-notice {
 524   font-size: 12px;
 525   font-weight: bold;
 526   opacity: 1;
 527   padding: 10px 0;
 528 }
 529
 530 #mv-notice span {
 531   cursor: default;
 532 }
 533
 534 /* Links in the notification. */
 535 #mv-notice-links span {
 536   -webkit-margin-start: 6px;
 537   color: rgb(17, 85, 204);
 538   cursor: pointer;
 539   outline: none;
 540   padding: 0 4px;
 541 }
 542
 543 #mv-notice-links span:hover,
 544 #mv-notice-links span:focus,
 545 #recent-tabs:hover {
 546   text-decoration: underline;
 547 }
 548
 549 .default-theme.dark #mv-msg {
 550   color: #fff;
 551 }
 552
 553 #mv-notice-links .mv-x {
 554   -webkit-margin-start: 8px;
 555   outline: none;
 556   vertical-align: top;
 557 }
 558
 559 #mv-notice.mv-notice-delayed-hide {
 560   -webkit-transition-delay: 10s;
 561   -webkit-transition-property: opacity;
 562   opacity: 0;
 563 }
 564
 565 #mv-notice.mv-notice-hide {
 566   display: none;
 567 }
 568
 569 #attribution {
 570   -webkit-user-select: none;
 571   bottom: 0;
 572   color: #fff;
 573   cursor: default;
 574   display: inline-block;
 575   font-size: 13px;
 576   position: fixed;
 577   right: 8px;
 578   text-align: left;
 579   z-index: -1;
 580 }
 581
 582 body[dir=rtl] #attribution {
 583   text-align: right;
 584 }
 585
 586 #recent-tabs {
 587   background: #fff;
 588   border: 1px solid #c0c0c0;
 589   border-radius: 2px;
 590   bottom: 0;
 591   color: rgb(17, 85, 204);
 592   cursor: pointer;
 593   font-family: Arial;
 594   font-size: 14px;
 595   opacity: 0.9;
 596   padding: 3px;
 597   position: fixed;
 598   right: 8px;
 599 }
 600
 601 body[dir=rtl] #attribution,body[dir=rtl] #recent-tabs {
 602   left: 8px;
 603   right: auto;
 604 }