| /* Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. */ |
| |
| .most-visited { |
| position: absolute; |
| z-index: 0; |
| } |
| |
| .most-visited { |
| -webkit-box-orient: vertical; |
| display: -webkit-box; |
| position: absolute; |
| text-decoration: none; |
| } |
| |
| .most-visited:focus { |
| outline: none; |
| } |
| |
| .fills-parent { |
| bottom: 0; |
| display: -webkit-box; |
| left: 0; |
| position: absolute; |
| right: 0; |
| top: 0; |
| } |
| |
| /* filler mode: hide everything except the thumbnail --- leave a grey rectangle |
| * in its place. */ |
| .filler * { |
| visibility: hidden; |
| } |
| |
| .filler { |
| pointer-events: none; |
| } |
| |
| .most-visited .close-button { |
| -webkit-transition: opacity 150ms; |
| opacity: 0; |
| position: absolute; |
| right: 0; |
| top: 0; |
| z-index: 5; |
| } |
| |
| html[dir=rtl] .most-visited .close-button { |
| left: 0; |
| right: auto; |
| } |
| |
| .most-visited:hover .close-button { |
| -webkit-transition-delay: 500ms; |
| opacity: 1; |
| } |
| |
| .most-visited .close-button:hover { |
| -webkit-transition: none; |
| } |
| |
| .most-visited .favicon { |
| -webkit-margin-start: 5px; |
| background: no-repeat left 50%; |
| background-size: 16px; |
| bottom: 7px; |
| box-sizing: border-box; |
| display: block; |
| height: 16px; |
| position: absolute; |
| width: 16px; |
| } |
| |
| html[dir='rtl'] .most-visited .favicon { |
| background-position-x: right; |
| } |
| |
| .most-visited .color-stripe { |
| border-bottom-left-radius: 3px 3px; |
| border-bottom-right-radius: 3px 3px; |
| /* Matches height of title. */ |
| bottom: 23px; |
| height: 3px; |
| /* Matches padding-top of the title. */ |
| margin-bottom: 8px; |
| position: absolute; |
| width: 100%; |
| z-index: 10; |
| } |
| |
| .most-visited .title { |
| display: block; |
| height: 23px; |
| overflow: hidden; |
| padding-top: 8px; |
| text-align: center; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| .thumbnail { |
| -webkit-transition: opacity 150ms; |
| background: no-repeat; |
| /* This shows for missing thumbnails. */ |
| background-color: #eee; |
| background-size: 100%; |
| border-radius: 3px; |
| /* These max dimensions are not necessary, as the sizing logic in the .js |
| * should be sufficient, but they're here for extra insurance. We never want |
| * to scale a thumbnail larger than this size. */ |
| max-height: 132px; |
| max-width: 212px; |
| } |
| |
| .filler .thumbnail { |
| /* TODO(estade): there seems to be a webkit bug where this border is not |
| * always removed when it should be. Investigate. */ |
| border: 1px solid; |
| visibility: visible; |
| } |
| |
| .thumbnail-shield { |
| background: -webkit-linear-gradient(rgba(255, 255, 255, 0), |
| rgba(255, 255, 255, 0) 50%, |
| rgba(255, 255, 255, 0.9)); |
| border-radius: 3px; |
| } |
| |
| /* TODO(dbeam): Remove this when printing of -webkit-linear-gradient() works. */ |
| @media print { |
| .thumbnail-shield { |
| background: none; |
| } |
| } |
| |
| .most-visited:focus .thumbnail, |
| .most-visited:hover .thumbnail { |
| opacity: 0.95; |
| } |
| |
| .most-visited:focus .thumbnail-shield, |
| .most-visited:hover .thumbnail-shield, |
| .most-visited:active .thumbnail-shield { |
| background: -webkit-linear-gradient(rgba(255, 255, 255, 0), |
| rgba(255, 255, 255, 0) 80%, |
| rgba(255, 255, 255, 0.9)); |
| } |
| |
| /* The thumbnail gets lighter when clicked, but not when the click is on the |
| * close button. */ |
| .most-visited:active .close-button:not(:active) + .thumbnail { |
| opacity: 0.9; |
| } |
| |
| /* The thumbnail gets a shadow when clicked, but not when the click is on the |
| * close button. */ |
| .most-visited:active .close-button:not(:active) + .thumbnail .thumbnail-shield { |
| -webkit-box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.2); |
| } |
| |
| .thumbnail-wrapper { |
| -webkit-box-flex: 1; |
| -webkit-transition: background-color 150ms; |
| border: 1px solid transparent; |
| border-radius: 3px; |
| display: block; |
| position: relative; |
| z-index: 5; |
| } |
| |
| .filler .thumbnail-wrapper { |
| visibility: visible; |
| } |
| |
| /* 'finishing-drag' is the state we are in after dropping on the trash can. |
| * Override opacity of the tile to 1, so that the new tile animation |
| * occurs simultaneously with the trash animation. */ |
| .tile.dragging.finishing-drag { |
| opacity: 1; |
| } |
| |
| /* Don't display the new tile until there's something to show. */ |
| .blacklisted { |
| opacity: 0; |
| } |