Unified Diff: skin/updates.css
Issue 29592569:
Issue 5943 - Implement Updates Page for Adblock Plus extension (Closed)
Base URL: https://hg.adblockplus.org/adblockplusui/
Patch Set: Addressed second round of feedback
Created Nov. 13, 2017, 8:47 a.m.
Use n/p to move between diff chunks;
N/P to move between comments.
« locale/en_US/updates.json ('K')
|
« locale/en_US/updates.json ('k')
|
skin/updates/abp-logo.svg » ('j')
|
updates.html » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| Index: skin/updates.css |
| =================================================================== |
| new file mode 100644 |
| --- /dev/null |
| +++ b/skin/updates.css |
| @@ -0,0 +1,231 @@ |
| +@font-face |
|
Thomas Greiner
2017/11/20 17:06:05
I'm glad that you got rid of those because it's pr
|
| +{ |
| + font-family: "Source Sans Pro"; |
| + font-style: normal; |
| + font-weight: 400; |
| + font-stretch: normal; |
| + src: local ("Ø"), |
| + url(fonts/SourceSansPro-Regular.woff) format("woff"); |
| +} |
| + |
| +@font-face |
| +{ |
| + font-family: "Source Sans Pro"; |
| + font-style: bold; |
| + font-weight: 600; |
| + font-stretch: normal; |
| + src: local ("Ø"), |
| + url(fonts/SourceSansPro-bold.woff) format("woff"); |
| +} |
| + |
| +html |
| +{ |
| + font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; |
| +} |
| + |
| +body |
| +{ |
| + margin: 0; |
| + padding: 0; |
| +} |
| + |
| +#container |
| +{ |
| + display: flex; |
| + flex-direction: row; |
| + align-items: stretch; |
| +} |
| + |
| +.column |
| +{ |
| + height: 100vh; |
| + display: flex; |
| + align-items: center; |
| + justify-content: center; |
| + flex: 1; |
| +} |
| + |
| +#graphic-column |
| +{ |
| + background-color: #8DC446; |
| + |
|
Thomas Greiner
2017/11/14 12:25:43
Coding style: "No whitespace at the end of a line.
martin
2017/11/20 11:47:30
Done.
|
| +} |
| + |
| +.graphic-column |
| +{ |
| + background-color: #8DC446; |
| +} |
| + |
| +#content |
| +{ |
| + padding: 0 3em; |
| + max-width: 760px; |
| +} |
| + |
| +#content a { |
| + color: #C70D2C; |
| + text-decoration: none; |
| +} |
| + |
| +#content a:hover { |
| + text-decoration: underline; |
| +} |
| + |
| +#content header |
| +{ |
| + margin: 0 0 2em 5em; |
| +} |
| + |
| +#content header[dir="rtl"] |
|
Thomas Greiner
2017/11/14 12:25:41
This won't work because the "dir" attribute is on
martin
2017/11/20 11:47:31
Done.
|
| +{ |
| + margin: 0 5em 2em 0; |
|
Thomas Greiner
2017/11/14 12:25:42
Coding style: "No whitespace at the end of a line.
martin
2017/11/20 11:47:31
Done.
|
| +} |
| + |
| +#content header p { |
| + margin: 0; |
| + opacity: 0.5; |
| + font-weight: 400; |
| + font-size: 1.2em; |
| +} |
| + |
| +#content header h1 |
| +{ |
| + margin: 0; |
| +} |
| + |
| +.custom-feature-entry |
| +{ |
| + margin-top: 2em; |
| +} |
| + |
| +.custom-feature-entry h2 { |
| + margin: 0 0 0 3.4em; |
|
Thomas Greiner
2017/11/14 12:25:42
Detail: This may produce unexpected results for ri
martin
2017/11/20 11:47:33
Done.
|
| +} |
| + |
| +.update-graphic-container |
| +{ |
| + width: 560px; |
| + height: 460px; |
| + background-image: url(./updates/base-graphic.svg); |
|
Thomas Greiner
2017/11/14 12:25:41
Coding style: "CSS rule declaration order should f
martin
2017/11/20 11:47:30
Soo... Is this about the declaration order? Should
Thomas Greiner
2017/11/20 17:06:04
Yes, it's about the order of declaration.
No, don'
martin
2017/11/26 17:08:37
Done.
|
| + position: relative; |
| + display: flex; |
| + align-items: center; |
| + background-repeat: no-repeat; |
| + background-size: cover; |
| +} |
| + |
| +.update-graphic-container img |
| +{ |
| + display: block; |
| + width: 162px; |
| + height: 162px; |
| +} |
| + |
| +.update-graphic-content |
| +{ |
| + position: absolute; |
| + top: 65px; |
| + left: 100px; |
| + display: flex; |
| + align-items: center; |
| +} |
| + |
| +.version-details |
| +{ |
| + margin: 0 1em 0 1em; |
|
Thomas Greiner
2017/11/14 12:25:42
Well spotted
|
| +} |
| + |
| +.version-details h2 |
| +{ |
| + margin: 0; |
| +} |
| + |
| +.feature-entry |
| +{ |
| + display: flex; |
| + align-items: center; |
| + padding: 0 1em; |
| +} |
| + |
| +.feature-entry img |
| +{ |
| + width: 50px; |
| + height: 50px; |
| + display: block; |
| + margin: 0 1em 0 0; |
| +} |
| + |
| +.feature-entry img[dir="rtl"] |
| +{ |
| + margin: 0 0 0 1em; |
| +} |
| + |
| +#block-ads-text > strong |
| +{ |
| + text-decoration: line-through; |
| + font-weight: normal; |
| +} |
| + |
| +.store-buttons |
| +{ |
| + width: 100%; |
|
Thomas Greiner
2017/11/14 12:25:41
This causes both scrollbars to be shown when I ope
martin
2017/11/20 11:47:32
Done.
|
| + height: 58px; |
| + margin: 0 0 0 5em; |
| +} |
| + |
| +.store-buttons[dir="rtl"] |
| +{ |
| + margin: 0 5em 0 0; |
| +} |
| + |
| +.store-button |
| +{ |
| + display: block; |
| + width: 180px; |
| + height: 58px; |
| + border-radius: 6px; |
| + background-color: #000; |
| + float: left; |
| + margin-bottom: 1em; |
| +} |
| + |
| +.store-button[dir="rtl"] |
| +{ |
| + float: right; |
| +} |
| + |
| +.store-button > img |
| +{ |
| + height: 54px; |
| +} |
| + |
| +.applestore-button |
| +{ |
| + margin-right: 1em; |
| +} |
| + |
| +[dir="rtl"] .appstore-button |
| +{ |
| + margin-right: 0; |
| + margin-left: 1em; |
| +} |
| + |
| +@media(max-width: 960px) |
| +{ |
| + #container |
| + { |
| + flex-direction: column; |
| + } |
| +} |
| + |
| +@media(max-width: 480px) |
| +{ |
| + #content header |
| + { |
| + margin: 2em 0 2em 5em; |
|
Thomas Greiner
2017/11/14 12:25:42
Detail: This may produce unexpected results for ri
martin
2017/11/20 11:47:33
Previewed it. Saw nothing weird. Let me know if I'
Thomas Greiner
2017/11/20 17:06:05
I'd have to check whether this issue is visible. B
|
| + } |
| + .column |
| + { |
| + align-items: flex-start; |
| + } |
| +} |
|
Thomas Greiner
2017/11/14 12:25:41
Coding style: "Newline at end of file, otherwise n
martin
2017/11/20 11:47:32
Done.
|
« locale/en_US/updates.json ('K')
|
« locale/en_US/updates.json ('k')
|
skin/updates/abp-logo.svg » ('j')
|
updates.html » ('J')
