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   color: #323232;
   9   margin: 0;
  10   overflow: hidden;
  11   padding: 0;
  12 }
  13
  14 a {
  15   display: block;
  16 }
  17
  18 a,
  19 a:active,
  20 a:hover,
  21 a:visited {
  22   color: inherit;
  23   text-decoration: none;
  24 }
  25
  26 #most-visited {
  27   -webkit-user-select: none;
  28   margin: 0;
  29   text-align: -webkit-center;
  30 }
  31
  32 #mv-tiles,
  33 .mv-tiles-old {
  34   -webkit-user-select: none;
  35   font-size: 0;
  36   margin: 0;
  37   opacity: 0;
  38   position: absolute;
  39   /* This align correctly for both LTR and RTL */
  40   text-align: -webkit-auto;
  41   transition: opacity 1s;
  42 }
  43
  44 .thumb-ntp #mv-tiles,
  45 .thumb-ntp .mv-tiles-old {
  46   height: calc(2 * 146px);
  47   line-height: 146px;
  48 }
  49
  50 .icon-ntp #mv-tiles,
  51 .icon-ntp .mv-tiles-old {
  52   height: calc(2 * 112px);
  53   line-height: 112px;
  54   width: 100%;
  55 }
  56
  57 .mv-tile,
  58 .mv-empty-tile {
  59   display: inline-block;
  60   font-family: arial, sans-serif;
  61   font-size: 12px;
  62   opacity: 1;
  63   outline: 0;
  64   overflow: hidden;
  65   position: relative;
  66   vertical-align: top;
  67   white-space: nowrap;
  68 }
  69
  70 .mv-tile.hidden,
  71 .mv-empty-tile.hidden {
  72   display: none;
  73 }
  74
  75 .thumb-ntp .mv-tile,
  76 .thumb-ntp .mv-empty-tile {
  77   background: rgb(242,242,242);
  78   border: 1px solid transparent;
  79   border-radius: 2px;
  80   height: calc(130px - 2px);
  81   line-height: 100%;
  82   margin: 0 8px;
  83   width: calc(156px - 2px);
  84 }
  85
  86 .icon-ntp .mv-tile,
  87 .icon-ntp .mv-empty-tile {
  88   border: none;
  89   border-radius: 2px;
  90   height: calc(102px + 18px - 12px);
  91   margin: 0 12px 4px 12px;
  92   width: calc(48px + 2 * 18px);
  93 }
  94
  95 .mv-tile {
  96   -webkit-transition-duration: 200ms;
  97   -webkit-transition-property: -webkit-transform, border,
  98     box-shadow, margin, opacity, width;
  99   cursor: pointer;
 100 }
 101
 102 .thumb-ntp .mv-tile:focus:not(:hover) {
 103   -webkit-filter: brightness(75%);
 104   box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2);
 105 }
 106
 107 .icon-ntp .mv-tile:focus {
 108   background: rgba(0,0,0,0.2);
 109 }
 110
 111 .icon-ntp.dark .mv-tile:focus {
 112   background: rgba(255,255,255,0.2);
 113 }
 114
 115 .mv-tile.blacklisted {
 116   -webkit-transform: scale(0, 0);
 117   border: none !important;
 118   margin: 0;
 119   width: 0;
 120 }
 121
 122 .thumb-ntp .mv-tile:hover {
 123   box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2);
 124 }
 125
 126 .mv-tile.mv-blacklist {
 127   opacity: 0;
 128 }
 129
 130 .mv-tile.mv-blacklist {
 131   -webkit-transform: scale(0, 0);
 132   -webkit-transform-origin: 0 41px;
 133   margin-left: 0;
 134   margin-right: 0;
 135   width: 0;
 136 }
 137
 138 .mv-title {
 139   border: none;
 140   overflow: hidden;
 141   position: absolute;
 142   text-overflow: clip;
 143 }
 144
 145 .mv-title.multiline {
 146   white-space: pre-wrap;
 147   word-wrap: break-word;
 148 }
 149
 150 .thumb-ntp .mv-title {
 151   -webkit-mask-image:
 152     linear-gradient(to right, #000, #000, 100px, transparent);
 153   height: 15px;
 154   left: 31px;
 155   line-height: 14px;
 156   padding: 0;
 157   top: 8px;
 158   width: calc(156px - 32px - 4px);
 159 }
 160
 161 html:not([dir=rtl]) .thumb-ntp .mv-title[style*='direction: rtl'] {
 162   -webkit-mask-image:
 163     linear-gradient(to left, black, black, 100px, transparent);
 164   left: auto;
 165   right: 8px;
 166   text-align: right;
 167 }
 168
 169 html[dir=rtl] .mv-title {
 170   left: 8px;
 171   text-align: left;
 172 }
 173
 174 html[dir=rtl] .thumb-ntp .mv-title[style*='direction: rtl'] {
 175   -webkit-mask-image:
 176     linear-gradient(to left, black, black, 100px, transparent);
 177   right: 31px;
 178   text-align: right;
 179 }
 180
 181 .icon-ntp .mv-title {
 182   height: 28px;
 183   left: auto;
 184   line-height: 117%;
 185   right: auto;
 186   text-align: center;
 187   top: 76px;
 188   width: 100%;
 189   z-index: 5;
 190 }
 191
 192 .mv-thumb {
 193   border: none;
 194   cursor: pointer;
 195   display: block;
 196   overflow: hidden;
 197   position: absolute;
 198 }
 199
 200 .thumb-ntp .mv-thumb {
 201   border-radius: 0;
 202   height: 94px;
 203   left: 3px;
 204   top: 31px;
 205   width: 148px;
 206 }
 207
 208 .mv-thumb img.thumbnail {
 209   height: auto;
 210   min-height: 100%;
 211   width: 100%;
 212 }
 213
 214 .mv-thumb img.large-icon {
 215   -webkit-clip-path: inset(0 0 0 0 round 4px);
 216   height: 48px;
 217   left: 50%;
 218   margin-left: -24px;
 219   margin-top: -24px;
 220   position: absolute;
 221   top: 50%;
 222   width: 48px;
 223 }
 224
 225 .mv-thumb.failed-img,
 226 .mv-thumb.large-icon-outer {
 227   background-color: #fff;
 228   height: 94px;
 229   width: 148px;
 230 }
 231
 232 .icon-ntp .mv-thumb,
 233 .icon-ntp .mv-thumb-fallback {
 234   background: transparent;
 235   height: 48px;
 236   left: 50%;
 237   margin-left: -24px;
 238   top: 18px;
 239   width: 48px;
 240 }
 241
 242 /*
 243   We use ::after without content to provide an aditional element on top of
 244   the thumbnail.
 245 */
 246 .mv-thumb.failed-img::after {
 247   border: 8px solid #f2f2f2;
 248   border-radius: 50%;
 249   content: '';
 250   display: block;
 251   height: 0;
 252   margin: 39px 66px;
 253   width: 0;
 254 }
 255
 256 .mv-x {
 257   -webkit-transition: opacity 150ms;
 258   border: none;
 259   cursor: pointer;
 260   opacity: 0;
 261   position: absolute;
 262 }
 263
 264 .thumb-ntp .mv-x {
 265   background: linear-gradient(to left, rgb(242,242,242) 60%, transparent);
 266   height: 30px;
 267   right: 0;
 268   width: 40px;
 269 }
 270
 271 .icon-ntp .mv-x {
 272   background: none;
 273   height: 16px;
 274   right: 10px;
 275   top: 10px;
 276   width: 16px;
 277 }
 278
 279 /*
 280   We use ::after without content to provide the masked X element.
 281   The "bottom" div is actually just the gradient.
 282 */
 283 .mv-x::after {
 284   -webkit-mask-image: -webkit-image-set(
 285       url(chrome-search://local-ntp/images/close_3_mask.png) 1x,
 286       url(chrome-search://local-ntp/images/close_3_mask.png@2x) 2x);
 287   -webkit-mask-position: 12px 10px;
 288   -webkit-mask-repeat: no-repeat;
 289   -webkit-mask-size: 10px 10px;
 290   background-color: rgba(90,90,90,0.7);
 291   content: '';
 292   display: block;
 293   height: 32px;
 294   position: absolute;
 295   right: 0;
 296   width: 32px;
 297 }
 298
 299 .icon-ntp .mv-x::after {
 300   -webkit-mask: none;
 301   background-color: inherit;
 302   background-image: -webkit-image-set(
 303       url(chrome-search://local-ntp/images/close_4_button.png) 1x,
 304       url(chrome-search://local-ntp/images/close_4_button.png@2x) 2x);
 305   height: 16px;
 306   width: 16px;
 307 }
 308
 309 html[dir=rtl] .thumb-ntp .mv-x {
 310   background: linear-gradient(to right, rgb(242,242,242) 60%, transparent);
 311   left: -1px;
 312   right: auto;
 313 }
 314
 315 html[dir=rtl] .thumb-ntp .mv-x::after {
 316   left: -1px;
 317   right: auto;
 318 }
 319
 320 html[dir=rtl] .icon-ntp .mv-x {
 321   left: 10px;
 322   right: auto;
 323 }
 324
 325 .thumb-ntp .mv-x:hover::after {
 326   background-color: rgb(90,90,90);
 327 }
 328
 329 .thumb-ntp .mv-x:active::after {
 330   background-color: rgb(66,133,244);
 331 }
 332
 333 .icon-ntp .mv-x:hover::after,
 334 .icon-ntp .mv-x:active::after {
 335   background-color: inherit;
 336 }
 337
 338 .mv-tile:hover .mv-x {
 339   -webkit-transition-delay: 500ms;
 340   opacity: 1;
 341 }
 342
 343 .icon-ntp .mv-tile:hover .mv-x {
 344   -webkit-transition-delay: 800ms;
 345 }
 346
 347 .mv-x:hover {
 348   -webkit-transition: none;
 349 }
 350
 351 .mv-favicon {
 352   background-size: 16px;
 353   height: 16px;
 354   left: 7px;
 355   margin: 0;
 356   pointer-events: none;
 357   position: absolute;
 358   top: 7px;
 359   width: 16px;
 360 }
 361
 362 html[dir=rtl] .mv-favicon {
 363   left: auto;
 364   right: 7px;
 365 }
 366
 367 .mv-favicon.failed-favicon {
 368   background-image: -webkit-image-set(
 369       url(chrome-search://local-ntp/images/ntp_default_favicon.png) 1x,
 370       url(chrome-search://local-ntp/images/ntp_default_favicon.png@2x) 2x);
 371   background-repeat: no-repeat;
 372   background-size: 16px 16px;
 373 }
 374
 375 .mv-favicon img {
 376   height: 100%;
 377   width: 100%;
 378 }
 379
 380 .mv-favicon.failed-favicon img {
 381   display: none;
 382 }