Skip to content

Commit

Permalink
Bug #17108: Polish about:tor appearance
Browse files Browse the repository at this point in the history 
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 browser 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
  • Loading branch information
@arthuredelstein
arthuredelstein committed Dec 2, 2015
1 parent 5572405 commit 0106c59
Show file tree
Hide file tree
Showing 5 changed files with 29 additions and 71 deletions.
6 changes: 3 additions & 3 deletions src/chrome/content/aboutTor/aboutTor.xhtml
View file
Expand Up @@ -175,11 +175,11 @@ window.addEventListener("pageshow", function() {
<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>
Expand Down
Binary file modified src/chrome/content/aboutTor/search.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/chrome/content/aboutTor/tor-on.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions src/chrome/locale/en/aboutTor.dtd
View file
Expand Up @@ -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.">
Expand Down
88 changes: 23 additions & 65 deletions src/chrome/skin/aboutTor.css
View file
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
}

Expand Down Expand Up @@ -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,
Expand All @@ -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;
}
Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -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;
}

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

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

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

0 comments on commit 0106c59

Please sign in to comment.