wuggy/Dactyloidae
wuggy/Dactyloidae
1
0
Fork 0
mirror of https://repo.dactyloidae.xyz/Dactyloidae/UXP.git synced 2026-09-02 22:08:40 +09:00
Code Issues Projects Releases Packages Wiki Activity

Update about box design.

Browse source 
Tag #963.
This commit is contained in:
wolfbeast 2019-03-04 13:02:25 +01:00 • committed by Roy Tam
commit 9fdca8dca9
11 changed files with 110 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

46
application/palemoon/base/content/aboutDialog.css
View file

@ -2,29 +2,20 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * 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/. */ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
#PMaboutDialog { #aboutPMDialogContainer {
width: 620px; width: 700px;
height: 410px;
} }
#PMrightBox { #aboutVersionBox {
background-image: url("chrome://branding/content/about-wordmark.png"); height: 38 px;
background-repeat: no-repeat;
/* padding-top creates room for the wordmark */
padding-top: 38px;
margin-top:20px;
} }
#PMrightBox:-moz-locale-dir(rtl) { #aboutVersion {
background-position: 100% 0; text-align: center;
} font-size: 18px;
font-weight: bold;
#PMbottomBox { margin: 4px;
padding: 15px 10px 0;
}
#PMversion {
margin-top: 10px;
-moz-margin-start: 0;
} }
#distribution, #distribution,
@ -35,13 +26,10 @@
margin-bottom: 0; margin-bottom: 0;
} }
.text-blurb { .text-credits {
margin-bottom: 10px; margin: 5px 0px;
-moz-margin-start: 0;
-moz-padding-start: 0;
} }
.text-link, .text-link,
.text-link:focus { .text-link:focus {
margin: 0px; margin: 0px;
@ -51,5 +39,15 @@
.bottom-link, .bottom-link,
.bottom-link:focus { .bottom-link:focus {
text-align: center; text-align: center;
text-decoration: none !important;
padding: 4px;
border-radius: 3px;
color: #244C8A;
background-color: rgba(240, 240, 240, .7);
margin: 0 40px; margin: 0 40px;
transition: background-color 0.5s ease-out;
}
.bottom-link:hover {
background-color: rgba(240, 240, 255, .95);
} }

30
application/palemoon/base/content/aboutDialog.xul
View file

@ -38,48 +38,48 @@
<script type="application/javascript" src="chrome://browser/content/aboutDialog.js"/> <script type="application/javascript" src="chrome://browser/content/aboutDialog.js"/>
<vbox id="aboutPMDialogContainer"> <vbox id="aboutPMDialogContainer" flex="1">
<hbox id="PMclientBox"> <vbox id="aboutHeaderBox" />
<vbox id="PMleftBox" flex="1"/> <vbox id="aboutVersionBox" flex="3">
<vbox id="PMrightBox" flex="1">
#ifdef HAVE_64BIT_BUILD #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 #else
#expand <label id="PMversion">Version: __MOZ_APP_VERSION__ (32-bit)</label> #expand <label id="aboutVersion">Version: __MOZ_APP_VERSION__ (32-bit)</label>
#endif #endif
<label id="distribution" class="text-blurb"/> <label id="distribution" class="text-blurb"/>
<label id="distributionId" 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) #if defined(MOZ_OFFICIAL_BRANDING) || defined(MC_OFFICIAL)
#ifdef MC_PRIVATE_BUILD #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>. 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 #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>
<description class="text-pmcreds"> <description class="text-credits">
Special thanks to all our supporters and donors for making this browser possible! Special thanks to all our supporters and donors for making this browser possible!
</description> </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> 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. or getting involved in our development by tackling some of the issues found in our GitHub issue tracker.
#endif #endif
#else #else
&brandFullName; is released by &vendorShortName;. &brandFullName; is released by &vendorShortName;.
</description> </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>. 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 #endif
</description> </description>
</vbox> </vbox>
</vbox> <vbox id="aboutLinkBox">
</hbox>
<vbox id="PMbottomBox">
<hbox pack="center"> <hbox pack="center">
<label class="text-link bottom-link" href="about:license">Licensing information</label> <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" href="about:rights">End-user rights</label>
<label class="text-link bottom-link" id="releaseNotesURL">Release notes</label> <label class="text-link bottom-link" id="releaseNotesURL">Release notes</label>
</hbox> </hbox>
<description id="PMtrademark">&trademarkInfo.part1;</description> <description id="aboutPMtrademark">&trademarkInfo.part1;</description>
</vbox> </vbox>
</vbox> </vbox>

51
application/palemoon/branding/official/content/aboutDialog.css
View file

@ -3,41 +3,46 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
#aboutPMDialogContainer { #aboutPMDialogContainer {
background-image: url("chrome://branding/content/about-background.png"); background-image: url("chrome://branding/content/about-background.jpg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: #F7F7F7; background-color: #9ABCD5;
background-size: cover; color: #101020;
color: #000020;
} }
#PMleftBox { #aboutHeaderBox {
/* background-image: url("chrome://branding/content/about-logo.png"); */ background-image: url("chrome://branding/content/about-wordmark.png");
background-repeat: no-repeat; background-repeat: no-repeat;
/* min-width and min-height create room for the logo */ background-position: center center;
min-width: 210px; height: 44px;
min-height: 210px;
margin-top:20px;
-moz-margin-start: 30px;
} }
#PMrightBox { #aboutVersionBox {
margin-left: 30px; font-family: Arial, helvetica;
margin-right: 30px; text-shadow: 1px 1px 0px #9ABCD5;
} }
#PMbottomBox { #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%);
}
#aboutLinkBox {
padding: 15px 10px 0; padding: 15px 10px 0;
background-color: rgba(240,240,255,.7); font-family: Arial, helvetica;
}
#PMupdateDeck > hbox > label:not([class="text-link"]) {
color: #909090;
} }
#PMtrademark { #aboutPMtrademark {
font-size: xx-small; font-size: 10px;
text-align: center; text-align: center;
color: #999999; color: #C0C0C0;
text-shadow: 1px 1px 0px #000000;
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }

