BookmarkManager: Fix 'new folder text field size changes on clicking it' issue.
[chromium-blink-merge.git] / chrome / browser / resources / local_ntp / most_visited_single.css
blobd2d356f9f7de9858bbe98edf3dcca51679228904
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. */
5 body {
6 -webkit-user-select: none;
7 background: none transparent;
8 color: #323232;
9 margin: 0;
10 overflow: hidden;
11 padding: 0;
14 a {
15 display: block;
19 a:active,
20 a:hover,
21 a:visited {
22 color: inherit;
23 text-decoration: none;
26 #most-visited {
27 -webkit-user-select: none;
28 margin: 0;
29 text-align: -webkit-center;
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;
44 .thumb-ntp #mv-tiles,
45 .thumb-ntp .mv-tiles-old {
46 height: calc(146px + 130px);
47 line-height: 146px;
50 .icon-ntp #mv-tiles,
51 .icon-ntp .mv-tiles-old {
52 height: calc(2 * 112px);
53 line-height: 112px;
54 width: 100%;
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;
71 .mv-tile.hidden,
72 .mv-empty-tile.hidden {
73 display: none;
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);
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);
96 .mv-tile {
97 -webkit-transition-duration: 200ms;
98 -webkit-transition-property: -webkit-transform, border,
99 box-shadow, margin, opacity, width;
100 cursor: pointer;
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);
108 .icon-ntp .mv-tile:focus {
109 background: rgba(0,0,0,0.2);
112 .icon-ntp.dark .mv-tile:focus {
113 background: rgba(255,255,255,0.2);
116 .mv-tile.blacklisted {
117 -webkit-transform: scale(0, 0);
118 border: none !important;
119 margin: 0;
120 width: 0;
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);
127 .mv-tile.mv-blacklist {
128 opacity: 0;
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;
139 .mv-title {
140 border: none;
141 overflow: hidden;
142 position: absolute;
143 text-overflow: clip;
146 .mv-title.multiline {
147 white-space: pre-wrap;
148 word-wrap: break-word;
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);
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;
170 html[dir=rtl] .mv-title {
171 left: 8px;
172 text-align: left;
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;
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;
193 .mv-thumb {
194 border: none;
195 cursor: pointer;
196 display: block;
197 overflow: hidden;
198 position: absolute;
201 .thumb-ntp .mv-thumb {
202 border-radius: 0;
203 height: 94px;
204 left: 3px;
205 top: 31px;
206 width: 148px;
209 .mv-thumb img.thumbnail {
210 height: auto;
211 min-height: 100%;
212 width: 100%;
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;
226 .mv-thumb.failed-img,
227 .mv-thumb.large-icon-outer {
228 background-color: #fff;
229 height: 94px;
230 width: 148px;
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;
244 We use ::after without content to provide an aditional element on top of
245 the thumbnail.
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;
257 .mv-x {
258 -webkit-transition: opacity 150ms;
259 border: none;
260 cursor: pointer;
261 opacity: 0;
262 position: absolute;
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;
272 .icon-ntp .mv-x {
273 background: none;
274 height: 16px;
275 right: 10px;
276 top: 10px;
277 width: 16px;
281 We use ::after without content to provide the masked X element.
282 The "bottom" div is actually just the gradient.
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;
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;
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;
316 html[dir=rtl] .thumb-ntp .mv-x::after {
317 left: -1px;
318 right: auto;
321 html[dir=rtl] .icon-ntp .mv-x {
322 left: 10px;
323 right: auto;
326 .thumb-ntp .mv-x:hover::after {
327 background-color: rgb(90,90,90);
330 .thumb-ntp .mv-x:active::after {
331 background-color: rgb(66,133,244);
334 .icon-ntp .mv-x:hover::after,
335 .icon-ntp .mv-x:active::after {
336 background-color: inherit;
339 .mv-tile:hover .mv-x {
340 -webkit-transition-delay: 500ms;
341 opacity: 1;
344 .icon-ntp .mv-tile:hover .mv-x {
345 -webkit-transition-delay: 800ms;
348 .mv-x:hover {
349 -webkit-transition: none;
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;
363 html[dir=rtl] .mv-favicon {
364 left: auto;
365 right: 7px;
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;
376 .mv-favicon img {
377 height: 100%;
378 width: 100%;
381 .mv-favicon.failed-favicon img {
382 display: none;