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,183 @@
+@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

[juliandoucette, 2017/10/30 15:30:10]

NIT: I'm guessing my comment about us using 600 semibold instead of 700 applies
here too?

[martin, 2017/11/03 10:02:12]

Changed to 600.

+{
+    font-family: "Source Sans Pro";
+    font-style: bold;
+    font-weight: 700;
+    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;
+}
+
+.full-width-container
+{
+    width: 100%;
+}
+
+.graphic-column

[juliandoucette, 2017/10/30 15:30:10]

This class and the one below have enough in common that it warrants a single
selector e.g.

.column
{
  height: 100vh;
  width: 50%;
  display: flex; 
  align-items: center;
  justify-content: center;
}

#graphic-column
{
  background: #8DC446;
}

[martin, 2017/11/03 10:02:13]

Refactored.

+{
+    height: 100vh;
+    width: 50%;
+    background: #8DC446;
+    display: flex; 
+    align-items: center;
+    justify-content: center;
+}
+
+.content-column 
+{
+    height: 100vh;
+    width: 50%;
+    background: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.content-column-entries

[juliandoucette, 2017/10/30 15:30:10]

NIT: We generally use IDs for things that only occur once.

[martin, 2017/11/03 10:02:12]

Changed to id="column-content"

+{
+    padding: 0 3em;
+    max-width: 760px;
+}
+
+.content-column-entries a {

[juliandoucette, 2017/10/30 15:30:10]

NIT: .content a would work fine here

+    color: #C70D2C;
+}
+
+.content-column-entries hgroup
+{
+    margin: 0 0 2em 5em;
+}
+
+.content-column h1
+{
+    margin: 0;
+}
+
+.content-column h2 
+{
+    margin: 0;
+    font-weight: normal;
+    opacity: .5;
+}
+
+.custom-feature-entry
+{
+    margin-top: 2em;
+}
+
+.custom-feature-entry h2 {
+    margin: 0 0 0 3.4em;
+}
+
+.update-graphic-container 
+{
+    width: 560px;
+    height: 460px;
+    background: url('/skin/updates-page/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 0 0 1em;
+}
+
+.version-details h2
+{
+    margin: 0;
+}
+
+.version-details span
+{
+    color: #bebebe;
+}
+
+.feature-entry
+{
+    display: flex;
+    align-items: center;
+    padding: 0 1em;
+}
+
+.feature-entry img
+{
+    width: 50px;
+    height: 50px;
+    display: block;
+    margin: 0 1em 0 0;
+}
+
+.store-buttons
+{
+    width: 100%;
+    hegiht: 58px;
+    margin-left: 5em;
+}
+
+.store-button
+{
+    display: block;
+    width: 180px;
+    height: 58px;
+    border-radius: 6px;
+    background: #000;
+    float: left;
+    margin-bottom: 1em;
+}
+
+.store-button > img 
+{
+    height: 54px;
+}
+
+.applestore-button
+{
+    margin-right: 1em;
+}
+
+[dir="rtl"] .appstore-button
+{
+    margin-right: 0;
+    margin-left: 1em;
+}