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

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. 6, 2017, 4:02 p.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « skin/social/twitter.svg ('k') | skin/updates/abp-logo.svg » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: skin/updates.css
===================================================================
new file mode 100644
--- /dev/null
+++ b/skin/updates.css
@@ -0,0 +1,231 @@
+@font-face
+{
+ 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;
+
+}
+
+.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"]
+{
+ margin: 0 5em 2em 0;
+}
+
+#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;
+}
+
+.update-graphic-container
+{
+ width: 560px;
+ height: 460px;
+ background-image: url(./updates/base-graphic.svg);
+ 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;
+}
+
+.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%;
+ 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;
+ }
+ .column
+ {
+ align-items: flex-start;
+ }
+}
« no previous file with comments | « skin/social/twitter.svg ('k') | skin/updates/abp-logo.svg » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld