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

Side by Side Diff: chrome/browser/resources/ntp/most_visited.css

Issue 8036002: ntp: remove ntp3 resources (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: . Created 9 years, 3 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 | Annotate | Revision Log
OLDNEW
(Empty)
1 /* Most Visited */
2
3 #most-visited-maxiview {
4 position: relative;
5 height: 366px;
6 -webkit-user-select: none;
7 }
8
9 .thumbnail-container {
10 position: absolute;
11 color: hsl(213, 90%, 24%);
12 text-decoration: none;
13 -webkit-transition: left .15s, right .15s, top .15s;
14 text-decoration: none;
15 }
16
17 .thumbnail-container:focus {
18 outline: none;
19 }
20
21 .thumbnail,
22 .thumbnail-container > .title {
23 width: 207px; /* natural size is 196 */
24 height: 129px; /* 136 */
25 -webkit-transition: width .15s, height .15s;
26 }
27
28 .thumbnail-container > .title {
29 line-height: 16px;
30 height: 16px;
31 margin: 0;
32 margin-top: 4px;
33 font-size: 100%;
34 font-weight: normal;
35 padding: 0 3px;
36 opacity: 1;
37 -webkit-transition: opacity .15s, width .15s;
38 color: black;
39 }
40
41 .thumbnail-wrapper {
42 display: block;
43 background-size: 212px 132px;
44 background: no-repeat 4px 4px;
45 background-color: white;
46 border-radius: 5px;
47 -webkit-transition: background-size .15s;
48 position: relative;
49 }
50
51 .filler * {
52 visibility: hidden;
53 }
54
55 .filler {
56 pointer-events: none;
57 }
58
59 .filler .thumbnail-wrapper {
60 visibility: visible;
61 border: 3px solid hsl(213, 60%, 92%);
62 }
63
64 .filler .thumbnail {
65 visibility: inherit;
66 border: 1px solid white;
67 padding: 0;
68 background-color: hsl(213, 60%, 92%);
69 }
70
71 .edit-bar {
72 display: -webkit-box;
73 -webkit-box-orient: horizontal;
74 -webkit-box-align: stretch;
75 padding: 3px;
76 padding-bottom: 0;
77 height: 17px; /* 23 - 2 * 3 */
78 cursor: move;
79 font-size: 100%;
80 line-height: 17px;
81 background: hsl(213, 54%, 95%);
82 border-top-left-radius: 4px;
83 border-top-right-radius: 4px;
84 position: relative;
85 margin-top: 21px;
86 margin-bottom: -21px;
87 -webkit-transition: margin .15s, background .15s;
88 }
89
90 .edit-bar > * {
91 display: block;
92 position: relative;
93 }
94
95 .thumbnail-container:focus .edit-bar,
96 .thumbnail-container:hover .edit-bar {
97 margin-top: 0;
98 margin-bottom: 0;
99 -webkit-transition-delay: .5s, 0s;
100
101 /* We need background-color as well to get the fade out animation correct */
102 background-color: hsl(213, 66%, 57%);
103 background-image: -webkit-linear-gradient(hsl(213, 87%, 67%),
104 hsl(213, 66%, 57%));
105 }
106
107 .edit-bar > .spacer {
108 -webkit-box-flex: 1;
109 }
110
111 .edit-bar > .pin,
112 .edit-bar > .remove {
113 width: 16px;
114 height: 16px;
115 cursor: pointer;
116 background-image: no-repeat 50% 50%;
117 }
118
119 .edit-bar > .pin {
120 background-image: url('ntp_pin_off.png');
121 }
122
123 .edit-bar > .pin:hover {
124 background-image: url('ntp_pin_off_h.png');
125 }
126
127 .edit-bar > .pin:active {
128 background-image: url('ntp_pin_off_p.png');
129 }
130
131 .pinned .edit-bar > .pin {
132 background-image: url('ntp_pin_on.png');
133 }
134
135 .pinned .edit-bar > .pin:hover {
136 background-image: url(ntp_pin_on_h.png');
137 }
138
139 .pinned .edit-bar > .pin:active {
140 background-image: url(ntp_pin_on_p.png');
141 }
142
143 .edit-bar > .remove {
144 background-image: url('ntp_close.png');
145 }
146
147 .edit-bar > .remove:hover {
148 background-image: url('ntp_close_h.png');
149 }
150
151 .edit-bar > .remove:active {
152 background-image: url('ntp_close_p.png');
153 }
154
155 .thumbnail-container > .title > div {
156 white-space: nowrap;
157 overflow: hidden;
158 text-overflow: ellipsis;
159 background: no-repeat 0 50%;
160 background-size: 16px;
161 padding-left: 20px; /* we cannot use padding start here because even if we set
162 the direction we always want the icon on the same side
163 */
164 padding-right: 0;
165 }
166
167 html[dir=rtl] .thumbnail-container > .title > div {
168 background-position-x: 100%;
169 padding-left: 0;
170 padding-right: 20px;
171 text-align: right;
172 }
173
174 .thumbnail {
175 border: 3px solid hsl(213, 63%, 93%);
176 padding: 1px;
177 border-radius: 5px;
178 display: block;
179 -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0);
180 -webkit-transition: width .15s, height .15s, border-color .15s,
181 border-top-left-radius .15s, border-top-right-radius .15s,
182 -webkit-box-shadow .15s;
183 }
184
185 .edit-mode-border {
186 border-radius: 4px;
187
188 /* when dragged over we move this */
189 position: relative;
190 -webkit-transition: top .15s, left .15s;
191 }
192
193 .thumbnail-container:focus .thumbnail,
194 .thumbnail-container:hover .thumbnail {
195 border-color: hsl(213, 66%, 57%);
196 -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0);
197 border-top-left-radius: 0;
198 border-top-right-radius: 0;
199
200 background-image: -webkit-linear-gradient(hsla(0, 0%, 0%, 0),
201 hsla(0, 0%, 47%, 0) 85%,
202 hsla(0, 0%, 47%, 0.2));
203
204 /* delay border radius transition as much as the edit bar slide delay */
205 -webkit-transition-delay: 0, 0, 0, .5s, .5s, 0;
206 }
207
208 .thumbnail-container:focus > .edit-mode-border,
209 .thumbnail-container:hover > .edit-mode-border {
210 background-color: hsl(213, 66%, 57%);
211 -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, .5);
212 }
213
214 .dragging,
215 .dragging * {
216 -webkit-transition: none !important;
217 }
218
219 .dragging > .title {
220 opacity: 0;
221 }
222
223 @-webkit-keyframes 'fade-in' {
224 0% {
225 opacity: 0;
226 }
227
228 100% {
229 opacity: 1;
230 }
231 }
232
233 .fade-in {
234 -webkit-animation: 'fade-in' .15s;
235 }
236
237 @media (max-width: 940px) {
238 #most-visited-maxiview {
239 height: 294px;
240 }
241
242 .thumbnail,
243 .thumbnail-container > .title {
244 width: 150px;
245 height: 93px;
246 }
247
248 .thumbnail-container > .title {
249 height: auto;
250 }
251
252 .thumbnail-wrapper {
253 background-size: 150px 93px;
254 }
255 }
256
257 #most-visited-settings {
258 position: absolute;
259 top: 1px;
260 right: 0;
261 border: 0;
262 cursor: pointer;
263 font-size: 70%;
264 margin: 0;
265 padding: 0;
266 text-decoration: underline;
267 visibility: hidden;
268 -webkit-padding-start: 3px;
269 z-index: 3;
270 }
271
272 html[dir=rtl] #most-visited-settings {
273 left: 0;
274 right: auto;
275 }
276
277 #most-visited:not(.collapsed) #most-visited-settings.has-blacklist {
278 visibility: visible;
279 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698