most_visited_page.css revision 5821806d5e7f356e8fa4b058a389a808ea183019
15821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* Copyright (c) 2012 The Chromium Authors. All rights reserved. 25821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Use of this source code is governed by a BSD-style license that can be 35821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * found in the LICENSE file. */ 45821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 55821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).most-visited { 65821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) position: absolute; 75821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) z-index: 0; 85821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 95821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).most-visited { 115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-box-orient: vertical; 125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: -webkit-box; 135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) position: absolute; 145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) text-decoration: none; 155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).most-visited:focus { 185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) outline: none; 195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).fills-parent { 225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) bottom: 0; 235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: -webkit-box; 245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) left: 0; 255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) position: absolute; 265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) right: 0; 275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) top: 0; 285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* filler mode: hide everything except the thumbnail --- leave a grey rectangle 315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * in its place. */ 325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).filler * { 335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) visibility: hidden; 345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).filler { 375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) pointer-events: none; 385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).most-visited .close-button { 415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-transition: opacity 150ms; 425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) opacity: 0; 435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) position: absolute; 445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) right: 0; 455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) top: 0; 465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) z-index: 5; 475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)html[dir=rtl] .most-visited .close-button { 505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) left: 0; 515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) right: auto; 525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).most-visited:hover .close-button { 555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-transition-delay: 500ms; 565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) opacity: 1; 575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).most-visited .close-button:hover { 605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-transition: none; 615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).most-visited .favicon { 645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-margin-start: 5px; 655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background: no-repeat left 50%; 665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-size: 16px; 675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) bottom: 7px; 685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) box-sizing: border-box; 695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: block; 705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) height: 16px; 715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) position: absolute; 725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) width: 16px; 735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)html[dir='rtl'] .most-visited .favicon { 765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-position-x: right; 775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).most-visited .color-stripe { 805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border-bottom-left-radius: 3px 3px; 815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border-bottom-right-radius: 3px 3px; 825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* Matches height of title. */ 835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) bottom: 23px; 845821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) height: 3px; 855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* Matches padding-top of the title. */ 865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) margin-bottom: 8px; 875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) position: absolute; 885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) width: 100%; 895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) z-index: 10; 905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).most-visited .title { 935821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: block; 945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) height: 23px; 955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) overflow: hidden; 965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) padding-top: 8px; 975821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) text-align: center; 985821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) text-overflow: ellipsis; 995821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) white-space: nowrap; 1005821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1015821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1025821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).thumbnail { 1035821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-transition: opacity 150ms; 1045821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background: no-repeat; 1055821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* This shows for missing thumbnails. */ 1065821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-color: #eee; 1075821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-size: 100%; 1085821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border-radius: 3px; 1095821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* These max dimensions are not necessary, as the sizing logic in the .js 1105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * should be sufficient, but they're here for extra insurance. We never want 1115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * to scale a thumbnail larger than this size. */ 1125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) max-height: 132px; 1135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) max-width: 212px; 1145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).filler .thumbnail { 1175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* TODO(estade): there seems to be a webkit bug where this border is not 1185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * always removed when it should be. Investigate. */ 1195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border: 1px solid; 1205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) visibility: visible; 1215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).thumbnail-shield { 1245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background: -webkit-linear-gradient(rgba(255, 255, 255, 0), 1255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) rgba(255, 255, 255, 0) 50%, 1265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) rgba(255, 255, 255, 0.9)); 1275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border-radius: 3px; 1285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* TODO(dbeam): Remove this when printing of -webkit-linear-gradient() works. */ 1315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)@media print { 1325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) .thumbnail-shield { 1335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background: none; 1345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 1355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).most-visited:focus .thumbnail, 1385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).most-visited:hover .thumbnail { 1395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) opacity: 0.95; 1405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).most-visited:focus .thumbnail-shield, 1435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).most-visited:hover .thumbnail-shield, 1445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).most-visited:active .thumbnail-shield { 1455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background: -webkit-linear-gradient(rgba(255, 255, 255, 0), 1465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) rgba(255, 255, 255, 0) 80%, 1475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) rgba(255, 255, 255, 0.9)); 1485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* The thumbnail gets lighter when clicked, but not when the click is on the 1515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * close button. */ 1525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).most-visited:active .close-button:not(:active) + .thumbnail { 1535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) opacity: 0.9; 1545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* The thumbnail gets a shadow when clicked, but not when the click is on the 1575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * close button. */ 1585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).most-visited:active .close-button:not(:active) + .thumbnail .thumbnail-shield { 1595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.2); 1605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).thumbnail-wrapper { 1635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-box-flex: 1; 1645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-transition: background-color 150ms; 1655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border: 1px solid transparent; 1665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border-radius: 3px; 1675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: block; 1685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) position: relative; 1695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) z-index: 5; 1705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).filler .thumbnail-wrapper { 1735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) visibility: visible; 1745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* 'finishing-drag' is the state we are in after dropping on the trash can. 1775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Override opacity of the tile to 1, so that the new tile animation 1785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * occurs simultaneously with the trash animation. */ 1795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).tile.dragging.finishing-drag { 1805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) opacity: 1; 1815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* Don't display the new tile until there's something to show. */ 1845821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).blacklisted { 1855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) opacity: 0; 1865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 187