Update about box design.

Tag #963.
3 years ago · 9fdca8dca9
parent d980adc4da
commit 9fdca8dca9
11 changed files with 110 additions and 113 deletions
--- a/application/palemoon/base/content/aboutDialog.css
+++ b/application/palemoon/base/content/aboutDialog.css
@ -2,29 +2,20 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-#PMaboutDialog {
-  width: 620px;
+#aboutPMDialogContainer {
+  width: 700px;
+  height: 410px;
 }

-#PMrightBox {
-  background-image: url("chrome://branding/content/about-wordmark.png");
-  background-repeat: no-repeat;
-  /* padding-top creates room for the wordmark */
-  padding-top: 38px;
-  margin-top:20px;
+#aboutVersionBox {
+  height: 38 px;
 }

-#PMrightBox:-moz-locale-dir(rtl) {
-  background-position: 100% 0;
-}
-
-#PMbottomBox {
-  padding: 15px 10px 0;
-}
-
-#PMversion {
-  margin-top: 10px;
-  -moz-margin-start: 0;
+#aboutVersion {
+  text-align: center;
+  font-size: 18px;
+  font-weight: bold;
+  margin: 4px;
 }

 #distribution,
@ -35,13 +26,10 @@
  margin-bottom: 0;
 }

-.text-blurb {
-  margin-bottom: 10px;
-  -moz-margin-start: 0;
-  -moz-padding-start: 0;
+.text-credits {
+  margin: 5px 0px;
 }

-
 .text-link,
 .text-link:focus {
  margin: 0px;
@ -51,5 +39,15 @@
 .bottom-link,
 .bottom-link:focus {
  text-align: center;
+  text-decoration: none !important;
+  padding: 4px;
+  border-radius: 3px;
+  color: #244C8A;
+  background-color: rgba(240, 240, 240, .7);
  margin: 0 40px;
+  transition: background-color 0.5s ease-out;
+}
+
+.bottom-link:hover {
+  background-color: rgba(240, 240, 255, .95);
 }
--- a/application/palemoon/base/content/aboutDialog.xul
+++ b/application/palemoon/base/content/aboutDialog.xul
@ -38,48 +38,48 @@

  <script type="application/javascript" src="chrome://browser/content/aboutDialog.js"/>

-  <vbox id="aboutPMDialogContainer">
-    <hbox id="PMclientBox">
-      <vbox id="PMleftBox" flex="1"/>
-      <vbox id="PMrightBox" flex="1">
+  <vbox id="aboutPMDialogContainer" flex="1">
+    <vbox id="aboutHeaderBox" />
+    <vbox id="aboutVersionBox" flex="3">
 #ifdef HAVE_64BIT_BUILD
-#expand <label id="PMversion">Version: __MOZ_APP_VERSION__ (64-bit)</label>
+#expand <label id="aboutVersion">Version: __MOZ_APP_VERSION__ (64-bit)</label>
 #else
-#expand <label id="PMversion">Version: __MOZ_APP_VERSION__ (32-bit)</label>
+#expand <label id="aboutVersion">Version: __MOZ_APP_VERSION__ (32-bit)</label>
 #endif
        <label id="distribution" class="text-blurb"/>
        <label id="distributionId" class="text-blurb"/>

+    </vbox>
+    <vbox id="aboutTextBox" flex="1">
+        <description class="text-credits">
 #if defined(MOZ_OFFICIAL_BRANDING) || defined(MC_OFFICIAL)
 #ifdef MC_PRIVATE_BUILD
          This is a private build of Pale Moon. If you did not manually build this copy from source yourself, then please download an official version from the <label class="text-link" href="http://www.palemoon.org/">Pale Moon website</label>.
 #else
-          Pale Moon is released by <label class="text-link" href="http://www.moonchildproductions.info">Moonchild Productions</label>.
+          <label class="text-link" href="http://www.palemoon.org">Pale Moon</label> is released by <label class="text-link" href="http://www.moonchildproductions.info">Moonchild Productions</label>.
        </description>
-        <description class="text-pmcreds">
+        <description class="text-credits">
          Special thanks to all our supporters and donors for making this browser possible!
        </description>
-        <description class="text-blurb">
+        <description class="text-credits">
          If you wish to contribute, please consider helping out by providing support to other users on the <label class="text-link" href="https://forum.palemoon.org/">Pale Moon forum</label>
          or getting involved in our development by tackling some of the issues found in our GitHub issue tracker.
 #endif
 #else
          &brandFullName; is released by &vendorShortName;.
        </description>
-        <description class="text-blurb">
+        <description class="text-credits">
          This is an unofficial build of Pale Moon. For official builds, please go to <label class="text-link" href="http://www.palemoon.org/">the Pale Moon website</label>.
 #endif
        </description>    
-        </vbox>
-      </vbox>
-    </hbox>
-    <vbox id="PMbottomBox">
+    </vbox>
+    <vbox id="aboutLinkBox">
      <hbox pack="center">
        <label class="text-link bottom-link" href="about:license">Licensing information</label>
        <label class="text-link bottom-link" href="about:rights">End-user rights</label>
        <label class="text-link bottom-link" id="releaseNotesURL">Release notes</label>
      </hbox>
-      <description id="PMtrademark">&trademarkInfo.part1;</description>
+      <description id="aboutPMtrademark">&trademarkInfo.part1;</description>
    </vbox>
  </vbox>
  
--- a/application/palemoon/branding/official/content/aboutDialog.css
+++ b/application/palemoon/branding/official/content/aboutDialog.css
@ -3,41 +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: #F7F7F7;
-  background-size: cover;
-  color: #000020; 
+  background-color: #9ABCD5;
+  color: #101020; 
 }

-#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 #9ABCD5;
 }

