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

Delta Between Two Patch Sets: static/css/main.css

Issue 29551738: Issue 5634 - Replaced logo and refactored navbar width and colors (Closed) Base URL: https://hg.adblockplus.org/web.adblockplus.org
Left Patch Set: Major refactoring & mobile styles Created Sept. 28, 2017, 12:45 a.m.
Right Patch Set: Addressed comments Created Oct. 11, 2017, 11:59 a.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
« no previous file with change/comment | « no previous file | static/css/main-desktop.css » ('j') | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
1 1 *
2 /* cyrillic-ext */ 2 {
juliandoucette 2017/09/28 01:00:28 Note: This is temporary for this review only becau
ire 2017/09/28 08:38:43 Acknowledged.
3 @font-face { 3 font-family: Arial, sans;
4 font-family: 'Source Sans Pro';
5 font-style: normal;
6 font-weight: 400;
7 src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(htt ps://fonts.gstatic.com/s/sourcesanspro/v10/ODelI1aHBYDBqgeIAH2zlIXYUqYVJeq1_JtQr uA3_e8.woff2) format('woff2');
8 unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
9 }
10 /* cyrillic */
11 @font-face {
12 font-family: 'Source Sans Pro';
13 font-style: normal;
14 font-weight: 400;
15 src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(htt ps://fonts.gstatic.com/s/sourcesanspro/v10/ODelI1aHBYDBqgeIAH2zlExulUiGX8tUMVYeu Jmbj48.woff2) format('woff2');
16 unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
17 }
18 /* greek-ext */
19 @font-face {
20 font-family: 'Source Sans Pro';
21 font-style: normal;
22 font-weight: 400;
23 src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(htt ps://fonts.gstatic.com/s/sourcesanspro/v10/ODelI1aHBYDBqgeIAH2zlBA0E65p__AYvizJB 6RduYY.woff2) format('woff2');
24 unicode-range: U+1F00-1FFF;
25 }
26 /* greek */
27 @font-face {
28 font-family: 'Source Sans Pro';
29 font-style: normal;
30 font-weight: 400;
31 src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(htt ps://fonts.gstatic.com/s/sourcesanspro/v10/ODelI1aHBYDBqgeIAH2zlC7-kXQoo3swP0nQ6 K7J6xc.woff2) format('woff2');
32 unicode-range: U+0370-03FF;
33 }
34 /* vietnamese */
35 @font-face {
36 font-family: 'Source Sans Pro';
37 font-style: normal;
38 font-weight: 400;
39 src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(htt ps://fonts.gstatic.com/s/sourcesanspro/v10/ODelI1aHBYDBqgeIAH2zlCxe5Tewm2_XWfbGc hcXw4g.woff2) format('woff2');
40 unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
41 }
42 /* latin-ext */
43 @font-face {
44 font-family: 'Source Sans Pro';
45 font-style: normal;
46 font-weight: 400;
47 src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(htt ps://fonts.gstatic.com/s/sourcesanspro/v10/ODelI1aHBYDBqgeIAH2zlIa1YDtoarzwSXxTH ggEXMw.woff2) format('woff2');
48 unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F , U+A720-A7FF;
49 }
50 /* latin */
51 @font-face {
52 font-family: 'Source Sans Pro';
53 font-style: normal;
54 font-weight: 400;
55 src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(htt ps://fonts.gstatic.com/s/sourcesanspro/v10/ODelI1aHBYDBqgeIAH2zlJbPFduIYtoLzwST6 8uhz_Y.woff2) format('woff2');
56 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+200 0-206F, U+2074, U+20AC, U+2212, U+2215;
57 }
58 /* cyrillic-ext */
59 @font-face {
60 font-family: 'Source Sans Pro';
61 font-style: bold;
62 font-weight: 600;
63 src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(h ttps://fonts.gstatic.com/s/sourcesanspro/v10/toadOcfmlt9b38dHJxOBGGWGG8n76xaP_JU l9houU473rGVtsTkPsbDajuO5ueQw.woff2) format('woff2');
64 unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
65 }
66 /* cyrillic */
67 @font-face {
68 font-family: 'Source Sans Pro';
69 font-style: bold;
70 font-weight: 600;
71 src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(h ttps://fonts.gstatic.com/s/sourcesanspro/v10/toadOcfmlt9b38dHJxOBGMP5gXq4cN8pjVj i5g2q9Mf3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2');
72 unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
73 }
74 /* greek-ext */
75 @font-face {
76 font-family: 'Source Sans Pro';
77 font-style: bold;
78 font-weight: 600;
79 src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(h ttps://fonts.gstatic.com/s/sourcesanspro/v10/toadOcfmlt9b38dHJxOBGIwxT-R1rCKQkeT tsDWzfjL3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2');
80 unicode-range: U+1F00-1FFF;
81 }
82 /* greek */
83 @font-face {
84 font-family: 'Source Sans Pro';
85 font-style: bold;
86 font-weight: 600;
87 src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(h ttps://fonts.gstatic.com/s/sourcesanspro/v10/toadOcfmlt9b38dHJxOBGFCUBMgATkHAQY- Bv-74xcn3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2');
88 unicode-range: U+0370-03FF;
89 }
90 /* vietnamese */
91 @font-face {
92 font-family: 'Source Sans Pro';
93 font-style: bold;
94 font-weight: 600;
95 src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(h ttps://fonts.gstatic.com/s/sourcesanspro/v10/toadOcfmlt9b38dHJxOBGMZXFz2iDKd7GJN SaxRYiSj3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2');
96 unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
97 }
98 /* latin-ext */
99 @font-face {
100 font-family: 'Source Sans Pro';
101 font-style: bold;
102 font-weight: 600;
103 src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(h ttps://fonts.gstatic.com/s/sourcesanspro/v10/toadOcfmlt9b38dHJxOBGKyGJhAh-RE0BxG cd_izyev3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2');
104 unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F , U+A720-A7FF;
105 }
106 /* latin */
107 @font-face {
108 font-family: 'Source Sans Pro';
109 font-style: bold;
110 font-weight: 600;
111 src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(h ttps://fonts.gstatic.com/s/sourcesanspro/v10/toadOcfmlt9b38dHJxOBGMzFoXZ-Kj537nB _-9jJhlA.woff2) format('woff2');
112 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+200 0-206F, U+2074, U+20AC, U+2212, U+2215;
113 }
114
115 html
116 {
117 font-family: 'Source Sans Pro', sans-serif;
ire 2017/09/28 08:38:43 Note (for another issue probably): I think we shou
ire 2017/09/28 08:38:43 NIT: Double quotation marks (also elsewhere in the
118 font-size: 16px; 4 font-size: 16px;
119 } 5 }
120 6
121 body 7 body
122 { 8 {
123 margin: 0; 9 margin: 0;
124 line-height: 1.5; 10 line-height: 1.5;
125 } 11 }
126 12
127 a img 13 a img
(...skipping 23 matching lines...) Expand all
151 border: 1px solid black; 37 border: 1px solid black;
152 overflow: auto; 38 overflow: auto;
153 } 39 }
154 40
155 .sprite 41 .sprite
156 { 42 {
157 display: inline-block; 43 display: inline-block;
158 font-size: 0px; /* fix for IE6 height bug */ 44 font-size: 0px; /* fix for IE6 height bug */
159 background-image: url(../img/sprite-main.png); 45 background-image: url(../img/sprite-main.png);
160 background-repeat: no-repeat; 46 background-repeat: no-repeat;
161 }
162
163 nav ul
164 {
165 list-style: none;
166 margin: 0;
167 padding: 0;
168 }
169
170 nav a:link,
171 nav a:visited
172 {
173 color: #7d7d7d;
174 text-decoration: none;
175 }
176
177 nav a:hover
178 {
179 text-decoration: underline;
180 }
181
182 .container
183 {
184 max-width: 1170px;
185 }
186
187 @media (min-width: 1200px)
juliandoucette 2017/09/28 01:00:27 Done.
juliandoucette 2017/09/28 01:00:28 Note: 1200 = 1170 + 30... This is an artifact left
ire 2017/09/28 08:38:42 Acknowledged.
188 {
189 .container
190 {
191 margin: 0 auto;
192 }
193 }
194
195 #navbar-primary
196 {
197 background-color: #c70d2c;
198 }
199
200 #navbar-logo
201 {
202 padding: 0px 15px;
203 color: #fff;
204 }
205
206 #navbar-logo:hover,
207 #navbar-logo:active,
208 #navbar-logo:focus
209 {
210 background-color: #AE0013;
211 text-decoration: none;
212 }
213
214 #navbar-logo,
215 #navbar-logo > *
216 {
217 display: block;
218 float: left;
219 }
220
221 [dir="rtl"] #navbar-logo,
222 [dir="rtl"] #navbar-logo > *
223 {
224 float: right;
225 }
226
227 #navbar-logo > img
228 {
229 height: 48px;
230 padding: 11px 0px;
231 margin: 0px 15px 0px 0px;
232 }
233
234 [dir="rtl"] #navbar-logo > img
235 {
236 margin: 0px 0px 0px 15px;
237 }
238
239 #navbar-logo > span
240 {
241 line-height: 70px;
242 font-size: 22px;
243 }
244
245 #navbar-nav li
246 {
247 list-style-type: none;
248 }
249
250 #navbar-nav a
251 {
252 color: #fff;
253 text-decoration: none;
254 }
255
256 @media(max-width: 999px)
257 {
258 #navbar-primary
259 {
260 min-height: 70px;
261 }
262
263 #navbar-menu
264 {
265 display: block;
266 }
267
268 #navbar-menu,
269 #navbar-menu > img
270 {
271 float: right;
272 }
273
274 [dir="rtl"] #navbar-menu,
275 [dir="rtl"] #navbar-menu > img
276 {
277 float: left;
278 }
279
280 #navbar-menu > img
281 {
282 display: inline-block;
283 height: 25px;
284 padding: 22.5px 15px;
285 }
286
287 #navbar-menu:hover,
288 #navbar-menu:active,
289 #navbar-menu:focus
290 {
291 background-color: #AE0013;
292 }
293
294 #navbar-nav
295 {
296 display: none;
297 float: left;
298 background-color: #292929;
299 }
300
301 #navbar-nav.visible
302 {
303 display: block;
304 }
305
306 #navbar-nav li,
307 #navbar-nav li a
308 {
309 display: block;
310 }
311
312 #navbar-nav li a
313 {
314 font-size: 20px;
315 line-height: 60px;
316 padding: 0px 20px;
317 }
318
319 #navbar-nav li a:hover,
320 #navbar-nav li a:active,
321 #navbar-nav li a:focus
322 {
323 background-color: #434343;
324 }
325
326 #locales li,
327 #locales a
328 {
329 display: inline-block;
330 }
331
332 #navbar-nav #selected-locale
333 {
334 display: none;
335 }
336 }
337
338 @media(min-width: 1000px)
339 {
340 #navbar-primary
341 {
342 height: 70px;
343 }
344
345 #navbar-nav
346 {
347 float: right;
348 }
349
350 [dir="rtl"] #navbar-nav
351 {
352 float: left;
353 }
354
355 #navbar-nav > li,
356 #navbar-nav > li > a
357 {
358 display: inline-block;
359 }
360
361 #navbar-nav > li > a
362 {
363 padding: 0px 15px;
364 font-size: 18px;
365 line-height: 70px;
366 }
367
368 #navbar-nav > li > a:hover,
369 #navbar-nav > li > a:active,
370 #navbar-nav > li > a:focus
371 {
372 background-color: #AE0013;
373 }
374
375 #locale
376 {
377 position: relative;
378 }
379
380 #locales
381 {
382 position: absolute;
383 display: none;
384 min-width: 160px;
385 max-height: 384px;
386 max-height: 50vh;
387 top: 100%;
388 right: 0px;
389 overflow: auto;
390 z-index: 1000;
391 }
392
393 [dir="rtl"] #locales
394 {
395 right: auto;
396 left: 0px;
397 }
398
399 #locales.visible
400 {
401 display: block;
402 }
403
404 #locales > li,
405 #locales > li > a
406 {
407 display: block;
408 white-space: nowrap;
409 }
410
411 #locales > li > a
412 {
413 padding: 0px 15px;
414 font-size: 16px;
415 line-height: 50px;
416 background-color: #292929;
417 text-decoration: none;
418 }
419
420 #locales > li > a:hover,
421 #locales > li > a:active,
422 #locales > li > a:focus
423 {
424 background-color: #434343;
425 }
426
427 #selected-locale::after
ire 2017/09/28 08:38:43 :after instead of ::after for IE8
428 {
429 display: inline-block;
430 width: 0;
431 height: 0;
432 margin-left: .255em;
ire 2017/09/28 08:38:42 NIT: "Don't omit the optional leading 0 for decima
433 vertical-align: .255em;
434 content: "";
435 border-top: .3em solid;
436 border-right: .3em solid transparent;
437 border-left: .3em solid transparent;
438 }
439
440 #navbar-menu
441 {
442 display: none;
443 }
444 }
445
446 #content h1
447 {
448 font-size: 30px;
449 }
450
451 #content h2
452 {
453 font-weight: bold;
454 font-size: 25px;
455 }
456
457 #content h3
458 {
459 font-size: 20px;
460 } 47 }
461 48
462 #adblock-browser-notification 49 #adblock-browser-notification
463 { 50 {
464 text-align: center; 51 text-align: center;
465 } 52 }
466 53
467 #adblock-browser-notification a 54 #adblock-browser-notification a
468 { 55 {
469 font-weight: bold; 56 font-weight: bold;
(...skipping 143 matching lines...) Expand 10 before | Expand all | Expand 10 after
613 200
614 [dir="ltr"] .alert 201 [dir="ltr"] .alert
615 { 202 {
616 border-left: 5px solid #d14841; 203 border-left: 5px solid #d14841;
617 } 204 }
618 205
619 [dir="rtl"] .alert 206 [dir="rtl"] .alert
620 { 207 {
621 border-right: 5px solid #d14841; 208 border-right: 5px solid #d14841;
622 } 209 }
210
211 /******************************************************************************
212 * .content
213 *****************************************************************************/
214
215 .content h1,
216 .content h2,
217 .content h3,
218 .content h4,
219 .content h5
220 {
221 font-weight: bold;
222 margin: 32px 0px;
223 margin: 2rem 0rem;
224 }
225
226 .content h1 { font-size: 2.4em; }
227 .content h2 { font-size: 1.6em; }
228 .content h3 { font-size: 1.3em; }
229 .content h4 { font-size: 1.2em; }
230 .content h5 { font-size: 1.1em; }
231
232 /*******************************************************************************
233 * #navbar
234 ******************************************************************************/
235
236 #navbar
237 {
238 height: 4em;
239 background-color: #c70d2c;
240 }
241
242 #navbar li
243 {
244 list-style-type: none;
245 }
246
247 /* padding provided by navbar contents */
248 .navbar-container
249 {
250 width: 1170px;
251 margin: 0 auto;
252 }
253
254 /* full-width under .container max-width */
255 @media(max-width: 1199px)
256 {
257 .navbar-container
258 {
259 width: 100%;
260 }
261 }
262
263 /* #navbar #navbar-logo
264 ******************************************************************************/
265
266 #navbar-logo
267 {
268 /* padding is visible in hover background-color change */
269 padding: 0em 1em;
270 color: #fff;
271 }
272
273 #navbar-logo:hover,
274 #navbar-logo:active,
275 #navbar-logo:focus
276 {
277 background-color: #AE0013;
278 text-decoration: none;
279 }
280
281 #navbar-logo,
282 #navbar-logo > *
283 {
284 float: left;
285 }
286
287 [dir="rtl"] #navbar-logo,
288 [dir="rtl"] #navbar-logo > *
289 {
290 float: right;
291 }
292
293 #navbar-logo img
294 {
295 height: 4em;
296 padding: 0.5em 0em;
297 margin: 0em 1em 0em 0em;
298 }
299
300 [dir="rtl"] #navbar-logo > img
301 {
302 margin: 0em 0em 0em 1em;
303 }
304
305 #navbar-logo > span
306 {
307 /* full-height: 2.91 * 1.375 = ~4em */
308 line-height: 2.91em;
309 font-size: 1.375em;
310 }
311
312 /* #navbar #navbar-menu-toggle
313 ******************************************************************************/
314
315 #navbar-menu-toggle
316 {
317 float: right;
318 padding: 1em;
319 }
320
321 [dir="rtl"] #navbar-menu-toggle
322 {
323 float: left;
324 }
325
326 /* show on mobile */
327 #navbar-menu-toggle,
328 #navbar-menu-toggle > img
329 {
330 display: block;
331 }
332
333 /* hide on desktop */
334 @media(min-width: 992px)
335 {
336 #navbar-menu-toggle
337 {
338 display: none;
339 }
340 }
341
342 #navbar-menu-toggle > img
343 {
344 /* plus 2em padding = 4em */
345 height: 2em;
346 }
347
348 #navbar-menu-toggle:hover,
349 #navbar-menu-toggle:active,
350 #navbar-menu-toggle:focus
351 {
352 background-color: #AE0013;
353 }
354
355 /* #navbar #navbar-menu
356 ******************************************************************************/
357
358 #navbar-menu a
359 {
360 display: block;
361 color: #fff;
362 text-decoration: none;
363 }
364
365 /* #navbar #navbar-menu #navbar-locale-menu
366 ******************************************************************************/
367
368 /* caret */
369 #navbar-locale-selected:after
370 {
371 display: inline-block;
372 width: 0;
373 height: 0;
374 margin: 0em 0em 0em 0.255em;
375 vertical-align: .255em;
376 content: "";
377 border-top: .3em solid;
378 border-right: .3em solid transparent;
379 border-left: .3em solid transparent;
380 }
381
382 [dir="rtl"] #navbar-locale-selected:after
383 {
384 margin: 0em 0.255em 0em 0em;
385 }
386
387 #navbar-locale-menu
388 {
389 display: none;
390 }
391
392 #navbar-locale-menu.visible
393 {
394 display: block;
395 }
396
397 #navbar-locale-menu > li > a
398 {
399 padding: 0.75em 1em;
400 }
401
402 #navbar-locale-menu > li > a:hover,
403 #navbar-locale-menu > li > a:active,
404 #navbar-locale-menu > li > a:focus
405 {
406 background-color: #434343;
407 }
408
409 /* #navbar #navbar-menu (desktop)
410 ******************************************************************************/
411
412 @media(min-width: 992px)
413 {
414 #navbar-menu
415 {
416 float: right;
417 }
418
419 [dir="rtl"] #navbar-menu
420 {
421 float: left;
422 }
423
424 #navbar-menu > li,
425 #navbar-menu > li > a
426 {
427 display: inline-block;
428 }
429
430 #navbar-menu > li > a
431 {
432 padding: 0em 1em;
433 line-height: 4em;
434 }
435
436 #navbar-menu > li > a:hover,
437 #navbar-menu > li > a:active,
438 #navbar-menu > li > a:focus
439 {
440 background-color: #AE0013;
441 }
442
443 /* #navbar #navbar-menu #navbar-locale-menu
444 ****************************************************************************/
445
446 #navbar-locale-menubar
447 {
448 position: relative;
449 }
450
451 #navbar-locale-menu
452 {
453 position: absolute;
454 min-width: 16em;
455 max-height: 20em;
456 max-height: 50vh;
457 top: 100%;
458 right: 0px;
459 overflow: auto;
460 z-index: 9001;
461 background-color: #292929;
462 }
463
464 [dir="rtl"] #navbar-locale-menu
465 {
466 right: auto;
467 left: 0px;
468 }
469 }
470
471 /* #navbar #navbar-menu (mobile)
472 ******************************************************************************/
473
474 @media(max-width: 991px)
475 {
476 #navbar-menu
477 {
478 display: none;
479 float: left;
480 clear: both;
481 width: 100%;
482 background-color: #292929;
483 }
484
485 #navbar-menu.visible
486 {
487 display: block;
488 }
489
490 #navbar-menu li a
491 {
492 padding: 0.75em 1em;
493 }
494
495 #navbar-menu li a:hover,
496 #navbar-menu li a:active,
497 #navbar-menu li a:focus
498 {
499 background-color: #434343;
500 }
501 }
LEFTRIGHT
« no previous file | static/css/main-desktop.css » ('j') | Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Toggle Comments ('s')

Powered by Google App Engine
This is Rietveld