Home | History | Annotate | Download | only in touch_ntp 
      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   /* This newer linear-gradient form works on Chrome but not mobile Safari */
     16   /*background: -webkit-linear-gradient(top,#252c39,#3e485b,#252c39); */
     17   background: -webkit-gradient(linear, left top, left bottom, from(#252c39),
     18               color-stop(0.5,#3e485b), to(#252c39));
     19   background-size: auto 100%;
     20   font-family: segoe ui, arial, helvetica, sans-serif;
     21   font-size: 14px;
     22   color: white;
     23   margin: 0;
     24   /* Don't highlight links when they're tapped.  Safari has bugs here that
     25      show up as flicker when dragging in some situations */
     26   -webkit-tap-highlight-color: transparent;
     27   /* Don't allow selecting text - can occur when dragging */
     28   -webkit-user-select: none;
     29 }
     30 
     31 /* The frame is what the slider fits into
     32  */
     33 #apps-frame {
     34   /* We want this to fill the window except for the region used
     35      by footer
     36   */
     37   position: fixed;
     38   width: 100%;
     39   top: 0;
     40   bottom: 60px;     /* must match #footer height */
     41   overflow: hidden;
     42 }
     43 
     44 /* The list holds all the pages and is what the touch events are attached to
     45 */
     46 #apps-page-list {
     47   /* fill the apps-frame */
     48   height: 100%;
     49   display: -webkit-box;
     50 }
     51 
     52 /* The apps-page is the slider card that is moved.
     53  */
     54 .apps-page {
     55   -webkit-box-sizing: border-box;
     56   padding: 29px;
     57   /* TODO(rbyers): Don't want the final row centered, but would like all rows
     58    * centered.  Really I want the page-content width determined by the boxes
     59    * inside of it, but perhaps webkit-box doesn't support that.
     60    * Note that instead of display:inline-block for the apps, I could use
     61    * float:left and have a .app-container:first-child { clear:both; } rule,
     62    * but I'd have to figure out some way to get the vertical position reset.
     63   text-align:center; */
     64 }
     65 
     66 .app-container {
     67   width: 128px;
     68   height: 128px;
     69   padding: 16px;
     70   display: inline-block;
     71   vertical-align: top;
     72 }
     73 
     74 .app {
     75   text-align: center;
     76   width: 128px;
     77   height: 128px;
     78   /* Animate effects to/from the grabbed state, and the position when drop
     79      is cancelled.  I'd like to also animate movement when an app is
     80      re-positioned, but since chrome is doing the layout there is no property
     81      to animate.
     82      TODO(rbyers): Should we take over responsibility for app layout ourself
     83      like the classic NTP's most-visited icons?  Or should we extend webkit
     84      somehow to support animation of the position of browser laid-out
     85      elements. */
     86   -webkit-transition-property: -webkit-transform, opacity, zIndex;
     87   -webkit-transition-duration: 200ms;
     88   /* Don't offer the context menu on long-press. */
     89   -webkit-touch-callout: none;
     90   /* Work-around regression bug 74802 */
     91   -webkit-transform: scale3d(1, 1, 1);
     92 }
     93 
     94 .app span {
     95   text-decoration: none;
     96   /* TODO(rbyers): why isn't ellipsis working? */
     97   text-overflow: ellipsis;
     98   white-space: nowrap;
     99   overflow: hidden;
    100   color: white;
    101 }
    102 
    103 .app img {
    104   display: block;
    105   width: 96px;
    106   height: 96px;
    107   margin-left: auto;
    108   margin-right: auto;
    109   /* -webkit-mask-image set by JavaScript to the image source */
    110   -webkit-mask-size: 100% 100%;
    111 }
    112 
    113 /* Pressed is set when an app is first touched.
    114    By using the mask, pressing causes a darkening effect of just the image */
    115 .app.grabber-pressed img {
    116   opacity: 0.8;
    117 }
    118 
    119 /* Grabbed is set (and pressed is cleared) when the app has been held. */
    120 .grabber-grabbed {
    121   opacity: 0.8;
    122   -webkit-transform: scale3d(1.4, 1.4, 1);
    123 }
    124 
    125 /* Dragging is set (without grabbed being cleared) when a grabbed app is
    126    moved */
    127 .grabber-dragging {
    128   /* We need to ensure there is no animation applied to its position
    129     (or the drag touch may stop being over top of it */
    130   -webkit-transition: none !important;
    131 
    132   /* Ensure the element has a large z-index so that we can get events
    133      for it as it moves over other elements.  This is animated as the
    134      element flys back, so we want a large value that will stay large until
    135      its almost home.  */
    136   z-index: 100;
    137 }
    138 
    139 #footer {
    140   width: 100%;
    141   position: absolute;
    142   bottom: 0;
    143   height: 60px;    /* must match #apps-frame bottom */
    144   overflow: hidden;
    145 }
    146 
    147 #dot-list {
    148   text-align: center;
    149   margin: 0;
    150   padding: 0;
    151   bottom: 0;
    152   list-style-type: none;
    153   margin-top: 20px;
    154 }
    155 
    156 .dot {
    157   display: inline-block;
    158   margin: 10px;
    159   width: 10px;
    160   height: 10px;
    161   background-color: #3d465f;
    162   -webkit-box-sizing: border-box;
    163   border: 1px solid black;
    164   -webkit-border-radius: 2px;
    165   -webkit-transition-property: width, height, margin, -webkit-transform;
    166   -webkit-transition-duration: 500ms;
    167   /* Work-around regression bug 74802 */
    168   -webkit-transform: translate3d(0, 0, 0);
    169 }
    170 
    171 #footer.rearrange-mode .dot {
    172   margin: 0px 20px;
    173   width: 30px;
    174   height: 30px;
    175 }
    176 
    177 .dot.selected {
    178   background-color: #b3bbd3;
    179 }
    180 
    181 .dot.new {
    182   -webkit-transform: translate3d(0, 40px, 0);
    183 }
    184 
    185 #trash {
    186   position: absolute;
    187   width: 110px;
    188   height: 100%;
    189   right: 0px;
    190   bottom: 0px;
    191   background-image: url('../shared/images/trash.png');
    192   background-size: 40px 40px;
    193   background-repeat: no-repeat;
    194   background-position: 40px 12px;
    195   /* Work-around chromium bug 74730 by using translate instead of the
    196      GPU-accelerated translate3d */
    197   -webkit-transform: translate(80px, 0);
    198   -webkit-transition-property: -webkit-transform;
    199   -webkit-transition-duration: 500ms;
    200 }
    201 
    202 #trash.hover {
    203   background-image: url('../shared/images/trash-open.png');
    204 }
    205 
    206 .app.trashing img {
    207   opacity: 0.3;
    208 }
    209 
    210 #footer.rearrange-mode #trash {
    211   -webkit-transform: translate(0, 0);
    212 }
    213 
    214 /* Ensure template items are never drawn when the page initially loads */
    215 #app-template {
    216   display: none;
    217 }
    218