-#PMbottomBox {
-  padding: 15px 10px 0;
-  background-color: rgba(240,240,255,.7);
-}   
+#aboutTextBox {
+  font-family: Arial, helvetica;
+  font-size: 14px;
+  text-shadow: 1px 1px 0px #9ABCD5;
+  padding: 0px 10px;
+  background: linear-gradient(to bottom,
+                              transparent 0%,
+                              rgba(255, 255, 255, .3) 20%,
+                              rgba(255, 255, 255, .5) 75%,
+                              transparent 100%);
+}

-#PMupdateDeck > hbox > label:not([class="text-link"]) {
-  color: #909090;
+#aboutLinkBox {
+  padding: 15px 10px 0;
+  font-family: Arial, helvetica;
 }

-#PMtrademark {
-  font-size: xx-small;
+#aboutPMtrademark {
+  font-size: 10px;
  text-align: center;
-  color: #999999;
+  color: #C0C0C0;
+  text-shadow: 1px 1px 0px #000000;
  margin-top: 10px;
  margin-bottom: 10px;
 }
--- a/application/palemoon/branding/official/content/jar.mn
+++ b/application/palemoon/branding/official/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)
--- a/application/palemoon/branding/unofficial/content/about-wordmark.png
+++ b/application/palemoon/branding/unofficial/content/about-wordmark.png
--- a/application/palemoon/branding/unofficial/content/about-wordmark.svg
+++ b/application/palemoon/branding/unofficial/content/about-wordmark.svg
@ -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>
--- a/application/palemoon/branding/unofficial/content/aboutDialog.css
+++ b/application/palemoon/branding/unofficial/content/aboutDialog.css
@ -10,15 +10,25 @@
 }

 .text-link {
-  color: #eef !important;
+  color: #eef;
 }

-#PMrightBox {
-  /* this margin prevents text from overlapping the planet image */
-  margin-left: 280px;
-  margin-right: 20px;
+.bottom-link {
+  color: black;
+  background-color: #808080;
 }

-#PMbottomBox {
-  background-color: rgba(0,0,0,.7);
+#aboutVersionBox {
+  margin-top: 20px;
+}
+
+#aboutTextBox {
+  font-family: Arial, helvetica;
+  font-size: 14px;
+  padding: 0px 10px;
+}
+
+#aboutLinkBox {
+  padding: 15px 10px 20px;
+  font-family: Arial, helvetica;
 }
--- a/application/palemoon/branding/unofficial/content/jar.mn
+++ b/application/palemoon/branding/unofficial/content/jar.mn
@ -8,7 +8,6 @@ browser.jar:
  content/branding/about-background.png       (about-background.png)
  content/branding/about-logo.png             (about-logo.png)
  content/branding/about-logo@2x.png          (about-logo@2x.png)
-  content/branding/about-wordmark.svg         (about-wordmark.svg)
  content/branding/icon48.png                 (icon48.png)
  content/branding/icon64.png                 (icon64.png)
  content/branding/icon16.png                 (../default16.png)
--- a/application/palemoon/branding/unstable/content/about-wordmark.svg
+++ b/application/palemoon/branding/unstable/content/about-wordmark.svg
@ -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>
--- 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;
 }
--- 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)