Bug 1075219 - Update the colors of about pages. r=bnicholson
--- 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