From cc9603792f231021db1ed56cd5083e032c3e3293 Mon Sep 17 00:00:00 2001
From: Margaret Leibovic <margaret.leibovic@gmail.com>
Date: Tue, 7 Oct 2014 15:32:25 -0700
Subject: [PATCH] Bug 1075219 - Update the colors of about pages. r=bnicholson

---
 mobile/android/themes/core/aboutAddons.css    | 10 ++--
 mobile/android/themes/core/aboutBase.css      | 55 ++++++++-----------
 mobile/android/themes/core/aboutDownloads.css | 29 ++--------
 mobile/android/themes/core/defines.inc        |  6 +-
 4 files changed, 36 insertions(+), 64 deletions(-)

diff --git a/mobile/android/themes/core/aboutAddons.css b/mobile/android/themes/core/aboutAddons.css
index d26c499523b6..270b1b7e64b5 100644
--- a/mobile/android/themes/core/aboutAddons.css
+++ b/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;
diff --git a/mobile/android/themes/core/aboutBase.css b/mobile/android/themes/core/aboutBase.css
index 49d26fdc0c36..b997ef34453d 100644
--- a/mobile/android/themes/core/aboutBase.css
+++ b/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;
 }
diff --git a/mobile/android/themes/core/aboutDownloads.css b/mobile/android/themes/core/aboutDownloads.css
index 35b657e56fd1..0db443a84d14 100644
--- a/mobile/android/themes/core/aboutDownloads.css
+++ b/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,
diff --git a/mobile/android/themes/core/defines.inc b/mobile/android/themes/core/defines.inc
index 3b1606165fd7..baf8cd68c5bf 100644
--- a/mobile/android/themes/core/defines.inc
+++ b/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