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

Side by Side Diff: static/poland/css/main.css

Issue 29800606: Fixes #91 - Homepage duplicate in Polish for SEM (Closed) Base URL: https://hg.adblockplus.org/web.adblockplus.org
Patch Set: Created June 6, 2018, 5:37 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
OLDNEW
(Empty)
1 body
2 {
3 font-family: "Source Sans Pro", Arial, sans-serif;
4 margin: 0;
5 /* Start below fixed navbar */
6 padding-top: 4em;
7 line-height: 1.5;
8 }
9
10 #content,
11 #blog
12 {
13 padding-bottom: 2em;
14 }
15
16 a img
17 {
18 border: none;
19 }
20
21 a:link, a:visited
22 {
23 color: #555;
24 }
25
26 button
27 {
28 cursor: pointer;
29 }
30
31 code, pre
32 {
33 font-family: monospace;
34 }
35
36 pre
37 {
38 background: #ececec;
39 padding: 1em;
40 overflow: auto;
41 }
42
43 .sprite
44 {
45 display: inline-block;
46 font-size: 0px; /* fix for IE6 height bug */
47 background-image: url(../img/sprite-main.png);
48 background-repeat: no-repeat;
49 }
50
51 .toc
52 {
53 display: inline-block;
54 border: 1px solid #aaa;
55 background: #fff;
56 padding: 16px 20px;
57 }
58
59 .toc ul
60 {
61 list-style: none;
62 margin: 0;
63 padding: 0;
64 }
65
66 .toc ul ul
67 {
68 padding-left: 40px;
69 }
70
71 .toc li
72 {
73 margin: 4px 0;
74 }
75
76 #social-list ul
77 {
78 list-style: none;
79 padding: 0;
80 margin: 0;
81 }
82
83 div.animation[started="false"]:before
84 {
85 content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPBAMAAADJ%2B Ih5AAAAFVBMVEUAgAAAgAD%2F%2F%2F%2Fr9uvY7Ni%2B376h0aGeNpcsAAAAAXRSTlNtc%2BXFgwAAA DVJREFUeF5dzVEKACAMAlC7QW6t%2F7r%2FIYOBEPr1GOgw2AHiduaHkwKXwBK4BYZdylrpy4K%2BP%2 Fu5C1CVKVSzAAAAAElFTkSuQmCC);
86 padding-left: 0px;
87 padding-right: 3px;
88 }
89
90 html[dir="rtl"] div.animation[started="false"]:before
91 {
92 padding-left: 3px;
93 padding-right: 0px;
94 }
95
96 div.animation[started="false"]
97 {
98 cursor: pointer;
99 }
100
101 div.animation[started="true"]
102 {
103 box-sizing: initial;
104 -moz-user-select: none;
105 }
106
107 .animation img
108 {
109 max-width: none;
110 }
111
112 .alert
113 {
114 display: block;
115 padding: 15px;
116 margin: 15px 0;
117 background-color: #fff;
118 border: 1px solid #a1a1a1;
119 }
120
121 [dir="ltr"] .alert
122 {
123 border-left: 5px solid #d14841;
124 }
125
126 [dir="rtl"] .alert
127 {
128 border-right: 5px solid #d14841;
129 }
130
131 /******************************************************************************
132 * .section
133 *****************************************************************************/
134
135 .section
136 {
137 padding: 2em 0;
138 }
139
140 /******************************************************************************
141 * .content
142 *****************************************************************************/
143
144 .content h1,
145 .content .h1,
146 .content h2,
147 .content h3,
148 .content h4,
149 .content h5
150 {
151 font-weight: bold;
152 margin: 32px 0 16px 0;
153 margin: 2rem 0 1rem 0;
154 line-height: 1.4;
155 }
156
157 .content h1,
158 .content .h1 { font-size: 1.4em; }
159 .content h2 { font-size: 1.3em; }
160 .content h3 { font-size: 1.2em; }
161 .content h4 { font-size: 1.1em; }
162 .content h5 { font-size: 1em; }
163
164 @media(min-width: 576px)
165 {
166 .content h1,
167 .content .h1 { font-size: 1.6em; }
168 .content h2 { font-size: 1.4em; }
169 .content h3 { font-size: 1.3em; }
170 .content h4 { font-size: 1.2em; }
171 .content h5 { font-size: 1.1em; }
172 }
173
174 @media(min-width: 768px)
175 {
176 .content h1,
177 .content .h1
178 {
179 font-size: 2.4em;
180 line-height: 1.3;
181 }
182
183 .content h2 { font-size: 1.6em; }
184 }
185
186 .content a,
187 .content a:visited
188 {
189 color: #c70d2c;
190 }
191
192 /* Buttons
193 ******************************************************************************/
194
195 .button
196 {
197 padding: 0.5em 2em;
198 border: none;
199 text-align: center;
200 }
201
202 .button:hover,
203 .button:active,
204 .button:focus
205 {
206 text-decoration: none;
207 }
208
209 @media(max-width: 767px)
210 {
211 .button
212 {
213 display: block;
214 width: 100%;
215 }
216 }
217
218 .button.primary
219 {
220 color: #fff !important;
221 background-color: #c70d2c !important;
222 box-shadow: 0px 2px 5px #95989A;
223 }
224
225 .button.primary:hover
226 {
227 background-color: #E00F32 !important;
228 }
229
230 .button.primary:active
231 {
232 background-color: #AD102A !important;
233 }
234
235 .button.accent,
236 .button.accent:visited
237 {
238 background: #077CA6 !important;
239 color: #fff !important;
240 margin-left: 2px;
241 margin-right: 2px;
242 }
243
244 .button.accent:hover,
245 .button.accent:active,
246 .button.accent:focus
247 {
248 box-shadow: inset 0 0 0 3px #005D80;
249 }
250
251 /*******************************************************************************
252 * .fg-* utilities
253 ******************************************************************************/
254
255 .fg-accent
256 {
257 color: #077CA6;
258 }
259
260 .bg-secondary
261 {
262 color: #000;
263 background-color: #F4F4F4;
264 }
265
266 /*******************************************************************************
267 * #navbar
268 ******************************************************************************/
269
270 #navbar
271 {
272 min-height: 4em;
273 background-color: #c70d2c;
274 position: fixed;
275 z-index: 2;
276 width: 100%;
277 top: 0;
278 transition: top 0.2s ease-in-out;
279 }
280
281 @media(max-width: 991px)
282 {
283 #navbar
284 {
285 overflow: auto;
286 }
287 }
288
289 #navbar li
290 {
291 list-style-type: none;
292 }
293
294 #navbar .container
295 {
296 padding-left: 0;
297 padding-right: 0;
298 }
299
300 /* #navbar #navbar-logo
301 ******************************************************************************/
302
303 #navbar-logo
304 {
305 /* padding is visible in hover background-color change */
306 padding: 0em 1em;
307 color: #fff;
308 }
309
310 #navbar-logo:hover,
311 #navbar-logo:active,
312 #navbar-logo:focus
313 {
314 background-color: #AE0013;
315 text-decoration: none;
316 }
317
318 #navbar-logo,
319 #navbar-logo > *
320 {
321 float: left;
322 }
323
324 [dir="rtl"] #navbar-logo,
325 [dir="rtl"] #navbar-logo > *
326 {
327 float: right;
328 }
329
330 #navbar-logo img
331 {
332 height: 4em;
333 padding: 0.5em 0em;
334 margin: 0em 1em 0em 0em;
335 }
336
337 [dir="rtl"] #navbar-logo > img
338 {
339 margin: 0em 0em 0em 1em;
340 }
341
342 #navbar-logo > span
343 {
344 /* full-height: 2.91 * 1.375 = ~4em */
345 line-height: 2.91em;
346 font-size: 1.375em;
347 }
348
349 /* #navbar #navbar-menu-toggle
350 ******************************************************************************/
351
352 #navbar-menu-toggle
353 {
354 float: right;
355 padding: 1em;
356 }
357
358 [dir="rtl"] #navbar-menu-toggle
359 {
360 float: left;
361 }
362
363 /* show on mobile */
364 #navbar-menu-toggle,
365 #navbar-menu-toggle > img
366 {
367 display: block;
368 }
369
370 /* hide on desktop */
371 @media(min-width: 992px)
372 {
373 #navbar-menu-toggle
374 {
375 display: none;
376 }
377 }
378
379 #navbar-menu-toggle > img
380 {
381 /* plus 2em padding = 4em */
382 height: 2em;
383 }
384
385 #navbar-menu-toggle:hover,
386 #navbar-menu-toggle:active,
387 #navbar-menu-toggle:focus
388 {
389 background-color: #AE0013;
390 }
391
392 /* #navbar #navbar-menu
393 ******************************************************************************/
394
395 #navbar-menu a
396 {
397 display: block;
398 color: #fff;
399 text-decoration: none;
400 }
401
402 /* #navbar #navbar-menu #navbar-locale-menu
403 ******************************************************************************/
404
405 /* caret */
406 #navbar-locale-selected:after
407 {
408 display: inline-block;
409 width: 0;
410 height: 0;
411 margin: 0em 0em 0em 0.255em;
412 vertical-align: .255em;
413 content: "";
414 border-top: .3em solid;
415 border-right: .3em solid transparent;
416 border-left: .3em solid transparent;
417 }
418
419 [dir="rtl"] #navbar-locale-selected:after
420 {
421 margin: 0em 0.255em 0em 0em;
422 }
423
424 #navbar-locale-menu
425 {
426 display: none;
427 }
428
429 #navbar-locale-menu.visible
430 {
431 display: block;
432 }
433
434 #navbar-locale-menu > li > a
435 {
436 padding: 0.75em 1em;
437 }
438
439 #navbar-locale-menu > li > a:hover,
440 #navbar-locale-menu > li > a:active,
441 #navbar-locale-menu > li > a:focus
442 {
443 background-color: #434343;
444 }
445
446 /* #navbar #navbar-menu (desktop)
447 ******************************************************************************/
448
449 @media(min-width: 992px)
450 {
451 #navbar-menu
452 {
453 float: right;
454 }
455
456 [dir="rtl"] #navbar-menu
457 {
458 float: left;
459 }
460
461 #navbar-menu > li,
462 #navbar-menu > li > a
463 {
464 display: inline-block;
465 }
466
467 #navbar-menu > li > a
468 {
469 padding: 0em 1em;
470 line-height: 4em;
471 }
472
473 #navbar-menu > li > a:hover,
474 #navbar-menu > li > a:active,
475 #navbar-menu > li > a:focus
476 {
477 background-color: #AE0013;
478 }
479
480 /* #navbar #navbar-menu #navbar-locale-menu
481 ****************************************************************************/
482
483 #navbar-locale-menubar
484 {
485 position: relative;
486 }
487
488 #navbar-locale-menu
489 {
490 position: absolute;
491 min-width: 16em;
492 max-height: 20em;
493 max-height: 50vh;
494 top: 100%;
495 right: 0px;
496 overflow: auto;
497 z-index: 9001;
498 background-color: #292929;
499 }
500
501 [dir="rtl"] #navbar-locale-menu
502 {
503 right: auto;
504 left: 0px;
505 }
506 }
507
508 /* #navbar #navbar-menu (mobile)
509 ******************************************************************************/
510
511 @media(max-width: 991px)
512 {
513 #navbar-menu
514 {
515 display: none;
516 float: left;
517 clear: both;
518 width: 100%;
519 background-color: #292929;
520 overflow-y: scroll;
521 max-height: 416px;
522 max-height: 80vh;
523 }
524
525 #navbar-menu.visible
526 {
527 display: block;
528 }
529
530 #navbar-menu li a
531 {
532 padding: 0.75em 1em;
533 }
534
535 #navbar-menu li a:hover,
536 #navbar-menu li a:active,
537 #navbar-menu li a:focus
538 {
539 background-color: #434343;
540 }
541 }
542
543 /*******************************************************************************
544 * #footer
545 ******************************************************************************/
546
547 #footer
548 {
549 overflow: auto;
550 padding: 2em 0em;
551 color: #ececec;
552 background-color: #292929;
553 font-size: 0.9em;
554 }
555
556 /* #footer body
557 ******************************************************************************/
558
559 #footer h5
560 {
561 margin-top: 1em;
562 margin-bottom: 1.5em;
563 }
564
565 #footer h5:after
566 {
567 content: "";
568 display: block;
569 width: 1.25em;
570 height: 0.125em;
571 margin-top: 0.5em;
572 background-color: #ececec;
573 }
574
575 #footer ul
576 {
577 padding: 0em;
578 list-style-type: none;
579 }
580
581 #footer a
582 {
583 color: #ececec;
584 }
585
586 #footer a:hover,
587 #footer a:active,
588 #footer a:focus
589 {
590 color: #fff;
591 text-decoration: underline;
592 }
593
594 /* #footer #social-list
595 ******************************************************************************/
596
597 #social-list ul
598 {
599 /* negative margin canceled out by li margin below */
600 margin: 0em -0.375em;
601 }
602
603 #social-list li
604 {
605 float: left;
606 margin: 0em 0.375em;
607 }
608
609 [dir="rtl"] #social-list li
610 {
611 float: right;
612 }
613
614 #social-list img
615 {
616 height: 2em;
617 }
618
619 @media(min-width: 1200px)
620 {
621 #social-list img
622 {
623 height: 3em;
624 }
625 }
626
627 /* #footer #footer-legal
628 ******************************************************************************/
629
630 #footer-legal
631 {
632 margin-top: 1em;
633 }
634
635 @media(min-width: 1200px)
636 {
637 #footer-legal
638 {
639 margin-top: 2em;
640 }
641 }
642
643 /* #footer #footer-legal #legal-list
644 ******************************************************************************/
645
646 #legal-list li
647 {
648 float: left;
649 }
650
651 [dir="rtl"] #legal-list li
652 {
653 float: right;
654 }
655
656 #legal-list li:after
657 {
658 margin: 0em 0.375em;
659 }
660
661 /* IE9+ only */
662 #legal-list li::after
663 {
664 content: "|"
665 }
666
667 #legal-list li:last-of-type::after
668 {
669 content: none;
670 }
671
672 /* float copyright and legal links left and right on ~desktop */
673 @media(min-width: 1200px)
674 {
675 #copyright-notice
676 {
677 float: left;
678 }
679
680 [dir="rtl"] #copyright-notice
681 {
682 float: right;
683 }
684
685 #legal-list
686 {
687 float: right;
688 }
689
690 [dir="rtl"] #legal-list
691 {
692 float: left;
693 }
694 }
695
696 /* hide all footer links except #social-list on ~mobile */
697 @media(max-width: 767px)
698 {
699 #footer .column
700 {
701 display: none;
702 }
703
704 /* overriding display:none above */
705 #footer #social-list
706 {
707 display: block;
708 }
709 }
710
711 /* Video
712 ****************************************************************************/
713
714 .video-parent
715 {
716 position: relative;
717 display: block;
718 width: 100%;
719 padding: 0;
720 border: 1px solid #c9c9c9;
721 box-shadow: 1px 1px 0 0 #dbdbdb;
722 overflow: hidden;
723 }
724
725 .video-parent.has-iframe::before
726 {
727 display: block;
728 content: "";
729 padding-top: 56.25%;
730 }
731
732 .video-parent iframe
733 {
734 position: absolute;
735 top: 0;
736 bottom: 0;
737 left: 0;
738 width: 100%;
739 height: 100%;
740 border: 0;
741 }
742
743 .video-link
744 {
745 display: block;
746 position: relative;
747 }
748
749 .video-thumbnail
750 {
751 width: 100%;
752 transition: opacity 0.8s;
753 opacity: 0.2;
754 }
755
756 .hide-disclaimer .video-thumbnail
757 {
758 opacity: 1;
759 }
760
761 .video-disclaimer
762 {
763 visibility: visible;
764 opacity: 1;
765 position: absolute;
766 bottom: 0;
767 left: 0;
768 padding: 1em;
769 background-color: #fff;
770 font-size: 0.9em;
771 text-align: center;
772 transition: opacity 0.8s;
773 }
774
775 .hide-disclaimer .video-disclaimer
776 {
777 visibility: hidden;
778 opacity: 0;
779 }
780
781 .video-play
782 {
783 position: absolute;
784 top: 50%;
785 left: 50%;
786 width: 80px;
787 margin-top: -60px;
788 margin-left: -40px;
789 }
790
791 .hide-disclaimer .video-play
792 {
793 margin-top: -40px;
794 }
795
796 /******************************************************************************
797 * .item-group
798 *****************************************************************************/
799
800 .item-group
801 {
802 text-align: center;
803 padding-top: 3em;
804 padding-bottom: 3em;
805 }
806
807 .item-group img
808 {
809 height: 5em;
810 width: auto;
811 }
812
813 .item-group h2
814 {
815 text-transform: uppercase;
816 }
817
818 @media (max-width: 575px)
819 {
820 .item-group .column
821 {
822 margin-bottom: 3em;
823 }
824
825 .item-group .column:last-of-type
826 {
827 margin-bottom: 0;
828 }
829 }
830
831 @media (min-width: 576px) and (max-width: 1023px)
832 {
833 .item-group
834 {
835 text-align: left;
836 }
837
838 [dir="rtl"] .item-group
839 {
840 text-align: right;
841 }
842
843 .item-group .column
844 {
845 position: relative;
846 width: auto;
847 padding: 0 3em 2em 10.5em;
848 min-height: 7em; /* Height of image plus 2em bottom padding */
849 }
850
851 [dir="rtl"] .item-group .column
852 {
853 padding: 0 10.5em 2em 3em;
854 }
855
856 .item-group .column:last-of-type
857 {
858 padding-bottom: 0;
859 min-height: 6em; /* Height of image */
860 }
861
862 .item-group img
863 {
864 position: absolute;
865 left: 3em;
866 top: 0.5em;
867 }
868
869 [dir="rtl"] .item-group img
870 {
871 left: auto;
872 right: 3em;
873 }
874
875 .item-group h2
876 {
877 margin: 0;
878 }
879 }
880
881 /* Horizontal List
882 ******************************************************************************/
883
884 .horizontal-list
885 {
886 display: inline;
887 list-style: none;
888 }
889
890 .horizontal-list,
891 .content .horizontal-list
892 {
893 padding: 0;
894 }
895
896 .horizontal-list li
897 {
898 display: inline;
899 list-style: none;
900 }
OLDNEW

Powered by Google App Engine
This is Rietveld