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 
      6 .most-visited {
      7   position: absolute;
      8 }
      9 
     10 .most-visited {
     11   display: -webkit-box;
     12   position: absolute;
     13   text-decoration: none;
     14   -webkit-box-orient: vertical;
     15 }
     16 
     17 .most-visited:focus {
     18   outline: none;
     19 }
     20 
     21 .edit-mode-border {
     22   display: -webkit-box;
     23   -webkit-box-orient: vertical;
     24 }
     25 
     26 .fills-parent {
     27   bottom: 0;
     28   display: -webkit-box;
     29   left: 0;
     30   position: absolute;
     31   right: 0;
     32   top: 0;
     33 }
     34 
     35 /* filler mode: hide everything except the thumbnail --- leave a grey rectangle
     36  * in its place. */
     37 .filler * {
     38   visibility: hidden;
     39 }
     40 
     41 .filler {
     42   pointer-events: none;
     43 }
     44 
     45 /* The point of edit-bar-wrapper is to clip the edit bar. Otherwise it can show
     46  * through from behind the thumbnail (some themes have a partially transparent
     47  * thumbnail border color). */
     48 .edit-bar-wrapper {
     49   height: 23px;
     50   overflow: hidden;
     51   width: 100%;
     52 }
     53 
     54 /* The edit bar appears on hover. */
     55 .edit-bar {
     56   border-top-left-radius: 5px;
     57   border-top-right-radius: 5px;
     58   box-sizing: border-box;
     59   cursor: move;
     60   display: -webkit-box;
     61   font-size: 100%;
     62   height: 100%;
     63   line-height: 20px;
     64   padding: 3px;
     65   padding-bottom: 0;
     66   position: relative;
     67   top: 23px;
     68   width: 100%;
     69   -webkit-box-align: stretch;
     70   -webkit-box-orient: horizontal;
     71   -webkit-transition: top .15s;
     72 }
     73 
     74 .most-visited:focus .edit-bar,
     75 .most-visited:hover .edit-bar {
     76   top: 0;
     77 }
     78 
     79 .most-visited:hover .edit-bar {
     80   /* Delay the appearance of the edit bar on hover. */
     81   -webkit-transition-delay: .5s;
     82 }
     83 
     84 .edit-bar > * {
     85   display: block;
     86   position: relative;
     87 }
     88 
     89 .edit-bar > .spacer {
     90   -webkit-box-flex: 1;
     91 }
     92 
     93 .edit-bar > .pin,
     94 .edit-bar > .remove {
     95   width: 16px;
     96   height: 16px;
     97   cursor: pointer;
     98   background-image: no-repeat 50% 50%;
     99 }
    100 
    101 .edit-bar > .pin {
    102   background-image: url('../ntp/ntp_pin_off.png');
    103 }
    104 
    105 .edit-bar > .pin:hover {
    106   background-image: url('../ntp/ntp_pin_off_h.png');
    107 }
    108 
    109 .edit-bar > .pin:active {
    110   background-image: url('../ntp/ntp_pin_off_p.png');
    111 }
    112 
    113 .pinned .edit-bar > .pin {
    114   background-image: url('../ntp/ntp_pin_on.png');
    115 }
    116 
    117 .pinned .edit-bar > .pin:hover {
    118   background-image: url(../ntp/ntp_pin_on_h.png');
    119 }
    120 
    121 .pinned .edit-bar > .pin:active {
    122   background-image: url(../ntp/ntp_pin_on_p.png');
    123 }
    124 
    125 .edit-bar > .remove {
    126   background-image: url('../ntp/ntp_close.png');
    127 }
    128 
    129 .edit-bar > .remove:hover {
    130   background-image: url('../ntp/ntp_close_h.png');
    131 }
    132 
    133 .edit-bar > .remove:active {
    134   background-image: url('../ntp/ntp_close_p.png');
    135 }
    136 
    137 .most-visited .title {
    138   background: no-repeat 0 50%;
    139   background-size: 16px;
    140   bottom: 5px;
    141   display: block;
    142   left: 0;
    143   overflow: hidden;
    144   position: absolute;
    145   right: 0;
    146   text-align: left;
    147   text-overflow: ellipsis;
    148   white-space: nowrap;
    149   -webkit-margin-start: 5px;
    150   -webkit-padding-end: 0;
    151   -webkit-padding-start: 20px;
    152 }
    153 
    154 .thumbnail {
    155   background: no-repeat;
    156   /* The extra 2% hides the scrollbar in the screenshot. */
    157   background-size: 102%;
    158   border-radius: 5px;
    159 }
    160 
    161 .filler .thumbnail {
    162   /* TODO(estade): there seems to be a webkit bug where this border is not
    163    * always removed when it should be. Investigate. */
    164   border: 1px solid;
    165   visibility: visible;
    166 }
    167 
    168 .thumbnail-wrapper {
    169   border: 3px solid transparent;
    170   border-radius: 5px;
    171   box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0);
    172   display: block;
    173   position: relative;
    174   z-index: 5;
    175   -webkit-box-flex: 1;
    176   -webkit-transition: background-color .15s,
    177       border-top-left-radius 0, border-top-right-radius 0, box-shadow .15s;
    178   /* The border radiuses have 0 transition duration but .15s delay, meaning they
    179    * will snap into place after .15s. */
    180   -webkit-transition-delay: 0, .15s, .15s, 0;
    181 }
    182 
    183 .filler .thumbnail-wrapper {
    184   visibility: visible;
    185 }
    186 
    187 /* Filler tiles can't get focused, but focused tiles can become filler. */
    188 .most-visited:focus:not(.filler) .thumbnail-wrapper,
    189 .most-visited:hover .thumbnail-wrapper {
    190   border-top-left-radius: 0;
    191   border-top-right-radius: 0;
    192   box-shadow: 0px 2px 2px hsla(0, 0%, 0%, .5);
    193 }
    194 
    195 .most-visited:hover .thumbnail-wrapper {
    196   /* Make the corner radius transitions match the edit bar's slide. */
    197   -webkit-transition-delay: 0, .5s, .5s, 0;
    198 }
    199 
    200 .most-visited:focus .thumbnail-wrapper {
    201   /* In the focus case, the transition is not delayed. */
    202   -webkit-transition-delay: 0, 0, 0, 0;
    203 }
    204