src/chrome/browser/resources/ntp4/most_visited_page.css

   1 /* Copyright (c) 2012 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 .most-visited {
   6   position: absolute;
   7   z-index: 0;
   8 }
   9
  10 .most-visited {
  11   -webkit-box-orient: vertical;
  12   display: -webkit-box;
  13   position: absolute;
  14   text-decoration: none;
  15 }
  16
  17 .most-visited:focus {
  18   outline: none;
  19 }
  20
  21 .fills-parent {
  22   bottom: 0;
  23   display: -webkit-box;
  24   left: 0;
  25   position: absolute;
  26   right: 0;
  27   top: 0;
  28 }
  29
  30 /* filler mode: hide everything except the thumbnail --- leave a grey rectangle
  31  * in its place. */
  32 .filler * {
  33   visibility: hidden;
  34 }
  35
  36 .filler {
  37   pointer-events: none;
  38 }
  39
  40 .most-visited .close-button {
  41   -webkit-transition: opacity 150ms;
  42   opacity: 0;
  43   position: absolute;
  44   right: 0;
  45   top: 0;
  46   z-index: 5;
  47 }
  48
  49 html[dir=rtl] .most-visited .close-button {
  50   left: 0;
  51   right: auto;
  52 }
  53
  54 .most-visited:hover .close-button {
  55   -webkit-transition-delay: 500ms;
  56   opacity: 1;
  57 }
  58
  59 .most-visited .close-button:hover {
  60   -webkit-transition: none;
  61 }
  62
  63 .most-visited .favicon {
  64   -webkit-margin-start: 5px;
  65   background: no-repeat left 50%;
  66   background-size: 16px;
  67   bottom: 7px;
  68   box-sizing: border-box;
  69   display: block;
  70   height: 16px;
  71   position: absolute;
  72   width: 16px;
  73 }
  74
  75 html[dir='rtl'] .most-visited .favicon {
  76   background-position-x: right;
  77 }
  78
  79 .most-visited .color-stripe {
  80   border-bottom-left-radius: 3px 3px;
  81   border-bottom-right-radius: 3px 3px;
  82   /* Matches height of title.  */
  83   bottom: 23px;
  84   height: 3px;
  85   /* Matches padding-top of the title. */
  86   margin-bottom: 8px;
  87   position: absolute;
  88   width: 100%;
  89   z-index: 10;
  90 }
  91
  92 .most-visited .title {
  93   display: block;
  94   height: 23px;
  95   overflow: hidden;
  96   padding-top: 8px;
  97   text-align: center;
  98   text-overflow: ellipsis;
  99   white-space: nowrap;
 100 }
 101
 102 .thumbnail {
 103   -webkit-transition: opacity 150ms;
 104   background: no-repeat;
 105   /* This shows for missing thumbnails. */
 106   background-color: #eee;
 107   background-size: 100%;
 108   border-radius: 3px;
 109   /* These max dimensions are not necessary, as the sizing logic in the .js
 110    * should be sufficient, but they're here for extra insurance. We never want
 111    * to scale a thumbnail larger than this size. */
 112   max-height: 132px;
 113   max-width: 212px;
 114 }
 115
 116 .filler .thumbnail {
 117   /* TODO(estade): there seems to be a webkit bug where this border is not
 118    * always removed when it should be. Investigate. */
 119   border: 1px solid;
 120   visibility: visible;
 121 }
 122
 123 .thumbnail-shield {
 124   background: -webkit-linear-gradient(rgba(255, 255, 255, 0),
 125                                       rgba(255, 255, 255, 0) 50%,
 126                                       rgba(255, 255, 255, 0.9));
 127   border-radius: 3px;
 128 }
 129
 130 /* TODO(dbeam): Remove this when printing of -webkit-linear-gradient() works. */
 131 @media print {
 132   .thumbnail-shield {
 133     background: none;
 134   }
 135 }
 136
 137 .most-visited:focus .thumbnail,
 138 .most-visited:hover .thumbnail {
 139   opacity: 0.95;
 140 }
 141
 142 .most-visited:focus .thumbnail-shield,
 143 .most-visited:hover .thumbnail-shield,
 144 .most-visited:active .thumbnail-shield {
 145   background: -webkit-linear-gradient(rgba(255, 255, 255, 0),
 146                                       rgba(255, 255, 255, 0) 80%,
 147                                       rgba(255, 255, 255, 0.9));
 148 }
 149
 150 /* The thumbnail gets lighter when clicked, but not when the click is on the
 151  * close button. */
 152 .most-visited:active .close-button:not(:active) + .thumbnail {
 153   opacity: 0.9;
 154 }
 155
 156 /* The thumbnail gets a shadow when clicked, but not when the click is on the
 157  * close button. */
 158 .most-visited:active .close-button:not(:active) + .thumbnail .thumbnail-shield {
 159   -webkit-box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.2);
 160 }
 161
 162 .thumbnail-wrapper {
 163   -webkit-box-flex: 1;
 164   -webkit-transition: background-color 150ms;
 165   border: 1px solid transparent;
 166   border-radius: 3px;
 167   display: block;
 168   position: relative;
 169   z-index: 5;
 170 }
 171
 172 .filler .thumbnail-wrapper {
 173   visibility: visible;
 174 }
 175
 176 /* 'finishing-drag' is the state we are in after dropping on the trash can.
 177  * Override opacity of the tile to 1, so that the new tile animation
 178  * occurs simultaneously with the trash animation. */
 179 .tile.dragging.finishing-drag {
 180   opacity: 1;
 181 }
 182
 183 /* Don't display the new tile until there's something to show.  */
 184 .blacklisted {
 185   opacity: 0;
 186 }