diff --git a/resources/static/css/common.css b/resources/static/css/common.css
index 71242904f7072bf6bbc92ee5206405ab1c2660f6..6d7f0f91d27865aee5026f053275ac99e1227637 100644
--- a/resources/static/css/common.css
+++ b/resources/static/css/common.css
@@ -66,6 +66,7 @@ ul, li {
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));
@@ -154,6 +155,7 @@ button,
border-bottom: 1px solid #888;
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);
@@ -166,6 +168,7 @@ button:focus,
.button:hover,
.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);
@@ -176,6 +179,7 @@ button:focus,
button:active,
.button:active {
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);
@@ -195,12 +199,14 @@ button::-moz-focus-inner, .button::-moz-focus-inner {
.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;
+ background-repeat: no-repeat, no-repeat;
background-position: center right, center;
}
@@ -210,6 +216,8 @@ button::-moz-focus-inner, .button::-moz-focus-inner {
.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);
@@ -223,6 +231,7 @@ button[disabled], .submit_disabled button, .submit_disabled .button,
color: #d8dde0;
cursor: default;
background-color: #bcc4ca;
+ 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);
@@ -236,6 +245,7 @@ button[disabled], .submit_disabled button, .submit_disabled .button,
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);
@@ -248,6 +258,7 @@ 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);
@@ -257,12 +268,6 @@ button.negative:focus,
button.negative:active,
.button.negative:active {
- background-color: #ad1804;
- background-image: -webkit-linear-gradient(top, #ad1804, #911403);
- background-image: -moz-linear-gradient(top, #ad1804, #911403);
- background-image: -ms-linear-gradient(top, #ad1804, #911403);
- background-image: -o-linear-gradient(top, #ad1804, #911403);
- background-image: linear-gradient(top, #ad1804, #911403);
box-shadow: 0 0 5px #333 inset;
}
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/m.css b/resources/static/dialog/css/m.css
index 67070f4a9390dd3cabd26d798c9e420e27a6290d..6991dbe0296b5f6f2abce6bf2ee662a95e95aa98 100644
--- a/resources/static/dialog/css/m.css
+++ b/resources/static/dialog/css/m.css
@@ -23,7 +23,6 @@
display: none;
}
-
.inputs > li > label {
font-size: 18px;
margin-bottom: 10px;
@@ -164,13 +163,15 @@
}
a.emphasize {
- font-size: 16px;
- padding: 5px 15px;
+ font-size: 14px;
+ padding: 5px;
margin-top: 10px;
}
#your_computer_content li {
padding: 0 0 0 100px;
+ margin: 15px 0;
+ min-height: 40px;
}
diff --git a/resources/static/dialog/css/popup.css b/resources/static/dialog/css/popup.css
index 20545f5638d97ebc244aaa553c14f5fa0dd7e69f..d2e3dd9a7af453457318ead513a29ace81c583f1 100644
--- a/resources/static/dialog/css/popup.css
+++ b/resources/static/dialog/css/popup.css
@@ -6,6 +6,7 @@ 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));
@@ -385,6 +386,7 @@ a.emphasize {
display: inline-block;
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);
@@ -395,6 +397,7 @@ a.emphasize {
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);
@@ -403,12 +406,6 @@ a.emphasize:focus {
}
a.emphasize:active {
- background-color: #d8dbde;
- background-image: -webkit-linear-gradient(top, #d8dbde, #ccc);
- background-image: -moz-linear-gradient(top, #d8dbde, #ccc);
- background-image: -ms-linear-gradient(top, #d8dbde, #ccc);
- background-image: -o-linear-gradient(top, #d8dbde, #ccc);
- background-image: linear-gradient(top, #d8dbde, #ccc);
box-shadow: 0 0 5px #333 inset;
}
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();
}