Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Delta Between Two Patch Sets: chrome/skin/firstRun.css

Issue 11039060: first run page redesign (Closed)
Left Patch Set: modified installation label Created July 24, 2013, 11:27 a.m.
Right Patch Set: improve after wladimirs code review Created Oct. 4, 2013, 4:50 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
Left: Side by side diff | Download
Right: Side by side diff | Download
LEFTRIGHT
1 /* 1 /*
2 * This file is part of Adblock Plus <http://adblockplus.org/>, 2 * This file is part of Adblock Plus <http://adblockplus.org/>,
3 * Copyright (C) 2006-2013 Eyeo GmbH 3 * Copyright (C) 2006-2013 Eyeo GmbH
4 * 4 *
5 * Adblock Plus is free software: you can redistribute it and/or modify 5 * Adblock Plus is free software: you can redistribute it and/or modify
6 * it under the terms of the GNU General Public License version 3 as 6 * it under the terms of the GNU General Public License version 3 as
7 * published by the Free Software Foundation. 7 * published by the Free Software Foundation.
8 * 8 *
9 * Adblock Plus is distributed in the hope that it will be useful, 9 * Adblock Plus is distributed in the hope that it will be useful,
10 * but WITHOUT ANY WARRANTY; without even the implied warranty of 10 * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 * GNU General Public License for more details. 12 * GNU General Public License for more details.
13 * 13 *
14 * You should have received a copy of the GNU General Public License 14 * You should have received a copy of the GNU General Public License
15 * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>. 15 * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>.
16 */ 16 */
17 17
18 .clearfix 18 @font-face {
Thomas Greiner 2013/07/26 14:22:55 You can get rid of this (including the HTML elemen
19 { 19 font-family: 'CreteRound';
20 clear: both; 20 font-style: normal;
21 } 21 src: url(fonts/CreteRound-Regular.otf);
22 22 src: local ('Ø'),
23 * 23 /*local ('Ø') forces using no local font called CreteRound*/
24 { 24 url(fonts/CreteRound-Regular.otf) format('otf');
25 margin: 0; 25 }
26 padding: 0; 26
27 @font-face {
28 font-family: 'CreteRound';
29 font-style: italic;
30 src: url(fonts/CreteRound-Italic.otf);
31 src: local ('Ø'),
32 /*local ('Ø') forces using no local font called CreteRound*/
33 url(fonts/CreteRound-Italic.otf) format('otf');
27 } 34 }
28 35
29 body 36 body
30 { 37 {
31 font-family: Segoe UI, Helvetica, Arial, sans-serif; 38 font-family: Helvetica, Arial, sans-serif;
32 font-size: 15px; 39 font-size: 15px;
33 line-height: 140%; 40 line-height: 140%;
34 color: #7f776b; 41 color: #7f776b;
35 background-color: #f8f6f2; 42 background-color: #f8f6f2;
36 background-image: url(background-main.png); 43 background-image: url(background-main.png);
44 margin: 0;
45 padding: 0;
37 } 46 }
38 47
39 a, a:link, a:visited 48 a, a:link, a:visited
40 { 49 {
41 color: #5a84b3; 50 color: #5a84b3;
42 text-decoration: underline; 51 text-decoration: underline;
43 font-style: italic; 52 }
53
54 a:hover
55 {
56 text-decoration: none;
44 } 57 }
45 58
46 button 59 button
47 { 60 {
48 cursor: pointer; 61 cursor: pointer;
49 } 62 }
50 63
64 ul
65 {
66 margin: 0;
67 padding: 0;
68 }
69
51 li 70 li
52 { 71 {
72 margin: 0;
73 padding: 0;
53 list-style-type: none; 74 list-style-type: none;
54
Thomas Greiner 2013/07/26 14:22:55 Remove empty line.
55 } 75 }
56 76
57 header 77 header
58 { 78 {
59 height: 200px;
60 background-image: url(background.png); 79 background-image: url(background.png);
61 background-repeat: repeat-x; 80 background-repeat: repeat-x;
62 width: 100%; 81 width: 100%;
63 padding: 40px 0 0 0; 82 padding: 40px 0 0 0;
64 } 83 }
65 84
66 header h1 85 header h1
67 { 86 {
68 font-size: 24px; 87 font-size: 24px;
69 font-weight: normal; 88 font-weight: normal;
70 margin: 0 auto;
71 display: block;
72 color: #57ab5b; 89 color: #57ab5b;
73 text-align: center; 90 text-align: center;
74 margin: 21px auto; 91 margin: 21px auto;
75 padding: 14px 0; 92 padding: 16px 0 14px 0;
76 border: 1px dashed #57ab5b; 93 border: 1px #57ab5b;
77 max-width: 957px; /*border parallel fix*/ 94 border-style: dashed none;
Thomas Greiner 2013/07/26 14:22:55 Why 957px? Seems quite random… why not 950px?
78 border-left: none; 95 /* border parallel fix - 957px is the value
79 border-right: none; 96 * closest to 960px(page width) which makes
Thomas Greiner 2013/07/26 14:22:55 You can do this instead: border: 1px #57ab5b; bor
80 } 97 * the dashed border parallel
81 98 */
82 strong 99 max-width: 957px;
83 { 100 }
84 font-weight: 600; 101
85 } 102 h1,h2,h3
86 103 {
87 h2 { 104 font-family: CreteRound, Helvetica, Arial, sans-serif;
88 font-size: 30px; 105 }
106
107 h2
108 {
109 font-size: 26px;
89 font-weight: lighter; 110 font-weight: lighter;
90 color: #968d81; 111 color: #968d81;
91 line-height: 30px; 112 line-height: 28px;
92 113 text-align: center;
93 } 114 margin: 0;
94 115 padding: 0;
95 h3 { 116 }
96 font-size: 24px; 117
97 color: #4d4d4d; 118 h3
119 {
120 font-size: 22px;
121 color: #7F776B;
98 font-weight: normal; 122 font-weight: normal;
99 margin: 0 0 10px 0; 123 margin: 0 0 10px 0;
100 line-height: 30px; 124 padding: 0;
101 } 125 line-height: 24px;
102 126 }
103 h4 { 127
128 h4
129 {
104 font-size: 15px; 130 font-size: 15px;
105 color: #7f776b; 131 color: #7f776b;
106 font-weight: normal; 132 font-weight: normal;
107 text-align: center; 133 text-align: center;
134 margin: 0;
135 padding: 0;
108 } 136 }
109 137
110 section 138 section
111 { 139 {
112 margin: 0 auto; 140 margin: 0 auto;
113 margin-bottom: 30px; 141 margin-bottom: 30px;
114 max-width: 760px; 142 max-width: 760px;
115 background-image: url(background.png); 143 background-image: url(background.png);
116 padding: 40px 100px; 144 padding: 40px 100px;
117 } 145 }
118 146
119 section > p 147 section > p
120 { 148 {
121 margin: 15px 0 0 0; 149 margin: 15px 0 0 0;
122 } 150 }
123 151
124 152
125 #logo 153 #logo
126 { 154 {
127 margin: 0 auto; 155 margin: 0 auto;
128 height: 100px; 156 height: 100px;
129 width: 99px; 157 width: 99px;
130 display: block; 158 display: block;
131 background-image: url(abp-icon-big.png); 159 background-image: url(abp-icon-big.png);
132 background-repeat: no-repeat; 160 background-repeat: no-repeat;
133 } 161 }
134 162
135 #can-do-more 163 #can-do-more
136 { 164 {
137 max-width: 960px !important; 165 max-width: 960px;
138 padding: 40px 0px 0px 0px !important; 166 padding: 40px 0px 0px 0px;
Thomas Greiner 2013/07/26 14:22:55 Why did you add !important? It works without it be
167 }
168
169 #can-do-more > h2
170 {
171 margin: 0 100px;
172 }
173
174 .fade
175 {
176 opacity: 0;
177 }
178
179 .hide
180 {
181 display: none;
139 } 182 }
140 183
141 #can-do-more-overview 184 #can-do-more-overview
142 { 185 {
186 opacity: 1;
187 max-height: 10000px;
188 max-width: 760px;
189 margin: 30px 100px 0 100px;
190 font-size: 0px;
191 /* hides appearing spacings because of
192 * using display: inline-block*/
143 cursor: pointer; 193 cursor: pointer;
144 } 194 transition: opacity 0.3s step-end;
Wladimir Palant 2013/10/05 09:15:59 Shouldn't it be ease-in-out rather than step-end h
145 195 -moz-transition: opacity 0.3s ease-in-out;
146 #can-do-more > h2 196 -webkit-transition: opacity 0.3s ease-in-out;
Thomas Greiner 2013/07/26 14:22:55 You're overusing > a bit in the area starting here
147 { 197 }
148 margin: 0 100px; 198
149 } 199 #can-do-more.expanded > #can-do-more-overview, #can-do-more.expanded > #can-do-m ore-overview li, #can-do-more.expanded > #can-do-more-overview div, #can-do-more .expanded > #can-do-more-overview h4
150 200 {
151 201 opacity: 0;
152 #can-do-more > ul 202 max-height: 0px;
153 { 203 width: 0;
154 max-width: 760px; 204 margin: 0;
155 height: 140px; 205 padding: 0;
156 margin: 40px 100px 0 100px; 206 transition: none;
157 } 207 -moz-transition: none;
158 208 -webkit-transition: none;
159 #can-do-more > ul > li 209 -o-transition: none;
Wladimir Palant 2013/10/05 09:15:59 We don't set -o-transition above, we shouldn't nee
160 { 210 }
161 width: 250px; 211
212 #can-do-more-overview > li:hover
213 {
214 background-image: url("background-main.png");
215 text-decoration: none;
216 }
217
218 #can-do-more-overview > li
219 {
220 width: 230px;
162 height: 115px; 221 height: 115px;
163 float: left; 222 display: inline-block;
164 border-right: 1px dashed #c7c6c2; 223 border-right: 1px dashed #c7c6c2;
165 padding: 20px 0 0 0; 224 padding: 20px 10px 0 10px;
166 } 225 vertical-align: top;
167 226 text-decoration: underline;
168 #can-do-more > ul > h3 227 -webkit-backface-visibility: hidden;
169 { 228 /* hides the 1px movement chrome bug
170 margin: 20px 0 0 0; 229 * which appears while transition.
171 } 230 */
172 231 }
173 #can-do-more > ul > li > div 232
Thomas Greiner 2013/07/26 14:22:55 Why not give those DIVs a class name or use existi
233 #can-do-more-overview > li > div
174 { 234 {
175 width: 59px; 235 width: 59px;
176 height: 59px; 236 height: 59px;
177 display: block; 237 display: block;
178 margin: 0 auto; 238 margin: 0 auto;
179 } 239 }
180 240
181 #can-do-more > ul > li > h4 241 #can-do-more-overview > li > h4
182 { 242 {
183 margin: 15px 0 0 0; 243 margin: 15px 0 0 0;
184 } 244 }
185 245
186 #can-do-more #feature-first 246 #can-do-more #feature-first
187 { 247 {
188 border-left: 1px dashed #c7c6c2; 248 border-left: 1px dashed #c7c6c2;
189 } 249 }
190 250
191 #feature-malware-image 251 .feature-malware-image
Thomas Greiner 2013/07/26 14:22:55 You don't need an ID to uniquely identify it: #fea
192 { 252 {
193 background-image: url(features/malware.png); 253 background-image: url(features/malware.png);
194 background-repeat: no-repeat; 254 background-repeat: no-repeat;
195 } 255 }
196 256
197 #feature-social-image 257 .feature-social-image
Thomas Greiner 2013/07/26 14:22:55 You don't need an ID to uniquely identify it: #fea
198 { 258 {
199 background-image: url(features/social.png); 259 background-image: url(features/social.png);
200 background-repeat: no-repeat; 260 background-repeat: no-repeat;
201 } 261 }
202 262
203 #feature-tracking-image 263 .feature-tracking-image
204 { 264 {
205 background-image: url(features/tracking.png); 265 background-image: url(features/tracking.png);
206 background-repeat: no-repeat; 266 background-repeat: no-repeat;
207 } 267 }
208 268
209 #can-do-more-expanded 269 #can-do-more-expanded
210 { 270 {
211 margin: 40px 100px 0 100px; 271 opacity: 0;
212 display: none; 272 max-height: 0;
213 } 273 }
214 274
215 #features 275 #can-do-more.expanded > #can-do-more-expanded
216 { 276 {
217 display: block; 277 opacity: 1;
278 max-height: 10000px;
279 margin: 30px 100px 0 100px;
280 transition: opacity 0.5s ease-in-out;
281 -moz-transition: opacity 0.5s ease-in-out;
282 -webkit-transition: opacity 0.5s ease-in-out;
283 transition-delay: 0.2s;
284 -webkit-transition-delay: 0.2s;
Wladimir Palant 2013/10/05 09:15:59 -moz-transition-delay seems to be missing here. Th
285 }
286
287 #features, .feature:not([hidden]), .feature-image, .feature-description, .featur e-description, .feature-description-textblock, .feature-description-textblock > span, .feature-image
288 {
289 width: 0;
290 height: 0;
291 margin: 0;
292 padding: 0;
293 transition: none;
294 -moz-transition: none;
295 -webkit-transition: none;
296 -o-transition: none;
297 }
298
299
300 #can-do-more.expanded #features,#can-do-more.expanded .feature:not([hidden]),#ca n-do-more.expanded .feature-image,#can-do-more.expanded .feature-description,#ca n-do-more.expanded .feature-description,#can-do-more.expanded .feature-descripti on-textblock,#can-do-more.expanded .feature-description-textblock > span,#can-do -more.expanded .feature-image
301 {
302 width: auto;
303 height: auto;
304 margin: auto;
305 padding: auto;
306 transition-property: all;
307 -moz-transition-property: all;
308 -webkit-transition-property: all;
309 -o-transition-property: all;
Wladimir Palant 2013/10/05 09:15:59 As above, -o-transition-property and -moz-transiti
310 transition-duration: 0.5s;
311 -webkit-transition-duration: 0.5s;
312 transition-timing-function: ease-in-out;
313 -webkit-transition-timing-function: ease-in-out;
314 }
315
316 #can-do-more.expanded #features
317 {
218 border-spacing: 10px; 318 border-spacing: 10px;
219 margin: 0px; 319 margin: 0px;
220 padding: 0px; 320 padding: 0px;
221 } 321 }
222 322
223 .feature:not([hidden]) 323 #can-do-more.expanded .feature:not([hidden])
224 { 324 {
225 display: block; 325 display: block;
226 list-style-type: none; 326 list-style-type: none;
227 padding: 30px 0; 327 padding: 30px 0;
228 padding-bottom: 20px; 328 padding-bottom: 20px;
229 border-top: 1px dashed #c0bebb; 329 border-top: 1px dashed #c0bebb;
230 } 330 }
231 331
232 .feature-image, .feature-description 332 #can-do-more.expanded .feature-image, #can-do-more.expanded .feature-description
233 { 333 {
234 display: inline-block; 334 display: inline-block;
235 *display: inline; /* IE6 inline-block fix */ 335 *display: inline; /* IE6 inline-block fix */
236 *zoom: 1; 336 *zoom: 1;
237 vertical-align: top; 337 vertical-align: top;
238 } 338 }
239 339
240 .feature-description 340 #can-do-more.expanded .feature-description
241 { 341 {
242 margin: 0px 0px 0 20px; 342 margin: 0px 0px 0 20px;
243 max-width: 624px; 343 width: 625px;
Thomas Greiner 2013/07/26 14:22:55 Where does this number come from?
244 } 344 max-width: 85%;
245 345 }
246 .feature-description-textblock 346
247 { 347 #can-do-more.expanded .feature-description-textblock
248 max-width: 478px; 348 {
Thomas Greiner 2013/07/26 14:22:55 Where does this number come from?
349 width: 480px;
350 max-width: 100%;
249 margin: 0 40px 0 0; 351 margin: 0 40px 0 0;
250 float: left; 352 display: inline-block;
Thomas Greiner 2013/07/26 14:22:55 Do you really need a float here? Why not make it a
251 } 353 }
252 354
253 .feature-description-textblock > span 355 #can-do-more.expanded .feature-description-textblock > span
254 { 356 {
255 margin: 15px 0 0 0; 357 margin: 15px 0 0 0;
256 } 358 }
257 359
258 .feature-image 360 #can-do-more.expanded .feature-image
259 { 361 {
260 width: 59px; 362 width: 59px;
261 height: 59px; 363 height: 59px;
262 margin: 8px 0 10px 20px; 364 margin: 8px 0 10px 20px;
263 }
264
265 .feature button
266 {
267 cursor: pointer;
268 position: relative;
269 top: 0px;
270 padding: 5px 10px;
271 *padding: 2px 3px;
272 font-weight: none;
273 font-size: inherit;
274 color: white;
275 text-shadow: 2px 2px 2px #327d14;
276 border: none;
277 border-radius: 3px;
278 box-shadow: 0 1px 0 0 #486c15, 0 2px 0 0 #517422;
279 background-color: #62c52b;
280 background: -webkit-linear-gradient(top, #62c52b, #4f9d22);
281 background: -moz-linear-gradient(top, #62c52b, #4f9d22);
282 background: -o-linear-gradient(top, #62c52b, #4f9d22);
283 background: -ms-linear-gradient(top, #62c52b, #4f9d22);
284 background: linear-gradient(top, #62c52b, #4f9d22);
285 -webkit-transition: box-shadow 0.3s ease;
286 -moz-transition: box-shadow 0.3s ease;
287 -o-transition: box-shadow 0.3s ease;
288 -ms-transition: box-shadow 0.3s ease;
289 transition: box-shadow 0.3s ease;
290 }
291
292 .feature button:hover
293 {
294 box-shadow: 0px 2px 7px #486c15, 0 1px 0 0 #486c15;
295 }
296
297 .feature button:active
298 {
299 top: 3px;
300 top: 0px\9;
301 box-shadow: 0px 0px 7px #486c15;
302 background-color: #4f9d22;
303 background: -webkit-linear-gradient(bottom, #62c52b, #4f9d22);
304 background: -moz-linear-gradient(bottom, #62c52b, #4f9d22);
305 background: -o-linear-gradient(bottom, #62c52b, #4f9d22);
306 background: -ms-linear-gradient(bottom, #62c52b, #4f9d22);
307 background: linear-gradient(bottom, #62c52b, #4f9d22);
308 -webkit-transition: none;
309 -moz-transition: none;
310 -o-transition: none;
311 -ms-transition: none;
312 transition: none;
313 *zoom: 1;
314 }
315
316 .feature button.disable
317 {
318 text-shadow: 2px 2px 2px #9d4f22;
319 box-shadow: 0 1px 0 0 #9d4f22, 0 2px 0 0 #999;
320 background-color: #c5622b;
321 background: -webkit-linear-gradient(top, #c5622b, #9d4f22);
322 background: -moz-linear-gradient(top, #c5622b, #9d4f22);
323 background: -o-linear-gradient(top, #c5622b, #9d4f22);
324 background: -ms-linear-gradient(top, #c5622b, #9d4f22);
325 background: linear-gradient(top, #c5622b, #9d4f22);
326 }
327
328 .feature button.disable:hover
329 {
330 box-shadow: 0px 2px 7px #9d4f22, 0 1px 0 0 #9d4f22;
331 }
332
333 .feature button.disable:active
334 {
335 top: 3px;
336 top: 0px\9;
337 box-shadow: 0px 0px 7px #9d4f22;
338 background-color: #9d4f22;
339 background: -webkit-linear-gradient(bottom, #c5622b, #9d4f22);
340 background: -moz-linear-gradient(bottom, #c5622b, #9d4f22);
341 background: -o-linear-gradient(bottom, #c5622b, #9d4f22);
342 background: -ms-linear-gradient(bottom, #c5622b, #9d4f22);
343 background: linear-gradient(bottom, #c5622b, #9d4f22);
344 -webkit-transition: none;
345 -moz-transition: none;
346 -o-transition: none;
347 -ms-transition: none;
348 transition: none;
349 *zoom: 1;
350 } 365 }
351 366
352 #activate-features 367 #activate-features
353 { 368 {
354 width: 100%; 369 width: 100%;
355 background-image: url("background-candomore.png"); 370 background-image: url("background-candomore.png");
356 margin: 30px 0 0 0; 371 margin: 30px 0 0 0;
357 padding: 14px 0 14px 0; 372 padding: 14px 0 14px 0;
358 cursor: pointer; 373 cursor: pointer;
374 text-align: center;
375 white-space: nowrap;
376 }
377
378 #activate-features-label
379 {
380 display: inline-block;
381 width: 86%;
359 color: #fff; 382 color: #fff;
360 font-size: 22px; 383 font-size: 22px;
384 text-align: center;
361 font-style: italic; 385 font-style: italic;
362 text-decoration: underline; 386 font-family: CreteRound, Helvetica, Arial, sans-serif;
363 text-align: center; 387 -moz-transition: opacity 0.5s ease-in-out;
388 transition: opacity 0.5s ease-in-out;
389 }
390
391 #can-do-more.expanded #label-show-expanded
392 {
393 display: block;
394 }
395
396 #can-do-more.expanded #label-show-overview
397 {
398 display: none;
399 }
400
401 #label-show-expanded
402 {
403 display: none;
404 }
405
406 #label-show-overview
407 {
408 display: block;
409 }
410
411 #activate-features-label:hover
Thomas Greiner 2013/10/05 15:51:19 This is a weird behavior. It's neither restricted
412 {
413 color: #1f6822;
414 }
415
416 #can-do-more.expanded .arrow
417 {
418 background-image: url("arrow-up.png");
419 }
420
421 .arrow
422 {
423 width: 29px;
424 height: 22px;
425 vertical-align: bottom;
426 display: inline-block;
427 background-image: url("arrow-down.png");
364 } 428 }
365 429
366 #share 430 #share
367 { 431 {
368 background-image: url(background-share.png); 432 background-image: url(background-share.png);
369 padding: 50px 100px 40px 100px !important; 433 padding: 50px 100px 40px 100px;
Thomas Greiner 2013/07/26 14:22:55 Why did you add !important? It works without it.
370 max-width: 760px; 434 max-width: 760px;
371 text-align: center; 435 text-align: center;
436 font-family: CreteRound, Helvetica, Arial, sans-serif;
372 } 437 }
373 438
374 #share h2 439 #share h2
375 { 440 {
376 color: #fff; 441 color: #fff;
377 margin: 10px 8px 10px 0; 442 margin: 0 0 30px 0;
378 text-align: center; 443 }
444
445 #share h2 > a
446 {
447 color: #fff;
448 }
449
450 #share h2 > a:hover
451 {
452 color: #2e5075;
453 }
454
455 #share span
456 {
457 color: #bed1e6;
458 text-align: center;
459 line-height: 34px;
460 font-size: 22px;
461 display: block;
462 }
463
464 #donate:hover, .share-buttons a:hover
465 {
466 -moz-box-shadow: 0px 0px 0px 2px #8ca7c4;
467 -webkit-box-shadow: 0px 0px 0px 2px #8ca7c4;
468 box-shadow: 0px 0px 0px 2px #8ca7c4;
469 border-radius: 30px;
470 }
471
472 #donate-block span, #share-block span
473 {
474 margin: 13px 20px 10px 20px;
475 }
476
477 #donate-block, #share-block
478 {
479 min-width: 250px;
379 display: inline-block; 480 display: inline-block;
380 vertical-align: top; 481 vertical-align: top;
381 line-height: 38px; 482 padding: 20px 0 0 0;
382 font-size: 28px;
383 } 483 }
384 484
385 #donate-block 485 #donate-block
386 { 486 {
387 display: inline-block; 487 border: 1px dashed #37506d;
488 border-style: none dashed;
489 width: 50%;
388 } 490 }
389 491
390 #share-block 492 #share-block
391 { 493 {
392 display: inline-block; 494 border-right: 1px dashed #37506d;
393 max-width: 480px; 495 width: 49%;
496 }
497
498 .share-buttons
499 {
500 margin: 6px 0 0 0;
501 cursor: pointer;
502 vertical-align: top;
503 /* because inline block creates
504 * space if not captured with
505 * font-size and line-height 0px
506 */
507 font-size: 0px;
508 line-height: 0px;
509 }
510
511 .share-buttons > a
512 {
513 width: 50px;
514 height: 50px;
515 margin: 0 8px;
516 text-decoration: none;
517 display: inline-block;
518 }
519
520 html[lang^="zh_"] #share-chinese,
521 html:not([lang^="zh_"]) #share-general
522 {
523 display: block;
524 }
525
526 html[lang^="zh_"] #share-general,
527 html:not([lang^="zh_"]) #share-chinese
528 {
529 display: none;
530 }
531
532 #share-chinese > a
533 {
534 border-bottom: 2px solid transparent;
535 }
536
537 #share-chinese > a:hover
538 {
539 -moz-box-shadow: none;
540 -webkit-box-shadow: none;
541 box-shadow: none;
542 border-radius: 0;
543 border-bottom: 2px solid #8CA7C4;
394 } 544 }
395 545
396 #share-facebook 546 #share-facebook
397 { 547 {
398 background-image: url(social/facebook.png); 548 background-image: url(social/facebook.png);
399 background-repeat: no-repeat; 549 background-repeat: no-repeat;
Thomas Greiner 2013/07/26 14:22:55 You don't need background-repeat because width and
400 } 550 }
401 551
402 #share-twitter 552 #share-twitter
403 { 553 {
404 background-image: url(social/twitter.png); 554 background-image: url(social/twitter.png);
405 background-repeat: no-repeat; 555 background-repeat: no-repeat;
Thomas Greiner 2013/07/26 14:22:55 You don't need background-repeat because width and
406 } 556 }
407 557
408 #share-gplus 558 #share-gplus
409 { 559 {
410 background-image: url(social/googleplus.png); 560 background-image: url(social/googleplus.png);
411 background-repeat: no-repeat; 561 background-repeat: no-repeat;
Thomas Greiner 2013/07/26 14:22:55 You don't need background-repeat because width and
412 } 562 }
413 563
414 #share-buttons > a 564 #share-renren
415 { 565 {
416 width: 56px; 566 background-image: url(social/renren.png);
417 height: 56px; 567 background-repeat: no-repeat;
418 margin: 0 4px 0 0; 568 }
419 text-decoration: none; 569
420 display: inline-block; 570 #share-weibo
421 } 571 {
422 572 background-image: url(social/weibo.png);
423 #share-buttons 573 background-repeat: no-repeat;
424 {
425 width: auto;
426 margin: 3px 0 0 0;
427 min-height: 59px;
428 cursor: pointer;
429 display: inline-block;
430 } 574 }
431 575
432 #dataCorruptionWarning 576 #dataCorruptionWarning
433 { 577 {
434 font-size: 200%; 578 font-size: 160%;
435 line-height: 140%; 579 border: 3px dashed red;
436 margin: 20px; 580 text-align: center;
437 padding: 20px;
438 border: 3px solid red;
439 border-radius: 10px;
440 } 581 }
441 582
442 #social ul 583 #social ul
443 { 584 {
444 list-style: none; 585 list-style: none;
445 display: inline-block; 586 display: inline-block;
446 padding: 0; 587 padding: 0;
447 margin: 0; 588 margin: 0;
448 } 589 }
449 590
(...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after
495 636
496 #glass-pane 637 #glass-pane
497 { 638 {
498 position: fixed; 639 position: fixed;
499 top: 0; 640 top: 0;
500 right: 0; 641 right: 0;
501 bottom: 0; 642 bottom: 0;
502 left: 0; 643 left: 0;
503 background: rgba(0, 0, 0, 0.5) url(ajax-loader.gif) no-repeat 50% 50%; 644 background: rgba(0, 0, 0, 0.5) url(ajax-loader.gif) no-repeat 50% 50%;
504 z-index: 101; 645 z-index: 101;
505
506 -webkit-transition-duration: 0.2s; 646 -webkit-transition-duration: 0.2s;
507 -moz-transition-duration: 0.2s; 647 -moz-transition-duration: 0.2s;
508 -o-transition-duration: 0.2s; 648 -o-transition-duration: 0.2s;
509 -ms-transition-duration: 0.2s; 649 -ms-transition-duration: 0.2s;
510 transition-duration: 0.2s; 650 transition-duration: 0.2s;
511 } 651 }
512 652
513 #share-popup 653 #share-popup
514 { 654 {
515 position: absolute; 655 position: absolute;
(...skipping 15 matching lines...) Expand all
531 671
532 #share-popup.visible 672 #share-popup.visible
533 { 673 {
534 -webkit-transition-duration: 0.15s; 674 -webkit-transition-duration: 0.15s;
535 -moz-transition-duration: 0.15s; 675 -moz-transition-duration: 0.15s;
536 -o-transition-duration: 0.15s; 676 -o-transition-duration: 0.15s;
537 -ms-transition-duration: 0.15s; 677 -ms-transition-duration: 0.15s;
538 transition-duration: 0.15s; 678 transition-duration: 0.15s;
539 } 679 }
540 680
541
Thomas Greiner 2013/07/26 14:22:55 :)
542 .toggle 681 .toggle
543 { 682 {
544 cursor: pointer; 683 cursor: pointer;
545 position: relative; 684 position: relative;
546 display: inline-block; 685 display: inline-block;
547 top: 50%; 686 vertical-align: top;
548 height: 22px; 687 height: 22px;
549 margin: 40px 0px 7px 0px; 688 margin: 32px 0px 7px 0px;
550 border-radius: 9999px; 689 border-radius: 9999px;
551 border: 1px solid #999; 690 border: 1px solid #999;
552 overflow: hidden; 691 overflow: hidden;
553 -moz-user-select: none; 692 -moz-user-select: none;
554 -webkit-user-select: none; 693 -webkit-user-select: none;
555 user-select: none; 694 user-select: none;
556 } 695 }
557 696
697 .toggle:hover
698 {
699 -moz-box-shadow: 0px 0px 3px 0px #968d81;
700 -webkit-box-shadow: 0px 3px 0px 0px #968d81;
701 box-shadow: 0px 0px 3px 0px #968d81;
702 }
703
558 .toggle:active 704 .toggle:active
559 { 705 {
560 cursor: wait; 706 cursor: wait;
561 } 707 }
562 708
563 .toggle-on, .toggle-off 709 .toggle-on, .toggle-off
564 { 710 {
565 min-width: 42px; 711 min-width: 42px;
566 height: 100%; 712 height: 100%;
567 font-size: 11px; 713 font-size: 11px;
568 font-weight: 500; 714 font-weight: 500;
569 text-align: center; 715 text-align: center;
570 line-height: 23px; 716 line-height: 23px;
717 border-radius: 9999px;
718 -moz-border-radius: 9999px;
719 -webkit-border-radius: 9999px;
571 } 720 }
572 721
573 .toggle-on 722 .toggle-on
574 { 723 {
575 padding: 0px 30px 0px 10px; 724 padding: 0px 30px 0px 10px;
576 color: rgba(255,255,255, 0.8); 725 color: rgba(255,255,255, 0.8);
577 text-shadow: 1px 1px rgba(0,0,0,0.2); 726 text-shadow: 1px 1px rgba(0,0,0,0.2);
578 box-shadow: inset 2px 2px 6px rgba(0,0,0,0.2); 727 box-shadow: inset 2px 2px 6px rgba(0,0,0,0.2);
579 background: rgb(69,163,31); 728 background: rgb(69,163,31);
580 } 729 }
581 730
582 .toggle-off 731 .toggle-off
583 { 732 {
584 padding: 0px 10px 0px 30px; 733 padding: 0px 10px 0px 30px;
585 color: rgba(0,0,0,0.6); 734 color: rgba(0,0,0,0.6);
586 text-shadow: 1px 1px rgba(255,255,255,0.2); 735 text-shadow: 1px 1px rgba(255,255,255,0.2);
587 background: #cfcfcf; 736 background: #cfcfcf;
588 background: -moz-linear-gradient(top, #cfcfcf 0%, #f5f5f5 100%); 737 background: -moz-linear-gradient(top, #cfcfcf 0%, #f5f5f5 100%);
589 background: -webkit-linear-gradient(top, #cfcfcf 0%,#f5f5f5 100%); 738 background: -webkit-linear-gradient(top, #cfcfcf 0%,#f5f5f5 100%);
590 background: linear-gradient(to bottom, #cfcfcf 0%,#f5f5f5 100%); 739 background: linear-gradient(to bottom, #cfcfcf 0%,#f5f5f5 100%);
591 } 740 }
592 741
593
594 .toggle-blob 742 .toggle-blob
595 { 743 {
596 position: absolute; 744 position: absolute;
597 top: 0px; 745 top: 0px;
598 right: 0px; 746 right: 0px;
599 height: 100%; 747 height: 100%;
600 width: 22px; 748 width: 22px;
601 border-radius: 50px; 749 border-radius: 50px;
602 box-shadow: 1px 1px 2px #888;
603 background: #cfcfcf; 750 background: #cfcfcf;
604 background: -moz-linear-gradient(bottom, #cfcfcf 0%, #f5f5f5 100%); 751 background: -moz-linear-gradient(bottom, #cfcfcf 0%, #f5f5f5 100%);
605 background: -webkit-linear-gradient(bottom, #cfcfcf 0%,#f5f5f5 100%); 752 background: -webkit-linear-gradient(bottom, #cfcfcf 0%,#f5f5f5 100%);
606 background: linear-gradient(to top, #cfcfcf 0%,#f5f5f5 100%); 753 background: linear-gradient(to top, #cfcfcf 0%,#f5f5f5 100%);
754 box-shadow: 1px 1px 2px #888;
607 } 755 }
608 756
609 .off .toggle-on 757 .off .toggle-on
610 { 758 {
611 margin-top: -22px; 759 margin-top: -22px;
612 } 760 }
613 761
614 .off .toggle-blob 762 .off .toggle-blob
615 { 763 {
616 left: 0px; 764 left: 0px;
617 right: auto; 765 right: auto;
618 } 766 }
619 767
620 #donate 768 #donate
621 { 769 {
622 height: 24px; 770 height: 21px;
623 display: inline-block; 771 display: inline-block;
624 margin: 15px 12px 10px 4px; 772 margin: 15px 0px 2px 0px;
625 font-size: 16px; 773 font-size: 16px;
626 line-height: 24px; 774 color: #003366;
627 color: #003366 !important;
Thomas Greiner 2013/07/26 14:22:55 Why did you add !important? It works without it be
628 cursor: pointer; 775 cursor: pointer;
629 font-weight: bold; 776 font-weight: bold;
630 padding: 3px 16px; 777 padding: 5px 18px;
631 text-decoration: none; 778 text-decoration: none;
632 border-radius: 20px; 779 border-radius: 20px;
633 border: 1px solid #FF9933; 780 border: 1px solid #FF9933;
634 overflow: hidden; 781 overflow: hidden;
635 font-family: arial, sans-serif; 782 font-family: arial, sans-serif;
636 background-image: url(donate.png); 783 background-image: url(donate.png);
637 background-repeat: repeat-x; 784 background-repeat: repeat-x;
638 } 785 }
786
787 footer
788 {
789 margin: 0 auto 30px;
790 max-width: 960px;
791 text-align: center;
792 }
LEFTRIGHT

Powered by Google App Engine
This is Rietveld