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 232525 e85576df82277dba460a6382968338941eac321c
parent 232524 78b544e3bb6eed9174305eecb33ce4246eea6557
child 232526 6ee8bbf1b8f2e652ed2bbdfeaf155183ff533ee2
push id4187
push userbhearsum@mozilla.com
push dateFri, 28 Nov 2014 15:29:12 +0000
treeherdermozilla-beta@f23cc6a30c11 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbnicholson
bugs1075219
milestone35.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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