Issue 5943 - Implement Updates Page for Adblock Plus extension

skin/updates.css

Index: skin/updates.css
===================================================================
new file mode 100644
--- /dev/null
+++ b/skin/updates.css
@@ -0,0 +1,245 @@
+@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;
+}
+
+#optionsPageLink
+{
+  color: red;
+}
+
+#content a:hover
+{
+  text-decoration: underline;
+}
+
+#content header
+{
+  margin: 0 0 2em 5em;
+}
+
+html[dir="rtl"] #content header
+{
+  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;
+}
+
+html[dir="rtl"] .custom-feature-entry h2
+{
+  margin: 0 3.4em 0 0;
+}
+
+.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;
+}
+
+html[dir="rtl"] .feature-entry img
+{
+  margin: 0 0 0 1em;
+}
+
+#block-ads-text > strong
+{
+  text-decoration: line-through;
+  font-weight: normal;
+}
+
+.store-buttons
+{
+  height: 58px;
+  margin: 0 0 0 5em;
+}
+
+html[dir="rtl"] .store-buttons
+{
+  margin: 0 5em 0 0;
+}
+
+.store-button
+{
+  display: block;
+  width: 180px;
+  height: 58px;
+  border-radius: 6px;
+  background-color: #000;
+  float: left;
+  margin-bottom: 1em;
+}
+
+html[dir="rtl"] .store-button
+{
+  float: right;
+}
+
+.store-button > img
+{
+  height: 54px;
+}
+
+.applestore-button
+{
+  margin-right: 1em;
+}
+
+html[dir="rtl"] .applestore-button
+{
+  margin: 0 0 0 1em;

[Thomas Greiner, 2017/11/20 17:06:06]

Detail: As I mentioned in one of my previous comments, we should avoid
overriding styles that we don't care about (i.e. "margin-top" and
"margin-bottom") to avoid unexpected behavior.

For that, the previous approach worked better.

I'd recommend checking each "margin" accoredingly.

[martin, 2017/11/26 17:08:39]

Done.

+}
+
+@media(max-width: 960px)
+{
+  #container
+  {
+    flex-direction: column;
+  }
+}
+
+@media(max-width: 480px)
+{
+  #content header
+  {
+    margin: 2em 0 2em 5em;
+  }
+  .column

[Thomas Greiner, 2017/11/20 17:06:06]

Coding style: "Separate rules by new lines."

See https://adblockplus.org/en/coding-style#html-css and
https://google.github.io/styleguide/htmlcssguide.html#Rule_Separation

[martin, 2017/11/26 17:08:38]

Done.

+  {
+    align-items: flex-start;
+  }
+  html[dir="rtl"] .applestore-button
+  {
+    margin: 0 0 1em 0;
+  }
+}