Left: | ||
Right: |
LEFT | RIGHT |
---|---|
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 Loading... | |
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 Loading... | |
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 } | |
LEFT | RIGHT |