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