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