Raccoon graphics

application/palemoon/base/content/aboutDialog.css

@@ -2,53 +2,58 @@
  * 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/. */
 
-#aboutPMDialogContainer {
-  width: 700px;
-  height: 410px;
+#PMaboutDialog {
+  width: 620px;
+  height: 250px;
 }
 
-#aboutVersionBox {
-  font-family: Arial, helvetica;
-  height: 38 px;
+#PMrightBox {
+  background-image: url("chrome://branding/content/about-wordmark.png");
+  background-repeat: no-repeat;
+  /* padding-top creates room for the wordmark */
+  height: 240px;
+  padding-top: 38px;
+  margin-top:20px;
 }
 
-#aboutVersion {
-  text-align: center;
-  font-size: 18px;
-  font-weight: bold;
-  margin: 4px;
+#PMrightBox:-moz-locale-dir(rtl) {
+  background-position: 100% 0;
+}
+
+#PMbottomBox {
+  padding: 15px 10px 0;
+}
+
+#PMversion {
+  margin-top: 10px;
+  -moz-margin-start: 0;
 }
 
 #distribution,
 #distributionId {
-  text-align: center;
-  font-size: 14px;
   font-weight: bold;
   display: none;
   margin-top: 0;
   margin-bottom: 0;
 }
 
-#aboutTextBox {
-  font-family: Arial, helvetica;
-  font-size: 14px;
-  margin: 5px 20px;
-  padding: 4px 10px 0px;
-  border-radius: 3px;
-  color: black;
-  background-color: rgba(240, 240, 240, .6);
+.text-blurb {
+  margin-bottom: 10px;
+  -moz-margin-start: 0;
+  -moz-padding-start: 0;
 }
 
-#aboutLinkBox {
-  font-family: Arial, helvetica;
+#updateButton,
+#updateDeck > hbox > label {
+  -moz-margin-start: 0;
+  -moz-padding-start: 0;
 }
 
-.text-credits {
-  margin: 5px 0px;
-}
-
-.text-center {
-  text-align: center;
+.update-throbber {
+  width: 16px;
+  min-height: 16px;
+  -moz-margin-end: 3px;
+  list-style-image: url("chrome://global/skin/icons/loading_16.png");
 }
 
 .text-link,
@@ -60,15 +65,5 @@
 .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);
 }

application/palemoon/base/content/aboutDialog.xul

@@ -38,9 +38,10 @@
 
   <script type="application/javascript" src="chrome://browser/content/aboutDialog.js"/>
 
-  <vbox id="aboutPMDialogContainer" flex="1">
-    <vbox id="aboutHeaderBox" />
-    <vbox id="aboutVersionBox" flex="3">
+  <vbox id="aboutPMDialogContainer">
+    <hbox id="PMclientBox">
+      <vbox id="PMleftBox" flex="1"/>
+      <vbox id="PMrightBox" flex="1">
 #ifdef HAVE_64BIT_BUILD
 #expand <label id="aboutVersion">Version: __MOZ_APP_VERSION__ (64-bit)</label>
 #else
@@ -49,28 +50,28 @@
         <label id="distribution" class="text-blurb"/>
         <label id="distributionId" class="text-blurb"/>
 
-    </vbox>
-    <vbox id="aboutTextBox" flex="1">
-        <description class="text-credits text-center">
-          Mypal browser is based on Pale Moon.
-        </description>
-        <description class="text-credits text-center">
-          Adapted for Windows XP and 2003.
-        </description>
-        <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://feodor2.github.io/Mypal/">GitHub</label>
-        </description>    
-    </vbox>
-    <vbox id="aboutLinkBox">
-      <hbox pack="center">
-        <label class="text-link bottom-link" href="about:rights">End-user rights</label>
-        <label class="text-link bottom-link" href="about:license">Licensing information</label>
-        <label class="text-link bottom-link" id="releaseNotesURL">Release notes</label>
-      </hbox>
-      <description id="aboutPMtrademark">&trademarkInfo.part1;</description>
-    </vbox>
+        <vbox id="detailsBox">
+          <description class="text-credits text-center">
+           Mypal browser is based on Pale Moon.
+          </description>
+          <description class="text-credits text-center">
+           Adapted for Windows XP and 2003.
+          </description>
+          <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://feodor2.github.io/Mypal/">GitHub</label>
+          </description>    
+        </vbox>
+      </vbox>
+    </hbox>
+      <vbox id="PMbottomBox">
+        <hbox pack="center">
+          <label class="text-link bottom-link" href="about:rights">End-user rights</label>
+          <label class="text-link bottom-link" href="about:license">Licensing information</label>
+          <label class="text-link bottom-link" id="releaseNotesURL">Release notes</label>
+        </hbox>
+        <description id="aboutPMtrademark">&trademarkInfo.part1;</description>
+     </vbox>
   </vbox>
-  
   <keyset>
     <key keycode="VK_ESCAPE" oncommand="window.close();"/>
   </keyset>

application/palemoon/branding/unofficial/content/aboutDialog.css

@@ -5,15 +5,22 @@
 #aboutPMDialogContainer {
   background-image: url("chrome://branding/content/about-background.png");
   background-repeat: no-repeat;
-  background-color: #000;
-  color: #fff;
+  background-color: #005700;
+  background-size: cover;
+  color: #fefe00;
+
 }
 
-#aboutVersionBox {
-  /* No wordmark: leave empty space */
-  margin-top: 20px;
+.text-link {
+  color: #eef !important;
 }
 
-#aboutLinkBox {
-  padding: 15px 10px 20px;
+#PMrightBox {
+  /* this margin prevents text from overlapping the planet image */
+  margin-left: 280px;
+  margin-right: 20px;
+}
+
+#PMbottomBox {
+  background-color: rgba(0,0,0,.7);
 }

application/palemoon/branding/unofficial/mypal.VisualElementsManifest.xml

@@ -4,5 +4,5 @@
       Square150x150Logo='browser\VisualElements\VisualElements_150.png'
       Square70x70Logo='browser\VisualElements\VisualElements_70.png'
       ForegroundText='light'
-      BackgroundColor='#171717'/>
+      BackgroundColor='#178817'/>
 </Application>

application/palemoon/themes/windows/browser.css

@@ -227,23 +227,22 @@
 }
 %else
 #appmenu-button {
-  background-image: linear-gradient(hsl(211,33%,32%), hsl(209,53%,10%) 95%);
-  border-color: hsla(210,59%,13%,.9);
+  background-color: #00A923;
+  background-image: radial-gradient(farthest-side at bottom, hsla(29,23%,23%,.7) 37%, #00D737);
   box-shadow: 0 1px 0 hsla(210,48%,90%,.15) inset,
               0 0 2px 1px hsla(211,65%,85%,.15) inset;
 }
 #appmenu-button:hover:not(:active):not([open]) {
-  background-image: radial-gradient(farthest-side at bottom, hsla(210,48%,90%,.5) 10%, hsla(210,48%,90%,0) 70%),
-                    radial-gradient(farthest-side at bottom, hsla(211,70%,83%,.5), hsla(211,70%,83%,0)),
-                    linear-gradient(hsl(211,33%,32%), hsl(209,53%,10%) 95%);
-  border-color: hsla(210,59%,13%,.9);
+  background-color: #00D737;
+  background-image: radial-gradient(farthest-side at bottom, hsla(129,73%,73%,.5) 37%, #00b923);
   box-shadow: 0 1px 0 hsla(210,48%,90%,.15) inset,
               0 0 2px 1px hsla(210,48%,90%,.4) inset,
               0 -1px 0 hsla(210,48%,90%,.2) inset;
 }
 #appmenu-button:hover:active,
 #appmenu-button[open] {
-  background-image: linear-gradient(hsl(211,33%,26%), hsl(209,53%,6%) 95%);
+  background-color: #00D737;
+  background-image: radial-gradient(farthest-side at bottom, hsla(29,23%,23%,.7) 37%, #002923);
   box-shadow: 0 2px 3px rgba(0,0,0,.4) inset,
               0 1px 1px rgba(0,0,0,.2) inset;
 }