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 .des-mat #most-visited {
 172   margin-top: 64px;
 173 }
 174
 175 /* Non-Google pages have no Fakebox, so don't need top margin. */
 176 .non-google-page #most-visited {
 177   margin-top: 0;
 178 }
 179
 180 #mv-tiles {
 181   margin: 0;
 182   position: relative;
 183   text-align: left;
 184 }
 185
 186 html[dir=rtl] #mv-tiles {
 187   text-align: right;
 188 }
 189
 190 .des-mat #mv-tiles {
 191   height: calc(2 * 146px);
 192   line-height: 146px;
 193 }
 194
 195 .mv-tile {
 196   display: inline-block;
 197   position: relative;
 198   vertical-align: top;
 199 }
 200
 201 .mv-page-ready {
 202   cursor: pointer;
 203   outline: none;
 204 }
 205
 206 .des-mat .mv-tile {
 207   background: rgb(242,242,242);
 208   border-radius: 2px;
 209   height: 130px;
 210   margin-left: 8px;
 211   margin-right: 8px;
 212   width: 156px;
 213 }
 214
 215 .des-mat .mv-page-ready {
 216   -webkit-transition-duration: 200ms;
 217   -webkit-transition-property: -webkit-transform, margin, opacity, width;
 218 }
 219
 220 .des-mat.dark .mv-tile {
 221   background: rgb(51,51,51);
 222 }
 223
 224 .mv-tile-inner {
 225   visibility: hidden;
 226 }
 227
 228 .mv-page-ready .mv-tile-inner {
 229   visibility: visible;
 230 }
 231
 232 /* Class applied to tiles to trigger the blacklist animation. */
 233 .mv-tile.mv-blacklist {
 234   opacity: 0;
 235 }
 236
 237 .des-mat .mv-tile.mv-blacklist {
 238   -webkit-transform: scale(0, 0);
 239   -webkit-transform-origin: 0 41px;
 240   margin-left: 0;
 241   margin-right: 0;
 242   width: 0;
 243 }
 244
 245 /* .mv-mask is used to alter tile appearance, including borders, shadows, */
 246 /* and backgrounds. */
 247 .mv-mask {
 248   background: transparent;
 249   border-style: solid;
 250   border-width: 1px;
 251   cursor: pointer;
 252   pointer-events: none;
 253   position: absolute;
 254 }
 255
 256 .des-mat .mv-mask {
 257   border-color: transparent;
 258   border-radius: 2px;
 259   height: calc(130px - 2px);
 260   width: calc(156px - 2px);
 261 }
 262
 263 /* Styling border. */
 264 .default-theme.des-mat.old-hover .mv-page-ready:hover .mv-mask,
 265 .default-theme.des-mat.old-hover .mv-page-ready .mv-focused ~ .mv-mask {
 266   border-color: #999;
 267 }
 268
 269 .default-theme.des-mat.dark .mv-page-ready:hover .mv-mask,
 270 .default-theme.des-mat.dark .mv-page-ready .mv-focused ~ .mv-mask,
 271 .default-theme.des-mat.old-hover.dark .mv-page-ready:hover .mv-mask,
 272 .default-theme.des-mat.old-hover.dark .mv-page-ready .mv-focused ~ .mv-mask {
 273   border-color: #888;
 274 }
 275
 276 /* Styling shadow. */
 277 .default-theme.des-mat .mv-page-ready .mv-mask {
 278   -webkit-transition: box-shadow 200ms, border 200ms;
 279 }
 280
 281 .default-theme.des-mat .mv-page-ready:hover .mv-mask,
 282 .default-theme.des-mat .mv-page-ready .mv-focused ~ .mv-mask {
 283   box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2);
 284 }
 285
 286 .default-theme.des-mat.dark .mv-page-ready:hover .mv-mask,
 287 .default-theme.des-mat.old-hover .mv-page-ready:hover .mv-mask {
 288   box-shadow: none;
 289 }
 290
 291 /* Styling background. */
 292 .des-mat .mv-page .mv-focused ~ .mv-mask {
 293   -webkit-transition: box-shadow 200ms, border 200ms,
 294       background-color 100ms ease-in-out;
 295   background: rgba(0, 0, 0, 0.3);
 296   border-color: rgba(0, 0, 0, 0.3);
 297 }
 298
 299 .mv-title {
 300   border: none;
 301   position: absolute;
 302 }
 303
 304 .des-mat .mv-title {
 305   bottom: auto;
 306   height: 15px;
 307   left: 32px;
 308   top: 9px;
 309   width: calc(156px - 32px - 4px);
 310 }
 311
 312 @media (-webkit-min-device-pixel-ratio: 2) {
 313   .des-mat .mv-title {
 314     top: 8px;
 315   }
 316 }
 317
 318 html[dir=rtl] .des-mat .mv-title {
 319   left: auto;
 320   right: 32px;
 321 }
 322
 323 .mv-thumb {
 324   border: none;
 325   cursor: pointer;
 326   position: absolute;
 327 }
 328
 329 .des-mat .mv-thumb,
 330 .des-mat .mv-thumb-fallback {
 331   border-radius: 0;
 332   height: 94px;
 333   left: 4px;
 334   top: 32px;
 335   width: 148px;
 336 }
 337
 338 html[dir=rtl] .des-mat .mv-thumb,
 339 html[dir=rtl] .des-mat .mv-thumb-fallback {
 340   left: auto;
 341   right: 4px;
 342 }
 343
 344 .des-mat .mv-thumb-fallback {
 345   background-color: #fff;
 346   position: absolute;
 347 }
 348
 349 .des-mat.dark .mv-thumb-fallback {
 350   background-color: #555;
 351 }
 352
 353 .des-mat .mv-thumb-fallback .dot {
 354   background-color: #f2f2f2;
 355   border-radius: 8px;
 356   display: block;
 357   height: 16px;
 358   left: 50%;
 359   margin-left: -8px;
 360   margin-top: -8px;
 361   position: absolute;
 362   top: 50%;
 363   width: 16px;
 364 }
 365
 366 .des-mat.dark .mv-thumb-fallback .dot {
 367   background-color: #333;
 368 }
 369
 370 .mv-x-hide .mv-x {
 371   display: none;
 372 }
 373
 374 /* An X button to blacklist a tile or hide the notification. */
 375 .mv-x {
 376   background-color: transparent;
 377   border: none;
 378   cursor: pointer;
 379 }
 380
 381 .mv-page .mv-x {
 382   -webkit-transition: opacity 150ms;
 383   opacity: 0;
 384   position: absolute;
 385 }
 386
 387 #mv-notice-x {
 388   display: inline-block;
 389   position: relative;
 390 }
 391
 392 .des-mat #mv-notice-x {
 393   -webkit-transform: translate(0,-8px);
 394 }
 395
 396 .des-mat .mv-x {
 397   border-radius: 2px;
 398   height: 32px;
 399   width: 32px;
 400 }
 401
 402 .des-mat .mv-x .mv-x-inner {
 403   -webkit-mask-image: -webkit-image-set(
 404       url(images/close_3_mask.png) 1x,
 405       url(images/close_3_mask.png@2x) 2x);
 406   -webkit-mask-repeat: no-repeat;
 407   -webkit-mask-size: 10px 10px;
 408   background-color: rgba(90,90,90,0.7);
 409   height: 10px;
 410   left: 50%;
 411   margin-left: -5px;
 412   margin-top: -5px;
 413   position: absolute;
 414   top: 50%;
 415   width: 10px;
 416 }
 417
 418 .des-mat.dark .mv-x .mv-x-inner {
 419   background-color: rgba(255,255,255,0.7);
 420 }
 421
 422 .des-mat .mv-x:hover .mv-x-inner,
 423 .des-mat #mv-notice-x:focus .mv-x-inner {
 424   background-color: rgb(90,90,90);
 425 }
 426
 427 .des-mat.dark .mv-x:hover .mv-x-inner,
 428 .des-mat.dark #mv-notice-x:focus .mv-x-inner {
 429   background-color: rgb(255,255,255);
 430 }
 431
 432 .des-mat .mv-x:active .mv-x-inner,
 433 .des-mat #mv-notice-x:active .mv-x-inner {
 434   background-color: rgb(66,133,244);
 435 }
 436
 437 .des-mat.dark .mv-x:active .mv-x-inner,
 438 .des-mat.dark #mv-notice-x:active .mv-x-inner {
 439   background-color: rgba(255,255,255,0.5);
 440 }
 441
 442 .des-mat .mv-page .mv-x {
 443   /* background color needs to match .des-mat .mv-tile */
 444   background: linear-gradient(to right, transparent, rgb(242,242,242) 10%);
 445   right: 0;
 446   top: 0;
 447 }
 448
 449 html[dir=rtl] .des-mat .mv-page .mv-x {
 450   /* background color needs to match .des-mat .mv-tile */
 451   background: linear-gradient(to left, transparent, rgb(242,242,242) 10%);
 452   left: 0;
 453   right: auto;
 454 }
 455
 456 .des-mat.dark .mv-page .mv-x {
 457   /* background color needs to match .des-mat.dark .mv-tile */
 458   background: linear-gradient(to right, transparent, rgba(51,51,51,0.9) 30%);
 459 }
 460
 461 html[dir=rtl] .des-mat.dark .mv-page .mv-x {
 462   /* background color needs to match .des-mat.dark .mv-tile */
 463   background: linear-gradient(to left, transparent, rgba(51,51,51,0.9) 30%);
 464 }
 465
 466 .mv-page-ready:hover .mv-x {
 467   -webkit-transition-delay: 500ms;
 468   opacity: 1;
 469 }
 470
 471 .mv-page-ready .mv-x:hover {
 472   -webkit-transition: none;
 473 }
 474
 475 .mv-favicon {
 476   background-size: 16px;
 477   height: 16px;
 478   pointer-events: none;
 479   position: absolute;
 480   width: 16px;
 481 }
 482
 483 .des-mat .mv-favicon {
 484   left: 8px;
 485   top: 8px;
 486 }
 487
 488 html[dir=rtl] .des-mat .mv-favicon {
 489   left: auto;
 490   right: 8px;
 491   top: 8px;
 492 }
 493
 494 .des-mat .mv-favicon-fallback {
 495   background-image: -webkit-image-set(
 496       url(images/ntp_default_favicon.png) 1x,
 497       url(images/ntp_default_favicon.png@2x) 2x);
 498   background-repeat: no-repeat;
 499   background-size: 16px 16px;
 500 }
 501
 502 /* The notification shown when a tile is blacklisted. */
 503 #mv-notice {
 504   font-size: 12px;
 505   font-weight: bold;
 506   opacity: 1;
 507   padding: 10px 0;
 508 }
 509
 510 #mv-notice span {
 511   cursor: default;
 512   display: inline-block;
 513   height: 16px;
 514   line-height: 16px;
 515   vertical-align: top;
 516 }
 517
 518 /* Links in the notification. */
 519 #mv-notice-links span {
 520   -webkit-margin-start: 6px;
 521   color: rgb(17, 85, 204);
 522   cursor: pointer;
 523   outline: none;
 524   padding: 0 4px;
 525 }
 526
 527 #mv-notice-links span:hover,
 528 #mv-notice-links span:focus,
 529 #recent-tabs:hover {
 530   text-decoration: underline;
 531 }
 532
 533 .default-theme.dark #mv-msg {
 534   color: #fff;
 535 }
 536
 537 .default-theme.dark #mv-notice-links span {
 538   color: #fff;
 539 }
 540
 541 #mv-notice-links .mv-x {
 542   -webkit-margin-start: 8px;
 543   outline: none;
 544   vertical-align: top;
 545 }
 546
 547 #mv-notice.mv-notice-delayed-hide {
 548   -webkit-transition-delay: 10s;
 549   -webkit-transition-property: opacity;
 550   opacity: 0;
 551 }
 552
 553 #mv-notice.mv-notice-hide {
 554   display: none;
 555 }
 556
 557 #attribution {
 558   -webkit-user-select: none;
 559   bottom: 0;
 560   color: #fff;
 561   cursor: default;
 562   display: inline-block;
 563   font-size: 13px;
 564   position: fixed;
 565   right: 8px;
 566   text-align: left;
 567   z-index: -1;
 568 }
 569
 570 html[dir=rtl] #attribution {
 571   text-align: right;
 572 }
 573
 574 #recent-tabs {
 575   background: #fff;
 576   border: 1px solid #c0c0c0;
 577   border-radius: 2px;
 578   bottom: 0;
 579   color: rgb(17, 85, 204);
 580   cursor: pointer;
 581   font-family: Arial;
 582   font-size: 14px;
 583   opacity: 0.9;
 584   padding: 3px;
 585   position: fixed;
 586   right: 8px;
 587 }
 588
 589 html[dir=rtl] #attribution,html[dir=rtl] #recent-tabs {
 590   left: 8px;
 591   right: auto;
 592 }