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