chrome/browser/resources/local_ntp/most_visited_single.css

   1 /* Copyright 2015 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 body {
   6   -webkit-user-select: none;
   7   background: none transparent;
   8   margin: 0;
   9   overflow: hidden;
  10   padding: 0;
  11 }
  12
  13 a {
  14   display: block;
  15 }
  16
  17 a,
  18 a:active,
  19 a:hover,
  20 a:visited {
  21   color: inherit;
  22   text-decoration: none;
  23 }
  24
  25 #most-visited {
  26   -webkit-user-select: none;
  27   margin: 0;
  28   text-align: -webkit-center;
  29 }
  30
  31 #mv-tiles,
  32 #mv-tiles-old {
  33   -webkit-user-select: none;
  34   font-size: 0;
  35   height: calc(2 * 146px);
  36   line-height: 146px;
  37   margin: 0;
  38   opacity: 0;
  39   position: absolute;
  40   /* This align correctly for both LTR and RTL */
  41   text-align: -webkit-auto;
  42   transition: opacity 1s;
  43 }
  44
  45 .mv-tile,
  46 .mv-empty-tile {
  47   background: rgb(242,242,242);
  48   border: 1px solid transparent;
  49   border-radius: 2px;
  50   color: #323232;
  51   display: inline-block;
  52   font-family: arial, sans-serif;
  53   font-size: 12px;
  54   height: calc(130px - 2px);
  55   line-height: 100%;
  56   margin: 0 8px;
  57   opacity: 1;
  58   outline: 0;
  59   overflow: hidden;
  60   position: relative;
  61   vertical-align: top;
  62   white-space: nowrap;
  63   width: calc(156px - 2px);
  64 }
  65
  66 .mv-tile {
  67   -webkit-transition-duration: 200ms;
  68   -webkit-transition-property: -webkit-transform, border,
  69     box-shadow, margin, opacity, width;
  70   cursor: pointer;
  71 }
  72
  73 .mv-tile:focus:not(:hover) {
  74   -webkit-filter: brightness(75%);
  75 }
  76
  77 .mv-tile.blacklisted {
  78   -webkit-transform: scale(0, 0);
  79   border: none;
  80   margin: 0;
  81   width: 0;
  82 }
  83
  84 .mv-tile:hover {
  85   box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2);
  86 }
  87
  88 .mv-tile.mv-blacklist {
  89   opacity: 0;
  90 }
  91
  92 .mv-tile.mv-blacklist {
  93   -webkit-transform: scale(0, 0);
  94   -webkit-transform-origin: 0 41px;
  95   margin-left: 0;
  96   margin-right: 0;
  97   width: 0;
  98 }
  99
 100 .mv-title {
 101   -webkit-mask-image:
 102     linear-gradient(to right, #000, #000, 100px, transparent);
 103   border: none;
 104   bottom: auto;
 105   height: 15px;
 106   left: 31px;
 107   line-height: 14px;
 108   padding: 0;
 109   position: absolute;
 110   text-overflow: clip;
 111   top: 8px;
 112   width: calc(156px - 32px - 4px);
 113 }
 114
 115 @media (-webkit-min-device-pixel-ratio: 2) {
 116   .mv-title {
 117     top: 8px;
 118   }
 119 }
 120
 121 html[dir!=rtl] .mv-title[style*='direction: rtl'] {
 122   -webkit-mask-image:
 123     linear-gradient(to left, black, black, 100px, transparent);
 124   left: auto;
 125   right: 8px;
 126   text-align: right;
 127 }
 128
 129 html[dir=rtl] .mv-title {
 130   left: 8px;
 131   text-align: left;
 132 }
 133
 134 html[dir=rtl] .mv-title[style*='direction: rtl'] {
 135   -webkit-mask-image:
 136     linear-gradient(to left, black, black, 100px, transparent);
 137   right: 31px;
 138   text-align: right;
 139 }
 140
 141 .mv-thumb {
 142   border: none;
 143   border-radius: 0;
 144   cursor: pointer;
 145   display: block;
 146   height: 90px;
 147   left: 3px;
 148   position: absolute;
 149   top: 31px;
 150   width: 148px;
 151 }
 152
 153 .mv-thumb img {
 154   height: 94px;
 155   width: 148px;
 156 }
 157
 158 .mv-thumb.failed-img {
 159   background-color: #fff;
 160   height: 94px;
 161   width: 148px;
 162 }
 163
 164 /*
 165   We use ::after without content to provide an aditional element on top of
 166   the thumbnail.
 167 */
 168 .mv-thumb.failed-img::after {
 169   border: 8px solid #f2f2f2;
 170   border-radius: 50%;
 171   content: '';
 172   display: block;
 173   height: 0;
 174   margin: 39px 66px;
 175   width: 0;
 176 }
 177
 178 .mv-x {
 179   -webkit-transition: opacity 150ms;
 180   background: linear-gradient(to left, rgb(242,242,242) 60%, transparent);
 181   border: none;
 182   cursor: pointer;
 183   height: 30px;
 184   opacity: 0;
 185   position: absolute;
 186   right: 0;
 187   width: 40px;
 188 }
 189
 190 /*
 191   We use ::after without content to provide the masked X element.
 192   The "bottom" div is actually just the gradient.
 193 */
 194 .mv-x::after {
 195   -webkit-mask-image: -webkit-image-set(
 196       url(chrome-search://local-ntp/images/close_3_mask.png) 1x,
 197       url(chrome-search://local-ntp/images/close_3_mask.png@2x) 2x);
 198   -webkit-mask-position: 12px 10px;
 199   -webkit-mask-repeat: no-repeat;
 200   -webkit-mask-size: 10px 10px;
 201   background-color: rgba(90,90,90,0.7);
 202   content: '';
 203   display: block;
 204   height: 32px;
 205   position: absolute;
 206   right: 0;
 207   width: 32px;
 208 }
 209
 210 html[dir=rtl] .mv-x {
 211   background: linear-gradient(to right, rgb(242,242,242) 60%, transparent);
 212   left: -1px;
 213   right: auto;
 214 }
 215
 216 html[dir=rtl] .mv-x::after {
 217   left: -1px;
 218   right: auto;
 219 }
 220
 221 .mv-x:hover::after {
 222   background-color: rgb(90,90,90);
 223 }
 224
 225 .mv-x:active::after {
 226   background-color: rgb(66,133,244);
 227 }
 228
 229 .mv-tile:hover .mv-x {
 230   -webkit-transition-delay: 500ms;
 231   opacity: 1;
 232 }
 233
 234 .mv-favicon {
 235   background-size: 16px;
 236   height: 16px;
 237   left: 7px;
 238   margin: 0;
 239   pointer-events: none;
 240   position: absolute;
 241   top: 7px;
 242   width: 16px;
 243 }
 244
 245 html[dir=rtl] .mv-favicon {
 246   left: auto;
 247   right: 7px;
 248 }
 249
 250 .mv-favicon.failed-favicon {
 251   background-image: -webkit-image-set(
 252       url(chrome-search://local-ntp/images/ntp_default_favicon.png) 1x,
 253       url(chrome-search://local-ntp/images/ntp_default_favicon.png@2x) 2x);
 254   background-repeat: no-repeat;
 255   background-size: 16px 16px;
 256 }
 257
 258 .mv-favicon.failed-favicon img {
 259   display: none;
 260 }