Commit 05c8befa authored by Arthur Edelstein's avatar Arthur Edelstein Committed by Georg Koppen
Browse files

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
parent 5623a3f4
......@@ -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>
......
src/chrome/content/aboutTor/search.png

3.34 KB | W: | H:

src/chrome/content/aboutTor/search.png

934 Bytes | W: | H:

src/chrome/content/aboutTor/search.png
src/chrome/content/aboutTor/search.png
src/chrome/content/aboutTor/search.png
src/chrome/content/aboutTor/search.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -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.">
......
......@@ -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;
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment