Home | History | Annotate | Download | only in ntp4 
      1 /* Copyright (c) 2011 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  * This is the stylesheet used by the touch-enabled new tab page
      6  */
      7 
      8 html {
      9   /* It's necessary to put this here instead of in body in order to get the
     10      background-size of 100% to work properly */
     11   height: 100%;
     12 }
     13 
     14 body {
     15   background-size: auto 100%;
     16   margin: 0;
     17   /* Don't highlight links when they're tapped.  Safari has bugs here that
     18      show up as flicker when dragging in some situations */
     19   -webkit-tap-highlight-color: transparent;
     20   /* Don't allow selecting text - can occur when dragging */
     21   -webkit-user-select: none;
     22 }
     23 
     24 body,
     25 button span {
     26   font-family: segoe ui, arial, helvetica, sans-serif;
     27   font-size: 14px;
     28 }
     29 
     30 #card-slider-frame {
     31   /* Must match #footer height. */
     32   bottom: 50px;
     33   overflow: hidden;
     34   /* We want this to fill the window except for the region used
     35      by footer */
     36   position: fixed;
     37   top: 0;
     38   width: 100%;
     39   -webkit-mask-image: -webkit-linear-gradient(bottom, transparent, black 30px);
     40 }
     41 
     42 #page-list {
     43   /* fill the apps-frame */
     44   height: 100%;
     45   display: -webkit-box;
     46 }
     47 
     48 #footer {
     49   background-color: rgba(255, 255, 255, 0.8);
     50   bottom: 0;
     51   position: fixed;
     52   width: 100%;
     53 }
     54 
     55 /* TODO(estade): remove this border hack and replace with a webkit-gradient
     56  * border-image on #footer once WebKit supports border-image-slice.
     57  * See https://bugs.webkit.org/show_bug.cgi?id=20127 */
     58 #footer-border {
     59   background: -webkit-gradient(linear, left top, right top,
     60                                from(#eee), color-stop(0.5, #ccc), to(#eee));
     61   height: 1px;
     62 }
     63 
     64 #footer-content {
     65   display: -webkit-box;
     66   height: 49px;
     67   -webkit-box-align: center;
     68 }
     69 
     70 #footer-content > * {
     71   margin: 0 9px;
     72 }
     73 
     74 /* TODO(estade): theme this color. */
     75 #footer-content span {
     76   color: #888;
     77 }
     78 
     79 /* TODO(estade): handle overflow better? I tried overflow-x: hidden and
     80    overflow-y: visible (for the new dot animation), but this makes a scroll
     81    bar appear */
     82 #dot-list {
     83   display: -webkit-box;
     84   height: 100%;
     85   list-style-type: none;
     86   margin: 0;
     87   padding: 0;
     88   /* Expand to take up all available horizontal space.  */
     89   -webkit-box-flex: 1;
     90   /* Center child dots. */
     91   -webkit-box-pack: center;
     92 }
     93 
     94 /* TODO(estade): improve focus indicator. */
     95 .dot {
     96   border-top: 5px solid rgba(0, 0, 0, .1);
     97   color: rgba(0, 0, 0, 0.2);
     98   cursor: pointer;
     99   font-size: 9pt;
    100   height: 100%;
    101   margin: 0 10px;
    102   padding-top: 5px;
    103   text-align: left;
    104   width: 60px;
    105   -webkit-box-sizing: border-box;
    106   -webkit-padding-start: 5px;
    107   -webkit-transition: -webkit-transform 500ms,
    108                       background-color 250ms;
    109 }
    110 
    111 .dot.selected {
    112   border-top: 5px solid rgba(0, 0, 0, .4);
    113   color: rgba(0, 0, 0, 0.4);
    114 }
    115 
    116 .dot:hover {
    117   background-color: rgba(0, 0, 0, .05);
    118 }
    119 
    120 .dot.new {
    121   -webkit-transform: translate(0, 40px);
    122 }
    123 
    124 #trash {
    125   position: absolute;
    126   width: 110px;
    127   height: 100%;
    128   right: 0;
    129   bottom: 0;
    130   background-image: url('../shared/images/trash.png');
    131   background-size: 40px 40px;
    132   background-repeat: no-repeat;
    133   background-position: 40px 12px;
    134   /* Work-around chromium bug 74730 by using translate instead of the
    135      GPU-accelerated translate3d */
    136   -webkit-transform: translate(80px, 0);
    137   -webkit-transition-property: -webkit-transform;
    138   -webkit-transition-duration: 500ms;
    139 }
    140 
    141 #trash.hover {
    142   background-image: url('../shared/images/trash-open.png');
    143 }
    144 
    145 .app.trashing img {
    146   opacity: 0.3;
    147 }
    148 
    149 #footer.rearrange-mode #trash {
    150   -webkit-transform: translate(0, 0);
    151 }
    152