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

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

Issue 29841563: Noissue - Merged index_page into master (Closed) Base URL: https://hg.adblockplus.org/web.adblockplus.org
Patch Set: Fixed more misc issues discussed in IRC Created July 30, 2018, 4:40 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
1 *
2 {
3 font-family: Arial, sans;
4 font-size: 16px;
5 }
6
7 body 1 body
8 { 2 {
3 font-family: "Source Sans Pro", Arial, sans-serif;
9 margin: 0; 4 margin: 0;
10 /* Start below fixed navbar */ 5 /* Start below fixed navbar */
11 padding-top: 4em; 6 padding-top: 4em;
12 line-height: 1.5; 7 line-height: 1.5;
13 } 8 }
14 9
15 #content, 10 #content,
16 #blog 11 #blog
17 { 12 {
18 padding-bottom: 2em; 13 padding-bottom: 2em;
(...skipping 27 matching lines...) Expand all
46 } 41 }
47 42
48 .sprite 43 .sprite
49 { 44 {
50 display: inline-block; 45 display: inline-block;
51 font-size: 0px; /* fix for IE6 height bug */ 46 font-size: 0px; /* fix for IE6 height bug */
52 background-image: url(../img/sprite-main.png); 47 background-image: url(../img/sprite-main.png);
53 background-repeat: no-repeat; 48 background-repeat: no-repeat;
54 } 49 }
55 50
56 #adblock-browser-notification
57 {
58 text-align: center;
59 }
60
61 #adblock-browser-notification a
62 {
63 font-weight: bold;
64 }
65
66 #adblock-browser-notification img
67 {
68 vertical-align: bottom;
69 width: 25px;
70 height: 25px;
71 }
72
73 #adblock-browser-notification span
74 {
75 white-space: nowrap;
76 margin-left: 1em;
77 }
78
79 [dir="rtl"] #adblock-browser-notification span
80 {
81 margin-left: 0;
82 margin-right: 1em;
83 }
84
85 .toc 51 .toc
86 { 52 {
87 display: inline-block; 53 display: inline-block;
88 border: 1px solid #aaa; 54 border: 1px solid #aaa;
89 background: #fff; 55 background: #fff;
90 padding: 16px 20px; 56 padding: 16px 20px;
91 } 57 }
92 58
93 .toc ul 59 .toc ul
94 { 60 {
(...skipping 74 matching lines...) Expand 10 before | Expand all | Expand 10 after
169 .section 135 .section
170 { 136 {
171 padding: 2em 0; 137 padding: 2em 0;
172 } 138 }
173 139
174 /****************************************************************************** 140 /******************************************************************************
175 * .content 141 * .content
176 *****************************************************************************/ 142 *****************************************************************************/
177 143
178 .content h1, 144 .content h1,
145 .content .h1,
179 .content h2, 146 .content h2,
180 .content h3, 147 .content h3,
181 .content h4, 148 .content h4,
182 .content h5 149 .content h5
183 { 150 {
184 font-weight: bold; 151 font-weight: bold;
185 margin: 32px 0 16px 0; 152 margin: 32px 0 16px 0;
186 margin: 2rem 0 1rem 0; 153 margin: 2rem 0 1rem 0;
154 line-height: 1.4;
187 } 155 }
188 156
189 .content h1 { font-size: 1.8em; } 157 .content h1,
190 .content h2 { font-size: 1.4em; } 158 .content .h1 { font-size: 1.4em; }
191 .content h3 { font-size: 1.3em; } 159 .content h2 { font-size: 1.3em; }
192 .content h4 { font-size: 1.2em; } 160 .content h3 { font-size: 1.2em; }
193 .content h5 { font-size: 1.1em; } 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 }
194 173
195 @media(min-width: 768px) 174 @media(min-width: 768px)
196 { 175 {
197 .content h1 { font-size: 2.4em; } 176 .content h1,
177 .content .h1
178 {
179 font-size: 2.4em;
180 line-height: 1.3;
181 }
182
198 .content h2 { font-size: 1.6em; } 183 .content h2 { font-size: 1.6em; }
199 } 184 }
200 185
201 .content a, 186 .content a,
202 .content a:visited 187 .content a:visited
203 { 188 {
204 color: #c70d2c; 189 color: #c70d2c;
205 } 190 }
206 191
207 /* Buttons 192 /* Buttons
(...skipping 18 matching lines...) Expand all
226 { 211 {
227 .button 212 .button
228 { 213 {
229 display: block; 214 display: block;
230 width: 100%; 215 width: 100%;
231 } 216 }
232 } 217 }
233 218
234 .button.primary 219 .button.primary
235 { 220 {
236 color: #fff; 221 color: #fff !important;
237 background-color: #c70d2c; 222 background-color: #c70d2c !important;
238 box-shadow: 0px 2px 5px #95989A; 223 box-shadow: 0px 2px 5px #95989A;
239 } 224 }
240 225
241 .button.primary:hover 226 .button.primary:hover
242 { 227 {
243 background-color: #E00F32; 228 background-color: #E00F32 !important;
244 } 229 }
245 230
246 .button.primary:active 231 .button.primary:active
247 { 232 {
248 background-color: #AD102A; 233 background-color: #AD102A !important;
249 } 234 }
250 235
251 .button.accent, 236 .button.accent,
252 .button.accent:visited 237 .button.accent:visited
253 { 238 {
254 background: #077CA6; 239 background: #077CA6 !important;
255 color: #fff; 240 color: #fff !important;
256 margin-left: 2px; 241 margin-left: 2px;
257 margin-right: 2px; 242 margin-right: 2px;
258 } 243 }
259 244
260 .button.accent:hover, 245 .button.accent:hover,
261 .button.accent:active, 246 .button.accent:active,
262 .button.accent:focus 247 .button.accent:focus
263 { 248 {
264 box-shadow: inset 0 0 0 3px #005D80; 249 box-shadow: inset 0 0 0 3px #005D80;
265 } 250 }
266 251
267 /******************************************************************************* 252 /*******************************************************************************
268 * .fg-* utilities 253 * .fg-* utilities
269 ******************************************************************************/ 254 ******************************************************************************/
270 255
271 .fg-accent 256 .fg-accent
272 { 257 {
273 color: #077CA6; 258 color: #077CA6;
274 } 259 }
275 260
261 .bg-secondary
ire 2018/07/31 00:10:10 NIT: This is a bg-* utility, not fg-*
juliandoucette 2018/08/02 20:51:56 Good catch :D
262 {
263 color: #000;
264 background-color: #F4F4F4;
265 }
266
276 /******************************************************************************* 267 /*******************************************************************************
277 * #navbar 268 * #navbar
278 ******************************************************************************/ 269 ******************************************************************************/
279 270
280 #navbar 271 #navbar
281 { 272 {
282 min-height: 4em; 273 min-height: 4em;
283 background-color: #c70d2c; 274 background-color: #c70d2c;
284 position: fixed; 275 position: fixed;
285 z-index: 2; 276 z-index: 2;
(...skipping 530 matching lines...) Expand 10 before | Expand all | Expand 10 after
816 807
817 .hide-disclaimer .video-play 808 .hide-disclaimer .video-play
818 { 809 {
819 margin-top: -40px; 810 margin-top: -40px;
820 } 811 }
821 812
822 .hide 813 .hide
823 { 814 {
824 display: none; 815 display: none;
825 } 816 }
817
818 /******************************************************************************
819 * .item-group
820 *****************************************************************************/
821
822 .item-group
823 {
824 text-align: center;
825 padding-top: 3em;
826 padding-bottom: 3em;
827 }
828
829 .item-group img
830 {
831 height: 5em;
832 width: auto;
833 }
834
835 .item-group h2
836 {
837 text-transform: uppercase;
838 }
839
840 @media (max-width: 575px)
841 {
842 .item-group .column
843 {
844 margin-bottom: 3em;
845 }
846
847 .item-group .column:last-of-type
848 {
849 margin-bottom: 0;
850 }
851 }
852
853 @media (min-width: 576px) and (max-width: 1023px)
854 {
855 .item-group
856 {
857 text-align: left;
858 }
859
860 [dir="rtl"] .item-group
861 {
862 text-align: right;
863 }
864
865 .item-group .column
866 {
867 position: relative;
868 width: auto;
869 padding: 0 3em 2em 10.5em;
870 min-height: 7em; /* Height of image plus 2em bottom padding */
871 }
872
873 [dir="rtl"] .item-group .column
874 {
875 padding: 0 10.5em 2em 3em;
876 }
877
878 .item-group .column:last-of-type
879 {
880 padding-bottom: 0;
881 min-height: 6em; /* Height of image */
882 }
883
884 .item-group img
885 {
886 position: absolute;
887 left: 3em;
888 top: 0.5em;
889 }
890
891 [dir="rtl"] .item-group img
892 {
893 left: auto;
894 right: 3em;
895 }
896
897 .item-group h2
898 {
899 margin: 0;
900 }
901 }
902
903 /* Horizontal List
904 ******************************************************************************/
905
906 .horizontal-list
907 {
908 display: inline;
909 list-style: none;
910 }
911
912 .horizontal-list,
913 .content .horizontal-list
914 {
915 padding: 0;
916 }
917
918 .horizontal-list li
919 {
920 display: inline;
921 list-style: none;
922 }
923
924 /* Download button
925 ******************************************************************************/
926
927 .content .tos-short
928 {
929 margin-bottom: 0.5em;
930 }
931
932 .content .install-button
933 {
934 display: inline-block;
935 min-width: 250px;
936 /* stretch full-width <= small tablets */
937 width: 100%;
938 /* 0.2em taller than normal buttons */
939 padding-top: 0.8em;
940 padding-bottom: 0.8em;
941 color: #fff;
ire 2018/07/31 00:10:12 We also need to style the :visited pseudo-class be
juliandoucette 2018/08/02 20:51:57 Good catch!
942 background-color: #3D9C4F;
943 }
944
945 .content .install-button:hover,
946 .content .install-button:focus
947 {
948 background-color: #258333;
949 }
950
951 @media (min-width: 576px)
952 {
953 .content .install-button
954 {
955 /* force auto-width >= small tablets */
956 width: auto;
957 }
958 }
959
960 .content .download-alt
961 {
962 font-size: smaller;
963 }
OLDNEW

Powered by Google App Engine
This is Rietveld