diff --git a/lib/static_resources.js b/lib/static_resources.js
index fbf8545eb0da9140c95133e25bc4f5c6b53975cc..ad17eac8848b58d1dd9a982e80f1ceabc1f2c652 100644
--- a/lib/static_resources.js
+++ b/lib/static_resources.js
@@ -52,7 +52,8 @@ var common_js = [
'/shared/modules/page_module.js',
'/shared/modules/xhr_delay.js',
'/shared/modules/xhr_disable_form.js',
- '/shared/modules/cookie_check.js'
+ '/shared/modules/cookie_check.js',
+ '/shared/modules/development.js'
];
var browserid_min_js = '/production/:locale/browserid.js';
@@ -118,6 +119,14 @@ exports.resources = {
'/css/style.css',
'/css/m.css'
],
+ '/production/ie8_main.css': [
+ '/css/ie8_common.css',
+ '/css/ie8_main.css'
+ ],
+ '/production/ie8_dialog.css': [
+ '/css/ie8_common.css',
+ '/dialog/css/ie8.css'
+ ],
'/production/communication_iframe.js': [
'/lib/jschannel.js',
'/lib/winchan.js',
diff --git a/resources/static/500/error.html b/resources/static/500/error.html
new file mode 100644
index 0000000000000000000000000000000000000000..2fd6778650c28971c2901823ea13c1a749a0bd27
--- /dev/null
+++ b/resources/static/500/error.html
@@ -0,0 +1,28 @@
+<html>
+<head>
+<style type="text/css" media="screen">
+body {
+font-family: 'Droid Serif',Georgia,serif;
+font-size: 24px;
+text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
+background-image: url('/error_bg.png');
+}
+
+.msg {
+ text-align: center;
+ margin-top: 20%;
+}
+
+.icon {
+ margin: 15px;
+ margin-top: 30px;
+ text-align: right;
+ width: 80%;
+}
+</style>
+</head>
+<body>
+<div class='msg'>BrowserID is down for maintenence. We'll be back in a minute or two. Probably less.</div>
+<div class='icon'><img src="/error_icon.png"><br/></div>
+</body>
+</html>
diff --git a/resources/static/i/bg.png b/resources/static/500/error_bg.png
similarity index 100%
rename from resources/static/i/bg.png
rename to resources/static/500/error_bg.png
diff --git a/resources/static/i/icon.png b/resources/static/500/error_icon.png
similarity index 100%
rename from resources/static/i/icon.png
rename to resources/static/500/error_icon.png
diff --git a/resources/static/css/common.css b/resources/static/css/common.css
index 66610fb24b7f23130b90d08a1e40ba11564cbe99..c3804461ee5db73b3fbf208657f6ebe83cfcee07 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,64 @@ 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-gradient(linear, left top, left bottom, from(rgba(218, 81, 50, 0.9)), to(rgba(169, 19, 0, 1)));
+ 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 +139,55 @@ 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: #4eb5e5;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#4eb5e5), to(#3196cf));
+ 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-gradient(linear, left top, left bottom, from(#43a6e2), to(#277ac1));
+ 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-gradient(linear, left top, left bottom, from(#184a73), to(#276084));
+ 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 +195,81 @@ button::-moz-focus-inner, .button::-moz-focus-inner {
border: 0
}
+
+.submit button {
+ padding: 6px 45px 7px 10px;
+ background-color: #4eb5e5;
+ background-image: url("/i/button-arrow.png");
+ background-image: url("/i/button-arrow.png"), -webkit-gradient(linear, left top, left bottom, from(#4eb5e5), to(#3196cf));
+ 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, 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");
+ background-image: url("/i/button-arrow.png"), -webkit-gradient(linear, left top, left bottom, from(#43a6e2), to(#277ac1));
+ 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: none; /* Fix for IE9 still showing the blue arrow */
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#bcc4ca), to(#a0a7ae));
+ 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-gradient(linear, left top, left bottom, from(#d94f30), to(#ad1804));
+ 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-gradient(linear, left top, left bottom, from(#ad1804), to(#911403));
+ 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 {
+ box-shadow: 0 0 5px #333 inset;
}
.submit #cancel {
@@ -261,44 +282,70 @@ a.secondary[disabled], .submit_disabled a.secondary, .submit_disabled a.secondar
color: #999;
}
-hr {
- height: 1px;
- border: none;
- background-color: #eee;
- width: 700px;
+.right {
+ float: right;
}
+.center {
+ text-align: center;
+}
-.right {
- float: right;
+.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: 0px 1px 0px rgba(255,255,255,0.75);
+}
+
+.headline-main {
+ font-size: 48px;
+ letter-spacing: -2px;
+ line-height: 100%;
}
h1 {
- font-size: 24px;
- font-weight: normal;
- text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
+ font-size: 36px;
+ letter-spacing: -1.5px;
+ line-height: 100%;
}
-header ul li {
- display: inline-block;
- float: left;
+.white {
+ color: #fff;
+ text-shadow: 0px 1px 0px rgba(0,0,0,0.25);
}
-header a.home {
- width: 80px;
- height: 21px;
- background: url("/i/icon.png") 0px 4px no-repeat;
- text-indent: -9999px;
- display: inline-block;
+.thin {
+ font-weight: 300;
}
-footer {
- color: #aaa;
+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 +358,42 @@ 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;
+ margin-bottom: 10px;
}
-#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;
}
@@ -346,4 +401,36 @@ footer .help {
color: #333;
}
+#showDevelopment {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 50px;
+ height: 50px;
+ cursor: default;
+}
+
+#development {
+ display: none;
+}
+.development #development {
+ display: block;
+ position: absolute;
+ right: 0;
+ top: 10px;
+ z-index: 100000;
+ background-color: #000;
+ background-color: rgba(0,0,0, .75);
+ border-radius: 5px 0 0 5px;
+}
+
+#development li {
+ display: block;
+ float: none;
+ padding: 5px 10px;
+}
+
+#development li a {
+ color: #fff;
+}
diff --git a/resources/static/css/ie8_common.css b/resources/static/css/ie8_common.css
new file mode 100644
index 0000000000000000000000000000000000000000..99542f340d34480b5971bded5ad332c48bcfe6f0
--- /dev/null
+++ b/resources/static/css/ie8_common.css
@@ -0,0 +1,26 @@
+/* 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/. */
+
+/**
+ * These fixes are specific to IE8 that are common to the main site and dialog.
+ */
+
+.submit button,
+.submit button:hover,
+.submit button:focus,
+.submit .button:hover,
+.submit .button:focus {
+ background-image: url("/i/button-arrow.png");
+ background-position: center right;
+ background-repeat: no-repeat;
+}
+
+button[disabled], .submit_disabled button, .submit_disabled .button,
+.submit_disabled button:focus, .submit_disabled .button:focus,
+.submit_disabled button:active, .submit_disabled .button:active {
+ color: #d8dde0;
+ cursor: default;
+ background-color: #bcc4ca;
+ background-image: none; /* Fix for IE8/IE9 still showing the blue arrow */
+}
diff --git a/resources/static/css/ie8_main.css b/resources/static/css/ie8_main.css
new file mode 100644
index 0000000000000000000000000000000000000000..7a5122ddb60301ee9ccf3c9dd6e75c795794433c
--- /dev/null
+++ b/resources/static/css/ie8_main.css
@@ -0,0 +1,15 @@
+/* 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/. */
+
+/**
+ * These fixes are specific to IE8 for the main site
+ */
+
+body {
+ background-image: url("/i/marketplace-header.png");
+ background-position: center top;
+ background-repeat: repeat-x;
+}
+
+
diff --git a/resources/static/css/m.css b/resources/static/css/m.css
index bbdef5d151f422e18badee8bea40f7d86bb6f7bd..c9d939e23d19857a306c4ef6c1c7d8f94a5b4233 100644
--- a/resources/static/css/m.css
+++ b/resources/static/css/m.css
@@ -2,118 +2,98 @@
* 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;
+ width: 100%;
}
- hr {
- width: 300px;
+ #vAlign, #hAlign, #signUp, #signUpForm, #congrats {
+ width: 475px;
}
- #content {
- padding: 122px 0 84px;
- margin: 0 10px;
+ header, footer {
+ padding: 20px;
}
- #header {
- padding: 20px 30px;
+ footer .cf {
+ width: auto;
}
- #header ul.nav {
- float: left;
- width: 260px;
- margin-top: 10px;
+ .headline-main {
+ font-size: 33px;
}
+}
- #header ul.nav li {
- margin: 0 1px 0 0;
+@media screen and (max-width: 600px) {
+ header ul {
+ margin: 0;
+ float: none;
+ display: block;
text-align: center;
- width: 64px;
}
+}
- #header ul.nav li:first-child {
- width: 102px;
+@media screen and (max-width: 505px) {
+ header, footer {
+ padding: 10px;
}
- #header ul.nav li:nth-child(2) {
- width: 91px;
+ h1 {
+ font-size: 25px;
}
-
- #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;
+ .home {
+ background-size: 75%;
+ width: 154px;
+ height: 38px;
}
- 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;
+ text-align: center;
}
- #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;
+ #hAlign {
+ width: 300px;
+ padding: 0 10px;
}
- #header ul.nav li:nth-child(2) a {
- -webkit-border-radius: 0px;
- -moz-border-radius: 0px;
- -o-border-radius: 0px;
- border-radius: 0px;
+ #vAlign, #signUp, #signUpForm, #congrats {
+ width: 100%;
}
- #header ul.nav li a.signIn {
- background-color: rgba(0,0,0,0.1);
- color: #222;
+ header ul li {
+ margin: 0 5px 0 0;
}
- #header ul.nav li a:hover {
- text-decoration: none;
+ header .nav a {
+ font-size: 13px;
+ white-space: nowrap;
+ padding: 5px 10px;
}
#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;
background-position: center top;
background-size: 50%;
position: relative;
- margin: 0 20px 20px;
+ margin: 0 auto;
top: auto;
+ height: 120px;
-webkit-transition: none;
-moz-transition: none;
@@ -135,6 +115,11 @@
display: none;
}
+ .tour .button {
+ font-size: 18px;
+ padding: 5px 15px;
+ }
+
#hint,
#status {
display: none;
@@ -149,10 +134,6 @@
list-style-position: inside;
}
- #about {
- padding: 0;
- }
-
#about .video,
#about .video img {
width: 300px;
@@ -195,31 +176,10 @@
text-align: left;
}
- #manage .edit {
- margin: 36px 0 14px;
- }
-
- #manage #emails {
- margin: 0 0 36px;
- }
-
- #emails .email,
- #emails .activity {
- display: block;
- width: 260px;
- }
-
- #emails .activity span {
- float: left;
- }
-
#disclaimer {
text-align: left;
}
- #footer {
- padding: 20px 30px;
- }
#emailList .email {
width: auto;
@@ -231,16 +191,21 @@
float: right;
}
- .newsbanner {
- margin: 115px 0 28px 0; /* put a margin-top on so that it does not go under the header */
-
+ .submit .remember {
+ margin-top: 10px;
}
- input[type=email],
- input[type=password] {
- /* Fix webkit putting an inner box shadow on the input elements. Issue #1313 */
- -webkit-appearance: caret;
+ .newuser .newsbanner {
+ margin-bottom: 20px;
}
+ #error, #wait, #delay {
+ position: absolute; /* For a couple of browsers without position: fixed support */
+ position: fixed;
+ top: 25%;
+ left: 20px;
+ right: 20px;
+ }
}
+
diff --git a/resources/static/css/style.css b/resources/static/css/style.css
index 802295daca104265ab0c2bf4feb716cb39357683..4cecf7645473b802c065ad18a1a9f52e81cf91b8 100644
--- a/resources/static/css/style.css
+++ b/resources/static/css/style.css
@@ -15,7 +15,16 @@ 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;
+}
+
#errorBackground {
+ position: absolute;
position: fixed;
top: 0;
right: 0;
@@ -59,6 +68,7 @@ noscript {
border: 2px solid #000;
border-radius: 5px;
text-align: center;
+ color: #333;
}
@@ -88,67 +98,44 @@ noscript {
#wrapper {
- width: 700px;
- min-height: 100%;
+ width: 896px;
margin: 0 auto;
- position: relative;
}
#content {
- padding: 84px 0;
+ padding: 50px 0;
}
#about {
- font-size: 14px;
- line-height: 21px;
color: #444;
-
text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
- padding: 0 0 50px 0;
+ padding: 50px 75px;
background-color: #fff;
-
- -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: 0 0 5px 5px;
- -moz-border-radius: 0 0 5px 5px;
- -o-border-radius: 0 0 5px 5px;
- border-radius: 0 0 5px 5px;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+ border-radius: 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 {
+ margin-bottom: 35px;
}
-.video img, .video iframe {
- display: block;
+.headline-main, h1 {
+ font-weight: 300;
}
.row {
- margin: 0 0 25px 0;
- padding: 25px 50px 0 50px;
+ margin: 25px 0 0 0;
+ padding: 0 0 25px 0;
position: relative;
+ border-bottom: 1px solid #eee;
}
-.row:last-child {
- margin: 0;
-}
-.row h2 {
- font-size: 21px;
- font-weight: normal;
- color: #222;
- line-height: 32px;
- display: inline-block;
+
+
+.row:last-child {
+ padding-bottom: 0;
+ border-bottom: none;
}
.row div {
@@ -195,37 +182,11 @@ div.steps {
background-position: left -48px;
}
-.sumo {
- text-align: center;
-}
-
-.sumo > a {
- color: #444;
- border-bottom: 1px dotted;
-}
#legal {
padding: 75px 125px;
}
-#newuser {
- margin: 0 0 20px 0;
- height: 0;
- -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
- opacity: 0;
-}
-
-.newuser #newuser {
- height: 32px;
- -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
- opacity: 1;
- -webkit-transition: all 500ms;
- -moz-transition: all 500ms;
- -ms-transition: all 500ms;
- -o-transition: all 500ms;
- transition: all 500ms;
-}
-
#manage {
padding: 75px;
}
@@ -234,16 +195,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 +245,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 +258,6 @@ div.steps {
font-size: 1em;
}
-#manage button {
- line-height: 20px;
- height: 24px;
- font-size: 12px;
-}
-
.edit .buttonrow > .edit {
display: none;
}
@@ -342,55 +284,31 @@ div.steps {
}
#manage #emailList {
- list-style-type: none;
border-top: 1px solid #eee;
}
#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 +319,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,60 +387,84 @@ button.delete:active {
}
#disclaimer {
- color: #888;
text-align: right;
}
-h1 {
- margin-bottom: 20px;
+#hAlign {
+ width: 700px;
+ margin: 0 auto;
+ position: relative;
}
#vAlign {
- width: 700px;
+ height: 1000px;
+ 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 .tour {
- border-bottom: 1px dotted #90c0db;
+.tour a[href="/about"] {
+ color: #6dc7ff;
+}
+
+.tour a[href="/about"]:hover {
+ color: #58a7e7;
+}
+
+#signUp h1 {
+ max-width: 390px;
+}
+
+.tour {
+ font-size: 18px;
+ line-height: 39px;
+}
+
+.tour a {
+ margin: 0 7px;
+ 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);
}
-#signUp p {
- margin: 0 0 16px 0;
+.tour .button:hover {
+ color: #fff;
+ border-color: #338fd1 #277ec4 #0e6bb6 #277ec4;
+ background-image: -webkit-linear-gradient(top, #338fd1, #0e6bb6);
+ background-image: -moz-linear-gradient(top, #338fd1, #0e6bb6);
+ background-image: -ms-linear-gradient(top, #338fd1, #0e6bb6);
+ background-image: -o-linear-gradient(top, #338fd1, #0e6bb6);
+ background-image: linear-gradient(top, #338fd1, #0e6bb6);
}
.create {
- background-color: #37A6FF;
- height: 32px;
- line-height: 27px;
- padding: 0 16px;
- font-size: 16px;
float: none;
- display: inline-block;
vertical-align: middle;
}
#card {
width: 200px;
height: 200px;
- display: block;
position: absolute;
z-index: 1;
- top: 50%;
left: 0;
- margin-top: -100px;
- background-image: url('/i/card.png');
+ background-image: url('/i/badge.png');
background-position: 0px center;
background-repeat: no-repeat;
@@ -553,71 +482,13 @@ 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;
- height: 200px;
- display: block;
- position: absolute;
- top: 50%;
- left: 0;
- margin-top: -100px;
- z-index: 0;
- background-image: url('/i/hint.png');
- background-repeat: no-repeat;
-}
-
-#hint.info{
- background-position: left center;
-}
-
-#hint.signUp {
- 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: #556875;
+ background-color: rgba(0,0,0,0.1);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
@@ -625,8 +496,17 @@ h1 {
border-radius: 5px;
}
+#signUpForm a {
+ color: #6dc7ff;
+ text-shadow: 0 1px 0 #888;
+}
+
+#signUpForm a:hover {
+ color: #58a7e7;
+}
+
+
#signUpForm ul {
- list-style-type: none;
margin: 0 0 20px;
}
@@ -635,12 +515,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;
}
@@ -682,11 +556,6 @@ h1 {
display: block;
}
-#congrats p {
- color: #62615F;
- text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
-}
-
#congrats .siteinfo {
margin-top: 10px;
}
@@ -697,28 +566,12 @@ h1 {
}
-.notifications {
- list-style-type: none;
-}
-
.notifications > .notification {
- margin-top: 20px;
- padding: 5px;
- line-height: 21px;
- color: #62615F;
- text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- -o-border-radius: 3px;
- border-radius: 3px;
+ border-radius: 3px;
display: none;
text-align: center;
}
-.notifications > .notification strong {
- color: #222;
-}
-
.notifications .notification.error {
color: red;
background-color: rgba(255,0,0,0.25);
@@ -726,46 +579,47 @@ 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 .nav a:hover {
+ color: #383838;
+ background-color: #f4f3f0;
+ border-radius: 3px;
}
-header ul.nav {
+header ul {
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,41 +639,39 @@ section > header {
}
footer {
- position: absolute;
- bottom: 0;
+ background-color: #eff1f3;
+ margin-top: 10px;
+}
+
+footer .cf {
+ width: 896px;
+ margin: 0 auto;
}
-footer a {
- color: #aaa;
- border-bottom: 1px dotted #ccc;
+footer ul li:first-child {
+ margin-right: 35px;
}
-footer a:hover {
- color: #777;
+footer ul li:first-child a {
+ color: #484848;
}
+footer ul li:first-child a:hover {
+ border-bottom: 1px dotted #000;
+}
.newsbanner {
- margin-top: 60px; /* put a margin-top on so that it does not go under the header */
+ display: none;
background-color: #faca33;
line-height: 32px;
border-radius: 4px;
- margin-bottom: 20px;
text-align: center;
color: #626160;
text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
- -webkit-transition: all 500ms;
- -moz-transition: all 500ms;
- -ms-transition: all 500ms;
- -o-transition: all 500ms;
- transition: all 500ms;
}
-.newsbanner a {
- border-bottom: 1px dotted;
-}
-
-.newsbanner a:hover {
- color: #000;
+.newuser .newsbanner {
+ margin-bottom: 50px;
+ display: block;
}
diff --git a/resources/static/dialog/controllers/authenticate.js b/resources/static/dialog/controllers/authenticate.js
index d81fc9db32d86699b65ac10569baa17a3d070321..c8de422b80eda1441f004814c0a3a7c8eace76c7 100644
--- a/resources/static/dialog/controllers/authenticate.js
+++ b/resources/static/dialog/controllers/authenticate.js
@@ -100,7 +100,14 @@ BrowserID.Modules.Authenticate = (function() {
}
});
- $("." + showSelector).fadeIn(ANIMATION_TIME, callback);
+ $("." + showSelector).fadeIn(ANIMATION_TIME, function() {
+ // Fire a window resize event any time a new section is displayed that
+ // may change the content's innerHeight. this will cause the "screen
+ // size hacks" to resize the screen appropriately so scroll bars are
+ // displayed when needed.
+ dom.fireEvent(window, "resize");
+ complete(callback);
+ });
}
function enterEmailState(el) {
diff --git a/resources/static/dialog/css/ie8.css b/resources/static/dialog/css/ie8.css
new file mode 100644
index 0000000000000000000000000000000000000000..a5792b5b61f7ad5b2853373c0c1269f75ef3114c
--- /dev/null
+++ b/resources/static/dialog/css/ie8.css
@@ -0,0 +1,8 @@
+/* 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/. */
+
+/**
+ * These fixes are specific to IE8.
+ */
+
diff --git a/resources/static/dialog/css/m.css b/resources/static/dialog/css/m.css
index 6ffd5f551c128c68b499c2d31c51fd5d4166fe24..6991dbe0296b5f6f2abce6bf2ee662a95e95aa98 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 {
@@ -24,7 +23,6 @@
display: none;
}
-
.inputs > li > label {
font-size: 18px;
margin-bottom: 10px;
@@ -48,6 +46,7 @@
top: 45px; /* 45px is a magic number - the height of the favicon area */
right: 0;
width: auto;
+ padding: 0;
}
#favicon {
@@ -64,12 +63,11 @@
padding: 10px;
}
- #signIn .container {
+ #signIn .table {
width: 100%;
- padding: 20px;
}
- .pickemail #signIn .container {
+ .pickemail #signIn .table {
padding-top: 0;
}
@@ -82,10 +80,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 +96,7 @@
line-height: 20px;
}
- #formWrap {
- background-color: transparent;
- }
-
- .waiting #wait, .delay #delay, #error #error {
+ .form #formWrap, .waiting #wait, .delay #delay, #error #error {
display: block;
}
@@ -115,23 +106,18 @@
#selectEmail > .inputs > li > label {
margin: 0;
- padding: 25px 0;
- }
-
- #signIn .submit {
- position: static;
- line-height: 1.6;
- margin-top: 25px;
+ padding: 15px 0;
}
#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 +144,6 @@
line-height: 40px;
}
- #useNewEmail {
- margin-top: 18px;
- }
-
#error {
position: static;
}
@@ -181,6 +163,24 @@
}
a.emphasize {
- font-size: 13px;
+ font-size: 14px;
+ padding: 5px;
+ margin-top: 10px;
+ }
+
+ #your_computer_content li {
+ padding: 0 0 0 100px;
+ margin: 15px 0;
+ min-height: 40px;
+ }
+
+
+ .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..d2e3dd9a7af453457318ead513a29ace81c583f1 100644
--- a/resources/static/dialog/css/popup.css
+++ b/resources/static/dialog/css/popup.css
@@ -2,61 +2,100 @@
* 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-gradient(linear, left top, left bottom, from(rgba(113, 126, 137, 0)), to(rgba(113, 126, 137, 0.2)));
+ 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));
+}
+#signIn {
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: 393px;
+ padding-right: 105px;
+}
-h2 {
- margin-bottom: 20px;
- font-size: 150%;
- color: #222;
- font-weight: bold;
+.completing #signIn {
+ /**
+ * The width is set in helpers.js->animateClose
+ */
+ -webkit-transition: all 750ms ease;
+ -moz-transition: all 750ms ease;
+ -ms-transition: all 750ms ease;
+ -o-transition: all 750ms ease;
+ transition: all 750ms ease;
}
+
+
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);
}
@@ -85,14 +124,6 @@ section {
vertical-align: middle;
}
-/*
-.contents {
- max-height: 210px;
- overflow-x: hidden;
- overflow-y: auto;
-}*/
-
-
section > .contents {
display: table-cell;
vertical-align: middle;
@@ -100,6 +131,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 +161,6 @@ section > .contents {
}
#wait, #error, #delay {
- text-align: center;
z-index: -1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
@@ -152,9 +186,6 @@ section > .contents {
transition-delay: 0.5s;
}
-#wait, #delay {
- background-image: url("/i/bg.png");
-}
.waiting #wait {
display: block;
@@ -208,42 +239,18 @@ 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;
+ background-color: #eff0f2;
+ padding: 20px;
}
.arrowContainer {
- width: 40px;
position: absolute;
- right: 0;
+ width: 105px;
+ right: 0;
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 +260,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;
@@ -261,7 +268,7 @@ section > .contents {
#favicon {
position: absolute;
- left: 375px;
+ left: 400px;
top: 0;
bottom: 0;
right: 0;
@@ -269,7 +276,9 @@ section > .contents {
}
#favicon strong {
- font-size: 1.5em;
+ font-size: 18px;
+ line-height: 24px;
+ text-shadow: 0 1px #fff;
}
#favicon img {
@@ -299,7 +308,7 @@ div#required_email {
overflow-y: auto;
}
-#selectEmail.center {
+#selectEmail.vcenter {
position: static;
overflow-y: visible;
/* The below 1px padding is part of a fix for a bug in webkit where there
@@ -327,7 +336,6 @@ div#required_email {
}
.inputs > li > label {
- color: #333;
overflow: hidden;
text-overflow: ellipsis;
}
@@ -337,7 +345,7 @@ div#required_email {
}
#selectEmail > .inputs > li > label {
- padding: 5px 1px;
+ padding: 6px 1px;
white-space: nowrap;
}
@@ -354,38 +362,51 @@ div#required_email {
}
.submit {
- line-height: 28px;
margin-top: 10px;
color: #333;
font-size: 11px;
- line-height: 1.2;
+ line-height: 14px;
}
-.submit > p + p:last-child {
- margin-top: 15px;
- padding-left: 10px;
-}
-
-.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 {
- background-color: #F0EFED;
- color: #4E4E4E;
- font-size: 0.75em;
+ border-bottom: 1px solid #b8babc;
+ border-radius: 2px;
+ color: #484848;
+ font-size: 11px;
padding: 0 5px;
display: inline-block;
- line-height: 18px;
+ line-height: 22px;
+ background-color: #e5e9eb;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#e5e9eb), to(#d8dbde));
+ 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 {
- background-color: #fbfafa;
+a.emphasize:hover,
+a.emphasize:focus {
+ background-color: #d8dbde;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#d8dbde), to(#ccc));
+ 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:active {
+ box-shadow: 0 0 5px #333 inset;
}
@@ -404,22 +425,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..64225604a1fd9b4ca32f7177702ade8afbfbae52 100644
--- a/resources/static/dialog/resources/helpers.js
+++ b/resources/static/dialog/resources/helpers.js
@@ -15,12 +15,19 @@
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 () {
- body.delay(500).animate({ "opacity" : "0.5"}, 500);
- });
+ var endWidth = bodyWidth - 10;
+
+ body.addClass("completing");
+ /**
+ * CSS transitions are used to do the slide effect. jQuery has a bug
+ * where it does not do transitions correctly if the box-sizing is set to
+ * border-box and the element has a padding
+ */
+ $("#signIn").css("width", endWidth + "px");
// Call setTimeout here because on Android default browser, sometimes the
// callback is not correctly called, it seems as if jQuery does not know
diff --git a/resources/static/dialog/resources/screen_size_hacks.js b/resources/static/dialog/resources/screen_size_hacks.js
index 66b14865f1b5a83d557277de7f155201b83861f0..503d84852d9bfd982016a7968c396cf97053045e 100644
--- a/resources/static/dialog/resources/screen_size_hacks.js
+++ b/resources/static/dialog/resources/screen_size_hacks.js
@@ -29,7 +29,7 @@
// re-introduce constraints
if(height < $("#signIn .vertical").innerHeight()) {
- selectEmailEl.addClass("center");
+ selectEmailEl.addClass("vcenter");
/* The below width adjustment is part of a fix for a bug in webkit where
* there is a ghost padding-right to accommodate the scroll bar that is
@@ -44,12 +44,12 @@
selectEmailEl.width(width);
}
else {
- selectEmailEl.removeClass("center");
+ selectEmailEl.removeClass("vcenter");
}
}
else {
// First, remove the desktop hacks
- selectEmailEl.removeClass("center");
+ selectEmailEl.removeClass("vcenter");
// Hack to make sure the email addresses stay within their container.
// We have to do this ghettoness because table-cells (which are used to
@@ -57,7 +57,7 @@
// and the ellipsis never show up as expected.
// First, find the maximum width that emails can be.
- selectEmailEl.css("width", "10px").removeClass("center");
+ selectEmailEl.css("width", "10px").removeClass("vcenter");
var constrainedWidth = $("#signIn .contents").innerWidth();
// Find the real maximum width.
diff --git a/resources/static/dialog/start.js b/resources/static/dialog/start.js
index e0e64b71daab4c1387490ac21dcdab39d9e5690e..543136b023e673488b9e0d90c1fa9d1b34dc519c 100644
--- a/resources/static/dialog/start.js
+++ b/resources/static/dialog/start.js
@@ -20,6 +20,9 @@
moduleManager.register("interaction_data", modules.InteractionData);
moduleManager.start("interaction_data", { continuation: continuation });
+ moduleManager.register("development", modules.Development);
+ moduleManager.start("development");
+
moduleManager.register("cookie_check", modules.CookieCheck);
moduleManager.start("cookie_check", {
ready: function(status) {
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/development.ejs b/resources/static/dialog/views/development.ejs
new file mode 100644
index 0000000000000000000000000000000000000000..18b5a2571cb8bcff169fa87efffef91edf0570ea
--- /dev/null
+++ b/resources/static/dialog/views/development.ejs
@@ -0,0 +1,8 @@
+<ul id="development">
+ <li><a id="showError" href="/">Show Error</a></li>
+ <li><a id="showDelay" href="/">Show Delay</a></li>
+ <li><a id="showWait" href="/">Show Wait</a></li>
+ <li><a id="hideAll" href="/">Hide Screens</a></li>
+ <li><a id="closeDevelopment" href="/">Close</a></li>
+</ul>
+
diff --git a/resources/static/dialog/views/error.ejs b/resources/static/dialog/views/error.ejs
index 4a61ab7092777177336739789d7c521f6950e660..0b35cd680dc17fcb47e25adc6284ae7cce111b46 100644
--- a/resources/static/dialog/views/error.ejs
+++ b/resources/static/dialog/views/error.ejs
@@ -3,23 +3,25 @@
- 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"> <%= gettext("The server is under extreme load!") %></span>
</h2>
<% } else if (typeof network !== "undefined" && network.status == 403) { %>
<h2 id="error_403">
- <%= gettext("BrowserID requires cookies") %>
+ <%= gettext("Persona requires cookies") %>
</h2>
<%= 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/dialog/views/set_password.ejs b/resources/static/dialog/views/set_password.ejs
index 750764e20214254c4e191d87f31c7fd0135cf1a6..3cc5e014cee1ea61fed2bad1b7490025d959294c 100644
--- a/resources/static/dialog/views/set_password.ejs
+++ b/resources/static/dialog/views/set_password.ejs
@@ -2,15 +2,15 @@
- 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/. -->
- <strong><%= gettext('Welcome to BrowserID!') %></strong>
+ <strong><%= gettext('Welcome to Persona!') %></strong>
<div class="form_section" id="set_password">
<ul class="inputs">
<li>
<% if(password_reset || !cancelable) { %>
- <%= gettext("Choose a new password you'll use when you sign in with BrowserID.") %>
+ <%= gettext("Choose a new password you'll use when you sign in with Persona.") %>
<% } else { %>
- <%= gettext("Next, choose a new password you'll use when you sign in with BrowserID.") %>
+ <%= gettext("Next, choose a new password you'll use when you sign in with Persona.") %>
<% } %>
</li>
diff --git a/resources/static/i/a_better_way.png b/resources/static/i/a_better_way.png
deleted file mode 100644
index 650db6a8b64b1f06a0fde18dabeb98780f017afe..0000000000000000000000000000000000000000
Binary files a/resources/static/i/a_better_way.png and /dev/null differ
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/badge.png b/resources/static/i/badge.png
new file mode 100644
index 0000000000000000000000000000000000000000..1af14efe525f3e2291cd88d37d195b147801d504
Binary files /dev/null and b/resources/static/i/badge.png differ
diff --git a/resources/static/i/blink.gif b/resources/static/i/blink.gif
deleted file mode 100644
index b0a5fbf3626cc6f2291a69b48393eb4256271e8f..0000000000000000000000000000000000000000
Binary files a/resources/static/i/blink.gif and /dev/null differ
diff --git a/resources/static/i/browserid_logo_lil.png b/resources/static/i/browserid_logo_lil.png
deleted file mode 100644
index 7a5c42bf7cd897f1745948a82214265e6fbae364..0000000000000000000000000000000000000000
Binary files a/resources/static/i/browserid_logo_lil.png and /dev/null differ
diff --git a/resources/static/i/browserid_logo_sm.png b/resources/static/i/browserid_logo_sm.png
deleted file mode 100644
index 9acf2baede053cd2bb28c136800481eb254c8187..0000000000000000000000000000000000000000
Binary files a/resources/static/i/browserid_logo_sm.png and /dev/null 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/card.png b/resources/static/i/card.png
deleted file mode 100644
index eac93fc8481e85d226d934eaa30a2b3b4737837d..0000000000000000000000000000000000000000
Binary files a/resources/static/i/card.png and /dev/null differ
diff --git a/resources/static/i/check.png b/resources/static/i/check.png
deleted file mode 100644
index a8f44a3452eccabe3f16f33a6ce6f53afdbd7d63..0000000000000000000000000000000000000000
Binary files a/resources/static/i/check.png and /dev/null 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/labs-logo-small.png b/resources/static/i/labs-logo-small.png
deleted file mode 100644
index 5f0cb6bdc636f09e34f42b83555a2008fd419b7c..0000000000000000000000000000000000000000
Binary files a/resources/static/i/labs-logo-small.png and /dev/null differ
diff --git a/resources/static/i/lock.png b/resources/static/i/lock.png
deleted file mode 100644
index 8b2d5c90ef2a73ec4dac8d8952eebd4b32fc663f..0000000000000000000000000000000000000000
Binary files a/resources/static/i/lock.png and /dev/null 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-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/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/sprite.png b/resources/static/i/sprite.png
deleted file mode 100644
index 2a2f7c199db56bf45dd48efa1fa520975580fd71..0000000000000000000000000000000000000000
Binary files a/resources/static/i/sprite.png and /dev/null differ
diff --git a/resources/static/i/sunny.png b/resources/static/i/sunny.png
deleted file mode 100644
index 0e74bedc403a2dedce0bfdf61b252232567e510d..0000000000000000000000000000000000000000
Binary files a/resources/static/i/sunny.png and /dev/null differ
diff --git a/resources/static/i/times.gif b/resources/static/i/times.gif
deleted file mode 100644
index 14aedfc6080d2865e1a2160e0178195e00a342d2..0000000000000000000000000000000000000000
Binary files a/resources/static/i/times.gif and /dev/null differ
diff --git a/resources/static/pages/index.js b/resources/static/pages/index.js
index 6e4a0b8e9b5701daaa35e3782ad2a46c51bd51a1..cd2250ce117e5c1a6830698157e4f9a9b9e727a6 100644
--- a/resources/static/pages/index.js
+++ b/resources/static/pages/index.js
@@ -7,17 +7,12 @@
"use strict";
BrowserID.index = function () {
- $('.granted').hover(function() {
+ $('.tour a').hover(function() {
$('#card').toggleClass('insert');
- $('#status').delay(400).toggleClass('green');
});
$('.create').hover(function() {
$('#hint').addClass('signUp').removeClass('info');
});
-
- $('.info').hover(function() {
- $('#hint').removeClass('signUp').addClass('info');
- });
};
}());
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/signin.js b/resources/static/pages/signin.js
index 813cce5cdbcebade2f83524a24d140e8e7284193..8a487f82fff0b6a0cbb9914ac7fb311e698a7b87 100644
--- a/resources/static/pages/signin.js
+++ b/resources/static/pages/signin.js
@@ -13,6 +13,7 @@ BrowserID.signIn = (function() {
helpers = bid.Helpers,
errors = bid.Errors,
pageHelpers = bid.PageHelpers,
+ tooltip = bid.Tooltip,
doc = document,
winchan = window.WinChan,
verifyEmail,
@@ -97,7 +98,7 @@ BrowserID.signIn = (function() {
}
else {
// bad authentication
- $(".notifications .notification.badlogin").fadeIn();
+ tooltip.showTooltip("#cannot_authenticate");
}
complete(oncomplete);
}, pageHelpers.getFailure(errors.authenticate, oncomplete));
diff --git a/resources/static/pages/start.js b/resources/static/pages/start.js
index c38018d08a24d0e4f360c5d3badc31032886de04..7f735a5e673c2d6277131ebd33df7c502b9e05e4 100644
--- a/resources/static/pages/start.js
+++ b/resources/static/pages/start.js
@@ -24,6 +24,7 @@ $(function() {
CookieCheck = modules.CookieCheck,
XHRDelay = modules.XHRDelay,
XHRDisableForm = modules.XHRDisableForm,
+ Development = modules.Development,
ANIMATION_TIME = 500,
checkCookiePaths = [ "/signin", "/signup", "/forgot", "/add_email_address", "/verify_email_address" ];
@@ -37,13 +38,50 @@ $(function() {
}
}
+ // Firefox and IE have rendering bugs where if the box-sizing is set to
+ // border-box and a min-height is set, padding is added on top of the
+ // min-height, making elements render using the normal W3C box model. Use
+ // a bit of bug detection here in case the bugs are fixed.
+ function paddingAddedToMinHeight() {
+ var div = document.createElement("div");
+ $(div).css({
+ "box-sizing": "border-box",
+ "min-height": "100px",
+ "padding-top": "10px",
+ "position": "absolute",
+ "top": "-2000px"
+ });
+
+ $("body").append(div);
+
+ var divHeight = parseInt($(div).outerHeight(), 10);
+ $(div).remove();
+ return divHeight === 110;
+ }
+
xhr.init({ time_until_delay: 10 * 1000 });
network.init();
$(".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 });
+
+
+ // On the manage page, the content element sometimes does not take up the
+ // full height of the screen, leaving the footer to float somewhere in the
+ // middle. To compensate, force the min-height of the content so that the
+ // footer remains at the bottom of the screen.
+
+ var paddingTop = 0, paddingBottom = 0;
+
+ if(paddingAddedToMinHeight()) {
+ paddingTop = parseInt($("#content").css("padding-top") || 0, 10);
+ paddingBottom = parseInt($("#content").css("padding-bottom") || 0, 10);
+ }
+
+ $("#content").css({ "min-height": height - paddingTop - paddingBottom });
+ }).trigger('resize');
moduleManager.register("xhr_delay", XHRDelay);
moduleManager.start("xhr_delay");
@@ -51,6 +89,9 @@ $(function() {
moduleManager.register("xhr_disable_form", XHRDisableForm);
moduleManager.start("xhr_disable_form");
+ moduleManager.register("development", Development);
+ moduleManager.start("development");
+
if(shouldCheckCookies(path)) {
// do a cookie check on every page except the main page.
moduleManager.register("cookie_check", CookieCheck);
@@ -66,7 +107,6 @@ $(function() {
// instead just show the error message.
if(!status) return;
- dom.addClass("body", "ready");
if (!path || path === "/") {
bid.index();
@@ -109,14 +149,20 @@ $(function() {
else {
displayNonAuthenticated();
}
+
+ // The footer is initially tied to the bottom while the page is loading
+ // so that it does not appear to flicker. Untie the footer and let it
+ // rest in its natural position.
+ $("footer").css({ position: "", bottom: "" });
});
function displayAuthenticated() {
$(".display_always,.display_auth").fadeIn(ANIMATION_TIME);
dom.addClass("body", "authenticated");
- if ($('#emailList').length) {
+ if (!path || path === "/") {
bid.manageAccount();
+ $(window).trigger("resize");
}
$("a.signOut").click(function(event) {
diff --git a/resources/static/shared/modules/development.js b/resources/static/shared/modules/development.js
new file mode 100644
index 0000000000000000000000000000000000000000..e34b70c89824cc4cf5164a304b772242de58f998
--- /dev/null
+++ b/resources/static/shared/modules/development.js
@@ -0,0 +1,81 @@
+/*jshint browser:true, jQuery: true, forin: true, laxbreak:true */
+/*global BrowserID: true */
+/* 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/. */
+
+BrowserID.Modules.Development = (function() {
+ "use strict";
+
+ var bid = BrowserID,
+ dom = bid.DOM,
+ renderer = bid.Renderer,
+ count = 0;
+
+
+ function onDevelopmentClick(event) {
+ count++;
+
+
+ if(count === 4) {
+ if(!document.getElementById("development")) {
+ renderer.append("body", "development", {});
+ }
+
+ dom.addClass("body", "development");
+ this.click("#showError", showError);
+ this.click("#showDelay", showDelay);
+ this.click("#showWait", showWait);
+ this.click("#hideAll,footer,#errorBackground", hideScreens);
+ this.click("#closeDevelopment", close);
+ }
+ }
+
+ function showError() {
+ this.renderError("error", {
+ action: {
+ title: "Error title",
+ message: "This is an error message"
+ },
+ network: {
+ type: "GET",
+ url: "fakeURL"
+ }
+ });
+ }
+
+ function showDelay() {
+ this.renderDelay("wait", {
+ title: "Delay Screen",
+ message: "Delay Message"
+ });
+ }
+
+ function showWait() {
+ this.renderWait("wait", {
+ title: "Wait Screen",
+ message: "Wait Message"
+ });
+ }
+
+ function hideScreens() {
+ this.hideError();
+ this.hideDelay();
+ this.hideWait();
+ }
+
+
+ function close() {
+ dom.removeClass("body", "development");
+ count = 0;
+ }
+
+ var Module = bid.Modules.PageModule.extend({
+ start: function(config) {
+ this.click("#showDevelopment", onDevelopmentClick);
+ }
+ });
+
+ return Module;
+}());
+
diff --git a/resources/static/shared/modules/page_module.js b/resources/static/shared/modules/page_module.js
index 3a0186f0ada2dcda42a8ec543134c4f666cee25a..36aa78c7c29a72aae98d2d6552b08100467c54b2 100644
--- a/resources/static/shared/modules/page_module.js
+++ b/resources/static/shared/modules/page_module.js
@@ -24,6 +24,11 @@ BrowserID.Modules.PageModule = (function() {
function showScreen(screen, template, vars, oncomplete) {
screen.show(template, vars);
+ // Fire a window resize event any time a new section is displayed that
+ // may change the content's innerHeight. this will cause the "screen
+ // size hacks" to resize the screen appropriately so scroll bars are
+ // displayed when needed.
+ dom.fireEvent(window, "resize");
oncomplete && oncomplete();
}
diff --git a/resources/views/about.ejs b/resources/views/about.ejs
index 962d55589ea7c283ca0db526e9352cc40c1fe41d..a7eb8dea4e292cea91e2080126587a176305d933 100644
--- a/resources/views/about.ejs
+++ b/resources/views/about.ejs
@@ -5,21 +5,18 @@
<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>
+ <h1 class="center">
+ <strong>Persona</strong> is an <strong>easier</strong> way to sign in
+ </h1>
+
<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>
- <hr />
-
<div class="row two cf">
<img src="/i/tutorial_2.png">
<div>
@@ -28,8 +25,6 @@
</div>
- <hr />
-
<div class="row three cf">
<img src="/i/tutorial_3.png">
<div>
@@ -37,10 +32,8 @@
</div>
</div>
- <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>.
+ <div class="row cf center">
+ 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..22d36ab73ce9ab150a89ad7827c32805f2c2efa5 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>
@@ -12,16 +12,16 @@
<form id="signUpForm" class="cf">
<p class="hint siteinfo"><%= gettext('Finish signing into:') %> <strong><span class="website"></span></strong></p>
- <h1 class="serif"><%= gettext('Email Verification') %></h1>
+ <h1><%= gettext('Email Verification') %></h1>
<ul class="inputs">
<li>
- <label class="serif" for="email"><%= gettext('Email Address') %></label>
- <input class="youraddress sans" id="email" placeholder="<%= gettext('Your Email') %>" type="email" value="" disabled="disabled" maxlength="254" />
+ <label for="email"><%= gettext('Email Address') %></label>
+ <input class="youraddress" id="email" placeholder="<%= gettext('Your Email') %>" type="email" value="" disabled="disabled" maxlength="254" />
</li>
<li class="password_entry">
- <label class="serif" for="password"><%= gettext('Password') %></label>
- <input class="sans" id="password" placeholder="<%= gettext('Your Password') %>" type="password" autofocus maxlength=80 />
+ <label for="password"><%= gettext('Password') %></label>
+ <input id="password" placeholder="<%= gettext('Your Password') %>" type="password" autofocus maxlength=80 />
<div class="tooltip" id="password_required" for="password">
<%= gettext('Password is required.') %>
@@ -37,8 +37,8 @@
</li>
<li class="password_entry" id="verify_password">
- <label class="serif" for="vpassword"><%= gettext('Verify Password') %></label>
- <input class="sans" id="vpassword" placeholder="<%= gettext('Repeat Password') %>" type="password" maxlength="80">
+ <label for="vpassword"><%= gettext('Verify Password') %></label>
+ <input id="vpassword" placeholder="<%= gettext('Repeat Password') %>" type="password" maxlength="80">
<div id="vpassword_required" class="tooltip" for="vpassword">
<%= gettext('Verification password is required.') %>
@@ -59,7 +59,7 @@
</form>
<div id="congrats">
- <p class="serif">
+ <p>
<%- gettext('<strong class="email">Your address</strong> has been verified!') %>
<p class="siteinfo">
diff --git a/resources/views/cookies_disabled.ejs b/resources/views/cookies_disabled.ejs
index 01fb4baea956430a667abf0d4883a46a9ad6c01c..1116dcf8443dca8c34a42b062275470737ea6eaf 100644
--- a/resources/views/cookies_disabled.ejs
+++ b/resources/views/cookies_disabled.ejs
@@ -6,7 +6,7 @@
<div class="table">
<div class="vertical contents">
<h2 id="reason">
- <%= gettext("BrowserID requires cookies") %>
+ <%= gettext("Persona requires cookies") %>
</h2>
<p>
diff --git a/resources/views/dialog.ejs b/resources/views/dialog.ejs
index 5e9b7ebe6ecd09d896e54de6370bd9a3a4750eb3..1752efdd3c5de51970154617b621af299d07881a 100644
--- a/resources/views/dialog.ejs
+++ b/resources/views/dialog.ejs
@@ -12,15 +12,15 @@
</div>
<div id="signIn">
- <div class="arrowContainer">
- <div class="arrow"></div>
- </div>
- <div class="table container">
+ <div class="table">
<div class="vertical">
<div class="contents">
</div>
</div>
</div>
+ <div class="arrowContainer">
+ <div class="arrow"></div>
+ </div>
</div>
</form>
</section>
diff --git a/resources/views/dialog_layout.ejs b/resources/views/dialog_layout.ejs
index 73a3afd50410f659f49e1f33a5df1bd9237f8ec5..c98dd034d9cd229725a47174c41551047702b8f6 100644
--- a/resources/views/dialog_layout.ejs
+++ b/resources/views/dialog_layout.ejs
@@ -13,12 +13,16 @@
<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>
+ <!--[if lt IE 9]>
+ <%- cachify_css('/production/ie8_dialog.css') %>
+ <![endif]-->
+ <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>
+ <a href="#" id="showDevelopment"> </a>
+ <h1><a class="home" target="_blank" href="/">Mozilla Persona Home</a></h1>
</header>
<div id="content">
@@ -26,7 +30,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..369ef504aefe55627d3a83216fb11b13dee532f4 100644
--- a/resources/views/forgot.ejs
+++ b/resources/views/forgot.ejs
@@ -2,11 +2,11 @@
- 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>
+ <h1>Forgot Password</h1>
<div class="notifications">
<div class="notification emailsent">
<p>
@@ -26,8 +26,8 @@
<ul class="inputs forminputs">
<li>
- <label class="serif" for="email">Email Address</label>
- <input class="sans" id="email" autofocus required placeholder="Your Email" type="email" autocapitalize="off" autocorrect="off" maxlength="254" />
+ <label for="email">Email Address</label>
+ <input id="email" autofocus required placeholder="Your Email" type="email" autocapitalize="off" autocorrect="off" maxlength="254" />
<div id="email_format" class="tooltip" for="email">
This field must be an email address.
@@ -47,8 +47,8 @@
</li>
<li>
- <label class="serif" for="password">Password</label>
- <input class="sans" id="password" placeholder="Password" type="password" maxlength="80">
+ <label for="password">Password</label>
+ <input id="password" placeholder="Password" type="password" maxlength="80">
<div id="password_required" class="tooltip" for="password">
Password is required.
@@ -64,8 +64,8 @@
</li>
<li>
- <label class="serif" for="vpassword">Verify Password</label>
- <input class="sans" id="vpassword" placeholder="Repeat Password" type="password" maxlength="80">
+ <label for="vpassword">Verify Password</label>
+ <input id="vpassword" placeholder="Repeat Password" type="password" maxlength="80">
<div id="password_required" class="tooltip" for="vpassword">
Verification password is required.
@@ -80,10 +80,10 @@
</ul>
<div class="submit cf forminputs">
+ <button>Reset Password</button>
<div class="remember cf">
<a class="action" href="/signin">Know your password? Sign in.</a>
</div>
- <button>Reset Password</button>
</div>
</form>
</div>
diff --git a/resources/views/index.ejs b/resources/views/index.ejs
index 21bfbcb5cf589de2ea626eb1dd80351b8340d3ae..654475f4d431ec3f6a24c6befa81e4cd9b5a65bb 100644
--- a/resources/views/index.ejs
+++ b/resources/views/index.ejs
@@ -1,84 +1,80 @@
<!-- 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>
+
+ <h1 class="white headline-main">Connect with Mozilla Persona, the safest & easiest way to sign in.</h1>
+ <p class="tour white">
+ <a href="/about">Take the tour</a>
+ or
+ <a href="/signup" class="button 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">
+ <h1>Account Manager</h1>
- <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..767e089ad662f6c6529c7a8b82c4fc0465bf3eb9 100644
--- a/resources/views/layout.ejs
+++ b/resources/views/layout.ejs
@@ -10,19 +10,21 @@
<!--[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') %>
+ <!--[if lt IE 9]>
+ <%- cachify_css('/production/ie8_main.css') %>
+ <![endif]-->
<%- 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>
-
+<body class="loading">
+<a href="#" id="showDevelopment"> </a>
<div id="errorBackground"></div>
<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>
@@ -30,7 +32,9 @@
<li class="signIn"><a class="signIn" href="/signin"><%= gettext("Sign In") %></a></li>
<li class="signOut"><a class="signOut" href="/"><%= gettext("Sign Out") %></a></li>
+
</ul>
+
</header>
<div id="wait"><div class="contents"></div></div>
@@ -39,18 +43,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 style="position: absolute; bottom: 0;">
+ <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/privacy.ejs b/resources/views/privacy.ejs
index 789f7c344100e83e9283f8b00e0e32743d5c9725..f1046b72adb7a406c77c2ca7257211223d6c18a8 100644
--- a/resources/views/privacy.ejs
+++ b/resources/views/privacy.ejs
@@ -4,29 +4,29 @@
<div id="content" class="display_always">
<div id="legal">
- <h2>Privacy & BrowserID</h2>
+ <h1>Privacy & Persona</h1>
<ul>
- <li>We need your verified email address to register a BrowserID Account, but we don't ask for other personal information.</li>
+ <li>We need your verified email address to register a Persona Account, but we don't ask for other personal information.</li>
<li>Your email address is shared with sites you visit to help you sign in, but is never given to anyone without your express consent.</li>
- <li>As part of the normal operation of the BrowserID service, Mozilla will retain a log of which sites you have disclosed your email to.</li>
+ <li>As part of the normal operation of the Persona service, Mozilla will retain a log of which sites you have disclosed your email to.</li>
- <li>We don't sell your data or use ad networks on the BrowserID webpages or service.</li>
+ <li>We don't sell your data or use ad networks on the Persona webpages or service.</li>
<li>In the future, Mozilla will seek to bring email providers into this system, at which point their privacy policies and terms of service will apply (if you use an email provided by them).</li>
<li>For the full text of our privacy practices and all the "legalese" and details, please read our privacy policy below.</li>
</ul>
- <h3>BrowserID Privacy Policy</h3>
+ <h3>Persona Privacy Policy</h3>
<p><em>Last Updated: 13 July 2011</em></p>
- <p>This privacy policy explains to what extent Mozilla Corporation (*) ("Mozilla") collects and uses information about users of BrowserID ("BrowserID Service"), where such users use the Mozilla-created servers and client.</p>
+ <p>This privacy policy explains to what extent Mozilla Corporation (*) ("Mozilla") collects and uses information about users of Persona ("Persona Service"), where such users use the Mozilla-created servers and client.</p>
<h4>Definitions</h4>
- <p>"<b>Personal Information</b>" is information that you provide to us that personally identifies you, such as your name, phone number, or email address. Except for your email address, Mozilla does not collect or require end-users of the BrowserID Service to furnish Personal Information.</p>
+ <p>"<b>Personal Information</b>" is information that you provide to us that personally identifies you, such as your name, phone number, or email address. Except for your email address, Mozilla does not collect or require end-users of the Persona Service to furnish Personal Information.</p>
<p>"<b>Non-Personal Information</b>" is information that cannot by itself be directly associated with a specific person or entity. Non-Personal Information includes but is not limited to your computer's configuration and the version of Firefox you use.</p>
@@ -39,47 +39,47 @@
<h4>Gathering, Use and Disclosure of Transmission Data</h4>
<h5>Account Information</h5>
- <p>Before you are able to access BrowserID, you will be required to register. To register, the BrowserID Service will require the following Personal Information and Potentially Personal Information from you: your email address, and password. Your username and email address are transferred to Mozilla using encryption called SSL. Your email address is used by us to provide you the services, such as allowing us to help you recover your account if you lose your password. Your password is transferred to Mozilla using SSL encryption but is only retained by Mozilla's servers in a hash format (which means a low level of encryption is applied).</p>
+ <p>Before you are able to access Persona, you will be required to register. To register, the Persona Service will require the following Personal Information and Potentially Personal Information from you: your email address, and password. Your username and email address are transferred to Mozilla using encryption called SSL. Your email address is used by us to provide you the services, such as allowing us to help you recover your account if you lose your password. Your password is transferred to Mozilla using SSL encryption but is only retained by Mozilla's servers in a hash format (which means a low level of encryption is applied).</p>
<p>Once you have registered, your password is used to help prevent unauthorized access to your account. </p>
<h5>Data Used to Provide the Services</h5>
- <p>Mozilla receives and uses the following information for the purpose of providing and improving the BrowserID Service: IP address, email, date and time of accessing the BrowserID Service, and various operational data such as the type of client OS and Firefox version (which are also known as the user agent string).</p>
+ <p>Mozilla receives and uses the following information for the purpose of providing and improving the Persona Service: IP address, email, date and time of accessing the Persona Service, and various operational data such as the type of client OS and Firefox version (which are also known as the user agent string).</p>
<h5>Disclosure to Third Parties</h5>
- <p>The BrowserID Service will disclose your verified email address to a Web site of your choosing, only after you have expressly consented to such disclosure. A Web site is allowed to request a verified email address, which results in you being prompted about the site's request. After you have agreed, the service may remember your choice, so that you may remain signed-in on the site on subsequent visits.</p>
+ <p>The Persona Service will disclose your verified email address to a Web site of your choosing, only after you have expressly consented to such disclosure. A Web site is allowed to request a verified email address, which results in you being prompted about the site's request. After you have agreed, the service may remember your choice, so that you may remain signed-in on the site on subsequent visits.</p>
<p>Mozilla will not otherwise knowingly disclose Personal Information or Potentially Personal Information to other third parties, except when required to do so, such as in order to comply with any law, regulation, or valid legal process, such as a search warrant, subpoena, statute, court order, or if necessary or appropriate to address an unlawful or harmful activity.</p>
<h5>What Data is Analyzed by Mozilla?</h5>
- <p>Without your explicit approval and opt-in, Mozilla will only use the Usage Statistics to understand your use of the BrowserID Service.</p>
+ <p>Without your explicit approval and opt-in, Mozilla will only use the Usage Statistics to understand your use of the Persona Service.</p>
<h5>How Are the Usage Statistics Used?</h5>
- <p>Mozilla will use the Usage Statistics gathered through the operation of the BrowserID Service to improve the service and other related Mozilla products and services. By identifying patterns and trends in usage, Mozilla and its community is able to better design products and services to improve users' experiences, both in terms of content and ease of use.</p>
+ <p>Mozilla will use the Usage Statistics gathered through the operation of the Persona Service to improve the service and other related Mozilla products and services. By identifying patterns and trends in usage, Mozilla and its community is able to better design products and services to improve users' experiences, both in terms of content and ease of use.</p>
<h5>Where is the Operational Data Available?</h5>
- <p>Mozilla is an open organization that believes in sharing as much information as possible about its products, its operations, and its associations with its wider community. As such, BrowserID Service users should expect that Mozilla will make all Usage Statistics publicly available at some point. However, any publicly available Usage Statistics will only be reported on an aggregate, anonymous basis. No Personal Information or Potentially Personal Information will be available in any of these public reports.</p>
+ <p>Mozilla is an open organization that believes in sharing as much information as possible about its products, its operations, and its associations with its wider community. As such, Persona Service users should expect that Mozilla will make all Usage Statistics publicly available at some point. However, any publicly available Usage Statistics will only be reported on an aggregate, anonymous basis. No Personal Information or Potentially Personal Information will be available in any of these public reports.</p>
- <h5>How to Disable or Opt-Out of BrowserID</h5>
- <p>If at any time, you decide you no longer want to use the BrowserID Service, you may cancel your BrowserID Account by visiting <kbd>https://browserid.org/</kbd>, signing in using any of your email addresses and your password, clicking the "edit" button, and clicking "remove" next to each of your email addresses.</p>
+ <h5>How to Disable or Opt-Out of Persona</h5>
+ <p>If at any time, you decide you no longer want to use the Persona Service, you may cancel your Persona Account by visiting <kbd>https://browserid.org/</kbd>, signing in using any of your email addresses and your password, clicking the "edit" button, and clicking "remove" next to each of your email addresses.</p>
<h5>Other Disclosures</h5>
<p>In certain other limited situations, Mozilla may disclose your Personal Information, such as when necessary to protect our websites and operations (e.g., against attacks); to protect the rights, privacy, safety, or property of Mozilla or its users; to enforce our terms of service; and to pursue available legal remedies. Additionally, Mozilla may need to transfer Personal Information to an affiliate or successor in the event of a change of our corporate structure or status, such as in the event of a restructuring, sale, or bankruptcy.</p>
<h5>Service Providers</h5>
- <p>We work with third parties who provide services (such as companies that help us determine the number of users of BrowserID) and content delivery networks and other services of an administrative nature. We may share Personal Information and Potentially Personal Information about you with such third parties for the purpose of enabling these third parties to provide such services.</p>
+ <p>We work with third parties who provide services (such as companies that help us determine the number of users of Persona) and content delivery networks and other services of an administrative nature. We may share Personal Information and Potentially Personal Information about you with such third parties for the purpose of enabling these third parties to provide such services.</p>
<h5>Transfer of Data to the U.S.</h5>
- <p>Mozilla is a global organization and operates in different countries. Privacy laws and common practices vary from country to country. Some countries may provide for less legal protection of your personal data; others may provide more legal protection. By using the BrowserID Service, you consent to the transfer of the information collected, as outlined by this Policy, to Mozilla in the United States, which may provide a lesser level of data security than in your country of residence.</p>
+ <p>Mozilla is a global organization and operates in different countries. Privacy laws and common practices vary from country to country. Some countries may provide for less legal protection of your personal data; others may provide more legal protection. By using the Persona Service, you consent to the transfer of the information collected, as outlined by this Policy, to Mozilla in the United States, which may provide a lesser level of data security than in your country of residence.</p>
<h5>Data Retention</h5>
<p>We will retain any information collected for the period necessary to fulfill the purposes outlined in this Policy unless a longer retention period is required by law and/or regulations.</p>
<h5>Privacy Policy Changes</h5>
- <p>Mozilla may change this Privacy Policy from time to time. Each time you use the BrowserID Service the current version of this Privacy Policy will apply. Any and all changes will be reflected on this page. You should periodically check this page for any changes to the current policy. To make your review more convenient, we will post an effective date at the top of this page. Material changes will also be announced through the standard mechanisms through which Mozilla communicates with the Mozilla community. It is your responsibility to ensure that you understand the terms of this Privacy Policy.</p>
+ <p>Mozilla may change this Privacy Policy from time to time. Each time you use the Persona Service the current version of this Privacy Policy will apply. Any and all changes will be reflected on this page. You should periodically check this page for any changes to the current policy. To make your review more convenient, we will post an effective date at the top of this page. Material changes will also be announced through the standard mechanisms through which Mozilla communicates with the Mozilla community. It is your responsibility to ensure that you understand the terms of this Privacy Policy.</p>
<h5>What This Privacy Policy Doesn't Cover</h5>
- <p>This policy does not apply to other Mozilla websites, products, or services. It also does not apply to your use of third-party clients or use of non-Mozilla servers. If you choose to use a third-party BrowserID client or servers provided by an entity other than Mozilla, this policy does not apply and Mozilla assumes no liability whatsoever for such products or services.</p>
+ <p>This policy does not apply to other Mozilla websites, products, or services. It also does not apply to your use of third-party clients or use of non-Mozilla servers. If you choose to use a third-party Persona client or servers provided by an entity other than Mozilla, this policy does not apply and Mozilla assumes no liability whatsoever for such products or services.</p>
<h5>For More Information</h5>
<p>You may request access, correction, or deletion of Personal Information or Potentially Personal Information, as permitted by law. We will seek to comply with such requests, provided that we have sufficient information to identify the Personal Information or Potentially Personal Information related to you. Any such requests or other questions or concerns regarding this Policy and Mozilla's data protection practices should be addressed to:</p>
diff --git a/resources/views/signin.ejs b/resources/views/signin.ejs
index dd7baa90ef50d4ab7051d774a0f5aff37f97db2c..e9fa2170922d4c83219ab6451ff7d02e25c9f407 100644
--- a/resources/views/signin.ejs
+++ b/resources/views/signin.ejs
@@ -2,15 +2,13 @@
- 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>
+ <h1>Sign In</h1>
<ul class="notifications">
- <li class="notification error badlogin">Bad Login. Check your email and password.</li>
-
<li class="notification" id="unknown_secondary">
<strong id="unknown_email">Email</strong> is not registered.
Would you like to <a class="action" href="/signup">sign up</a> instead?
@@ -20,8 +18,8 @@
<ul class="inputs">
<li>
- <label class="serif" for="email">Email Address</label>
- <input class="sans" id="email" autofocus placeholder="Your Email" type="email" autocapitalize="off" autocorrect="off" tabindex="1" maxlength="254" />
+ <label for="email">Email Address</label>
+ <input id="email" autofocus placeholder="Your Email" type="email" autocapitalize="off" autocorrect="off" tabindex="1" maxlength="254" />
<div id="email_format" class="tooltip" for="email">
This field must be an email address.
@@ -36,20 +34,24 @@
<ul class="inputs password_entry">
<li class="password_section">
<a class="forgot right" href="/forgot" tabindex="4">forgot your password?</a>
- <label class="serif" for="password">Password</label>
- <input class="sans" id="password" placeholder="Your Password" type="password" tabindex="2" maxlength="80">
+ <label for="password">Password</label>
+ <input id="password" placeholder="Your Password" type="password" tabindex="2" maxlength="80">
<div id="password_required" class="tooltip" for="password">
The password field is required.
</div>
+
+ <div id="cannot_authenticate" class="tooltip" for="password">
+ The account cannot be logged in with this username and password.')
+
</li>
</ul>
<div class="submit cf forminputs">
+ <button tabindex="5">Sign In</button>
<div class="remember cf">
- <a class="action" href="/signup">New to BrowserID? Sign up today.</a>
+ <a class="action" href="/signup">New to Persona? Sign up today.</a>
</div>
- <button tabindex="5">Sign In</button>
</div>
<ul class="notifications">
@@ -69,6 +71,6 @@
</div>
<noscript>
- We're sorry, but to sign in to BrowserID, you must have Javascript enabled.
+ We're sorry, Persona requires that Javascript is enabled.
</noscript>
diff --git a/resources/views/signup.ejs b/resources/views/signup.ejs
index e700ed1d8af6ded303ab6c69509ca656863d85c5..dcf66e0702c932803c7ca991217b509a4e69323e 100644
--- a/resources/views/signup.ejs
+++ b/resources/views/signup.ejs
@@ -2,15 +2,13 @@
- 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>
+ <h1>Create Account</h1>
<ul class="notifications">
- <li class="notification error doh">Doh! Something went wrong :-( </li>
-
<li class="notification alreadyRegistered">
<strong id="registeredEmail"></strong> is already registered.
Would you like to <a class="action" href="/signin">sign in</a> instead?
@@ -35,8 +33,8 @@
<ul class="inputs forminputs">
<li>
- <label class="serif" for="email">Email Address</label>
- <input class="sans" id="email" autofocus placeholder="Your Email" type="email" autocapitalize="off" autocorrect="off" maxlength="254" />
+ <label for="email">Email Address</label>
+ <input id="email" autofocus placeholder="Your Email" type="email" autocapitalize="off" autocorrect="off" maxlength="254" />
<div id="email_format" class="tooltip" for="email">
This field must be an email address.
@@ -52,8 +50,8 @@
</li>
<li class="password_entry">
- <label class="serif" for="password">Password</label>
- <input class="sans" id="password" placeholder="Password" type="password" maxlength="80">
+ <label for="password">Password</label>
+ <input id="password" placeholder="Password" type="password" maxlength="80">
<div id="password_required" class="tooltip" for="password">
Password is required.
@@ -69,8 +67,8 @@
</li>
<li class="password_entry">
- <label class="serif" for="vpassword">Verify Password</label>
- <input class="sans" id="vpassword" placeholder="Repeat Password" type="password" maxlength="80">
+ <label for="vpassword">Verify Password</label>
+ <input id="vpassword" placeholder="Repeat Password" type="password" maxlength="80">
<div id="password_required" class="tooltip" for="vpassword">
Verification password is required.
@@ -84,10 +82,10 @@
</ul>
<div class="submit cf forminputs">
+ <button>Verify Email</button>
<div class="remember cf">
<a class="action" href="/signin" tabindex="2">Existing account? Sign in.</a>
</div>
- <button>Verify Email</button>
</div>
<ul class="notifications">
@@ -108,7 +106,7 @@
</form>
<div class="notification" id="congrats">
- <p class="serif">Thank you for signing up with <strong>BrowserID</strong>. You can now use your <strong>BrowserID</strong> account to <em>Sign In</em> or <em>Sign Up</em> to websites all across the web!
+ <p>Thank you for signing up with <strong>Persona</strong>. You can now use your Persona account to <em>Sign In</em> or <em>Sign Up</em> to websites all across the web!
</p>
</div>
@@ -116,7 +114,7 @@
</div>
<noscript>
- We're sorry, but to sign up for BrowserID, you must have Javascript enabled.
+ We're sorry, but to sign up for Persona, you must have Javascript enabled.
</noscript>
diff --git a/resources/views/test.ejs b/resources/views/test.ejs
index aed2e8431164468ec478572ecf4705d415b3e9d3..dd25eca2f3ca107c19d0fe0776a669ed16ec0e06 100644
--- a/resources/views/test.ejs
+++ b/resources/views/test.ejs
@@ -7,14 +7,14 @@
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="qunit/qunit.css" />
- <title>BrowserID QUnit Test</title>
+ <title>Persona QUnit Test</title>
<!--[if lt IE 9]>
<script src="/lib/html5shim.js"></script>
<![endif]-->
</head>
<body>
- <h1 id="qunit-header">BrowserID Test Suite</h1>
+ <h1 id="qunit-header">Persona Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
diff --git a/resources/views/tos.ejs b/resources/views/tos.ejs
index 9a5b35e419a3b0739b894d64a57d513a3f313e20..6a5e888b621186e9ee4c7dea26f5fb1d40427bc1 100644
--- a/resources/views/tos.ejs
+++ b/resources/views/tos.ejs
@@ -1,18 +1,18 @@
<div id="content" class="display_always">
<div id="legal">
- <h2>Terms of Service — Overview</h2>
+ <h1>Terms of Service — Overview</h1>
<ul>
<li>
- The BrowserID service allows a logged-in user to verify that he is the owner of a certain email address. Once the user has made this verification and uses that email address at websites utilizing the BrowserID service, the website can request that Mozilla confirm that the user has verified the email address exists and is owned by him.
+ The Persona service allows a logged-in user to verify that he is the owner of a certain email address. Once the user has made this verification and uses that email address at websites utilizing the Persona service, the website can request that Mozilla confirm that the user has verified the email address exists and is owned by him.
</li>
<li>
- The BrowserID service works with websites to confirm that a user has verified a certain email address and with email providers to make the initial user verification. These Terms of Service apply to both the websites and the email providers who use BrowserID.
+ The Persona service works with websites to confirm that a user has verified a certain email address and with email providers to make the initial user verification. These Terms of Service apply to both the websites and the email providers who use Persona.
</li>
<li>
- You are responsible for the third party software or APIs that you use or have developed to access the BrowserID Service. the BrowserID service are provided “as is†and there are no warranties of any kind.</li>
+ You are responsible for the third party software or APIs that you use or have developed to access the Persona Service. the Persona service are provided “as is†and there are no warranties of any kind.</li>
<li>
- There are significant limits on Mozilla’s liability for any damages arising from your use of the BrowserID service.
+ There are significant limits on Mozilla’s liability for any damages arising from your use of the Persona service.
</li>
</ul>
@@ -21,7 +21,7 @@
<h4>Acceptance</h4>
<p>
- These Terms of Service (“TOSâ€) govern your use of the BrowserID service (the “Servicesâ€). By accessing the materials and APIs necessary to use the Services, and by using the Services you are agreeing to abide by the terms and conditions described below.
+ These Terms of Service (“TOSâ€) govern your use of the Persona service (the “Servicesâ€). By accessing the materials and APIs necessary to use the Services, and by using the Services you are agreeing to abide by the terms and conditions described below.
</p>
<h4>Use of the Services as a Requesting Website or Email Provider</h4>
@@ -43,7 +43,7 @@
trade or resell the Services for any purpose, unless you have been specifically permitted to do so in writing by Mozilla, or
</li>
<li>
- access (or attempt to access) the Services by any means other than the BrowserID site itself (at browserid.org), official Mozilla-branded software (Firefox, Firefox for Mobile, and Firefox Home, referred to in this document as “Firefox Clientsâ€), or third party software that utilizes APIs authorized and provided by Mozilla (“Third Party Clientsâ€), unless you have been specifically allowed to do so in writing by Mozilla.
+ access (or attempt to access) the Services by any means other than the Persona site itself (at browserid.org), official Mozilla-branded software (Firefox, Firefox for Mobile, and Firefox Home, referred to in this document as “Firefox Clientsâ€), or third party software that utilizes APIs authorized and provided by Mozilla (“Third Party Clientsâ€), unless you have been specifically allowed to do so in writing by Mozilla.
</li>
</ul>
@@ -78,7 +78,7 @@
<h4>Updates to the Terms</h4>
- <p>Mozilla may update this TOS from time to time, for example to address a new feature of the Services or to clarify a provision. The updated TOS will be posted on the BrowserID site. If the changes are substantive, we will announce the update through Mozilla’s usual channels for such announcements such as blog posts and forums. Your continued use of the Services after the effective date of such changes constitutes your acceptance of such changes. To make your review more convenient, we will post an effective date at the top of this page. These terms may not be modified or cancelled without Mozilla’s written agreement.</p>
+ <p>Mozilla may update this TOS from time to time, for example to address a new feature of the Services or to clarify a provision. The updated TOS will be posted on the Persona site. If the changes are substantive, we will announce the update through Mozilla’s usual channels for such announcements such as blog posts and forums. Your continued use of the Services after the effective date of such changes constitutes your acceptance of such changes. To make your review more convenient, we will post an effective date at the top of this page. These terms may not be modified or cancelled without Mozilla’s written agreement.</p>
<h4>Disclaimer of Warranty</h4>
<p><b>The Services are provided “as is†with all faults. To the extent permitted by law, Mozilla, its distributors, contributors, and licensors hereby disclaim all warranties, whether express or implied, including without limitation warranties that the Services are free of defects, merchantable, fit for a particular purpose, and non-infringing. You bear the entire risk as to selecting the Services for your purposes and as to the quality and performance of the Services, including without limitation the risk that your User Data is deleted or corrupted or that someone else uses your username and password to access confirmations of your identity. This limitation will apply notwithstanding the failure of essential purpose of any remedy. Some jurisdictions do not allow the exclusion or limitation of implied warranties, so this disclaimer may not apply to you.</b></p>
diff --git a/resources/views/unsupported_dialog.ejs b/resources/views/unsupported_dialog.ejs
index fc39f468a3d4ce646b45065f0a7276fcfccfcd4a..549ba2ae2850d10845d4875f33ef78dd80725b11 100644
--- a/resources/views/unsupported_dialog.ejs
+++ b/resources/views/unsupported_dialog.ejs
@@ -13,7 +13,7 @@
</a>
<p>
- BrowserID works with <a href="http://getfirefox.com" target="_blank" title="Get Firefox">Firefox</a>
+ Persona works with <a href="http://getfirefox.com" target="_blank" title="Get Firefox">Firefox</a>
</p>
<p class="lighter">
diff --git a/resources/views/verify_email_address.ejs b/resources/views/verify_email_address.ejs
index 77f688b448d07e38570705fd6b9f3a25f17f2b17..cf38f704a28620bedf40bebb932813e7b812d07e 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>
@@ -11,17 +11,17 @@
<form id="signUpForm" class="cf">
<p class="hint siteinfo"><%= gettext('Finish signing into:') %> <strong><span class="website"></span></strong></p>
- <h1 class="serif"><%= gettext('Last step!') %></h1>
+ <h1><%= gettext('Last step!') %></h1>
<ul class="inputs">
<li>
- <label class="serif" for="email"><%= gettext('Email Address') %></label>
- <input class="youraddress sans" id="email" placeholder="<%= gettext('Your Email') %>" type="email" value="" disabled="disabled" maxlength="254" />
+ <label for="email"><%= gettext('Email Address') %></label>
+ <input class="youraddress" id="email" placeholder="<%= gettext('Your Email') %>" type="email" value="" disabled="disabled" maxlength="254" />
</li>
<li class="password_entry">
- <label class="serif" for="password"><%= gettext('Password') %></label>
- <input class="sans" id="password" placeholder="<%= gettext('Your Password') %>" type="password" autofocus maxlength=80 />
+ <label for="password"><%= gettext('Password') %></label>
+ <input id="password" placeholder="<%= gettext('Your Password') %>" type="password" autofocus maxlength=80 />
<div class="tooltip" id="password_required" for="password">
<%= gettext('Password is required.') %>
@@ -37,8 +37,8 @@
</li>
<li class="password_entry" id="verify_password">
- <label class="serif" for="vpassword"><%= gettext('Verify Password') %></label>
- <input class="sans" id="vpassword" placeholder="<%= gettext('Repeat Password') %>" type="password" maxlength="80">
+ <label for="vpassword"><%= gettext('Verify Password') %></label>
+ <input id="vpassword" placeholder="<%= gettext('Repeat Password') %>" type="password" maxlength="80">
<div id="vpassword_required" class="tooltip" for="vpassword">
<%= gettext('Verification password is required.') %>
@@ -58,10 +58,10 @@
</form>
<div id="congrats">
- <p class="serif"><%- gettext('Thank you for signing up with <strong>BrowserID</strong>. You can now use your <strong>BrowserID</strong> account to <em>Sign In</em> or <em>Sign Up</em> to websites all across the web!') %>
+ <p><%- gettext('Thank you for signing up with <strong>Persona</strong>. You can now use your Persona account to <em>Sign In</em> or <em>Sign Up</em> to websites all across the web!') %>
</p>
- <p class="serif siteinfo">
+ <p class="siteinfo">
<%= gettext('Your new address is set up and you should now be signed in. You may now close this window and go back to') %> <strong class="website"></strong>
</p>
</div>