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

Side by Side Diff: 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
Patch Set: Fixed .container Created Sept. 28, 2017, 12:52 a.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 | « no previous file | static/css/main-desktop.css » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 * 1
2 /* cyrillic-ext */
3 @font-face {
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
2 { 116 {
3 font-family: Arial, sans; 117 font-family: 'Source Sans Pro', sans-serif;
4 font-size: 16px; 118 font-size: 16px;
5 } 119 }
6 120
7 body 121 body
8 { 122 {
9 margin: 0; 123 margin: 0;
10 line-height: 1.5; 124 line-height: 1.5;
11 } 125 }
12 126
13 a img 127 a img
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after
46 background-repeat: no-repeat; 160 background-repeat: no-repeat;
47 } 161 }
48 162
49 nav ul 163 nav ul
50 { 164 {
51 list-style: none; 165 list-style: none;
52 margin: 0; 166 margin: 0;
53 padding: 0; 167 padding: 0;
54 } 168 }
55 169
56 nav a:link, nav a:visited 170 nav a:link,
171 nav a:visited
57 { 172 {
58 color: #7d7d7d; 173 color: #7d7d7d;
59 text-decoration: none; 174 text-decoration: none;
60 } 175 }
61 176
62 nav a:hover 177 nav a:hover
63 { 178 {
64 text-decoration: underline; 179 text-decoration: underline;
65 } 180 }
66 181
67 header 182 .container
183 {
184 max-width: 1170px;
185 }
186
187 @media (min-width: 1170px)
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 > *
68 { 216 {
69 display: block; 217 display: block;
70 position: relative; 218 float: left;
71 background: white; 219 }
72 border: 1px solid #d9d9d9; 220
73 border-top: none; 221 [dir="rtl"] #navbar-logo,
74 box-shadow: 1px 1px 0 0 #d9d9d9; 222 [dir="rtl"] #navbar-logo > *
75 z-index: 1; 223 {
76 } 224 float: right;
77 225 }
78 header nav li 226
79 { 227 #navbar-logo > img
80 padding: 0px 5px; 228 {
81 } 229 height: 48px;
82 230 padding: 11px 0px;
83 header nav li.selected 231 margin: 0px 15px 0px 0px;
84 { 232 }
85 color: #db1313; 233
86 text-shadow: 1px 1px 1px #eee; 234 [dir="rtl"] #navbar-logo > img
87 cursor: default; 235 {
88 } 236 margin: 0px 0px 0px 15px;
89 237 }
90 header nav li.install-link a 238
91 { 239 #navbar-logo > span
92 color: #048e48; 240 {
93 } 241 line-height: 70px;
94 242 font-size: 22px;
95 header nav li.install-link .install-link-icon 243 }
96 { 244
97 display: inline-block; 245 #navbar-nav li
98 width: 12px; 246 {
99 height: 12px; 247 list-style-type: none;
100 background-position: -167px -13px; 248 }
101 } 249
102 250 #navbar-nav a
103 .language-entry a 251 {
104 { 252 color: #fff;
105 display: block; 253 text-decoration: none;
106 } 254 }
107 255
108 #flag-ar 256 @media(max-width: 999px)
109 { 257 {
110 background-position: 0px 0px; 258 #navbar-primary
111 } 259 {
112 260 min-height: 70px;
113 #flag-bg 261 }
114 { 262
115 background-position: -17px 0px; 263 #navbar-menu
116 } 264 {
117 265 display: block;
118 #flag-de 266 }
119 { 267
120 background-position: -34px 0px; 268 #navbar-menu,
121 } 269 #navbar-menu > img
122 270 {
123 #flag-en 271 float: right;
124 { 272 }
125 background-position: -51px 0px; 273
126 } 274 [dir="rtl"] #navbar-menu,
127 275 [dir="rtl"] #navbar-menu > img
128 #flag-es 276 {
129 { 277 float: left;
130 background-position: -68px 0px; 278 }
131 } 279
132 280 #navbar-menu > img
133 #flag-sk 281 {
134 { 282 display: inline-block;
135 background-position: -85px 0px; 283 height: 25px;
136 } 284 padding: 22.5px 15px;
137 285 }
138 #flag-fr 286
139 { 287 #navbar-menu:hover,
140 background-position: 0px -12px; 288 #navbar-menu:active,
141 } 289 #navbar-menu:focus
142 290 {
143 #flag-el 291 background-color: #AE0013;
144 { 292 }
145 background-position: -85px -12px; 293
146 } 294 #navbar-nav
147 295 {
148 #flag-he 296 display: none;
149 { 297 float: left;
150 background-position: -17px -12px; 298 background-color: #292929;
151 } 299 }
152 300
153 #flag-it 301 #navbar-nav.visible
154 { 302 {
155 background-position: -85px -24px; 303 display: block;
156 } 304 }
157 305
158 #flag-hu 306 #navbar-nav li,
159 { 307 #navbar-nav li a
160 background-position: -34px -12px; 308 {
161 } 309 display: block;
162 310 }
163 #flag-ko 311
164 { 312 #navbar-nav li a
165 background-position: -51px -12px; 313 {
166 } 314 font-size: 20px;
167 315 line-height: 60px;
168 #flag-ja 316 padding: 0px 20px;
169 { 317 }
170 background-position: -102px 0px; 318
171 } 319 #navbar-nav li a:hover,
172 320 #navbar-nav li a:active,
173 #flag-lt 321 #navbar-nav li a:focus
174 { 322 {
175 background-position: -68px -12px; 323 background-color: #434343;
176 } 324 }
177 325
178 #flag-nl 326 #locales li,
179 { 327 #locales a
180 background-position: 0px -24px; 328 {
181 } 329 display: inline-block;
182 330 }
183 #flag-pl 331
184 { 332 #navbar-nav #selected-locale
185 background-position: -102px -12px; 333 {
186 } 334 display: none;
187 335 }
188 #flag-pt_BR 336 }
189 { 337
190 background-position: -17px -24px; 338 @media(min-width: 1000px)
191 } 339 {
192 340 #navbar-primary
193 #flag-pt_PT 341 {
194 { 342 height: 70px;
195 background-position: -102px -24px; 343 }
196 } 344
197 345 #navbar-nav
198 #flag-ru 346 {
199 { 347 float: right;
200 background-position: -34px -24px; 348 }
201 } 349
202 350 [dir="rtl"] #navbar-nav
203 #flag-zh_CN 351 {
204 { 352 float: left;
205 background-position: -51px -24px; 353 }
206 } 354
207 355 #navbar-nav > li,
208 #flag-zh_TW 356 #navbar-nav > li > a
209 { 357 {
210 background-position: -68px -24px; 358 display: inline-block;
211 } 359 }
212 360
213 a[hreflang="de"]:not(:lang(de)):after, 361 #navbar-nav > li > a
214 a[hreflang="en"]:not(:lang(en)):after 362 {
215 { 363 padding: 0px 15px;
216 display: inline-block; 364 font-size: 18px;
217 width: 16px; 365 line-height: 70px;
218 height: 11px; 366 }
219 background-image: url(../img/sprite-flags.png); 367
220 content: ""; 368 #navbar-nav > li > a:hover,
221 margin-left: 2px; 369 #navbar-nav > li > a:active,
222 } 370 #navbar-nav > li > a:focus
223 371 {
224 a[hreflang="de"]:not(:lang(de)):after 372 background-color: #AE0013;
225 { 373 }
226 background-position: -34px 0px; 374
227 } 375 #locale
228 376 {
229 a[hreflang="en"]:not(:lang(en)):after 377 position: relative;
230 { 378 }
231 background-position: -51px 0px; 379
232 } 380 #locales
233 381 {
234 #language-selector a:after 382 position: absolute;
235 { 383 display: none;
236 display: none; 384 min-width: 160px;
237 } 385 max-height: 384px;
238 386 max-height: 50vh;
239 #logo 387 top: 100%;
240 { 388 right: 0px;
241 position: absolute; 389 overflow: auto;
242 width: 128px; 390 z-index: 1000;
243 height: 128px; 391 }
244 background-position: -83px -83px; 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
428 {
429 display: inline-block;
430 width: 0;
431 height: 0;
432 margin-left: .255em;
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 }
245 } 444 }
246 445
247 #content h1 446 #content h1
248 { 447 {
249 font-size: 30px; 448 font-size: 30px;
250 } 449 }
251 450
252 #content h2 451 #content h2
253 { 452 {
254 font-weight: bold; 453 font-weight: bold;
(...skipping 159 matching lines...) Expand 10 before | Expand all | Expand 10 after
414 613
415 [dir="ltr"] .alert 614 [dir="ltr"] .alert
416 { 615 {
417 border-left: 5px solid #d14841; 616 border-left: 5px solid #d14841;
418 } 617 }
419 618
420 [dir="rtl"] .alert 619 [dir="rtl"] .alert
421 { 620 {
422 border-right: 5px solid #d14841; 621 border-right: 5px solid #d14841;
423 } 622 }
OLDNEW
« no previous file with comments | « no previous file | static/css/main-desktop.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld