Update about box design.

Tag #963.

3 files changed, 27 insertions, 34 deletions

diff --git a/application/palemoon/branding/unstable/content/about-wordmark.svg b/application/palemoon/branding/unstable/content/about-wordmark.svg
deleted file mode 100644
index fd0f1745e..000000000
--- a/application/palemoon/branding/unstable/content/about-wordmark.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-
-<svg version="1.1" id="aboutWordmark" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="132px" height="48px" viewBox="0 0 132 48" xml:space="preserve">
-
-  <path fill="#55575C"/>
-	
-</svg>
diff --git a/application/palemoon/branding/unstable/content/aboutDialog.css b/application/palemoon/branding/unstable/content/aboutDialog.css
index 9af49ba10..4529c22b6 100644
--- a/application/palemoon/branding/unstable/content/aboutDialog.css
+++ b/application/palemoon/branding/unstable/content/aboutDialog.css
@@ -3,45 +3,46 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 #aboutPMDialogContainer {
-  background-image: url("chrome://branding/content/about-background.png");
+  background-image: url("chrome://branding/content/about-background.jpg");
   background-repeat: no-repeat;
-  background-color: #100000;
-  background-size: cover;
-  color: #E0E0FF; 
+  background-color: #D5BC9A;
+  color: #202010; 
 }
 
-#PMleftBox {
-  background-image: url("chrome://branding/content/about-logo.png");
+#aboutHeaderBox {
+  background-image: url("chrome://branding/content/about-wordmark.png");
   background-repeat: no-repeat;
-  /* min-width and min-height create room for the logo */
-  min-width: 210px;
-  min-height: 210px;
-  margin-top:20px;
-  -moz-margin-start: 30px;
+  background-position: center center;
+  height: 44px;
 }
 
-#PMrightBox {
-  margin-left: 30px;
-  margin-right: 30px;
+#aboutVersionBox {
+  font-family: Arial, helvetica;
+  text-shadow: 1px 1px 0px #D5BC9A;
 }
 
-#detailsBox > description > .text-link {
-  color: #CDC36F;
+#aboutTextBox {
+  font-family: Arial, helvetica;
+  font-size: 14px;
+  text-shadow: 1px 1px 0px #D5BC9A;
+  padding: 0px 10px;
+  background: linear-gradient(to bottom,
+                              transparent 0%,
+                              rgba(255, 255, 255, .3) 20%,
+                              rgba(255, 255, 255, .5) 75%,
+                              transparent 100%);
 }
 
-#PMbottomBox {
+#aboutLinkBox {
   padding: 15px 10px 0;
-  background-color: rgba(240,240,255,.7);
-}   
-
-#PMupdateDeck > hbox > label:not([class="text-link"]) {
-  color: #909090;
+  font-family: Arial, helvetica;
 }
 
-#PMtrademark {
-  font-size: xx-small;
+#aboutPMtrademark {
+  font-size: 10px;
   text-align: center;
-  color: #333333;
+  color: #C0C0C0;
+  text-shadow: 1px 1px 0px #000000;
   margin-top: 10px;
   margin-bottom: 10px;
 }
diff --git a/application/palemoon/branding/unstable/content/jar.mn b/application/palemoon/branding/unstable/content/jar.mn
index 6903e9ac5..fcb789031 100644
--- a/application/palemoon/branding/unstable/content/jar.mn
+++ b/application/palemoon/branding/unstable/content/jar.mn
@@ -5,7 +5,7 @@
 browser.jar:
 % content branding %content/branding/ contentaccessible=yes
   content/branding/about.png                (about.png)
-  content/branding/about-background.png     (about-background.png)
+  content/branding/about-background.jpg     (about-background.jpg)
   content/branding/about-logo.png           (about-logo.png)
   content/branding/about-logo@2x.png        (about-logo@2x.png)
   content/branding/about-wordmark.png       (about-wordmark.png)