| OLD | NEW |
|---|
| (Empty) |
| 1 /* Copyright (c) 2012 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 .most-visited { | |
| 6 position: absolute; | |
| 7 z-index: 0; | |
| 8 } | |
| 9 | |
| 10 .most-visited { | |
| 11 -webkit-box-orient: vertical; | |
| 12 display: -webkit-box; | |
| 13 position: absolute; | |
| 14 text-decoration: none; | |
| 15 } | |
| 16 | |
| 17 .most-visited:focus { | |
| 18 outline: none; | |
| 19 } | |
| 20 | |
| 21 .fills-parent { | |
| 22 bottom: 0; | |
| 23 display: -webkit-box; | |
| 24 left: 0; | |
| 25 position: absolute; | |
| 26 right: 0; | |
| 27 top: 0; | |
| 28 } | |
| 29 | |
| 30 /* filler mode: hide everything except the thumbnail --- leave a grey rectangle | |
| 31 * in its place. */ | |
| 32 .filler * { | |
| 33 visibility: hidden; | |
| 34 } | |
| 35 | |
| 36 .filler { | |
| 37 pointer-events: none; | |
| 38 } | |
| 39 | |
| 40 .most-visited .close-button { | |
| 41 -webkit-transition: opacity 150ms; | |
| 42 opacity: 0; | |
| 43 position: absolute; | |
| 44 right: 0; | |
| 45 top: 0; | |
| 46 z-index: 5; | |
| 47 } | |
| 48 | |
| 49 html[dir=rtl] .most-visited .close-button { | |
| 50 left: 0; | |
| 51 right: auto; | |
| 52 } | |
| 53 | |
| 54 .most-visited:hover .close-button { | |
| 55 -webkit-transition-delay: 500ms; | |
| 56 opacity: 1; | |
| 57 } | |
| 58 | |
| 59 .most-visited .close-button:hover { | |
| 60 -webkit-transition: none; | |
| 61 } | |
| 62 | |
| 63 .most-visited .favicon { | |
| 64 -webkit-margin-start: 5px; | |
| 65 background: no-repeat left 50%; | |
| 66 background-size: 16px; | |
| 67 bottom: 7px; | |
| 68 box-sizing: border-box; | |
| 69 display: block; | |
| 70 height: 16px; | |
| 71 position: absolute; | |
| 72 width: 16px; | |
| 73 } | |
| 74 | |
| 75 html[dir='rtl'] .most-visited .favicon { | |
| 76 background-position-x: right; | |
| 77 } | |
| 78 | |
| 79 .most-visited .color-stripe { | |
| 80 border-bottom-left-radius: 3px 3px; | |
| 81 border-bottom-right-radius: 3px 3px; | |
| 82 /* Matches height of title. */ | |
| 83 bottom: 23px; | |
| 84 height: 3px; | |
| 85 /* Matches padding-top of the title. */ | |
| 86 margin-bottom: 8px; | |
| 87 position: absolute; | |
| 88 width: 100%; | |
| 89 z-index: 10; | |
| 90 } | |
| 91 | |
| 92 .most-visited .title { | |
| 93 display: block; | |
| 94 height: 23px; | |
| 95 overflow: hidden; | |
| 96 padding-top: 8px; | |
| 97 text-align: center; | |
| 98 text-overflow: ellipsis; | |
| 99 white-space: nowrap; | |
| 100 } | |
| 101 | |
| 102 .thumbnail { | |
| 103 -webkit-transition: opacity 150ms; | |
| 104 background: no-repeat; | |
| 105 /* This shows for missing thumbnails. */ | |
| 106 background-color: #eee; | |
| 107 background-size: 100%; | |
| 108 border-radius: 3px; | |
| 109 /* These max dimensions are not necessary, as the sizing logic in the .js | |
| 110 * should be sufficient, but they're here for extra insurance. We never want | |
| 111 * to scale a thumbnail larger than this size. */ | |
| 112 max-height: 132px; | |
| 113 max-width: 212px; | |
| 114 } | |
| 115 | |
| 116 .filler .thumbnail { | |
| 117 /* TODO(estade): there seems to be a webkit bug where this border is not | |
| 118 * always removed when it should be. Investigate. */ | |
| 119 border: 1px solid; | |
| 120 visibility: visible; | |
| 121 } | |
| 122 | |
| 123 .thumbnail-shield { | |
| 124 background: -webkit-linear-gradient(rgba(255, 255, 255, 0), | |
| 125 rgba(255, 255, 255, 0) 50%, | |
| 126 rgba(255, 255, 255, 0.9)); | |
| 127 border-radius: 3px; | |
| 128 } | |
| 129 | |
| 130 /* TODO(dbeam): Remove this when printing of -webkit-linear-gradient() works. */ | |
| 131 @media print { | |
| 132 .thumbnail-shield { | |
| 133 background: none; | |
| 134 } | |
| 135 } | |
| 136 | |
| 137 .most-visited:focus .thumbnail, | |
| 138 .most-visited:hover .thumbnail { | |
| 139 opacity: 0.95; | |
| 140 } | |
| 141 | |
| 142 .most-visited:focus .thumbnail-shield, | |
| 143 .most-visited:hover .thumbnail-shield, | |
| 144 .most-visited:active .thumbnail-shield { | |
| 145 background: -webkit-linear-gradient(rgba(255, 255, 255, 0), | |
| 146 rgba(255, 255, 255, 0) 80%, | |
| 147 rgba(255, 255, 255, 0.9)); | |
| 148 } | |
| 149 | |
| 150 /* The thumbnail gets lighter when clicked, but not when the click is on the | |
| 151 * close button. */ | |
| 152 .most-visited:active .close-button:not(:active) + .thumbnail { | |
| 153 opacity: 0.9; | |
| 154 } | |
| 155 | |
| 156 /* The thumbnail gets a shadow when clicked, but not when the click is on the | |
| 157 * close button. */ | |
| 158 .most-visited:active .close-button:not(:active) + .thumbnail .thumbnail-shield { | |
| 159 box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.2); | |
| 160 } | |
| 161 | |
| 162 .thumbnail-wrapper { | |
| 163 -webkit-box-flex: 1; | |
| 164 -webkit-transition: background-color 150ms; | |
| 165 border: 1px solid transparent; | |
| 166 border-radius: 3px; | |
| 167 display: block; | |
| 168 position: relative; | |
| 169 z-index: 5; | |
| 170 } | |
| 171 | |
| 172 .filler .thumbnail-wrapper { | |
| 173 visibility: visible; | |
| 174 } | |
| 175 | |
| 176 /* 'finishing-drag' is the state we are in after dropping on the trash can. | |
| 177 * Override opacity of the tile to 1, so that the new tile animation | |
| 178 * occurs simultaneously with the trash animation. */ | |
| 179 .tile.dragging.finishing-drag { | |
| 180 opacity: 1; | |
| 181 } | |
| 182 | |
| 183 /* Don't display the new tile until there's something to show. */ | |
| 184 .blacklisted { | |
| 185 opacity: 0; | |
| 186 } | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1129903008:
NTP Zombie Code Slayer Part IV: Most Visited (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master