Bug 1075219 - Update the colors of about pages. r=bnicholson
authorMargaret Leibovic <margaret.leibovic@gmail.com>
Tue, 07 Oct 2014 15:32:25 -0700
changeset 209310 e85576df82277dba460a6382968338941eac321c
parent 209309 78b544e3bb6eed9174305eecb33ce4246eea6557
child 209311 6ee8bbf1b8f2e652ed2bbdfeaf155183ff533ee2
push id1
push userroot
push dateMon, 20 Oct 2014 17:29:22 +0000
reviewersbnicholson
bugs1075219
milestone35.0a1
Bug 1075219 - Update the colors of about pages. r=bnicholson
mobile/android/themes/core/aboutAddons.css
mobile/android/themes/core/aboutBase.css
mobile/android/themes/core/aboutDownloads.css
mobile/android/themes/core/defines.inc
--- a/mobile/android/themes/core/aboutAddons.css
+++ b/mobile/android/themes/core/aboutAddons.css
@@ -21,19 +21,17 @@
 .description {
   width: 100%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
 .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%;
 }
 
 .options-header {
   font-weight: bold;
   text-transform: uppercase;
@@ -44,16 +42,20 @@
 .addon-item:not([optionsURL]) .options-header,
 .addon-item[optionsURL=""] .options-header,
 .addon-item[isDisabled="true"] .options-box,
 .addon-item:not([optionsURL]) .options-box,
 .addon-item[optionsURL=""] .options-box {
   display: none;
 }
 
+#addons-details > .list-item:active {
+  background-color: #fff;
+}
+
 /* Settings */
 
 setting {
   padding-bottom: 1em;
   -moz-box-align: center;
   box-sizing: border-box;
   width: 100%;
 }
@@ -132,17 +134,17 @@ textbox {
   background: #fff;
   border: 1px solid #ccc;
   border-radius: 4px;
   color: #333;
 }
 
 /* Button */
 
-button {
+setting button {
   margin: 2px 0;
   background: #fff;
   border: 1px solid #ccc;
   padding: 0.5em;
 }
 
 /* Menulist */
 
--- a/mobile/android/themes/core/aboutBase.css
+++ b/mobile/android/themes/core/aboutBase.css
@@ -5,24 +5,26 @@
 %filter substitution
 %include defines.inc
 
 html {
   font-family: "Clear Sans",sans-serif;
   font-size: 14px;
   background-color: @color_about_background@;
   -moz-text-size-adjust: none;
+  --icon-size: 1.8em;
+  --icon-margin: 1.35em;
 }
 
 body {
   margin: 0;
 }
 
 .header {
-  color: black;
+  color: #363B40;
   font-size: 1.1em;
   font-weight: bold;
   border-bottom: 2px solid;
   -moz-border-bottom-colors: #ff9100 #f27900;
   display: flex;
   flex-direction: row;
   align-items: center;
 }
@@ -43,58 +45,46 @@ body {
 
 .list {
   padding: 0px;
   margin: 0px;
   width: 100%;
 }
 
 .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;
 }
 
 .list-item[isDisabled="true"] .favicon {
   opacity: 0.3;
 }
 
@@ -102,28 +92,29 @@ body[dir="ltr"] .icon {
 .buttons {
   display: flex;
   flex-direction: row;
   width: 100%;
 }
 
 .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;
 }
 
 .buttons > button[hidden="true"] {
   display: none;
 }
 
--- a/mobile/android/themes/core/aboutDownloads.css
+++ b/mobile/android/themes/core/aboutDownloads.css
@@ -5,50 +5,29 @@
 %filter substitution
 %include defines.inc
 
 .list-item > a {
   color: inherit;
   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,
 .size {
   display: inline;
 }
 
 .displayState {
--- a/mobile/android/themes/core/defines.inc
+++ b/mobile/android/themes/core/defines.inc
@@ -3,19 +3,19 @@
 %define form_border #bfbfbf
 %define form_border_radius-radius 2px
 %define form_text #363b40
 %define form_text_disabled #bebebe
 %define form_background white
 %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
 %define color_text_default #fff
 %define color_divider_border #333333
 %define color_button_border #5a5a5a
 %define color_dialog_border #5a5a5a
 %define color_background_dlgbuttons #9a9a9a