Unified 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 navbar-logo-2x
Created Sept. 28, 2017, 1:03 a.m.
Use n/p to move between diff chunks;
N/P to move between comments.
« no previous file with comments
|
« no previous file
|
static/css/main-desktop.css » ('j')
|
static/js/main.js » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| Index: static/css/main.css |
| =================================================================== |
| --- a/static/css/main.css |
| +++ b/static/css/main.css |
| @@ -1,11 +1,125 @@ |
| -* |
| + |
| +/* cyrillic-ext */ |
| +@font-face { |
| + font-family: 'Source Sans Pro'; |
| + font-style: normal; |
| + font-weight: 400; |
| + src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/ODelI1aHBYDBqgeIAH2zlIXYUqYVJeq1_JtQruA3_e8.woff2) format('woff2'); |
| + unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; |
| +} |
| +/* cyrillic */ |
| +@font-face { |
| + font-family: 'Source Sans Pro'; |
| + font-style: normal; |
| + font-weight: 400; |
| + src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/ODelI1aHBYDBqgeIAH2zlExulUiGX8tUMVYeuJmbj48.woff2) format('woff2'); |
| + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; |
| +} |
| +/* greek-ext */ |
| +@font-face { |
| + font-family: 'Source Sans Pro'; |
| + font-style: normal; |
| + font-weight: 400; |
| + src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/ODelI1aHBYDBqgeIAH2zlBA0E65p__AYvizJB6RduYY.woff2) format('woff2'); |
| + unicode-range: U+1F00-1FFF; |
| +} |
| +/* greek */ |
| +@font-face { |
| + font-family: 'Source Sans Pro'; |
| + font-style: normal; |
| + font-weight: 400; |
| + src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/ODelI1aHBYDBqgeIAH2zlC7-kXQoo3swP0nQ6K7J6xc.woff2) format('woff2'); |
| + unicode-range: U+0370-03FF; |
| +} |
| +/* vietnamese */ |
| +@font-face { |
| + font-family: 'Source Sans Pro'; |
| + font-style: normal; |
| + font-weight: 400; |
| + src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/ODelI1aHBYDBqgeIAH2zlCxe5Tewm2_XWfbGchcXw4g.woff2) format('woff2'); |
| + unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; |
| +} |
| +/* latin-ext */ |
| +@font-face { |
| + font-family: 'Source Sans Pro'; |
| + font-style: normal; |
| + font-weight: 400; |
| + src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/ODelI1aHBYDBqgeIAH2zlIa1YDtoarzwSXxTHggEXMw.woff2) format('woff2'); |
| + unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; |
| +} |
| +/* latin */ |
| +@font-face { |
| + font-family: 'Source Sans Pro'; |
| + font-style: normal; |
| + font-weight: 400; |
| + src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/ODelI1aHBYDBqgeIAH2zlJbPFduIYtoLzwST68uhz_Y.woff2) format('woff2'); |
| + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; |
| +} |
| +/* cyrillic-ext */ |
| +@font-face { |
| + font-family: 'Source Sans Pro'; |
| + font-style: bold; |
| + font-weight: 600; |
| + src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/toadOcfmlt9b38dHJxOBGGWGG8n76xaP_JUl9houU473rGVtsTkPsbDajuO5ueQw.woff2) format('woff2'); |
| + unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; |
| +} |
| +/* cyrillic */ |
| +@font-face { |
| + font-family: 'Source Sans Pro'; |
| + font-style: bold; |
| + font-weight: 600; |
| + src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/toadOcfmlt9b38dHJxOBGMP5gXq4cN8pjVji5g2q9Mf3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2'); |
| + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; |
| +} |
| +/* greek-ext */ |
| +@font-face { |
| + font-family: 'Source Sans Pro'; |
| + font-style: bold; |
| + font-weight: 600; |
| + src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/toadOcfmlt9b38dHJxOBGIwxT-R1rCKQkeTtsDWzfjL3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2'); |
| + unicode-range: U+1F00-1FFF; |
| +} |
| +/* greek */ |
| +@font-face { |
| + font-family: 'Source Sans Pro'; |
| + font-style: bold; |
| + font-weight: 600; |
| + src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/toadOcfmlt9b38dHJxOBGFCUBMgATkHAQY-Bv-74xcn3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2'); |
| + unicode-range: U+0370-03FF; |
| +} |
| +/* vietnamese */ |
| +@font-face { |
| + font-family: 'Source Sans Pro'; |
| + font-style: bold; |
| + font-weight: 600; |
| + src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/toadOcfmlt9b38dHJxOBGMZXFz2iDKd7GJNSaxRYiSj3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2'); |
| + unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; |
| +} |
| +/* latin-ext */ |
| +@font-face { |
| + font-family: 'Source Sans Pro'; |
| + font-style: bold; |
| + font-weight: 600; |
| + src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/toadOcfmlt9b38dHJxOBGKyGJhAh-RE0BxGcd_izyev3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2'); |
| + unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; |
| +} |
| +/* latin */ |
| +@font-face { |
| + font-family: 'Source Sans Pro'; |
| + font-style: bold; |
| + font-weight: 600; |
| + src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/toadOcfmlt9b38dHJxOBGMzFoXZ-Kj537nB_-9jJhlA.woff2) format('woff2'); |
| + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; |
| +} |
| + |
| +html |
| { |
| - font-family: Arial, sans; |
| + font-family: 'Source Sans Pro', sans-serif; |
| font-size: 16px; |
| } |
| body |
| { |
| margin: 0; |
| line-height: 1.5; |
| } |
| @@ -48,205 +162,290 @@ |
| nav ul |
| { |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| } |
| -nav a:link, nav a:visited |
| +nav a:link, |
| +nav a:visited |
| { |
| color: #7d7d7d; |
| text-decoration: none; |
| } |
| nav a:hover |
| { |
| text-decoration: underline; |
| } |
| -header |
| +.container |
| { |
| - display: block; |
| - position: relative; |
| - background: white; |
| - border: 1px solid #d9d9d9; |
| - border-top: none; |
| - box-shadow: 1px 1px 0 0 #d9d9d9; |
| - z-index: 1; |
| + max-width: 1170px; |
| } |
| -header nav li |
| +@media (min-width: 1170px) |
|
ire
2017/09/28 08:38:44
I assume the plan is to move to one CSS file inste
juliandoucette
2017/10/04 15:33:28
Yes. Unless there is a good reason to separate the
ire
2017/10/04 21:44:25
I think there are performance reasons (because onl
|
| { |
| - padding: 0px 5px; |
| + .container |
| + { |
| + margin: 0 auto; |
| + } |
| } |
| -header nav li.selected |
| +#navbar-primary |
| { |
| - color: #db1313; |
| - text-shadow: 1px 1px 1px #eee; |
| - cursor: default; |
| -} |
| - |
| -header nav li.install-link a |
| -{ |
| - color: #048e48; |
| + background-color: #c70d2c; |
| } |
| -header nav li.install-link .install-link-icon |
| +#navbar-logo |
| { |
| - display: inline-block; |
| - width: 12px; |
| - height: 12px; |
| - background-position: -167px -13px; |
| + padding: 0px 15px; |
| + color: #fff; |
| } |
| -.language-entry a |
| +#navbar-logo:hover, |
| +#navbar-logo:active, |
| +#navbar-logo:focus |
| { |
| - display: block; |
| + background-color: #AE0013; |
| + text-decoration: none; |
| } |
| -#flag-ar |
| +#navbar-logo, |
| +#navbar-logo > * |
| { |
| - background-position: 0px 0px; |
| + display: block; |
| + float: left; |
| } |
| -#flag-bg |
| +[dir="rtl"] #navbar-logo, |
| +[dir="rtl"] #navbar-logo > * |
| { |
| - background-position: -17px 0px; |
| + float: right; |
| } |
| -#flag-de |
| +#navbar-logo > img |
| { |
| - background-position: -34px 0px; |
| -} |
| - |
| -#flag-en |
| -{ |
| - background-position: -51px 0px; |
| + height: 48px; |
| + padding: 11px 0px; |
| + margin: 0px 15px 0px 0px; |
| } |
| -#flag-es |
| +[dir="rtl"] #navbar-logo > img |
| { |
| - background-position: -68px 0px; |
| -} |
| - |
| -#flag-sk |
| -{ |
| - background-position: -85px 0px; |
| + margin: 0px 0px 0px 15px; |
| } |
| -#flag-fr |
| +#navbar-logo > span |
| { |
| - background-position: 0px -12px; |
| + line-height: 70px; |
| + font-size: 22px; |
| } |
| -#flag-el |
| +#navbar-nav li |
| { |
| - background-position: -85px -12px; |
| + list-style-type: none; |
| } |
| -#flag-he |
| +#navbar-nav a |
| { |
| - background-position: -17px -12px; |
| + color: #fff; |
| + text-decoration: none; |
| } |
| -#flag-it |
| -{ |
| - background-position: -85px -24px; |
| -} |
| - |
| -#flag-hu |
| -{ |
| - background-position: -34px -12px; |
| -} |
| - |
| -#flag-ko |
| -{ |
| - background-position: -51px -12px; |
| -} |
| - |
| -#flag-ja |
| -{ |
| - background-position: -102px 0px; |
| -} |
| - |
| -#flag-lt |
| +@media(max-width: 999px) |
| { |
| - background-position: -68px -12px; |
| -} |
| + #navbar-primary |
| + { |
| + min-height: 70px; |
| + } |
| + |
| + #navbar-menu |
| + { |
| + display: block; |
| + } |
| + |
| + #navbar-menu, |
| + #navbar-menu > img |
| + { |
| + float: right; |
| + } |
| -#flag-nl |
| -{ |
| - background-position: 0px -24px; |
| -} |
| + [dir="rtl"] #navbar-menu, |
| + [dir="rtl"] #navbar-menu > img |
| + { |
| + float: left; |
| + } |
| + |
| + #navbar-menu > img |
| + { |
| + display: inline-block; |
| + height: 25px; |
| + padding: 22.5px 15px; |
| + } |
| + |
| + #navbar-menu:hover, |
| + #navbar-menu:active, |
| + #navbar-menu:focus |
| + { |
| + background-color: #AE0013; |
| + } |
| -#flag-pl |
| -{ |
| - background-position: -102px -12px; |
| -} |
| + #navbar-nav |
| + { |
| + display: none; |
| + float: left; |
| + background-color: #292929; |
| + } |
| + |
| + #navbar-nav.visible |
| + { |
| + display: block; |
| + } |
| + |
| + #navbar-nav li, |
| + #navbar-nav li a |
| + { |
| + display: block; |
| + } |
| -#flag-pt_BR |
| -{ |
| - background-position: -17px -24px; |
| -} |
| + #navbar-nav li a |
| + { |
| + font-size: 20px; |
| + line-height: 60px; |
| + padding: 0px 20px; |
| + } |
| -#flag-pt_PT |
| -{ |
| - background-position: -102px -24px; |
| + #navbar-nav li a:hover, |
| + #navbar-nav li a:active, |
| + #navbar-nav li a:focus |
| + { |
| + background-color: #434343; |
| + } |
| + |
| + #locales li, |
| + #locales a |
| + { |
| + display: inline-block; |
| + } |
| + |
| + #navbar-nav #selected-locale |
| + { |
| + display: none; |
| + } |
| } |
| -#flag-ru |
| -{ |
| - background-position: -34px -24px; |
| -} |
| - |
| -#flag-zh_CN |
| -{ |
| - background-position: -51px -24px; |
| -} |
| - |
| -#flag-zh_TW |
| -{ |
| - background-position: -68px -24px; |
| -} |
| - |
| -a[hreflang="de"]:not(:lang(de)):after, |
| -a[hreflang="en"]:not(:lang(en)):after |
| +@media(min-width: 1000px) |
| { |
| - display: inline-block; |
| - width: 16px; |
| - height: 11px; |
| - background-image: url(../img/sprite-flags.png); |
| - content: ""; |
| - margin-left: 2px; |
| -} |
| + #navbar-primary |
| + { |
| + height: 70px; |
| + } |
| + |
| + #navbar-nav |
| + { |
| + float: right; |
| + } |
| + |
| + [dir="rtl"] #navbar-nav |
| + { |
| + float: left; |
| + } |
| -a[hreflang="de"]:not(:lang(de)):after |
| -{ |
| - background-position: -34px 0px; |
| -} |
| + #navbar-nav > li, |
| + #navbar-nav > li > a |
| + { |
| + display: inline-block; |
| + } |
| + |
| + #navbar-nav > li > a |
| + { |
| + padding: 0px 15px; |
| + font-size: 18px; |
| + line-height: 70px; |
| + } |
| + |
| + #navbar-nav > li > a:hover, |
| + #navbar-nav > li > a:active, |
| + #navbar-nav > li > a:focus |
| + { |
| + background-color: #AE0013; |
| + } |
| + |
| + #locale |
| + { |
| + position: relative; |
| + } |
| -a[hreflang="en"]:not(:lang(en)):after |
| -{ |
| - background-position: -51px 0px; |
| -} |
| + #locales |
| + { |
| + position: absolute; |
| + display: none; |
| + min-width: 160px; |
| + max-height: 384px; |
| + max-height: 50vh; |
| + top: 100%; |
| + right: 0px; |
| + overflow: auto; |
| + z-index: 1000; |
| + } |
| + |
| + [dir="rtl"] #locales |
| + { |
| + right: auto; |
| + left: 0px; |
| + } |
| + |
| + #locales.visible |
| + { |
| + display: block; |
| + } |
| + |
| + #locales > li, |
| + #locales > li > a |
| + { |
| + display: block; |
| + white-space: nowrap; |
| + } |
| -#language-selector a:after |
| -{ |
| - display: none; |
| -} |
| + #locales > li > a |
| + { |
| + padding: 0px 15px; |
| + font-size: 16px; |
| + line-height: 50px; |
| + background-color: #292929; |
| + text-decoration: none; |
| + } |
| + |
| + #locales > li > a:hover, |
| + #locales > li > a:active, |
| + #locales > li > a:focus |
| + { |
| + background-color: #434343; |
| + } |
| -#logo |
| -{ |
| - position: absolute; |
| - width: 128px; |
| - height: 128px; |
| - background-position: -83px -83px; |
| + #selected-locale::after |
| + { |
| + display: inline-block; |
| + width: 0; |
| + height: 0; |
| + margin-left: .255em; |
| + vertical-align: .255em; |
| + content: ""; |
| + border-top: .3em solid; |
| + border-right: .3em solid transparent; |
| + border-left: .3em solid transparent; |
| + } |
| + |
| + #navbar-menu |
| + { |
| + display: none; |
| + } |
| } |
| #content h1 |
| { |
| font-size: 30px; |
| } |
| #content h2 |
« no previous file with comments
|
« no previous file
|
static/css/main-desktop.css » ('j')
|
static/js/main.js » ('J')
