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

Side by Side Diff: chrome/skin/firstRun.css

Issue 5056848617013248: Issue 1706 - Move first-run page to adblockplusui repository (Closed)
Patch Set: Addressed comments Created Jan. 7, 2015, 4:34 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« no previous file with comments | « chrome/skin/features/tracking.png ('k') | chrome/skin/fonts/CreteRound-Italic.otf » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 /*
2 * This file is part of Adblock Plus <http://adblockplus.org/>,
3 * Copyright (C) 2006-2014 Eyeo GmbH
4 *
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
7 * published by the Free Software Foundation.
8 *
9 * Adblock Plus is distributed in the hope that it will be useful,
10 * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 * GNU General Public License for more details.
13 *
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/>.
16 */
17
18 @font-face {
19 font-family: 'CreteRound';
20 font-style: normal;
21 src: url(fonts/CreteRound-Regular.otf);
22 src: local ('Ø'),
23 /*local ('Ø') forces using no local font called CreteRound*/
24 url(fonts/CreteRound-Regular.otf) format('otf');
25 }
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');
34 }
35
36 body
37 {
38 font-family: Helvetica, Arial, sans-serif;
39 font-size: 15px;
40 line-height: 140%;
41 color: #7f776b;
42 background-color: #f8f6f2;
43 background-image: url(background-main.png);
44 margin: 0;
45 padding: 0;
46 }
47
48 a, a:link, a:visited
49 {
50 color: #5a84b3;
51 text-decoration: underline;
52 }
53
54 a:hover
55 {
56 text-decoration: none;
57 }
58
59 button
60 {
61 cursor: pointer;
62 }
63
64 ul
65 {
66 margin: 0;
67 padding: 0;
68 }
69
70 li
71 {
72 margin: 0;
73 padding: 0;
74 list-style-type: none;
75 }
76
77 header
78 {
79 background-image: url(background.png);
80 background-repeat: repeat-x;
81 width: 100%;
82 padding: 40px 0 0 0;
83 }
84
85 header h1
86 {
87 font-size: 24px;
88 font-weight: normal;
89 color: #57ab5b;
90 text-align: center;
91 margin: 21px auto;
92 padding: 16px 0 14px 0;
93 border: 1px #57ab5b;
94 border-style: dashed none;
95 /* border parallel fix - 957px is the value
96 * closest to 960px(page width) which makes
97 * the dashed border parallel
98 */
99 max-width: 957px;
100 }
101
102 h1,h2,h3
103 {
104 font-family: CreteRound, Helvetica, Arial, sans-serif;
105 }
106
107 h2
108 {
109 font-size: 26px;
110 font-weight: lighter;
111 color: #968d81;
112 line-height: 28px;
113 text-align: center;
114 margin: 0;
115 padding: 0;
116 }
117
118 h3
119 {
120 font-size: 22px;
121 color: #7F776B;
122 font-weight: normal;
123 margin: 0 0 10px 0;
124 padding: 0;
125 line-height: 24px;
126 }
127
128 h4
129 {
130 font-size: 15px;
131 color: #7f776b;
132 font-weight: normal;
133 text-align: center;
134 margin: 0;
135 padding: 0;
136 }
137
138 section
139 {
140 margin: 0 auto;
141 margin-bottom: 30px;
142 max-width: 760px;
143 background-image: url(background.png);
144 padding: 40px 100px;
145 }
146
147 section > p
148 {
149 margin: 15px 0 0 0;
150 }
151
152 #logo
153 {
154 margin: 0 auto;
155 height: 100px;
156 width: 99px;
157 display: block;
158 background-image: url(abp-icon-big.png);
159 background-repeat: no-repeat;
160 }
161
162 #can-do-more
163 {
164 max-width: 960px;
165 padding: 40px 0px 0px 0px;
166 border-bottom: 4px solid #968D81;
167 }
168
169 #can-do-more > h2
170 {
171 margin: 0 100px;
172 }
173
174 .feature-malware-image
175 {
176 background-image: url(features/malware.png);
177 background-repeat: no-repeat;
178 }
179
180 .feature-social-image
181 {
182 background-image: url(features/social.png);
183 background-repeat: no-repeat;
184 }
185
186 .feature-tracking-image
187 {
188 background-image: url(features/tracking.png);
189 background-repeat: no-repeat;
190 }
191
192 #can-do-more-content
193 {
194 margin: 30px 100px 20px 100px;
195 }
196
197 #can-do-more #features
198 {
199 border-spacing: 10px;
200 margin: 0px;
201 padding: 0px;
202 }
203
204 #can-do-more .feature:not([hidden])
205 {
206 display: block;
207 list-style-type: none;
208 padding: 30px 0;
209 padding-bottom: 20px;
210 border-top: 1px dashed #c0bebb;
211 }
212
213 #can-do-more .feature-image, #can-do-more .feature-description
214 {
215 display: inline-block;
216 *display: inline; /* IE6 inline-block fix */
217 *zoom: 1;
218 vertical-align: top;
219 }
220
221 #can-do-more .feature-description
222 {
223 margin: 0px 0px 0 20px;
224 width: 625px;
225 max-width: 85%;
226 }
227
228 #can-do-more .feature-description-textblock
229 {
230 width: 480px;
231 max-width: 100%;
232 margin: 0 40px 0 0;
233 display: inline-block;
234 }
235
236 #can-do-more .feature-description-textblock > span
237 {
238 margin: 15px 0 0 0;
239 }
240
241 #can-do-more .feature-image
242 {
243 width: 59px;
244 height: 59px;
245 margin: 8px 0 10px 20px;
246 }
247
248 #share
249 {
250 background-image: url(background-share.png);
251 padding: 50px 100px 40px 100px;
252 max-width: 760px;
253 text-align: center;
254 font-family: CreteRound, Helvetica, Arial, sans-serif;
255 }
256
257 #share h2
258 {
259 color: #fff;
260 margin: 0 0 30px 0;
261 }
262
263 #share h2 > a
264 {
265 color: #fff;
266 }
267
268 #share h2 > a:hover
269 {
270 color: #2e5075;
271 }
272
273 #share span
274 {
275 color: #bed1e6;
276 text-align: center;
277 line-height: 34px;
278 font-size: 22px;
279 display: block;
280 }
281
282 #donate:hover, .share-buttons a:hover
283 {
284 box-shadow: 0px 0px 0px 2px #8ca7c4;
285 border-radius: 30px;
286 }
287
288 #donate-block span, #share-block span
289 {
290 margin: 10px 20px 0px 20px;
291 }
292
293 #donate-block, #share-block
294 {
295 min-width: 250px;
296 display: inline-block;
297 vertical-align: top;
298 padding: 5px 0 5px 0;
299 border: 1px dashed #37506d;
300 border-style: none dashed;
301 }
302
303 #donate-block
304 {
305 width: 50%;
306 }
307
308 #share-block
309 {
310 width: 49%;
311
312 -webkit-border-start-style: none;
313 -moz-border-start-style: none;
314 }
315
316 .share-buttons
317 {
318 margin: 6px 0 0 0;
319 cursor: pointer;
320 vertical-align: top;
321 /* because inline block creates
322 * space if not captured with
323 * font-size and line-height 0px
324 */
325 font-size: 0px;
326 line-height: 0px;
327 }
328
329 .share-buttons > a
330 {
331 width: 50px;
332 height: 50px;
333 margin: 0 8px;
334 text-decoration: none;
335 display: inline-block;
336 }
337
338 #share-general,
339 :root[lang^="zh-"] #share-chinese
340 {
341 display: block;
342 }
343
344 :root[lang^="zh-"] #share-general,
345 #share-chinese
346 {
347 display: none;
348 }
349
350 #share-chinese > a
351 {
352 border-bottom: 2px solid transparent;
353 }
354
355 #share-chinese > a:hover
356 {
357 box-shadow: none;
358 border-radius: 0;
359 border-bottom: 2px solid #8CA7C4;
360 }
361
362 #share-facebook
363 {
364 background-image: url(social/facebook.png);
365 background-repeat: no-repeat;
366 }
367
368 #share-twitter
369 {
370 background-image: url(social/twitter.png);
371 background-repeat: no-repeat;
372 }
373
374 #share-gplus
375 {
376 background-image: url(social/googleplus.png);
377 background-repeat: no-repeat;
378 }
379
380 #share-renren
381 {
382 background-image: url(social/renren.png);
383 background-repeat: no-repeat;
384 }
385
386 #share-weibo
387 {
388 background-image: url(social/weibo.png);
389 background-repeat: no-repeat;
390 }
391
392 .warning
393 {
394 font-size: 160%;
395 border: 3px dashed red;
396 text-align: center;
397 line-height: 1.3em;
398 }
399
400 #social ul
401 {
402 list-style: none;
403 display: inline-block;
404 padding: 0;
405 margin: 0;
406 }
407
408 #social:hover h1
409 {
410 opacity: 0;
411 }
412
413 #social ul:hover li {
414 opacity: 0.3;
415 }
416
417 #social ul li
418 {
419 display: inline-block;
420 margin: 0px 5px;
421 -webkit-transition: opacity .5s ease, bottom .3s ease;
422 transition: opacity .5s ease, bottom .3s ease;
423 position: relative;
424 bottom: -30px;
425 }
426
427 #social ul li:hover
428 {
429 opacity: 1.0;
430 bottom: 0px;
431 }
432
433 .share-button
434 {
435 display: inline-block;
436 width: 82px;
437 height: 82px;
438 }
439
440 #glass-pane, #share-popup
441 {
442 visibility: hidden;
443 opacity: 0;
444 -webkit-transition-property: opacity;
445 transition-property: opacity;
446 }
447
448 #glass-pane
449 {
450 position: fixed;
451 top: 0;
452 right: 0;
453 bottom: 0;
454 left: 0;
455 background: rgba(0, 0, 0, 0.5) url(ajax-loader.gif) no-repeat 50% 50%;
456 z-index: 101;
457 -webkit-transition-duration: 0.2s;
458 transition-duration: 0.2s;
459 }
460
461 #share-popup
462 {
463 position: absolute;
464 top: 50%;
465 left: 50%;
466 border: none;
467 -webkit-transition-delay: 0.1s;
468 transition-delay: 0.1s;
469 }
470
471 #glass-pane.visible, #share-popup.visible
472 {
473 visibility: visible;
474 opacity: 1;
475 }
476
477 #share-popup.visible
478 {
479 -webkit-transition-duration: 0.15s;
480 transition-duration: 0.15s;
481 }
482
483 .toggle
484 {
485 cursor: pointer;
486 position: relative;
487 display: inline-block;
488 vertical-align: top;
489 height: 22px;
490 margin: 32px 0px 7px 0px;
491 border-radius: 9999px;
492 border: 1px solid #999;
493 overflow: hidden;
494 -moz-user-select: none;
495 -webkit-user-select: none;
496 user-select: none;
497 }
498
499 .toggle:hover
500 {
501 box-shadow: 0px 0px 3px 0px #968d81;
502 }
503
504 .toggle:active
505 {
506 cursor: wait;
507 }
508
509 .toggle-on, .toggle-off
510 {
511 min-width: 42px;
512 height: 100%;
513 font-size: 11px;
514 font-weight: 500;
515 text-align: center;
516 line-height: 23px;
517 border-radius: 9999px;
518 }
519
520 .toggle-on
521 {
522 padding: 0px 30px 0px 10px;
523 color: rgba(255,255,255, 0.8);
524 text-shadow: 1px 1px rgba(0,0,0,0.2);
525 box-shadow: inset 2px 2px 6px rgba(0,0,0,0.2);
526 background: rgb(69,163,31);
527 }
528
529 .toggle-off
530 {
531 padding: 0px 10px 0px 30px;
532 color: rgba(0,0,0,0.6);
533 text-shadow: 1px 1px rgba(255,255,255,0.2);
534 background: #cfcfcf;
535 background: -moz-linear-gradient(top, #cfcfcf 0%, #f5f5f5 100%);
536 background: -webkit-linear-gradient(top, #cfcfcf 0%,#f5f5f5 100%);
537 background: linear-gradient(to bottom, #cfcfcf 0%,#f5f5f5 100%);
538 }
539
540 .toggle-blob
541 {
542 position: absolute;
543 top: 0px;
544 right: 0px;
545 height: 100%;
546 width: 22px;
547 border-radius: 50px;
548 background: #cfcfcf;
549 background: -moz-linear-gradient(bottom, #cfcfcf 0%, #f5f5f5 100%);
550 background: -webkit-linear-gradient(bottom, #cfcfcf 0%,#f5f5f5 100%);
551 background: linear-gradient(to top, #cfcfcf 0%,#f5f5f5 100%);
552 box-shadow: 1px 1px 2px #888;
553 }
554
555 .off .toggle-on
556 {
557 margin-top: -22px;
558 }
559
560 .off .toggle-blob
561 {
562 left: 0px;
563 right: auto;
564 }
565
566 #donate
567 {
568 height: 21px;
569 display: inline-block;
570 margin: 15px 0px 2px 0px;
571 font-size: 16px;
572 color: #003366;
573 cursor: pointer;
574 font-weight: bold;
575 padding: 5px 18px;
576 text-decoration: none;
577 border-radius: 20px;
578 border: 1px solid #FF9933;
579 overflow: hidden;
580 font-family: arial, sans-serif;
581 background-image: url(donate.png);
582 background-repeat: repeat-x;
583 }
584
585 footer
586 {
587 margin: 0 auto 30px;
588 max-width: 960px;
589 text-align: center;
590 }
OLDNEW
« no previous file with comments | « chrome/skin/features/tracking.png ('k') | chrome/skin/fonts/CreteRound-Italic.otf » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld