summaryrefslogtreecommitdiffstats
path: root/application
diff options
context:
space:
mode:
authorwolfbeast <mcwerewolf@wolfbeast.com>2019-03-04 13:02:25 +0100
committerwolfbeast <mcwerewolf@wolfbeast.com>2019-03-04 13:05:45 +0100
commitf0c57ac5f22022bc42fc1763297c3bcbf42c45fe (patch)
tree7c87768b8d59f1872001b33d9bd629a242549b64 /application
parent7f6137983385f23c820d01c9a0918b9b90928dd0 (diff)
downloadUXP-f0c57ac5f22022bc42fc1763297c3bcbf42c45fe.tar
UXP-f0c57ac5f22022bc42fc1763297c3bcbf42c45fe.tar.gz
UXP-f0c57ac5f22022bc42fc1763297c3bcbf42c45fe.tar.lz
UXP-f0c57ac5f22022bc42fc1763297c3bcbf42c45fe.tar.xz
UXP-f0c57ac5f22022bc42fc1763297c3bcbf42c45fe.zip
Update about box design.
Tag #963.
Diffstat (limited to 'application')
-rw-r--r--application/palemoon/base/content/aboutDialog.css46
-rw-r--r--application/palemoon/base/content/aboutDialog.xul30
-rw-r--r--application/palemoon/branding/official/content/aboutDialog.css51
-rw-r--r--application/palemoon/branding/official/content/jar.mn2
-rw-r--r--application/palemoon/branding/unofficial/content/about-wordmark.pngbin251 -> 0 bytes
-rw-r--r--application/palemoon/branding/unofficial/content/about-wordmark.svg8
-rw-r--r--application/palemoon/branding/unofficial/content/aboutDialog.css24
-rw-r--r--application/palemoon/branding/unofficial/content/jar.mn1
-rw-r--r--application/palemoon/branding/unstable/content/about-wordmark.svg8
-rw-r--r--application/palemoon/branding/unstable/content/aboutDialog.css51
-rw-r--r--application/palemoon/branding/unstable/content/jar.mn2
11 files changed, 110 insertions, 113 deletions
diff --git a/application/palemoon/base/content/aboutDialog.css b/application/palemoon/base/content/aboutDialog.css
index b82c7fdc3..b0cb5ea39 100644
--- 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);
}
diff --git a/application/palemoon/base/content/aboutDialog.xul b/application/palemoon/base/content/aboutDialog.xul
index ff4c83bbd..ff9d2d71c 100644
--- 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>
diff --git a/application/palemoon/branding/official/content/aboutDialog.css b/application/palemoon/branding/official/content/aboutDialog.css
index dbf04ae0a..b9452a597 100644
--- 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;
}
diff --git a/application/palemoon/branding/official/content/jar.mn b/application/palemoon/branding/official/content/jar.mn
index d8038bf9e..83ef1ed15 100644
--- 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)
diff --git a/application/palemoon/branding/unofficial/content/about-wordmark.png b/application/palemoon/branding/unofficial/content/about-wordmark.png
deleted file mode 100644
index 41889ba39..000000000
--- a/application/palemoon/branding/unofficial/content/about-wordmark.png
+++ /dev/null
Binary files differ
diff --git a/application/palemoon/branding/unofficial/content/about-wordmark.svg b/application/palemoon/branding/unofficial/content/about-wordmark.svg
deleted file mode 100644
index fd0f1745e..000000000
--- a/application/palemoon/branding/unofficial/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/unofficial/content/aboutDialog.css b/application/palemoon/branding/unofficial/content/aboutDialog.css
index 3f7c5ec23..c1b654ac9 100644
--- 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;
}
diff --git a/application/palemoon/branding/unofficial/content/jar.mn b/application/palemoon/branding/unofficial/content/jar.mn
index bdb1e8129..353695792 100644
--- 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)
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)