Update about box design.

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

View file

@ -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 {
#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;
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: #999999;
color: #C0C0C0;
text-shadow: 1px 1px 0px #000000;
margin-top: 10px;
margin-bottom: 10px;
}

View file

@ -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)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 251 B

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>

Before

Width:  |  Height:  |  Size: 377 B

View file

@ -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;
}

View file

@ -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)

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>

Before

Width:  |  Height:  |  Size: 377 B

View file

@ -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;
}

View file

@ -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)