diff --git a/resources/static/css/common.css b/resources/static/css/common.css
index 66610fb24b7f23130b90d08a1e40ba11564cbe99..b438d2616c5faf6959c3f547a4b62d2f4549f120 100644
--- a/resources/static/css/common.css
+++ b/resources/static/css/common.css
@@ -17,10 +17,7 @@ html, body {
}
body {
- font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
- font-size: 13px;
- line-height: 21px;
- background-image: url('/i/bg.png');
+ font: 14px/21px 'Open Sans', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
overflow-y: auto;
}
@@ -42,21 +39,21 @@ html[xmlns] .cf {
height: 1%;
}
+header {
+}
+
header, section, footer {
display: block;
width: 100%;
}
-ul, li {
- list-style-type: none;
-}
-
-.sans {
- font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+footer {
+ color: #484848;
+ font-weight: 300;
}
-.serif {
- font-family: 'Droid Serif', Georgia, serif;
+ul, li {
+ list-style-type: none;
}
.mono {
@@ -64,80 +61,77 @@ ul, li {
}
.tooltip {
- position: absolute;
- top: 10px;
- left: 10px;
- background: #000;
- background: rgba(0,0,0,.7);
color: #fff;
- border-radius: 5px;
- padding: 2px 15px;
- border: 2px solid #000;
font-weight: bold;
+ text-shadow: 0 1px #333;
+ line-height: 16px;
+ background-color: #aa1401;
+ background-image: -webkit-linear-gradient(top, rgba(218, 81, 50, 0.9), rgba(169, 19, 0, 1));
+ background-image: -moz-linear-gradient(top, rgba(218, 81, 50, 0.9), rgba(169, 19, 0, 1));
+ background-image: -ms-linear-gradient(top, rgba(218, 81, 50, 0.9), rgba(169, 19, 0, 1));
+ background-image: -o-linear-gradient(top, rgba(218, 81, 50, 0.9), rgba(169, 19, 0, 1));
+ background-image: linear-gradient(top, rgba(218, 81, 50, 0.9), rgba(169, 19, 0, 1));
+ border-radius: 3px;
+ padding: 10px 15px;
+ box-shadow: 0 1px #666;
+
display: none;
max-width: 275px;
+ position: absolute;
+ top: 10px;
+ left: 10px;
z-index: 5;
}
a {
- color: #222;
+ color: #348fd0;
text-decoration: none;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+ font-weight: 300;
}
a:hover {
color: #000;
}
+/*
a.action, #error a {
color: #549FDC;
- text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}
a.action:hover, #error a:hover {
color: #58a7e7;
}
+*/
p:last-child {
margin-bottom: 0 !important;
}
+input[type=text],
input[type=email],
input[type=password] {
width: 100%;
- font-size: 14px;
+ color: #383838;
+ font-size: 13px;
padding: 5px;
border-width: 1px;
border-style: solid;
- border-color: #A3A29D #C6C3B4 #C6C3B4 #A3A29D;
+ border-color: #b2b2b2;
outline: none;
-
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- -o-border-radius: 3px;
- border-radius: 3px;
-
- -webkit-box-shadow: 1px 1px 0 rgba(255,255,255,0.5);
- -moz-box-shadow: 1px 1px 0 rgba(255,255,255,0.5);
- -o-box-shadow: 1px 1px 0 rgba(255,255,255,0.5);
- box-shadow: 1px 1px 0 rgba(255,255,255,0.5);
+ border-radius: 3px;
+ box-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}
+input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus {
- border: 1px solid #549FDC;
-
- -webkit-border-radius: 0;
- -moz-border-radius: 0;
- -o-border-radius: 0;
- border-radius: 0;
-
- -webkit-box-shadow: 0 0 0 1px #549FDC inset;
- -moz-box-shadow: 0 0 0 1px #549FDC inset;
- -o-box-shadow: 0 0 0 1px #549FDC inset;
- box-shadow: 0 0 0 1px #549FDC inset;
+ border: 1px solid #42a4e0;
+ box-shadow: 1px 1px 0 rgba(255,255,255,.5), 0 0 1px 3px rgba(73,173,227, .4);
}
+input[type=text]:disabled,
input[type=email]:disabled,
input[type=password]:disabled {
background-color: #f0f0f0;
@@ -158,82 +152,52 @@ input[type=checkbox] {
button,
.button {
font-size: 14px;
- height: 28px;
- padding: 0 10px;
+ line-height: 14px;
+ /* The difference between top and bottom padding is to make up for the tiny
+ * offset that browsers use to display lowercase letters.
+ */
+ padding: 6px 10px 7px;
float: right;
- vertical-align: middle;
- border: 1px solid #37A6FF;
- font-family: 'Droid Serif', Georgia, serif;
+ border: 0;
color: #fff;
- text-shadow: -1px -1px 0 #37A6FF;
+ text-shadow: 0 1px 0 #888, 0 0 2px rgba(255,255,255,.2);
cursor: pointer;
-
- -webkit-box-shadow: 0 0 0 1px #76C2FF inset;
- -moz-box-shadow: 0 0 0 1px #76C2FF inset;
- -o-box-shadow: 0 0 0 1px #76C2FF inset;
- box-shadow: 0 0 0 1px #76C2FF inset;
-
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- -o-border-radius: 5px;
- border-radius: 5px;
-
- background-color: #37A6FF;
- background-image: -moz-linear-gradient(center top , #76C2FF 0pt, #37A6FF 100%);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #76C2FF), color-stop(100%, #37A6FF));
white-space: nowrap;
-}
-button.negative {
- border: 1px solid #E70227;
- color: #fff;
- text-shadow: -1px -1px 0 #E70227;
-
- -webkit-box-shadow: 0 0 0 1px #FF1560 inset;
- -moz-box-shadow: 0 0 0 1px #FF1560 inset;
- -o-box-shadow: 0 0 0 1px #FF1560 inset;
- box-shadow: 0 0 0 1px #FF1560 inset;
+ border-radius: 3px;
+ border-bottom: 1px solid #888;
- background-color: #E70227;
- background-image: -moz-linear-gradient(center top , #FF1560 0pt, #E70227 100%);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FF1560), color-stop(100%, #E70227));
+ background-color: #3ea5d9;
+ background-image: -webkit-linear-gradient(top, #4eb5e5, #3196cf);
+ background-image: -moz-linear-gradient(top, #4eb5e5, #3196cf);
+ background-image: -ms-linear-gradient(top, #4eb5e5, #3196cf);
+ background-image: -o-linear-gradient(top, #4eb5e5, #3196cf);
+ background-image: linear-gradient(top, #4eb5e5, #3196cf);
}
button:hover,
button:focus,
.button:hover,
-.button:focus{
- color: #fff;
- background-color: #76c2ff;
- background-image: -moz-linear-gradient(center top , #76C2FF 50%, #37A6FF 100%);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #76C2FF), color-stop(100%, #37A6FF));
-}
-
-button.negative:hover,
-button.negative:focus,
-.button.negative:hover,
-.button.negative:focus{
- background-color: #FF1560;
- background-image: -moz-linear-gradient(center top , #FF1560 70%, #E70227 100%);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(70%, #FF1560), color-stop(100%, #E70227));
-
+.button:focus {
+ background-color: #43a6e2;
+ background-image: -webkit-linear-gradient(top, #43a6e2, #277ac1);
+ background-image: -moz-linear-gradient(top, #43a6e2, #277ac1);
+ background-image: -ms-linear-gradient(top, #43a6e2, #277ac1);
+ background-image: -o-linear-gradient(top, #43a6e2, #277ac1);
+ background-image: linear-gradient(top, #43a6e2, #277ac1);
}
-
button:active,
.button:active {
- background-color: #006EC6;
- border: 1px solid #003E70;
- color: #EEEEEE;
- text-shadow: -1px -1px 0 #006EC6;
-
- -webkit-box-shadow: 0 0 5px #003763 inset;
- -moz-box-shadow: 0 0 5px #003763 inset;
- -o-box-shadow: 0 0 5px #003763 inset;
- box-shadow: 0 0 5px #003763 inset;
-
- background-image: -moz-linear-gradient(center top , #3AA7FF 0%, #006EC6 100%);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3AA7FF), color-stop(100%, #006EC6));
+ background-color: #184a73;
+ background-image: -webkit-linear-gradient(top, #184a73, #276084);
+ background-image: -moz-linear-gradient(top, #184a73, #276084);
+ background-image: -ms-linear-gradient(top, #184a73, #276084);
+ background-image: -o-linear-gradient(top, #184a73, #276084);
+ background-image: linear-gradient(top, #184a73, #276084);
+ color: #97b6ca;
+ text-shadow: 0 1px #143348;
+ box-shadow: 0 0 5px #003763 inset;
}
button::-moz-focus-inner, .button::-moz-focus-inner {
@@ -241,14 +205,79 @@ button::-moz-focus-inner, .button::-moz-focus-inner {
border: 0
}
+
+.submit button {
+ padding: 6px 45px 7px 10px;
+ background-color: #3ea5d9;
+ background-image: url("/i/button-arrow.png"), -webkit-linear-gradient(top, #4eb5e5, #3196cf);
+ background-image: url("/i/button-arrow.png"), -moz-linear-gradient(top, #4eb5e5, #3196cf);
+ background-image: url("/i/button-arrow.png"), -ms-linear-gradient(top, #4eb5e5, #3196cf);
+ background-image: url("/i/button-arrow.png"), -o-linear-gradient(top, #4eb5e5, #3196cf);
+ background-image: url("/i/button-arrow.png"), linear-gradient(top, #4eb5e5, #3196cf);
+ background-repeat: no-repeat;
+ background-position: center right, center;
+}
+
+
+.submit button:hover,
+.submit button:focus,
+.submit .button:hover,
+.submit .button:focus {
+ background-color: #43a6e2;
+ background-image: url("/i/button-arrow.png"), -webkit-linear-gradient(top, #43a6e2, #277ac1);
+ background-image: url("/i/button-arrow.png"), -moz-linear-gradient(top, #43a6e2, #277ac1);
+ background-image: url("/i/button-arrow.png"), -ms-linear-gradient(top, #43a6e2, #277ac1);
+ background-image: url("/i/button-arrow.png"), -o-linear-gradient(top, #43a6e2, #277ac1);
+ background-image: url("/i/button-arrow.png"), linear-gradient(top, #43a6e2, #277ac1);
+}
+
button[disabled], .submit_disabled button, .submit_disabled .button,
.submit_disabled button:focus, .submit_disabled .button:focus,
.submit_disabled button:active, .submit_disabled .button:active {
- background-color: #37A6FF;
- background-image: -moz-linear-gradient(center top , #76C2FF 0pt, #37A6FF 100%);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #76C2FF), color-stop(100%, #37A6FF));
+ color: #d8dde0;
+ cursor: default;
+ background-color: #bcc4ca;
+ background-image: -webkit-linear-gradient(top, #bcc4ca, #a0a7ae);
+ background-image: -moz-linear-gradient(top, #bcc4ca, #a0a7ae);
+ background-image: -ms-linear-gradient(top, #bcc4ca, #a0a7ae);
+ background-image: -o-linear-gradient(top, #bcc4ca, #a0a7ae);
+ background-image: linear-gradient(top, #bcc4ca, #a0a7ae);
+ text-shadow: 0 1px #444, 0 0 2px #555;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
opacity: .5;
+ border-bottom: 1px solid #777;
+}
+
+button.negative {
+ background-color: #d94f30;
+ background-image: -webkit-linear-gradient(top, #d94f30, #ad1804);
+ background-image: -moz-linear-gradient(top, #d94f30, #ad1804);
+ background-image: -ms-linear-gradient(top, #d94f30, #ad1804);
+ background-image: -o-linear-gradient(top, #d94f30, #ad1804);
+ background-image: linear-gradient(top, #d94f30, #ad1804);
+}
+
+button.negative:hover,
+button.negative:focus,
+.button.negative:hover,
+.button.negative:focus {
+ background-color: #ad1804;
+ background-image: -webkit-linear-gradient(top, #ad1804, #911403);
+ background-image: -moz-linear-gradient(top, #ad1804, #911403);
+ background-image: -ms-linear-gradient(top, #ad1804, #911403);
+ background-image: -o-linear-gradient(top, #ad1804, #911403);
+ background-image: linear-gradient(top, #ad1804, #911403);
+}
+
+button.negative:active,
+.button.negative:active {
+ background-color: #ad1804;
+ background-image: -webkit-linear-gradient(top, #ad1804, #911403);
+ background-image: -moz-linear-gradient(top, #ad1804, #911403);
+ background-image: -ms-linear-gradient(top, #ad1804, #911403);
+ background-image: -o-linear-gradient(top, #ad1804, #911403);
+ background-image: linear-gradient(top, #ad1804, #911403);
+ box-shadow: 0 0 5px #333 inset;
}
.submit #cancel {
@@ -273,32 +302,62 @@ hr {
float: right;
}
-h1 {
- font-size: 24px;
+.headline-main, h1, h2, h3, h4 {
+ font-family: 'Open Sans', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
font-weight: normal;
- text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
+ text-shadow: 0px 1px 0px rgba(255,255,255,0.75);
}
-header ul li {
- display: inline-block;
- float: left;
+.headline-main {
+ font-size: 48px;
+ letter-spacing: -2px;
+ line-height: 100%;
}
-header a.home {
- width: 80px;
- height: 21px;
- background: url("/i/icon.png") 0px 4px no-repeat;
- text-indent: -9999px;
- display: inline-block;
+h1 {
+ font-size: 36px;
+ letter-spacing: -1.5px;
+ line-height: 100%;
}
-footer {
- color: #aaa;
+.white {
+ color: #fff;
+ text-shadow: 0px 1px 0px rgba(0,0,0,0.25);
+}
+
+.thin {
+ font-weight: 300;
+}
+
+h2 {
+ font-size: 32px;
+ letter-spacing: -1px;
+ line-height: 100%;
+}
+
+h3 {
+ font-size: 28px;
+ letter-spacing: -0.5px;
+ line-height: 100%;
+}
+
+h4 {
+ font-size: 24px;
+ letter-spacing: -0.25px;
+ line-height: 100%;
+}
+
+.small, small {
+ font-size: 12px;
+ line-height: 100%;
+}
+
+header ul li {
+ display: inline-block;
}
footer ul li {
display: inline-block;
- float: left;
margin: 0 10px 0 0;
}
@@ -311,34 +370,41 @@ footer .help {
font-weight: bold;
}
+#wait, #delay, #error {
+ background-color: #dadee1;
+ background-image: url("/i/grain.png"), -moz-linear-gradient(top, #dadee1, #c7ccd0);
+}
+
#wait, #delay {
- background-color: #fff;
+ text-align: center;
}
-#error {
- background: #ffe4d5;
+
+#wait h2, #error h2, #delay h2 {
+ font-size: 22px;
}
-#error h2 {
- color: #ff0000;
+#error .emphasis {
+ margin-top: 15px;
+ color: #aa1401;
}
-#wait strong, #error strong, #delay strong {
- color: #222;
- font-weight: bold;
+#error_contents {
+ max-width: 430px;
+ margin: 0 auto;
}
-#error #moreInfo {
- display: none;
+#openMoreInfo {
+ display: block;
+ margin-top: 15px;
}
-#error a {
- text-decoration: underline;
+#moreInfo {
+ display: none;
+ color: #999;
}
.forgot {
- color: #777;
- text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
font-size: 11px;
}
diff --git a/resources/static/css/m.css b/resources/static/css/m.css
index bbdef5d151f422e18badee8bea40f7d86bb6f7bd..50e242e1969604dcf8a936285741c38f413715c7 100644
--- a/resources/static/css/m.css
+++ b/resources/static/css/m.css
@@ -2,110 +2,77 @@
* 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/. */
-@media screen and (max-width: 640px) {
+@media screen and (max-width: 936px) {
#wrapper {
- width: 320px;
- }
-
- hr {
- width: 300px;
+ width: 100%;
}
- #content {
- padding: 122px 0 84px;
- margin: 0 10px;
+ #vAlign, #hAlign, #signUp, #signUpForm, #congrats {
+ width: 475px;
}
- #header {
- padding: 20px 30px;
- }
-
- #header ul.nav {
- float: left;
- width: 260px;
- margin-top: 10px;
- }
-
- #header ul.nav li {
- margin: 0 1px 0 0;
- text-align: center;
- width: 64px;
+ header, footer {
+ width: 100%;
+ padding: 20px;
}
- #header ul.nav li:first-child {
- width: 102px;
+ footer .cf {
+ width: auto;
}
- #header ul.nav li:nth-child(2) {
- width: 91px;
+ .headline-main {
+ font-size: 33px;
}
+}
- #header ul.nav li a {
- padding: 3px 0;
- background-color: #549FDC;
- color: #fff;
- display: block;
-
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- -o-border-radius: 3px;
- border-radius: 3px;
+@media screen and (max-width: 505px) {
+ hr {
+ width: 300px;
}
- body.authenticated #header ul.nav li.signOut,
- #header ul.nav li {
- display: block;
+ #content {
+ margin: 10px;
+ padding: 0;
}
- #header ul.nav li.signOut,
- body.authenticated #header ul.nav li.signIn {
- display: none;
+ #about {
+ padding: 10px;
+ border-radius: 5px;
}
- #header ul.nav li a {
- -webkit-border-radius: 0 3px 3px 0;
- -moz-border-radius: 0 3px 3px 0;
- -o-border-radius: 0 3px 3px 0;
- border-radius: 0 3px 3px 0;
+ .headline-main {
+ font-size: 37px;
}
- #header ul.nav li:first-child a {
-
- -webkit-border-radius: 3px 0 0 3px;
- -moz-border-radius: 3px 0 0 3px;
- -o-border-radius: 3px 0 0 3px;
- border-radius: 3px 0 0 3px;
+ #vAlign, #hAlign, #signUp, #signUpForm, #congrats {
+ width: 320px;
}
- #header ul.nav li:nth-child(2) a {
- -webkit-border-radius: 0px;
- -moz-border-radius: 0px;
- -o-border-radius: 0px;
- border-radius: 0px;
+ header ul.nav {
+ margin: 20px 0 0 0;
+ float: none;
+ display: block;
+ text-align: center;
}
- #header ul.nav li a.signIn {
- background-color: rgba(0,0,0,0.1);
- color: #222;
+ header ul.nav li {
+ margin: 0 10px 0 0;
}
- #header ul.nav li a:hover {
- text-decoration: none;
+ /*
+ header ul a {
+ padding: 0 5px;
}
+ */
#signUp {
- width: 320px;
- padding: 0 10px;
+ padding: 0;
font-size: 16px;
line-height: 21px;
margin: 0 0 90px; /* Add a bottom margin so the footer is never overlapped. */
}
- #signUp p {
- padding: 0 20px;
- }
-
#card {
width: 260px;
height: 80px;
@@ -149,10 +116,6 @@
list-style-position: inside;
}
- #about {
- padding: 0;
- }
-
#about .video,
#about .video img {
width: 300px;
@@ -217,9 +180,6 @@
text-align: left;
}
- #footer {
- padding: 20px 30px;
- }
#emailList .email {
width: auto;
@@ -242,5 +202,5 @@
/* Fix webkit putting an inner box shadow on the input elements. Issue #1313 */
-webkit-appearance: caret;
}
-
}
+
diff --git a/resources/static/css/style.css b/resources/static/css/style.css
index 802295daca104265ab0c2bf4feb716cb39357683..32d45df48b7a8457675112d412011cb32d57d353 100644
--- a/resources/static/css/style.css
+++ b/resources/static/css/style.css
@@ -15,6 +15,23 @@ noscript {
text-align: center;
}
+body {
+ background-color: #6a7b86;
+ background-image: url("/i/marketplace-header.png"), url("/i/grain.png");
+ background-position: center top, center top;
+ background-repeat: repeat-x, repeat;
+ color: #fff;
+}
+
+a {
+ color: #6dc7ff;
+ text-shadow: 0 1px 0 #555;
+}
+
+a:hover {
+ color: #58a7e7;
+}
+
#errorBackground {
position: fixed;
top: 0;
@@ -88,10 +105,12 @@ noscript {
#wrapper {
- width: 700px;
- min-height: 100%;
+ width: 896px;
margin: 0 auto;
+ /*
+ min-height: 100%;
position: relative;
+ */
}
#content {
@@ -118,19 +137,16 @@ noscript {
border-radius: 0 0 5px 5px;
}
-.video {
- margin: 0 0 25px 0;
- width: 700px;
- font-size: 2em;
- line-height: 1.3em;
- padding: 1em 2em 1em 2em;
- text-align: center;
- font-weight: normal;
- font-style: italic;
+h1 {
+ color: #fff;
+ text-shadow: 0px 1px 0px rgba(0,0,0,0.25);
+ font-weight: 300;
}
-.video img, .video iframe {
- display: block;
+#about h1 {
+ margin: 0;
+ padding: 25px 0;
+ text-align: center;
}
.row {
@@ -195,6 +211,8 @@ div.steps {
background-position: left -48px;
}
+/*
+
.sumo {
text-align: center;
}
@@ -203,13 +221,13 @@ div.steps {
color: #444;
border-bottom: 1px dotted;
}
-
+*/
#legal {
padding: 75px 125px;
}
#newuser {
- margin: 0 0 20px 0;
+ margin: 0;
height: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
@@ -234,16 +252,9 @@ div.steps {
text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
background-color: #fff;
text-align: justify;
-
- -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
- -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
- -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
-
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- -o-border-radius: 5px;
- border-radius: 5px;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+ border-radius: 5px;
+ color: #444;
}
#legal p,
@@ -291,14 +302,8 @@ div.steps {
color: #666;
}
-#legal h2,
-#legal h3 {
- font-family: 'Droid Serif', Georgia, serif;
- font-weight: normal;
-}
-
#manage section {
- margin-bottom: 20px;
+ margin-top: 20px;
}
.buttonrow {
@@ -310,12 +315,6 @@ div.steps {
font-size: 1em;
}
-#manage button {
- line-height: 20px;
- height: 24px;
- font-size: 12px;
-}
-
.edit .buttonrow > .edit {
display: none;
}
@@ -348,49 +347,26 @@ div.steps {
#emailList li {
padding: 10px 0;
- line-height: 24px;
border-bottom: 1px solid #eee;
overflow: hidden;
+ line-height: 30px;
+ min-height: 30px;
}
-#emailList .email,
-.activity {
+#emailList .email {
display: inline-block;
float: left;
white-space: nowrap;
}
-#emailList .email {
- width: 275px;
-}
-
-.activity {
- width: 275px;
- color: #aaa;
- text-align: right;
+#emailList button {
+ display: none;
}
-.activity button,
-.activity abbr {
- float: right;
+.edit #emailList button {
display: inline-block;
}
-.activity button {
- min-width: 60px;
- margin-left: 10px;
- margin-right: -100%;
-
- -webkit-transition: margin 0.4s ease;
- -moz-transition: margin 0.4s ease;
- -o-transition: margin 0.4s ease;
- transition: margin 0.4s ease;
-}
-
-.edit .activity button {
- margin-right: 0;
-}
-
#logout_everywhere .completion_text {
float: right;
display: none;
@@ -401,22 +377,9 @@ div.steps {
button.delete {
background-color: #EA7676;
border: 1px solid #B13D3D;
- font-weight: bold;
- font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
- color: #fff;
text-shadow: -1px -1px 0 #C84343;
- cursor: pointer;
-
- -webkit-box-shadow: 0 0 0 1px #EA7676 inset;
- -moz-box-shadow: 0 0 0 1px #EA7676 inset;
- -o-box-shadow: 0 0 0 1px #EA7676 inset;
- box-shadow: 0 0 0 1px #EA7676 inset;
-
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- -o-border-radius: 5px;
- border-radius: 5px;
-
+ box-shadow: 0 0 0 1px #EA7676 inset;
+ border-radius: 5px;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #EA7676), color-stop(100%, #C84343));
background-image: -moz-linear-gradient(#EA7676 0%, #C84343 100%);
background-image: -ms-linear-gradient(#EA7676 0%, #C84343 100%);
@@ -482,47 +445,85 @@ button.delete:active {
}
#disclaimer {
- color: #888;
text-align: right;
}
h1 {
- margin-bottom: 20px;
+ margin-bottom: 35px;
}
-#vAlign {
+#hAlign {
width: 700px;
+ margin: 0 auto;
+ position: relative;
+}
+
+#vAlign {
+ height: 2000px;
+ width: 700px; /* the width here is to keep the cell from collapsing */
display: table-cell;
vertical-align: middle;
}
#signUp {
- margin: 122px 0;
- width: 700px;
- font-family: 'Droid Serif', Georgia, serif;
+ /*
font-size: 24px;
line-height: 32px;
text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
position: relative;
+ */
padding: 0 0 0 250px;
}
+#signUp h1 {
+ max-width: 390px;
+}
+
+.tour {
+ font-size: 18px;
+ line-height: 39px;
+}
+
+.tour a {
+ margin: 0 7px;
+}
+
+ /*
+#signUpForm a, .tour .action {
+ color: #6dc7ff;
+ text-shadow: 0 1px 0 #555;
+}
+*/
+
+.tour .button {
+ font-size: 19px;
+ border: 1px solid;
+ border-radius: 7px;
+ border-color: #68b8e8 #5da8dc #2f597b #5aa4d9;
+ padding: 5px 25px;
+ background-image: -webkit-linear-gradient(top, #42a5e1, #2970aa);
+ background-image: -moz-linear-gradient(top, #42a5e1, #2970aa);
+ background-image: -ms-linear-gradient(top, #42a5e1, #2970aa);
+ background-image: -o-linear-gradient(top, #42a5e1, #2970aa);
+ background-image: linear-gradient(top, #42a5e1, #2970aa);
+ box-shadow: 0 1px 2px rgba(0,0,0,.5);
+}
+
+.tour .button:hover {
+ color: #fff;
+}
+
+ /*
#signUp .tour {
border-bottom: 1px dotted #90c0db;
}
-
#signUp p {
margin: 0 0 16px 0;
}
+*/
.create {
- background-color: #37A6FF;
- height: 32px;
- line-height: 27px;
- padding: 0 16px;
- font-size: 16px;
float: none;
- display: inline-block;
vertical-align: middle;
}
@@ -534,7 +535,7 @@ h1 {
z-index: 1;
top: 50%;
left: 0;
- margin-top: -100px;
+ margin-top: -119px;
background-image: url('/i/card.png');
background-position: 0px center;
background-repeat: no-repeat;
@@ -553,37 +554,6 @@ h1 {
float: right;
}
-#status {
- width: 6px;
- height: 16px;
- display: block;
- position: absolute;
- top: 50%;
- margin-top: -13px;
- left: 214px;
- background-image: url('/i/blink.gif');
- background-position: left center;
- background-repeat: no-repeat;
-
- -webkit-border-radius: 8px;
- -moz-border-radius: 8px;
- -o-border-radius: 8px;
- border-radius: 8px;
-
- -webkit-box-shadow: 0 0 4px #c15151;
- -moz-box-shadow: 0 0 4px #c15151;
- -o-box-shadow: 0 0 4px #c15151;
- box-shadow: 0 0 4px #c15151;
-}
-
-#status.green {
- background-position: right center;
-
- -webkit-box-shadow: 0 0 4px #3bb421;
- -moz-box-shadow: 0 0 4px #3bb421;
- -o-box-shadow: 0 0 4px #3bb421;
- box-shadow: 0 0 4px #3bb421;
-}
#hint { /* put hints on rollover */
width: 200px;
@@ -592,7 +562,7 @@ h1 {
position: absolute;
top: 50%;
left: 0;
- margin-top: -100px;
+ margin-top: -119px;
z-index: 0;
background-image: url('/i/hint.png');
background-repeat: no-repeat;
@@ -606,18 +576,11 @@ h1 {
background-position: right center;
}
-#signUpFormWrap {
- margin: 122px 115px;
-}
-
-#signUpFormWrap a.space {
- margin: 10px 20px 0;
- display: inline-block;
-}
-
#signUpForm, #congrats {
+ margin: 0 auto;
+ width: 475px;
padding: 20px;
- background-color: #e1deda;
+ background-color: rgba(0,0,0,0.1);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
@@ -625,6 +588,10 @@ h1 {
border-radius: 5px;
}
+#signUpForm a {
+ text-shadow: 0 1px 0 #888;
+}
+
#signUpForm ul {
list-style-type: none;
margin: 0 0 20px;
@@ -635,12 +602,6 @@ h1 {
padding: 0;
}
-#signUpForm label {
- display: block;
- color: #62615F;
- text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
-}
-
#signUpForm .red {
color: red;
}
@@ -726,46 +687,52 @@ h1 {
#wrapper > header {
+ /*
position: absolute;
top: 0;
+ */
font-weight: bold;
+ z-index: 1;
}
-header ul {
- display: inline-block;
+header .nav a {
+ font-size: 16px;
+ padding: 4px 8px;
+ color: #fff;
+ text-shadow: 0 1px 0 #999;
}
-header ul.nav {
+header .nav a:hover {
+ color: #383838;
+ background-color: #f4f3f0;
+ border-radius: 3px;
+}
+
+header ul {
+ display: inline-block;
float: right;
+ line-height: 37px;
}
-header ul.nav li {
+header li {
margin: 0 0 0 10px;
}
-header ul a {
- padding: 4px 8px;
-}
-
-header ul a:hover {
- background-color: #f4f3f0;
- border-radius: 3px;
+.home {
+ width: 205px;
+ height: 50px;
+ background: url("/i/persona-logo-wordmark.png") 0 0 no-repeat;
+ text-indent: -9999px;
+ display: inline-block;
}
header a.signIn, header a.signOut {
- background-color: #d1ceca;
- padding: 4px 8px;
-
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- -o-border-radius: 3px;
- border-radius: 3px;
-}
-
-header a.signIn:hover, header a.signOut:hover {
- background-color: #b0afae;
- text-decoration: none;
+ border-radius: 6px;
+ padding: 6px 20px;
+ border-radius: 7px;
+ border: 1px solid #333;
+ box-shadow: 0 0 1px #777;
}
.authenticated .signIn, .signOut {
@@ -785,10 +752,30 @@ section > header {
}
footer {
+ /*
position: absolute;
bottom: 0;
+ */
+ background-color: #eff1f3;
}
+footer .cf {
+ width: 896px;
+ margin: 0 auto;
+}
+
+footer ul li:first-child {
+ margin-right: 35px;
+}
+
+footer ul li:first-child a {
+ color: #484848;
+}
+
+footer a {
+ text-shadow: 0 1px 0 #fff;
+}
+/*
footer a {
color: #aaa;
border-bottom: 1px dotted #ccc;
@@ -797,7 +784,7 @@ footer a {
footer a:hover {
color: #777;
}
-
+*/
.newsbanner {
margin-top: 60px; /* put a margin-top on so that it does not go under the header */
diff --git a/resources/static/dialog/css/m.css b/resources/static/dialog/css/m.css
index 6ffd5f551c128c68b499c2d31c51fd5d4166fe24..698c66bfe9fada4a9efdf3930b504225a15be751 100644
--- a/resources/static/dialog/css/m.css
+++ b/resources/static/dialog/css/m.css
@@ -7,7 +7,6 @@
header, footer {
position: static;
padding: 5px 20px;
- background-image: url("/i/bg.png");
}
button {
@@ -82,10 +81,7 @@
}
#favicon {
- border-bottom: 1px solid rgba(0,0,0,0.05);
- background-image: url('/i/bg.png');
text-align: center;
- left: 0;
}
#favicon img {
@@ -101,11 +97,7 @@
line-height: 20px;
}
- #formWrap {
- background-color: transparent;
- }
-
- .waiting #wait, .delay #delay, #error #error {
+ .form #formWrap, .waiting #wait, .delay #delay, #error #error {
display: block;
}
@@ -118,20 +110,15 @@
padding: 25px 0;
}
- #signIn .submit {
- position: static;
- line-height: 1.6;
- margin-top: 25px;
- }
-
#signIn .submit > p {
font-size: 14px;
display: block;
+ margin-top: 20px;
}
#signIn .submit > p:first-child {
padding: 0;
- margin-bottom: 20px;
+ margin-top: 0;
}
#content {
@@ -158,10 +145,6 @@
line-height: 40px;
}
- #useNewEmail {
- margin-top: 18px;
- }
-
#error {
position: static;
}
@@ -181,6 +164,22 @@
}
a.emphasize {
- font-size: 13px;
+ font-size: 16px;
+ padding: 5px 15px;
+ margin-top: 10px;
+ }
+
+ #your_computer_content li {
+ padding: 0 0 0 100px;
+ }
+
+
+ .forgot {
+ font-size: 16px;
+ }
+
+ .inputs > li {
+ margin-top: 12px;
}
+}
diff --git a/resources/static/dialog/css/popup.css b/resources/static/dialog/css/popup.css
index d8f0f3d106fda54b8789d902f0cd25f31914c863..b7a187d8964dbb03a3aa708a4fd2aea39ef8cd54 100644
--- a/resources/static/dialog/css/popup.css
+++ b/resources/static/dialog/css/popup.css
@@ -2,61 +2,87 @@
* 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/. */
+body {
+ color: #383838;
+ background-color: #dee3e6;
+ background-image: url('/i/grain.png');
+ background-image: url('/i/grain.png'), -webkit-linear-gradient(top, rgba(113, 126, 137, 0), rgba(113, 126, 137, 0.2));
+ background-image: url('/i/grain.png'), -moz-linear-gradient(top, rgba(113, 126, 137, 0), rgba(113, 126, 137, 0.2));
+ background-image: url('/i/grain.png'), -ms-linear-gradient(top, rgba(113, 126, 137, 0), rgba(113, 126, 137, 0.2));
+ background-image: url('/i/grain.png'), -o-linear-gradient(top, rgba(113, 126, 137, 0), rgba(113, 126, 137, 0.2));
+ background-image: url('/i/grain.png'), linear-gradient(top, rgba(113, 126, 137, 0), rgba(113, 126, 137, 0.2));
+}
-
-h2 {
- margin-bottom: 20px;
- font-size: 150%;
- color: #222;
- font-weight: bold;
+#signIn {
+ background-color: #eff0f2;
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: 275px;
}
+
header, footer {
position: absolute;
- /* The *padding is a fix for IE6 and IE7 showing scroll bars in the
- * unsupported dialog. Since IE6 and IE7 do not support box-sizing:
- * border-box, the left and right padding cause these versions of IE to
- * overflow the dialog box.
- */
- padding: 20px;
- *padding: 20px 0;
z-index: 2;
+ box-shadow: 0 0 24px rgba(0, 0, 0, 0.05) inset;
}
header {
top: 0;
+ padding: 10px 20px;
+ /* The *padding is a fix for IE6 and IE7 showing scroll bars in the
+ * unsupported dialog. Since IE6 and IE7 do not support box-sizing:
+ * border-box, the left and right padding cause these versions of IE to
+ * overflow the dialog box.
+ */
+ *padding: 10px 0;
+ /*
font-weight: bold;
+ */
border-bottom: 1px solid #c7c6c1;
- background-color: rgba(0,0,0,0.05);
+
+ /*-ms-filter through zoom: 1 are fixes for IE6 and IE7 so they show the header
+ */
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#0c000000,endColorstr=#0c000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#0c000000,endColorstr=#0c000000);
zoom: 1;
- -webkit-box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, 0.1) inset;
- -moz-box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, 0.1) inset;
- -o-box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, 0.1) inset;
- box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, 0.1) inset;
+ background-image: -webkit-linear-gradient(top, rgba(0,0,0,.05), rgba(0,0,0,0));
+ background-image: -moz-linear-gradient(top, rgba(0,0,0,.05), rgba(0,0,0,0));
+ background-image: -ms-linear-gradient(top, rgba(0,0,0,.05), rgba(0,0,0,0));
+ background-image: -o-linear-gradient(top, rgba(0,0,0,.05), rgba(0,0,0,0));
+ background-image: linear-gradient(top, rgba(0,0,0,.05), rgba(0,0,0,0));
+}
+
+.home {
+ width: 161px;
+ height: 40px;
+ background: url("/i/persona_logo_transparent.png") 0 0 no-repeat;
+ text-indent: -9999px;
+ display: inline-block;
}
footer {
bottom: 0;
- font-size: 12px;
- color: #62615F;
- text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
border-top: 1px solid #c7c6c1;
-}
-
-footer a {
- color: #62615f;
- border-bottom: 1px dotted #999;
-}
-
-footer a:hover {
- color: #333;
+ /* The *padding is a fix for IE6 and IE7 showing scroll bars in the
+ * unsupported dialog. Since IE6 and IE7 do not support box-sizing:
+ * border-box, the left and right padding cause these versions of IE to
+ * overflow the dialog box.
+ */
+ padding: 20px;
+ *padding: 20px 0;
+ text-align: center;
+ background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.05));
+ background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.05));
+ background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.05));
+ background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.05));
+ background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.05));
}
label {
display: block;
- color: #62615F;
text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}
@@ -100,6 +126,10 @@ section > .contents {
}
.form_section {
+ /**
+ * Set the width of the container for when the arrow animation happens
+ * otherwise the buttons slide right with the arrow
+ */
width: 250px;
}
@@ -126,7 +156,6 @@ section > .contents {
}
#wait, #error, #delay {
- text-align: center;
z-index: -1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
@@ -152,9 +181,6 @@ section > .contents {
transition-delay: 0.5s;
}
-#wait, #delay {
- background-image: url("/i/bg.png");
-}
.waiting #wait {
display: block;
@@ -208,42 +234,17 @@ section > .contents {
padding: 0 20px;
}
-#formWrap {
- background-color: #fff;
- background-image: none;
- display: block;
-}
-
-#signIn {
- background-image: url('/i/bg.png');
- position: absolute;
- left: 0;
- top: 0;
- bottom: 0;
- width: 325px;
-}
#signIn .table {
- /**
- * Set the width of the container for when the arrow animation happens
- * otherwise the buttons slide right with the arrow
- */
- /*width: 325px;*/
- padding: 20px 52px 20px 20px;
+ padding: 20px;
}
.arrowContainer {
- width: 40px;
position: absolute;
- right: 0;
+ width: 105px;
+ right: -105px;
top: 0;
bottom: 0;
- background-color: #fff;
- background-image: -webkit-linear-gradient(left, #c7c7c7, #fff 2px);
- background-image: -moz-linear-gradient(left, #c7c7c7, #fff 2px);
- background-image: -ms-linear-gradient(left, #c7c7c7, #fff 2px);
- background-image: -o-linear-gradient(left, #c7c7c7, #fff 2px);
- background-image: linear-gradient(left, #c7c7c7, #fff 2px);
}
.arrow {
@@ -253,7 +254,7 @@ section > .contents {
bottom: 0;
left: 0;
right: 0;
- background-image: url('/i/arrow.png');
+ background-image: url('/i/arrow_grey.png');
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
@@ -269,7 +270,9 @@ section > .contents {
}
#favicon strong {
- font-size: 1.5em;
+ font-size: 18px;
+ line-height: 24px;
+ text-shadow: 0 1px #fff;
}
#favicon img {
@@ -327,7 +330,6 @@ div#required_email {
}
.inputs > li > label {
- color: #333;
overflow: hidden;
text-overflow: ellipsis;
}
@@ -337,7 +339,7 @@ div#required_email {
}
#selectEmail > .inputs > li > label {
- padding: 5px 1px;
+ padding: 6px 1px;
white-space: nowrap;
}
@@ -354,38 +356,55 @@ div#required_email {
}
.submit {
- line-height: 28px;
margin-top: 10px;
color: #333;
font-size: 11px;
- line-height: 1.2;
-}
-
-.submit > p + p:last-child {
- margin-top: 15px;
- padding-left: 10px;
+ line-height: 14px;
}
-.tospp > a {
- color: #333;
- border-bottom: 1px dotted #999;
+.submit > p {
+ margin-top: 10px;
}
-.tospp > a:hover {
- color: #000;
+.tospp {
+ color: #787878;
+ clear: right;
}
a.emphasize {
+ border-bottom: 1px solid #b8babc;
+ border-radius: 2px;
background-color: #F0EFED;
- color: #4E4E4E;
- font-size: 0.75em;
+ color: #484848;
+ font-size: 11px;
padding: 0 5px;
display: inline-block;
- line-height: 18px;
+ line-height: 22px;
+ background-image: -webkit-linear-gradient(top, #e5e9eb, #d8dbde);
+ background-image: -moz-linear-gradient(top, #e5e9eb, #d8dbde);
+ background-image: -ms-linear-gradient(top, #e5e9eb, #d8dbde);
+ background-image: -o-linear-gradient(top, #e5e9eb, #d8dbde);
+ background-image: linear-gradient(top, #e5e9eb, #d8dbde);
+}
+
+a.emphasize:hover,
+a.emphasize:focus {
+ background-color: #d8dbde;
+ background-image: -webkit-linear-gradient(top, #d8dbde, #ccc);
+ background-image: -moz-linear-gradient(top, #d8dbde, #ccc);
+ background-image: -ms-linear-gradient(top, #d8dbde, #ccc);
+ background-image: -o-linear-gradient(top, #d8dbde, #ccc);
+ background-image: linear-gradient(top, #d8dbde, #ccc);
}
-a.emphasize:hover {
- background-color: #fbfafa;
+a.emphasize:active {
+ background-color: #d8dbde;
+ background-image: -webkit-linear-gradient(top, #d8dbde, #ccc);
+ background-image: -moz-linear-gradient(top, #d8dbde, #ccc);
+ background-image: -ms-linear-gradient(top, #d8dbde, #ccc);
+ background-image: -o-linear-gradient(top, #d8dbde, #ccc);
+ background-image: linear-gradient(top, #d8dbde, #ccc);
+ box-shadow: 0 0 5px #333 inset;
}
@@ -404,22 +423,19 @@ a.emphasize:hover {
}
#your_computer_content {
- width: 90%;
+ max-width: 490px;
margin: auto;
+}
+
+#your_computer_content li {
+ padding: 0 50px 0 150px;
+ margin: 28px 0;
text-align: left;
}
-#your_computer_content p button {
+#your_computer_content button {
float: left;
- margin: 0 1em 0 0;
- vertical-align: middle;
- font-size: 1em;
- width: 4em;
+ margin-left: -100px;
+ min-width: 4em;
}
-#your_computer_content p {
- padding-bottom: 1em;
- line-height: 1.3em;
- margin-top: 2em;
- margin-bottom: 2em;
-}
diff --git a/resources/static/dialog/resources/helpers.js b/resources/static/dialog/resources/helpers.js
index c72534073ec36a7688826f523fb376385cd650ab..b08ed3223e19ef52adec8c8b5e36fffe9c28d7af 100644
--- a/resources/static/dialog/resources/helpers.js
+++ b/resources/static/dialog/resources/helpers.js
@@ -15,10 +15,13 @@
function animateClose(callback) {
var body = $("body"),
- doAnimation = $("#signIn").length && body.innerWidth() > 640;
+ bodyWidth = body.innerWidth(),
+ doAnimation = $("#signIn").length && bodyWidth > 640;
if (doAnimation) {
- $("#signIn").animate({"width" : "95%"}, 750, function () {
+ var endWidth = bodyWidth - $(".arrowContainer").outerWidth() - 10;
+
+ $("#signIn").animate({"width" : endWidth + "px"}, 750, function () {
body.delay(500).animate({ "opacity" : "0.5"}, 500);
});
diff --git a/resources/static/dialog/views/authenticate.ejs b/resources/static/dialog/views/authenticate.ejs
index 2e72d63e08feaf153df142917f6e96c361f43b91..06b6307b51c8d0aabd25ab4899c4eff2a7bedc40 100644
--- a/resources/static/dialog/views/authenticate.ejs
+++ b/resources/static/dialog/views/authenticate.ejs
@@ -6,7 +6,7 @@
<ul class="inputs">
<li>
- <label for="email" class="serif"><%= gettext('Email') %></label>
+ <label for="email"><%= gettext('Email') %></label>
<input id="email" class="sans" type="email" autocapitalize="off" autocorrect="off" value="<%= email %>" maxlength="254" tabindex="1"/>
<div id="email_format" class="tooltip" for="email">
@@ -38,7 +38,7 @@
<li class="returning">
<a id="forgotPassword" class="forgot right" href="#" tabindex="4"><%= gettext('forgot your password?') %></a>
- <label for="password" class="serif"><%= gettext('Password') %></label>
+ <label for="password"><%= gettext('Password') %></label>
<input id="password" class="sans" type="password" maxlength="80" tabindex="2" />
@@ -54,6 +54,10 @@
</ul>
<div class="submit cf">
+ <p class="cf">
+ <button class="start addressInfo" tabindex="3"><%= gettext('next') %></button>
+ <button class="returning" tabindex="3"><%= gettext('sign in') %></button>
+ </p>
<% if (privacy_url && tos_url) { %>
<p class="tospp">
<%= format(
@@ -63,12 +67,7 @@
format(' href="%s" target="_new"', [privacy_url])
]) %>
</p>
- <p>
<% } %>
- <button class="start addressInfo" tabindex="3"><%= gettext('next') %></button>
- <button class="returning" tabindex="3"><%= gettext('sign in') %></button>
- <% if (privacy_url && tos_url) { %>
- </p>
- <% } %>
+
</div>
</div>
diff --git a/resources/static/dialog/views/error.ejs b/resources/static/dialog/views/error.ejs
index 4a61ab7092777177336739789d7c521f6950e660..4d5b4a8e810d05a3c6e6e5db4a76e07f615f10ab 100644
--- a/resources/static/dialog/views/error.ejs
+++ b/resources/static/dialog/views/error.ejs
@@ -3,9 +3,11 @@
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+ <div id="error_contents">
+
<% if (typeof network !== "undefined" && network.status == 503) { %>
<h2 id="error_503">
- <%= gettext("We are very sorry, the server is under extreme load!") %>
+ <%= gettext("We are very sorry.") %><span class="emphasis"> <%= getttext("The server is under extreme load!") %></span>
</h2>
<% } else if (typeof network !== "undefined" && network.status == 403) { %>
<h2 id="error_403">
@@ -14,12 +16,12 @@
<%= format(gettext("Please close this window, <a %s>enable cookies</a> and try again"), [" target='_blank' href='http://support.mozilla.org/en-US/kb/Websites%20say%20cookies%20are%20blocked'"]) %>
<% } else { %>
<h2 id="defaultError">
- <%= gettext("We are very sorry, there has been an error!") %>
+ <%= gettext("We are very sorry.") %><span class="emphasis"> <%= gettext("There has been an error!") %></span>
</h2>
<% } %>
<% if (!(typeof network !== "undefined" && network.status == 403)) { %>
- <p>
+ <p class="emphasis">
<% if (typeof dialog !== "undefined" && dialog !== false) { %>
<%= gettext("Please reload the page and try again.") %>
<% } else { %>
@@ -29,11 +31,9 @@
<% } %>
<% if(typeof action !== "undefined" || typeof network !== "undefined") { %>
- <p>
- <a href="#" id="openMoreInfo">
- <%= gettext("See more info") %>
- </a>
- </p>
+ <a href="#" id="openMoreInfo">
+ <%= gettext("See more info") %>
+ </a>
<ul id="moreInfo">
<% if (typeof action !== "undefined") { %>
@@ -74,3 +74,5 @@
<% } %>
</ul>
+
+ </div>
diff --git a/resources/static/dialog/views/is_this_your_computer.ejs b/resources/static/dialog/views/is_this_your_computer.ejs
index 1ca1d9e49097e8989dc16f6bd254bdecb8c54e16..52fa24c45eb1889e1c4376c4aab387d5eb49b02d 100644
--- a/resources/static/dialog/views/is_this_your_computer.ejs
+++ b/resources/static/dialog/views/is_this_your_computer.ejs
@@ -5,15 +5,17 @@
<div id="your_computer_content">
<h2><%= gettext('If you don\'t mind me asking, is this your computer?') %></h2>
- <p>
- <button id="this_is_my_computer"><%= gettext('yes') %></button>
- <%= gettext('If so, we\'ll keep you logged in for a couple weeks.') %>
- </p>
+ <ul>
+ <li>
+ <button id="this_is_my_computer" tabindex="3"><%= gettext('yes') %></button>
+ <%= gettext('If so, we\'ll keep you logged in for two weeks.') %>
+ </li>
- <p>
- <button id="this_is_not_my_computer" class="negative"><%= gettext('no') %></button>
- <%= gettext('If you\'re at a public computer such as a library or internet cafe, we\'ll ask you for your password again in an hour.') %>
- </p>
+ <li>
+ <button id="this_is_not_my_computer" class="negative" tabindex="3"><%= gettext('no') %></button>
+ <%= gettext('If you\'re at a public computer such as a library or internet cafe, choose this. We\'ll prompt you for your password in an hour for greater security.') %>
+ </li>
+ </ul>
</div>
diff --git a/resources/static/dialog/views/pick_email.ejs b/resources/static/dialog/views/pick_email.ejs
index c4e6d6f30053ca8a4b302bdd5c273bd396e9b516..c189f521055d156ee397366df6d6306a22645f98 100644
--- a/resources/static/dialog/views/pick_email.ejs
+++ b/resources/static/dialog/views/pick_email.ejs
@@ -23,6 +23,9 @@
<div class="submit add cf">
+ <p class="cf">
+ <button id="signInButton"><%= gettext('sign in') %></button>
+ </p>
<% if (privacy_url && tos_url) { %>
<p class="tospp">
<%= format(
@@ -32,13 +35,6 @@
format(' href="%s" target="_new"', [privacy_url])
]) %>
</p>
- <p>
- <% } %>
-
- <button id="signInButton"><%= gettext('sign in') %></button>
- <!--br style="clear: both" /-->
- <% if (privacy_url && tos_url) { %>
- </p>
<% } %>
</div>
</div>
diff --git a/resources/static/i/arrow.png b/resources/static/i/arrow.png
deleted file mode 100644
index 28c140e7f324a2c9d693fbc7fb29ff9fb31c4481..0000000000000000000000000000000000000000
Binary files a/resources/static/i/arrow.png and /dev/null differ
diff --git a/resources/static/i/arrow_grey.png b/resources/static/i/arrow_grey.png
new file mode 100644
index 0000000000000000000000000000000000000000..87c8893e9d81abfb6012b9e5823cd179f30eeda8
Binary files /dev/null and b/resources/static/i/arrow_grey.png differ
diff --git a/resources/static/i/button-arrow.png b/resources/static/i/button-arrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..2ec7e2609a4bf633b1fdfc1fb0d5bc65c2db56cb
Binary files /dev/null and b/resources/static/i/button-arrow.png differ
diff --git a/resources/static/i/faux-tabzilla.png b/resources/static/i/faux-tabzilla.png
new file mode 100644
index 0000000000000000000000000000000000000000..7619610c383b3e27505efc3f24ab0b5b93d9af1b
Binary files /dev/null and b/resources/static/i/faux-tabzilla.png differ
diff --git a/resources/static/i/grain.png b/resources/static/i/grain.png
new file mode 100644
index 0000000000000000000000000000000000000000..2980ee90e52f15cd22eabebf59344fca831e7410
Binary files /dev/null and b/resources/static/i/grain.png differ
diff --git a/resources/static/i/marketplace-header.png b/resources/static/i/marketplace-header.png
new file mode 100644
index 0000000000000000000000000000000000000000..03286253845256e4166036d2d933cdd2fcc1b3b1
Binary files /dev/null and b/resources/static/i/marketplace-header.png differ
diff --git a/resources/static/i/persona-logo-wordmark-small.png b/resources/static/i/persona-logo-wordmark-small.png
new file mode 100644
index 0000000000000000000000000000000000000000..5d468e36e341f98bb7d1c984cc25383519840daf
Binary files /dev/null and b/resources/static/i/persona-logo-wordmark-small.png differ
diff --git a/resources/static/i/persona-logo-wordmark-tiny.png b/resources/static/i/persona-logo-wordmark-tiny.png
new file mode 100644
index 0000000000000000000000000000000000000000..078e570caf6cd8e0ade2ae4b25f1e366c9c61168
Binary files /dev/null and b/resources/static/i/persona-logo-wordmark-tiny.png differ
diff --git a/resources/static/i/persona-logo-wordmark.png b/resources/static/i/persona-logo-wordmark.png
new file mode 100644
index 0000000000000000000000000000000000000000..f64670ec0b53e2f8ed6f136eb0b288e955b9054a
Binary files /dev/null and b/resources/static/i/persona-logo-wordmark.png differ
diff --git a/resources/static/i/persona_logo_transparent.png b/resources/static/i/persona_logo_transparent.png
new file mode 100644
index 0000000000000000000000000000000000000000..5484f73c13f1f0a8295a6bacf0792c57e2b4f567
Binary files /dev/null and b/resources/static/i/persona_logo_transparent.png differ
diff --git a/resources/static/i/wallpaper.png b/resources/static/i/wallpaper.png
new file mode 100644
index 0000000000000000000000000000000000000000..2980ee90e52f15cd22eabebf59344fca831e7410
Binary files /dev/null and b/resources/static/i/wallpaper.png differ
diff --git a/resources/static/pages/manage_account.js b/resources/static/pages/manage_account.js
index 948054b802b110f0d0815a7fcc3875416cb4d7ca..5862120c74dffa36a2266c6e00f3304a8187634f 100644
--- a/resources/static/pages/manage_account.js
+++ b/resources/static/pages/manage_account.js
@@ -200,6 +200,10 @@ BrowserID.manageAccount = (function() {
if (options.document) doc = options.document;
if (options.confirm) confirmAction = options.confirm;
+ var template = new EJS({ text: $("#templateManage").html() });
+ var manage = template.render({});
+ $("#hAlign").after(manage);
+
dom.bindEvent("#cancelAccount", "click", cancelEvent(cancelAccount));
dom.bindEvent("button.edit", "click", startEdit);
diff --git a/resources/static/pages/start.js b/resources/static/pages/start.js
index c38018d08a24d0e4f360c5d3badc31032886de04..f44bd5d4920cdcdf738e87475371f66ae1dc16f1 100644
--- a/resources/static/pages/start.js
+++ b/resources/static/pages/start.js
@@ -42,7 +42,10 @@ $(function() {
$(".display_always,.display_auth,.display_nonauth").hide();
if ($('#vAlign').length) {
- $(window).bind('resize', function() { $('#vAlign').css({'height' : $(window).height() }); }).trigger('resize');
+ $(window).bind('resize', function() {
+ var height = $(window).height() - $("header").outerHeight() - $("footer").outerHeight();
+ $('#vAlign').css({'height' : height });
+ }).trigger('resize');
}
moduleManager.register("xhr_delay", XHRDelay);
@@ -115,7 +118,7 @@ $(function() {
$(".display_always,.display_auth").fadeIn(ANIMATION_TIME);
dom.addClass("body", "authenticated");
- if ($('#emailList').length) {
+ if (!path || path === "/") {
bid.manageAccount();
}
diff --git a/resources/static/shared/tooltip.js b/resources/static/shared/tooltip.js
index 912595e49333cf629f26b5b9f412d28accaf3b47..db697e4c686bb3cbef75a5a5b3555f29e91db104 100644
--- a/resources/static/shared/tooltip.js
+++ b/resources/static/shared/tooltip.js
@@ -44,10 +44,12 @@ BrowserID.Tooltip = (function() {
bid.Tooltip.shown = true;
el.fadeIn(ANIMATION_TIME, function() {
hideTimer = setTimeout(function() {
+ /*
el.fadeOut(ANIMATION_TIME, function() {
bid.Tooltip.shown = false;
if(complete) complete();
});
+ */
}, displayTimeMS);
});
}
diff --git a/resources/views/about.ejs b/resources/views/about.ejs
index 962d55589ea7c283ca0db526e9352cc40c1fe41d..358f315a0b0235b528a12c0709c49d3a72369f7e 100644
--- a/resources/views/about.ejs
+++ b/resources/views/about.ejs
@@ -5,16 +5,15 @@
<div id="content" class="display_always">
<div id="about">
- <div class="video">
- <h1 class="serif">
- <strong>BrowserID</strong> is an <strong>easier</strong> way to sign in
- </h1>
- </div>
+ <h2>
+ <strong>Persona</strong> is an <strong>easier</strong> way to sign in
+ </h2>
+
<div class="row one cf">
<img src="/i/tutorial_1.png">
<div>
- <div class="steps"></div> On your favorite website that supports BrowserID, Click the ‘Sign In’ button
+ <div class="steps"></div> On your favorite website that supports Persona, Click the ‘Sign In’ button
</div>
</div>
@@ -40,7 +39,7 @@
<hr />
<div class="row cf sumo">
- If you need some help with BrowserID, head over to our <a href="https://support.mozilla.com/en-US/kb/what-browserid-and-how-does-it-work" target="_blank">support center</a>.
+ If you need some help with Persona, head over to our <a href="https://support.mozilla.com/en-US/kb/what-browserid-and-how-does-it-work" target="_blank">support center</a>.
</div>
</div>
</div>
diff --git a/resources/views/add_email_address.ejs b/resources/views/add_email_address.ejs
index 2bbff96c54e1f8f46cbc55b5125b11684b1c953b..a9de2a30296a769666fdc0fec3932e106b05ac4a 100644
--- a/resources/views/add_email_address.ejs
+++ b/resources/views/add_email_address.ejs
@@ -2,8 +2,8 @@
- 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/. -->
-<div id="vAlign" class="display_always">
- <div id="signUpFormWrap">
+<div id="hAlign" class="display_always">
+ <div id="vAlign">
<ul class="notifications">
<li class="notification error" id="cannotconfirm"><%= gettext('Error encountered while attempting to confirm your address. Have you previously verified this address?') %></li>
<li class="notification error" id="cannotcomplete"><%= gettext('Error encountered trying to complete registration.') %></li>
diff --git a/resources/views/dialog_layout.ejs b/resources/views/dialog_layout.ejs
index 73a3afd50410f659f49e1f33a5df1bd9237f8ec5..3abb7289289ad73ece72561572c9106bb3168e31 100644
--- a/resources/views/dialog_layout.ejs
+++ b/resources/views/dialog_layout.ejs
@@ -13,12 +13,12 @@
<script src="/lib/html5shim.js"></script>
<![endif]-->
<%- cachify_css('/production/dialog.css') %>
- <link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic" rel="stylesheet" type="text/css">
- <title><%= gettext('BrowserID') %></title>
+ <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,700,700italic' rel='stylesheet' type='text/css'>
+ <title><%= gettext('Mozilla Persona') %></title>
</head>
<body class="waiting">
<header id="header">
- <h1><a class="home" target="_blank" href="/">BrowserID Home</a></h1>
+ <h1><a class="home" target="_blank" href="/">Mozilla Persona Home</a></h1>
</header>
<div id="content">
@@ -26,7 +26,7 @@
</div>
<footer>
-<%- format(gettext('BrowserID is the fast and secure way to sign in — <a %s>learn more</a>'), [" href='/about' target='_blank'"]) %>
+<%- format(gettext('Mozilla Persona is the fast and secure way to sign in. <a %s>Learn more →</a>'), [" href='/about' target='_blank'"]) %>
</footer>
diff --git a/resources/views/forgot.ejs b/resources/views/forgot.ejs
index fea0f0c37a75d4f66421a65586bebf887bb0756c..ba5450fa13a27e77b512524b4c7513ba0b346b68 100644
--- a/resources/views/forgot.ejs
+++ b/resources/views/forgot.ejs
@@ -2,8 +2,8 @@
- 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/. -->
-<div id="vAlign" class="display_always">
- <div id="signUpFormWrap">
+<div id="hAlign" class="display_always">
+ <div id="vAlign">
<!-- XXX this form submits to nowhere -->
<form id="signUpForm" class="cf authform" novalidate>
<h1 class="serif">Forgot Password</h1>
diff --git a/resources/views/index.ejs b/resources/views/index.ejs
index 21bfbcb5cf589de2ea626eb1dd80351b8340d3ae..7396a4500b4194d90d6b19a10072d09f4c20ffe8 100644
--- a/resources/views/index.ejs
+++ b/resources/views/index.ejs
@@ -1,84 +1,81 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- 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/. -->
- <div id="content" class="display_auth">
- <div class="newsbanner" id="newuser">
- New to BrowserID? <a href="/about">Learn more</a>
+
+ <div id="hAlign" class="display_nonauth">
+ <div id="vAlign">
+ <div id="signUp">
+ <div id="card"><img src="/i/slit.png"></div>
+ <div id="hint"></div>
+
+ <h1 class="white headline-main thin">Connect with Mozilla Persona, the safest & easiest way to sign in.</h1>
+ <p class="tour white">
+ <a class="granted action" href="/about">Take the tour</a>
+ or
+ <a href="/signup" class="button granted create">Sign up →</a>
+ </p>
+ </div>
</div>
+ </div>
- <div id="manage">
- <h1 class="serif">Account Manager</h1>
+ <script type="text/html" id="templateUser">
+ <li class="identity cf" id="{{ email.replace('@', '_').replace('.', '_') }}">
+ <div class="email">{{ email }}</div>
+ <button class="delete">remove</button>
+ </li>
+ </script>
- <section>
- <header class="buttonrow cf">
- <h2>Your Email Addresses</h2>
+ <script type="text/html" id="templateManage">
+ <div id="content">
+ <div class="newsbanner" id="newuser">
+ New to Mozilla Persona? <a href="/about">Learn more</a>
+ </div>
- <button class="edit">edit</button>
- <button class="done">done</button>
- </header>
+ <div id="manage">
+ <h2>Account Manager</h2>
- <ul id="emailList">
- </ul>
- </section>
+ <section>
+ <header class="buttonrow cf">
+ <h2>Your Email Addresses</h2>
- <section id="edit_password">
- <header class="buttonrow cf">
- <h2>Password</h2>
+ <button class="edit">edit</button>
+ <button class="done">done</button>
+ </header>
- <button class="edit">edit</button>
- <button class="done">cancel</button>
- </header>
+ <ul id="emailList">
+ </ul>
+ </section>
- <div class="showedit">
- <label for="old_password">Old Password</label>
- <label for="new_password">New Password</label>
- </div>
+ <section id="edit_password">
+ <header class="buttonrow cf">
+ <h2>Password</h2>
- <form id="edit_password_form" class="showedit">
- <input type="password" id="old_password" name="old_password" maxlength="80"/>
- <input type="password" id="new_password" name="new_password" maxlength="80"/>
- <button id="changePassword">done</button>
+ <button class="edit">edit</button>
+ <button class="done">cancel</button>
+ </header>
- <div class="tooltip" for="old_password" id="tooltipOldRequired">Old password is required.</div>
- <div class="tooltip" for="old_password" id="tooltipInvalidPassword">Incorrect old password, password not updated.</div>
- <div class="tooltip" for="new_password" id="tooltipNewRequired">New password is required.</div>
- <div class="tooltip" for="new_password" id="tooltipPasswordsSame">Old and new passwords are the same.</div>
- <div class="tooltip" for="new_password" id="tooltipPasswordLength">Password must be between 8 and 80 characters long.</div>
- </form>
- </section>
+ <div class="showedit">
+ <label for="old_password">Old Password</label>
+ <label for="new_password">New Password</label>
+ </div>
+ <form id="edit_password_form" class="showedit">
+ <input type="password" id="old_password" name="old_password" maxlength="80"/>
+ <input type="password" id="new_password" name="new_password" maxlength="80"/>
+ <button id="changePassword">done</button>
- <p id="disclaimer">You may, at any time, <a href="#" id="cancelAccount" class="action">cancel your account</a></p>
- </div>
- </div>
+ <div class="tooltip" for="old_password" id="tooltipOldRequired">Old password is required.</div>
+ <div class="tooltip" for="old_password" id="tooltipInvalidPassword">Incorrect old password, password not updated.</div>
+ <div class="tooltip" for="new_password" id="tooltipNewRequired">New password is required.</div>
+ <div class="tooltip" for="new_password" id="tooltipPasswordsSame">Old and new passwords are the same.</div>
+ <div class="tooltip" for="new_password" id="tooltipPasswordLength">Password must be between 8 and 80 characters long.</div>
+ </form>
+ </section>
- <div id="vAlign" class="display_nonauth">
- <div class="newsbanner">
- BrowserID is graduating: we're launching Mozilla Persona. Find out more on <a href="http://identity.mozilla.com/">the identity blog</a>.
- </div>
- <div id="signUp">
- <div id="card"><img src="/i/slit.png"></div>
- <div id="hint"></div>
- <div id="status"></div>
-
- <p>Connect with <em>BrowserID</em>, the safest & easiest way to sign in.</p>
- <p>
- <a class="granted tour action" href="/about">Take the tour</a>
- <span class="require-js">or
- <a href="/signup" class="button granted create">sign up</a>
- </span>
- </p>
- </div>
- </div>
+ <p id="disclaimer">You may, at any time, <a href="#" id="cancelAccount" class="action">cancel your account</a></p>
+ </div>
+ </div>
- <script type="text/html" id="templateUser">
- <li class="identity cf" id="{{ email.replace('@', '_').replace('.', '_') }}">
- <div class="email">{{ email }}</div>
- <div class="activity cf">
- <button class="delete">remove</button>
- </div>
- </li>
</script>
-
diff --git a/resources/views/layout.ejs b/resources/views/layout.ejs
index 438be089c61f4544cd43b1f7d486846b252a4648..929277983260c299bc305755e937f818377116bc 100644
--- a/resources/views/layout.ejs
+++ b/resources/views/layout.ejs
@@ -10,10 +10,10 @@
<!--[if lt IE 9]>
<script src="/lib/html5shim.js"></script>
<![endif]-->
- <link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
+ <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<%- cachify_css('/production/browserid.css') %>
<%- cachify_js(util.format('/production/%s/browserid.js', locale)) %>
- <title><%= format(gettext("BrowserID: %s"), [title]) %></title>
+ <title><%= format(gettext("Mozilla Person: %s"), [title]) %></title>
</head>
<body>
@@ -22,7 +22,7 @@
<div id="wrapper">
<header id="header" class="cf">
- <a class="home" href="/"><%= gettext("BrowserID Home") %></a>
+ <a class="home" href="/"><%= gettext("Persona Home") %></a>
<ul class="nav cf">
<li><a href="/about"><%= gettext("How it works") %></a></li>
@@ -39,18 +39,18 @@
<%- body %>
- <footer id="footer">
- <ul class="cf">
- <li><%- format(gettext('By the <a %s>Identity Team</a> @ <a %s>Mozilla Labs</a>'),
- [" href='http://identity.mozilla.com' target='_blank'", " href='http://mozillalabs.com' target='_blank'"]) %></li>
- <li>—</li>
- <li><a href="/privacy"><%= gettext('Privacy') %></a></li>
- <li><a href="/tos"><%= gettext('TOS') %></a></li>
- <li class="help"><a href="https://support.mozilla.com/en-US/kb/what-browserid-and-how-does-it-work" target="_blank"><%= gettext('Need Help?') %></a></li>
- </ul>
- </footer>
-
</div>
+<footer id="footer">
+ <ul class="cf">
+ <li><%- format(gettext('By the <a %s>Identity Team</a> @ <a %s>Mozilla Labs</a>'),
+ [" href='http://identity.mozilla.com' target='_blank'", " href='http://mozillalabs.com' target='_blank'"]) %></li>
+ <li><a href="/privacy"><%= gettext('Privacy →') %></a></li>
+ <li><a href="/tos"><%= gettext('TOS →') %></a></li>
+ <li class="help"><a href="https://support.mozilla.com/en-US/kb/what-browserid-and-how-does-it-work" target="_blank"><%= gettext('Need Help? →') %></a></li>
+ </ul>
+</footer>
+
+
</body>
</html>
diff --git a/resources/views/signin.ejs b/resources/views/signin.ejs
index dd7baa90ef50d4ab7051d774a0f5aff37f97db2c..4fdc9f3262d47a3b37cd73812d4bc06d012db14a 100644
--- a/resources/views/signin.ejs
+++ b/resources/views/signin.ejs
@@ -2,8 +2,8 @@
- 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/. -->
-<div id="vAlign" class="disply_always">
- <div id="signUpFormWrap">
+<div id="hAlign" class="display_always">
+ <div id="vAlign">
<!-- XXX this form submits to nowhere -->
<form id="signUpForm" class="cf authform" novalidate>
<h1 class="serif">Sign In</h1>
diff --git a/resources/views/signup.ejs b/resources/views/signup.ejs
index e700ed1d8af6ded303ab6c69509ca656863d85c5..4b134686a98a56c913d58bcd43b5d0e21f3bfc01 100644
--- a/resources/views/signup.ejs
+++ b/resources/views/signup.ejs
@@ -2,8 +2,8 @@
- 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/. -->
-<div id="vAlign" class="display_always">
- <div id="signUpFormWrap">
+<div id="hAlign" class="display_always">
+ <div id="vAlign">
<!-- XXX this form submits to nowhere -->
<form id="signUpForm" class="cf authform" novalidate>
<h1 class="serif">Create Account</h1>
diff --git a/resources/views/verify_email_address.ejs b/resources/views/verify_email_address.ejs
index 77f688b448d07e38570705fd6b9f3a25f17f2b17..8ec58b83a645e6f398e9794d8e2485f33aa96a0a 100644
--- a/resources/views/verify_email_address.ejs
+++ b/resources/views/verify_email_address.ejs
@@ -2,8 +2,8 @@
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/. */ %>
-<div id="vAlign" class="display_always">
- <div id="signUpFormWrap">
+<div id="hAlign" class="display_always">
+ <div id="vAlign">
<ul class="notifications">
<li class="notification error" id="cannotconfirm"><%= gettext('There was a problem with your signup link. Has this address already been registered?') %></li>
<li class="notification error" id="cannotcomplete"><%= gettext('Error encountered trying to complete registration.') %></li>