Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(749)

Side by Side Diff: chrome/browser/resources/ntp4/most_visited_page.css

Issue 1151563005: Revert of NTP Zombie Code Slayer Part IV: Most Visited (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(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 }
OLDNEW
« no previous file with comments | « chrome/browser/resources/ntp4/compiled_resources.gyp ('k') | chrome/browser/resources/ntp4/most_visited_page.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698