Bug 1075219 - Update the colors of about pages. r=bnicholson

mobile/android/themes/core/aboutAddons.css

@@ -26,9 +26,7 @@
 }
 
 .status {
-  background-color: @color_about_item_inner@;
-  border-top: 2px solid;
-  -moz-border-top-colors: #bac2ac #ffffff;
+  border-top: 1px solid @color_about_item_border@;
   font-weight: bold;
   padding: 0.5em;
   width: 100%;
@@ -49,6 +47,10 @@
   display: none;
 }
 
+#addons-details > .list-item:active {
+  background-color: #fff;
+}
+
 /* Settings */
 
 setting {
@@ -137,7 +139,7 @@ textbox {
 
 /* Button */
 
-button {
+setting button {
   margin: 2px 0;
   background: #fff;
   border: 1px solid #ccc;

mobile/android/themes/core/aboutBase.css

@@ -10,6 +10,8 @@ html {
   font-size: 14px;
   background-color: @color_about_background@;
   -moz-text-size-adjust: none;
+  --icon-size: 1.8em;
+  --icon-margin: 1.35em;
 }
 
 body {
@@ -17,7 +19,7 @@ body {
 }
 
 .header {
-  color: black;
+  color: #363B40;
   font-size: 1.1em;
   font-weight: bold;
   border-bottom: 2px solid;
@@ -48,48 +50,36 @@ body {
 }
 
 .list-item {
-  color: black;
+  color: #363B40;
   background-color: @color_about_item@;
-  border-bottom: 2px solid;
-  -moz-border-bottom-colors: #ffffff #bac2ac;
+  border-bottom: 1px solid @color_about_item_border@;
   position: relative;
   list-style-type: none;
   list-style-image: none;
   margin: 0px;
   padding: 0px;
+  min-height: -moz-calc(var(--icon-size) + var(--icon-margin) * 2);
+}
+
+.list-item:active {
+  background-color: #eeeeee;
 }
 
 .list-item[isDisabled="true"] {
   color: #999999;
 }
 
-.list-item:active,
-.list-item:active > .inner {
-  background-image: none;
-}
-
 .inner {
-  background-color: @color_about_item_inner@;
+  -moz-margin-start: -moz-calc(var(--icon-size) + var(--icon-margin) * 2 - 1em);
   padding: 1em;
-
-  /* make room for the favicon */
-  -moz-margin-start: 4.5em;
-}
-
-/* Icons */
-body[dir="ltr"] .icon {
-  left: 1.35em;
-}
-
-body[dir="ltr"] .icon {
-  right: 1.35em;
 }
 
 .icon {
   border: none;
-  top: 1.35em;
-  width: 1.8em;
-  height: 1.8em;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  top: var(--icon-margin);
+  -moz-margin-start: var(--icon-margin);
   position: absolute;
   pointer-events: none;
 }
@@ -107,18 +97,19 @@ body[dir="ltr"] .icon {
 
 .buttons > button {
   -moz-appearance: none;
-  color: black;
-  font-size: 1em !important;
+  font-size: 1em;
   border: 1px solid transparent;
-  border-top-color: #bac2ac;
-  -moz-border-start-color: #bac2ac;
-  background-image: none;
-  background-color: @color_about_item_inner@;
-  border-radius: 0px !important;
+  border-top-color: @color_about_item_border@;
+  -moz-border-start-color: @color_about_item_border@;
+  background-color: @color_about_item@;
   flex: 1;
   padding: 0.75em 0.5em;
 }
 
+.buttons > button:active {
+  background-color: #eeeeee;
+}
+
 .buttons > button[disabled="true"] {
   color: #b5b5b5;
 }

mobile/android/themes/core/aboutDownloads.css

@@ -10,40 +10,19 @@
   text-decoration: none;
 }
 
-.list-item {
-  height: 4.8em;
-  font-size: 1em !important;
-}
-
 #private-downloads-list .list-item {
-  background-image: none;
-  background-color: #080a0b;
+  background-color: #393e43;
   color: #ddd;
 }
 
-div.details {
-  background-color: #eef2f5;
-}
-
-#private-downloads-list div.details {
-  background-image: none;
-  background-color: #393e43;
-}
-
-li:active div.details,
-#private-downloads-list li:active div.details {
-  background-image: none;
-  background-color: transparent;
-}
-
 .details {
-  margin-left: 4.8em;
-  padding: .5em;
-  min-height: 3.7em;
+  -moz-margin-start: -moz-calc(var(--icon-size) + var(--icon-margin) * 2 - 1em);
+  padding: 1em;
 }
 
 .date {
   color: gray;
+  -moz-margin-start: 0.5em;
 }
 
 .domain,

mobile/android/themes/core/defines.inc

@@ -8,9 +8,9 @@
 %define form_background_disabled #f5f5f5
 %define form_background white
 
-%define color_about_background #ced7de
-%define color_about_item #e6e9eb
-%define color_about_item_inner #eef2f5
+%define color_about_background #F5F5F5
+%define color_about_item #FFFFFF
+%define color_about_item_border #D7D9DB
 
 %define color_background_active #525252
 %define color_background_default #000