Issue 5943 - Implement Updates Page for Adblock Plus extension

skin/updates.css

 @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;
+  -webkit-font-smoothing: antialiased;
 }
 
 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
+ #graphic-column,
+ .graphic-column
 {
   background-color: #8DC446;
 }
 
 #content
 {
   padding: 0 3em;
   max-width: 760px;
 }
 
 #content a
 {
   color: #C70D2C;
   text-decoration: none;
 }
 
 #optionsPageLink
 {
   color: red;
 }
 
+/* Needed in order to achieve standard behavior 
+for links, due to lacking href attribute */
 #content a:hover
 {
   text-decoration: underline;
+  cursor: pointer;
 }
 
 #content header
 {
   margin: 0 0 2em 5em;
 }
 
 html[dir="rtl"] #content header
 {
   margin: 0 5em 2em 0;
@@ skipping 21 matching lines @@
   margin: 0 0 0 3.4em;
 }
 
 html[dir="rtl"] .custom-feature-entry h2
 {
   margin: 0 3.4em 0 0;
 }
 
 .update-graphic-container
 {
+  display: flex;
+  align-items: center;
+  position: relative;
   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
 {
+  display: flex;
+  align-items: center;
   position: absolute;
   top: 65px;
   left: 100px;
-  display: flex;
-  align-items: center;
 }
 
 .version-details
 {
   margin: 0 1em 0 1em;
 }
 
 .version-details h2
 {
   margin: 0;
@@ skipping 32 matching lines @@
 }
 
 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;
+  height: 100%;
 }
 
 .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.

+  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

[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;
   }
 }