[tor-commits] [torbutton/master] Bug 17108: Polish about:tor appearance
gk at torproject.org
gk at torproject.org
Mon Dec 7 12:10:50 UTC 2015
commit 05c8befab9446cdd6a0bfe7a60a75849a09321da
Author: Arthur Edelstein <arthuredelstein at gmail.com>
Date: Wed Nov 11 13:14:08 2015 -0800
Bug 17108: Polish about:tor appearance
Changes include:
0. Logo changed to prettier onion
1. Title changed to "Welcome to Tor Browser" (in purple).
2. Dropped "This browser is configured to use Tor."
3. Normal style for "You are now free to browse the Internet anonymously."
4. Border on input box set to light gray, rounded corners removed
5. Search button image replaced with non-pixellated one
6. Sans-serif text used everywhere
7. Borders on bubbles removed
8. Text color changed to be slightly less black
9. Some text increased a little in size
---
src/chrome/content/aboutTor/aboutTor.xhtml | 6 +-
src/chrome/content/aboutTor/search.png | Bin 3419 -> 934 bytes
src/chrome/content/aboutTor/tor-on.png | Bin 2665 -> 17945 bytes
src/chrome/locale/en/aboutTor.dtd | 6 +-
src/chrome/skin/aboutTor.css | 88 ++++++++--------------------
5 files changed, 29 insertions(+), 71 deletions(-)
diff --git a/src/chrome/content/aboutTor/aboutTor.xhtml b/src/chrome/content/aboutTor/aboutTor.xhtml
index dbfca72..6331997 100644
--- a/src/chrome/content/aboutTor/aboutTor.xhtml
+++ b/src/chrome/content/aboutTor/aboutTor.xhtml
@@ -249,11 +249,11 @@ function setupDonationBanner() {
<div id="torstatus-on-container" class="hideIfTorOff torstatus-container">
<h1>&aboutTor.success.label;</h1>
<br/>
- <h2 id="success2">&aboutTor.success2.label;</h2>
- <br/>
<h3 class="hideIfTBBNeedsUpdate">&aboutTor.success3.label;</h3>
<br/>
- <a id="testTorSettings" href="about:blank">&aboutTor.check.label;</a>
+ <div style="margin-top: 20px;">
+ <a id="testTorSettings" href="about:blank">&aboutTor.check.label;</a>
+ </div>
</div>
<div id="torstatus-off-container" class="hideIfTorOn torstatus-container">
<h1>&aboutTor.failure.label;</h1>
diff --git a/src/chrome/content/aboutTor/search.png b/src/chrome/content/aboutTor/search.png
index 379d094..698a77d 100644
Binary files a/src/chrome/content/aboutTor/search.png and b/src/chrome/content/aboutTor/search.png differ
diff --git a/src/chrome/content/aboutTor/tor-on.png b/src/chrome/content/aboutTor/tor-on.png
index aa938e1..186fcf1 100644
Binary files a/src/chrome/content/aboutTor/tor-on.png and b/src/chrome/content/aboutTor/tor-on.png differ
diff --git a/src/chrome/locale/en/aboutTor.dtd b/src/chrome/locale/en/aboutTor.dtd
index 69ef335..17af371 100644
--- a/src/chrome/locale/en/aboutTor.dtd
+++ b/src/chrome/locale/en/aboutTor.dtd
@@ -6,14 +6,14 @@
<!ENTITY aboutTor.title "About Tor">
-<!ENTITY aboutTor.outOfDateTorOn.label "HOWEVER, this browser is out of date.">
+<!ENTITY aboutTor.outOfDateTorOn.label "WARNING: this browser is out of date.">
<!ENTITY aboutTor.outOfDateTorOff.label "ALSO, this browser is out of date.">
<!ENTITY aboutTor.outOfDate2.label "Click on the onion and then choose Check for Tor Browser Update.">
<!ENTITY aboutTor.check.label "Test Tor Network Settings">
-<!ENTITY aboutTor.success.label "Congratulations!">
-<!ENTITY aboutTor.success2.label "This browser is configured to use Tor.">
+<!ENTITY aboutTor.success.label "Welcome to Tor Browser">
+<!ENTITY aboutTor.success2.label "Connected to the Tor network.">
<!ENTITY aboutTor.success3.label "You are now free to browse the Internet anonymously.">
<!ENTITY aboutTor.failure.label "Something Went Wrong!">
<!ENTITY aboutTor.failure2.label "Tor is not working in this browser.">
diff --git a/src/chrome/skin/aboutTor.css b/src/chrome/skin/aboutTor.css
index 038d470..2776a0e 100644
--- a/src/chrome/skin/aboutTor.css
+++ b/src/chrome/skin/aboutTor.css
@@ -18,7 +18,7 @@ body {
margin: 0px auto;
padding: 0px 0px;
font-size: 62.5%;
- font-family: "Liberation Serif", "Times New Roman", Times, serif;
+ font-family: "Liberation Sans", Arial, Helvetica, sans-serif;
font-weight: normal;
color: #4d4d4d;
background-color: #FFFFFF;
@@ -40,7 +40,6 @@ body[toron] {
right: 6px;
height: 30px;
width: 200px;
- font-family: "Liberation Sans", Arial, Helvetica, sans-serif;
font-size: 1.4em;
white-space: pre-wrap;
text-align: right;
@@ -56,6 +55,8 @@ body[toron] #torstatus-image {
height: 128px;
width: 128px;
background-image: url('chrome://torbutton/content/aboutTor/tor-off.png');
+ background-repeat: no-repeat;
+ background-position: center;
z-index: -1;
}
@@ -127,8 +128,8 @@ body:not([toron]) .hideIfTorOff {
display: none;
}
-body[toron] .top h1, body[toron] .top h2 {
- color: #008000;
+body[toron] .top h1 {
+ color: #600060;
}
div.hideIfTorIsUpToDate,
@@ -151,7 +152,7 @@ body .top div.hideIfTorIsUpToDate h1.hideIfTorOff {
}
.top h1 {
- font-size: 4.14em;
+ font-size: 4.00em;
font-weight: bold;
margin-bottom: 5px;
}
@@ -162,14 +163,10 @@ body .top div.hideIfTorIsUpToDate h1.hideIfTorOff {
font-weight: normal;
}
-.top #success2 {
- margin-bottom: 5px;
-}
-
.top h3 {
- font-size: 2.04em;
- font-style: italic;
+ font-size: 1.8em;
font-weight: normal;
+ color: #3B503C;
}
#middle {
@@ -179,6 +176,7 @@ body .top div.hideIfTorIsUpToDate h1.hideIfTorOff {
border-spacing: 100px 0px;
border-collapse: separate;
text-align: center;
+ font-size: 1.6em;
}
.bubbleRow {
@@ -189,61 +187,30 @@ body .top div.hideIfTorIsUpToDate h1.hideIfTorOff {
display: table-cell;
width: 50%;
height: 100%;
- padding: 10px 10px;
- color: #222222;
+ padding: 20px 30px;
+ color: #3B503C;
background-color: #FFFFFF;
- border: 1px solid #008000;
+ border: none;
border-radius: 16px;
- text-align: center;
+ text-align: start;
vertical-align: top;
}
#middle h1 {
- font-family: "Liberation Sans", Arial, Helvetica, sans-serif;
- font-size: 1.9em;
+ font-size: 1.2em;
margin-bottom: 10px;
}
-#middle h2 {
- font-size: 1.4em;
- margin: 9px 0px 3px 0px;
- font-weight: 500;
-}
-
-#middle h6 {
- font-family: "Liberation Sans", Arial, Helvetica, sans-serif;
- font-size: 1em;
- line-height: 1em;
- font-style: italic;
- font-weight: normal;
- padding-top: 10px;
-}
-
-#middle p {
- font-size: 1.35em;
- text-align: left;
-}
-
-#middle p:-moz-dir(rtl) {
- text-align: right;
-}
-
-#middle a {
- font-size: 1.35em;
-}
-
#middle a.tips {
display: block;
- margin-top: 1.35em;
+ margin-top: 1.6em;
}
#middle ul {
- text-align: left;
padding: 5px 0 0 22px;
}
#middle ul:-moz-dir(rtl) {
- text-align: right;
padding: 5px 22px 0 0;
}
@@ -252,14 +219,14 @@ body .top div.hideIfTorIsUpToDate h1.hideIfTorOff {
}
#bottom {
- margin: 0px auto;
+ margin: 30px 0px 0px 0px;
padding-bottom: 40px;
float: left;
}
#bottom p {
- font-size: 1.8em;
- text-align: justify;
+ font-size: 1.6em;
+ text-align: start;
margin: 10px 125px 0px 125px;
}
@@ -276,7 +243,6 @@ body .top div.hideIfTorIsUpToDate h1.hideIfTorOff {
#bottom h4 {
margin-top: 50px;
line-height: 1em;
- font-family: "Liberation Sans", Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: normal;
text-align: center;
@@ -285,7 +251,6 @@ body .top div.hideIfTorIsUpToDate h1.hideIfTorOff {
#bottom p.lang {
max-width: 620px;
margin: 10px auto;
- font-family: "Liberation Sans", Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: normal;
text-align: center;
@@ -301,7 +266,6 @@ body .top div.hideIfTorIsUpToDate h1.hideIfTorOff {
padding-top: 5px;
font-size: 12px;
font-weight: normal;
- font-family: "Liberation Sans", Arial, Helvetica, sans-serif;
text-align: center;
}
@@ -312,7 +276,7 @@ body .top div.hideIfTorIsUpToDate h1.hideIfTorOff {
}
#sbutton input {
- height: 32px;
+ height: 34px;
width: 33px;
border: 0;
background: url('chrome://torbutton/content/aboutTor/search.png') no-repeat top left;
@@ -321,26 +285,20 @@ body .top div.hideIfTorIsUpToDate h1.hideIfTorOff {
/* #sxw is the container div for the search field and button */
#sxw {
- border-top: rgb(31,119,45) solid 1px;
- border-left: rgb(31,119,45) solid 1px;
- border-bottom: rgb(94,213,99) solid 1px;
- border-right: none;
- border-radius: 3px 0 0 3px;
- box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
- border-top-left-radius: 3px 3px;
- border-bottom-left-radius: 3px 3px;
+ border: none;
}
/* #sx is the search input (text) field */
#sx {
+ border-color: lightgray;
+ border-style: solid;
+ border-width: 1px 0px 1px 1px;
width: 350px;
min-height: 23px;
padding: 4px 6px 5px 6px;
margin: 0;
outline: none;
color: #222;
- border: none;
- font-family: "Segoe UI","Arial",sans-serif;
font-size: 18px;
}
More information about the tor-commits
mailing list