/* Copyright (c) 2011 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; } .most-visited { display: -webkit-box; position: absolute; text-decoration: none; -webkit-box-orient: vertical; } .most-visited:focus { outline: none; } .edit-mode-border { display: -webkit-box; -webkit-box-orient: vertical; } .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; } /* The point of edit-bar-wrapper is to clip the edit bar. Otherwise it can show * through from behind the thumbnail (some themes have a partially transparent * thumbnail border color). */ .edit-bar-wrapper { height: 23px; overflow: hidden; width: 100%; } /* The edit bar appears on hover. */ .edit-bar { border-top-left-radius: 5px; border-top-right-radius: 5px; box-sizing: border-box; cursor: move; display: -webkit-box; font-size: 100%; height: 100%; line-height: 20px; padding: 3px; padding-bottom: 0; position: relative; top: 23px; width: 100%; -webkit-box-align: stretch; -webkit-box-orient: horizontal; -webkit-transition: top .15s; } .most-visited:focus .edit-bar, .most-visited:hover .edit-bar { top: 0; } .most-visited:hover .edit-bar { /* Delay the appearance of the edit bar on hover. */ -webkit-transition-delay: .5s; } .edit-bar > * { display: block; position: relative; } .edit-bar > .spacer { -webkit-box-flex: 1; } .edit-bar > .pin, .edit-bar > .remove { width: 16px; height: 16px; cursor: pointer; background-image: no-repeat 50% 50%; } .edit-bar > .pin { background-image: url('../ntp/ntp_pin_off.png'); } .edit-bar > .pin:hover { background-image: url('../ntp/ntp_pin_off_h.png'); } .edit-bar > .pin:active { background-image: url('../ntp/ntp_pin_off_p.png'); } .pinned .edit-bar > .pin { background-image: url('../ntp/ntp_pin_on.png'); } .pinned .edit-bar > .pin:hover { background-image: url(../ntp/ntp_pin_on_h.png'); } .pinned .edit-bar > .pin:active { background-image: url(../ntp/ntp_pin_on_p.png'); } .edit-bar > .remove { background-image: url('../ntp/ntp_close.png'); } .edit-bar > .remove:hover { background-image: url('../ntp/ntp_close_h.png'); } .edit-bar > .remove:active { background-image: url('../ntp/ntp_close_p.png'); } .most-visited .title { background: no-repeat 0 50%; background-size: 16px; bottom: 5px; display: block; left: 0; overflow: hidden; position: absolute; right: 0; text-align: left; text-overflow: ellipsis; white-space: nowrap; -webkit-margin-start: 5px; -webkit-padding-end: 0; -webkit-padding-start: 20px; } .thumbnail { background: no-repeat; /* The extra 2% hides the scrollbar in the screenshot. */ background-size: 102%; border-radius: 5px; } .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-wrapper { border: 3px solid transparent; border-radius: 5px; box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0); display: block; position: relative; z-index: 5; -webkit-box-flex: 1; -webkit-transition: background-color .15s, border-top-left-radius 0, border-top-right-radius 0, box-shadow .15s; /* The border radiuses have 0 transition duration but .15s delay, meaning they * will snap into place after .15s. */ -webkit-transition-delay: 0, .15s, .15s, 0; } .filler .thumbnail-wrapper { visibility: visible; } /* Filler tiles can't get focused, but focused tiles can become filler. */ .most-visited:focus:not(.filler) .thumbnail-wrapper, .most-visited:hover .thumbnail-wrapper { border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: 0px 2px 2px hsla(0, 0%, 0%, .5); } .most-visited:hover .thumbnail-wrapper { /* Make the corner radius transitions match the edit bar's slide. */ -webkit-transition-delay: 0, .5s, .5s, 0; } .most-visited:focus .thumbnail-wrapper { /* In the focus case, the transition is not delayed. */ -webkit-transition-delay: 0, 0, 0, 0; }