2
application/palemoon/branding/official/content/jar.mn
View file

@ -5,7 +5,7 @@
browser.jar: browser.jar:
% content branding %content/branding/ contentaccessible=yes % content branding %content/branding/ contentaccessible=yes
content/branding/about.png (about.png) 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.png (about-logo.png)
content/branding/about-logo@2x.png (about-logo@2x.png) content/branding/about-logo@2x.png (about-logo@2x.png)
content/branding/about-wordmark.png (about-wordmark.png) content/branding/about-wordmark.png (about-wordmark.png)

BIN
application/palemoon/branding/unofficial/content/about-wordmark.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 251 B

8
application/palemoon/branding/unofficial/content/about-wordmark.svg
View file

@ -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>
Side by side

Before

Width:  |  Height:  |  Size: 377 B

24
application/palemoon/branding/unofficial/content/aboutDialog.css
View file

@ -10,15 +10,25 @@
} }
.text-link { .text-link {
color: #eef !important; color: #eef;
} }
#PMrightBox { .bottom-link {
/* this margin prevents text from overlapping the planet image */ color: black;
margin-left: 280px; background-color: #808080;
margin-right: 20px;
} }
#PMbottomBox { #aboutVersionBox {
background-color: rgba(0,0,0,.7); margin-top: 20px;
}
#aboutTextBox {
font-family: Arial, helvetica;
font-size: 14px;
padding: 0px 10px;
}
#aboutLinkBox {
padding: 15px 10px 20px;
font-family: Arial, helvetica;
} }

1
application/palemoon/branding/unofficial/content/jar.mn
View file

@ -8,7 +8,6 @@ browser.jar:
content/branding/about-background.png (about-background.png) content/branding/about-background.png (about-background.png)
content/branding/about-logo.png (about-logo.png) content/branding/about-logo.png (about-logo.png)
content/branding/about-logo@2x.png (about-logo@2x.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/icon48.png (icon48.png)
content/branding/icon64.png (icon64.png) content/branding/icon64.png (icon64.png)
content/branding/icon16.png (../default16.png) content/branding/icon16.png (../default16.png)

8
application/palemoon/branding/unstable/content/about-wordmark.svg
View file

@ -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>
Side by side

Before

Width:  |  Height:  |  Size: 377 B

51
application/palemoon/branding/unstable/content/aboutDialog.css
View file

@ -3,45 +3,46 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
#aboutPMDialogContainer { #aboutPMDialogContainer {
background-image: url("chrome://branding/content/about-background.png"); background-image: url("chrome://branding/content/about-background.jpg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: #100000; background-color: #D5BC9A;
background-size: cover; color: #202010;
color: #E0E0FF;
} }
#PMleftBox { #aboutHeaderBox {
background-image: url("chrome://branding/content/about-logo.png"); background-image: url("chrome://branding/content/about-wordmark.png");
background-repeat: no-repeat; background-repeat: no-repeat;
/* min-width and min-height create room for the logo */ background-position: center center;
min-width: 210px; height: 44px;
min-height: 210px;
margin-top:20px;
-moz-margin-start: 30px;
} }
#PMrightBox { #aboutVersionBox {
margin-left: 30px; font-family: Arial, helvetica;
margin-right: 30px; text-shadow: 1px 1px 0px #D5BC9A;
} }
#detailsBox > description > .text-link { #aboutTextBox {
color: #CDC36F; 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; padding: 15px 10px 0;
background-color: rgba(240,240,255,.7); font-family: Arial, helvetica;
}
#PMupdateDeck > hbox > label:not([class="text-link"]) {
color: #909090;
} }
#PMtrademark { #aboutPMtrademark {
font-size: xx-small; font-size: 10px;
text-align: center; text-align: center;
color: #333333; color: #C0C0C0;
text-shadow: 1px 1px 0px #000000;
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }

2
application/palemoon/branding/unstable/content/jar.mn
View file

@ -5,7 +5,7 @@
browser.jar: browser.jar:
% content branding %content/branding/ contentaccessible=yes % content branding %content/branding/ contentaccessible=yes
content/branding/about.png (about.png) 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.png (about-logo.png)
content/branding/about-logo@2x.png (about-logo@2x.png) content/branding/about-logo@2x.png (about-logo@2x.png)
content/branding/about-wordmark.png (about-wordmark.png) content/branding/about-wordmark.png (about-wordmark.png)