Details
diff --git a/forms/src/main/java/org/keycloak/forms/TotpBean.java b/forms/src/main/java/org/keycloak/forms/TotpBean.java
index 4ae9cdd..9919ff4 100644
--- a/forms/src/main/java/org/keycloak/forms/TotpBean.java
+++ b/forms/src/main/java/org/keycloak/forms/TotpBean.java
@@ -78,7 +78,7 @@ public class TotpBean {
public String getTotpSecretQrCodeUrl() throws UnsupportedEncodingException {
String contents = URLEncoder.encode("otpauth://totp/keycloak?secret=" + totpSecretEncoded, "utf-8");
- return contextUrl + "/forms/qrcode" + "?size=200x200&contents=" + contents;
+ return contextUrl + "/forms/qrcode" + "?size=246x246&contents=" + contents;
}
public UserBean getUser() {
diff --git a/forms/src/main/java/org/keycloak/service/FormServiceImpl.java b/forms/src/main/java/org/keycloak/service/FormServiceImpl.java
index a892454..1df2436 100644
--- a/forms/src/main/java/org/keycloak/service/FormServiceImpl.java
+++ b/forms/src/main/java/org/keycloak/service/FormServiceImpl.java
@@ -132,7 +132,7 @@ public class FormServiceImpl implements FormService {
private class CommandSocial implements Command {
public void exec(Map<String, Object> attributes, FormServiceDataBean dataBean) {
RealmBean realm = new RealmBean(dataBean.getRealm());
-
+ attributes.put("user", new UserBean(dataBean.getUserModel()));
attributes.put("url", new UrlBean(realm, dataBean.getBaseURI()));
}
}
@@ -186,6 +186,7 @@ public class FormServiceImpl implements FormService {
RealmBean realm = new RealmBean(dataBean.getRealm());
attributes.put("realm", realm);
+ attributes.put("user", new UserBean(dataBean.getUserModel()));
attributes.put("url", new UrlBean(realm, dataBean.getBaseURI()));
}
}
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/access.ftl b/forms/src/main/resources/META-INF/resources/forms/theme/default/access.ftl
index a4b2413..8eff7d7 100755
--- a/forms/src/main/resources/META-INF/resources/forms/theme/default/access.ftl
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/access.ftl
@@ -1,5 +1,5 @@
<#import "template-main.ftl" as layout>
-<@layout.mainLayout ; section>
+<@layout.mainLayout active='access' bodyClass='access'; section>
<#if section = "header">
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/account.ftl b/forms/src/main/resources/META-INF/resources/forms/theme/default/account.ftl
index 252437b..f03d64a 100755
--- a/forms/src/main/resources/META-INF/resources/forms/theme/default/account.ftl
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/account.ftl
@@ -1,32 +1,36 @@
<#import "template-main.ftl" as layout>
-<@layout.mainLayout ; section>
+<@layout.mainLayout active='account' bodyClass='user'; section>
<#if section = "header">
Edit Account
<#elseif section = "content">
-
+ <p class="subtitle"><span class="required">*</span> Required fields</p>
<form action="${url.accountUrl}" method="post">
- <div>
- <label for="firstName">${rb.getString('firstName')}</label>
- <input type="text" id="firstName" name="firstName" value="${user.firstName?default('')}" />
- </div>
- <div>
- <label for="lastName">${rb.getString('lastName')}</label>
- <input type="text" id="lastName" name="lastName" value="${user.lastName?default('')}" />
- </div>
- <div>
- <label for="email">${rb.getString('email')}</label>
- <input type="text" id="email" name="email" value="${user.email?default('')}" />
+ <fieldset class="border-top">
+ <div class="form-group">
+ <label for="app-name">${rb.getString('username')}</label>
+ <input type="text" id="username" name="username" disabled="disabled" value="${user.username!''}"/>
+ </div>
+ <div class="form-group">
+ <label for="email">${rb.getString('email')}</label><span class="required">*</span>
+ <input type="email" id="email" name="email" autofocus value="${user.email!''}"/>
+ </div>
+ <div class="form-group">
+ <label for="last-name">${rb.getString('lastName')}</label><span class="required">*</span>
+ <input type="text" id="lastName" name="lastName" value="${user.lastName!''}"/>
+ </div>
+ <div class="form-group">
+ <label for="first-name">${rb.getString('firstName')}</label><span class="required">*</span>
+ <input type="text" id="firstName" name="firstName" value="${user.firstName!''}"/>
+ </div>
+ </fieldset>
+ <div class="form-actions">
+ <a href="#">« Back to my application</a>
+ <button type="submit" class="primary">Save</button>
+ <button type="submit">Cancel</button>
</div>
- <div>
- <label for="username">${rb.getString('username')}</label>
- <input type="text" id="username" name="username" value="${user.username?default('')}" disabled="true" />
- </div>
-
- <input type="button" value="Cancel" />
- <input type="submit" value="Save" />
</form>
</#if>
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/css/admin-console.css b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/admin-console.css
new file mode 100644
index 0000000..c363b3b
--- /dev/null
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/admin-console.css
@@ -0,0 +1,347 @@
+/* Commom elements */
+body {
+ background-color: #f9f9f9;
+ font-size: 1em;
+ color: #4d5258;
+ font-family: "Open Sans", sans-serif;
+}
+.feedback-aligner {
+ top: 0.9em;
+}
+.bs-sidebar {
+ background-color: #f9f9f9;
+ padding-top: 4.3em;
+ padding-right: 0;
+ padding-left: 0;
+ z-index: 20;
+}
+.bs-sidebar ul li {
+ margin-bottom: 0.5em;
+}
+.bs-sidebar ul li a {
+ font-size: 1.3em;
+ font-family: "Open Sans", sans-serif;
+ padding-left: 3em;
+ color: #4d5258;
+ line-height: 2.07692307692308em;
+ display: block;
+ border-width: 1px 0 1px 1px;
+ border-style: solid;
+ border-color: #f9f9f9;
+}
+.bs-sidebar ul li a:hover {
+ text-decoration: none;
+ color: #777777;
+}
+.bs-sidebar ul li.active a {
+ background-color: #c7e5f0;
+ border-color: #56bae0;
+ font-weight: bold;
+}
+#content-area {
+ padding: 0;
+ z-index: 10;
+ border-width: 0 1px;
+ border-color: #cecece;
+ border-style: solid;
+}
+#content-area .top-nav {
+ background-color: #f6f6f6;
+}
+#content-area .top-nav ul.rcue-tabs {
+ border-color: #cecece;
+ font-size: 1em;
+ margin-bottom: 0;
+}
+#content-area .top-nav ul.rcue-tabs li {
+ margin: 0 0.5em -1px 0;
+}
+#content-area .top-nav ul.rcue-tabs li a {
+ font-size: 1.3em;
+ line-height: 3.23076923076923em;
+ display: block;
+ padding: 0 0.76923076923077em;
+ color: #4d5258;
+}
+#content-area .top-nav ul.rcue-tabs li a:hover {
+ color: #777777;
+}
+#content-area .top-nav ul.rcue-tabs li.active a {
+ color: #0e9cd3;
+}
+#content-area .top-nav ul.rcue-tabs li:first-child {
+ margin-left: 1.5em;
+}
+#content-area #content {
+ padding: 1em 3em 3em 3em;
+ background: #fff;
+}
+#content-area #content h2 {
+ font-family: "Open Sans", sans-serif;
+ font-weight: 100;
+ font-size: 2.4em;
+ margin-bottom: 1.04166666666667em;
+}
+#content-area #content h2 span {
+ color: #a1a1a1;
+}
+#content-area #content p.subtitle {
+ color: #B7B7B7;
+ float: right;
+ font-size: 1.1em;
+ margin-top: 2.72727272727273em;
+}
+#content-area #content p.subtitle .required {
+ color: #CB2915;
+}
+#content-area #content p.subtitle + form {
+ clear: both;
+}
+#content-area #content fieldset {
+ margin-top: 1.5em;
+}
+#content-area #content .tooltip-box fieldset {
+ margin: 0;
+}
+#content-area #content .input-group {
+ display: inline-table;
+ width: 20em;
+}
+#content-area #content .input-group input[type="text"] {
+ border-radius: 2px 0 0 2px;
+}
+#content-area #content .input-group button {
+ border-radius: 0 2px 2px 0;
+ border-left: none;
+}
+#content-area #content .input-select {
+ height: 3.6em;
+}
+#content-area #content form a.bottom {
+ font-size: 1.1em;
+ display: inline-block;
+ margin-top: 1.36363636363636em;
+}
+.tooltip {
+ font-family: "Open Sans", sans-serif;
+ font-size: 1.1em;
+ text-align: left;
+ line-height: 1.63636363636364em;
+}
+.tooltip .tooltip.in {
+ opacity: 0.85;
+ filter: alpha(opacity=85);
+}
+.tooltip .tooltip-inner {
+ background-color: #434343;
+ border-radius: 1px;
+ padding: 5px 12px;
+ text-align: left;
+ max-width: 220px;
+}
+.tooltip.right {
+ padding: 0 8px;
+}
+.tooltip.right .tooltip-arrow {
+ border-right-color: #434343;
+ border-width: 8px 8px 8px 0;
+ margin-top: -8px;
+}
+#container-right-bg {
+ background-color: #fff;
+ border-width: 0 1px 0 1px;
+ border-style: solid;
+ border-color: #cecece;
+ bottom: 0;
+ margin-left: 292.5px;
+ position: fixed;
+ top: 70px;
+ width: 877.5px;
+}
+/* Page: Realm Users */
+.realm-users caption {
+ display: none;
+}
+table thead tr th {
+ font-size: 1.1em;
+}
+table thead tr th span {
+ font-size: 0.90909090909091em;
+}
+table thead tr th span button {
+ margin: 0;
+}
+table thead tr:first-child th {
+ padding: 5px 7px;
+}
+table a:hover {
+ color: #0099D3;
+}
+.advanced-search-comp {
+ position: relative;
+ display: inline-block;
+}
+.advanced-search-comp .advanced-search-link {
+ font-weight: normal;
+ margin-left: 1em;
+}
+.tooltip-box {
+ position: absolute;
+ font-size: 1em;
+ background-image: url("img/tooltip-box-arrow-right-up.svg");
+ background-position: right top;
+ background-repeat: no-repeat;
+ padding-top: 1em;
+ right: 0;
+ top: 1.5em;
+ font-size: 0.90909090909091em;
+}
+.tooltip-box fieldset {
+ width: 30.8em;
+ padding-left: 1.5em;
+ padding-right: 1.5em;
+ padding-top: .5em;
+ background-color: #fff;
+ border: 1px solid #b6b6b6;
+ border-top: none;
+ border-radius: 0 2px 2px 2px;
+ box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
+}
+.tooltip-box fieldset legend {
+ display: none;
+}
+.tooltip-box fieldset label {
+ width: 6em;
+}
+.tooltip-box fieldset .form-actions {
+ margin: 0;
+ padding: 1em 1.5em 1em 0;
+ background-color: #f8f8f8;
+ display: block;
+ float: none;
+ margin-right: -1.5em;
+ margin-left: -1.5em;
+}
+td.token-cell button {
+ margin-top: -1px;
+}
+/* Page: User Account */
+.user form fieldset div:first-child {
+ margin-top: 1em;
+}
+.user form fieldset p + div {
+ margin-top: 2.5em;
+}
+.user .bs-sidebar {
+ padding-top: 3.3em;
+}
+.user form p.info {
+ font-size: 1.1em;
+ margin-top: 0.45454545454545em;
+}
+table.list {
+ border-left: none;
+ border-right: none;
+ margin-top: 1.5em;
+}
+table.list caption {
+ display: none;
+}
+table.list tbody tr:first-child td {
+ border-top: 1px solid #dcdcdc;
+}
+table.list tbody tr:nth-child(2n) {
+ background-color: #fff;
+}
+table.list tbody tr td {
+ border-right: none;
+ border-left: none;
+}
+table.list tbody tr td.provider {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+table.list tbody tr td.soft {
+ color: #a1a1a1;
+}
+table.list tbody tr td.action {
+ text-align: right;
+ font-size: 1em;
+}
+/* Page: TOTP setup */
+.totp ol li {
+ margin-bottom: 2.5em;
+ margin-left: 2.4em;
+ width: 100%;
+}
+.totp ol li p {
+ font-size: 1.3em;
+ margin-bottom: 1.53846153846154em;
+}
+.totp ol li p strong {
+ text-indent: -1em;
+ float: left;
+ font-size: 1.84615384615385em;
+ font-weight: normal;
+ margin-top: -0.375em;
+ color: #999;
+}
+.totp ol li img {
+ width: 136px;
+}
+.totp ol li .code {
+ font-size: 1.3em;
+ margin-left: 1.53846153846154em;
+ vertical-align: bottom;
+}
+.totp ol li:last-child {
+ margin-bottom: 0;
+}
+.totp ol li .form-actions {
+ margin-right: 2.4em;
+}
+.totp ol li .form-actions input[type="button"],
+.totp ol li .form-actions button,
+.totp ol li .form-actions a.button {
+ font-size: 1.1em;
+}
+/* Break Points */
+@media (max-width: 1200px) {
+ #container-right-bg {
+ margin-left: 242.5px;
+ width: 727.5px;
+ }
+}
+@media (max-width: 992px) {
+ .bs-sidebar,
+ .user .bs-sidebar {
+ padding-top: 2em;
+ width: 100%;
+ }
+ .bs-sidebar ul li a,
+ .user .bs-sidebar ul li a {
+ border-width: 1px;
+ }
+ #content-area .top-nav {
+ border-top: 1px solid #cecece;
+ }
+ #container-right-bg {
+ margin-left: 0;
+ width: 750px;
+ }
+ .user #content-area #content {
+ border-top: 1px solid #cecece;
+ }
+}
+@media (max-width: 768px) {
+ .container {
+ min-width: 580px;
+ }
+ #content-area {
+ border: none;
+ }
+ #container-right-bg {
+ border: none;
+ width: 100%;
+ }
+}
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/css/base.css b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/base.css
index c75934f..f258d8f 100644
--- a/forms/src/main/resources/META-INF/resources/forms/theme/default/css/base.css
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/base.css
@@ -8,21 +8,16 @@
font-family: "Open Sans", sans-serif;
}
body {
- min-width: 120em;
height: 100%;
width: 100%;
font-family: "Open Sans", sans-serif;
}
-body {
- font-size: 62.5%;
-}
h1,
h2,
h3,
h4,
h5,
h6 {
- letter-spacing: -0.1em;
font-weight: normal;
font-family: "Overpass", sans-serif;
}
@@ -33,9 +28,25 @@ a {
a:hover {
text-decoration: underline;
}
+/* Styles from Gabriel */
strong {
font-weight: bold;
}
.hidden {
display: none;
}
+.feedback.show {
+ display: inline-block !important;
+}
+.pull-right {
+ float: right;
+}
+.block {
+ display: block;
+}
+a:focus {
+ outline: 0 none;
+}
+.clear-font-size {
+ font-size: 1em;
+}
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/css/forms.css b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/forms.css
index f8e4440..062012c 100644
--- a/forms/src/main/resources/META-INF/resources/forms/theme/default/css/forms.css
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/forms.css
@@ -1,13 +1,24 @@
fieldset {
border: none;
}
+fieldset.border-top {
+ border-color: #E9E8E8;
+ border-style: solid;
+ border-width: 1px 0 0;
+ padding-top: 2em;
+}
+*::-moz-placeholder,
+::-webkit-input-placeholder {
+ color: #838383;
+ font-style: italic;
+}
input[type="text"],
input[type="password"],
input[type="email"] {
font-size: 1.1em;
padding: 0 0.545454545454545em;
min-width: 18.1818181818182em;
- height: 2.18181818181818em;
+ height: 2.36363636363636em;
border: 1px #b6b6b6 solid;
border-radius: 2px;
box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
@@ -28,7 +39,6 @@ input[type="text"].error,
input[type="password"].error,
input[type="email"].error {
border-color: #ba1212;
- background-color: #f8e7e7;
transition: all 0.33s ease-in-out;
-moz-transition: all 0.33s ease-in-out;
-webkit-transition: all 0.33s ease-in-out;
@@ -39,7 +49,9 @@ input[type="email"].error:focus {
box-shadow: 0 0 5px #ba1212;
}
input[type="button"],
-input[type="submit"] {
+button,
+input[type="submit"],
+a.button {
font-size: 1.3em;
padding: 0.30769230769231em 1.07692307692308em;
border-width: 1px;
@@ -47,8 +59,12 @@ input[type="submit"] {
color: #fff;
font-weight: bold;
letter-spacing: 0.04em;
+ box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
}
-input[type="submit"] {
+input[type="button"].btn-primary,
+button.btn-primary,
+input[type="submit"].btn-primary,
+a.button.btn-primary {
background-image: linear-gradient(top, #00a9ec 0%, #009bd3 100%);
background-image: -o-linear-gradient(top, #00a9ec 0%, #009bd3 100%);
background-image: -moz-linear-gradient(top, #00a9ec 0%, #009bd3 100%);
@@ -58,29 +74,151 @@ input[type="submit"] {
border-color: #21799e;
border-style: solid;
}
-input[type="submit"]:hover,
-input[type="submit"]:focus {
+input[type="button"].btn-primary:hover,
+button.btn-primary:hover,
+a.button.btn-primary:hover,
+input[type="button"].btn-primary:focus,
+button.btn-primary:focus,
+a.button.btn-primary:focus {
background-color: #009BD3;
}
-input[type="submit"]:active {
+input[type="button"].btn-primary:active,
+button.btn-primary:active,
+a.button.btn-primary:active {
background-color: #0099d4;
}
+input[type="button"].disabled,
+button.disabled,
+a.button.disabled {
+ border-color: #cfcdcd;
+ color: #838383;
+ background-color: transparent;
+ background-image: none;
+ box-shadow: none;
+ font-weight: normal;
+ letter-spacing: 0.06363636363636em;
+}
+input[type="button"].disabled:hover,
+button.disabled:hover,
+a.button.disabled:hover {
+ cursor: default;
+}
+input[type="button"].disabled:active,
+button.disabled:active,
+a.button.disabled:active {
+ box-shadow: none;
+}
input[type="button"]:hover,
+button:hover,
+a.button:hover,
input[type="button"]:focus,
-input[type="submit"]:hover,
-input[type="submit"]:focus {
+button:focus,
+a.button:focus {
background-image: none;
cursor: pointer;
}
input[type="button"]:active,
-input[type="submit"]:active {
+button:active,
+a.button:active {
background-image: none;
cursor: pointer;
- box-shadow: inset 0 0 5px 3px #0074ae;
+ box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.25);
}
input[type="checkbox"] {
margin-right: 0.5em;
}
+/* Code from Hylke */
+button,
+a.button {
+ border-color: #21799e;
+ background-image: linear-gradient(top, #fafafa 0%, #ededed 100%);
+ background-image: -o-linear-gradient(top, #fafafa 0%, #ededed 100%);
+ background-image: -moz-linear-gradient(top, #fafafa 0%, #ededed 100%);
+ background-image: -webkit-linear-gradient(top, #fafafa 0%, #ededed 100%);
+ background-image: -ms-linear-gradient(top, #fafafa 0%, #ededed 100%);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(1, 0, #ededed));
+ color: #fff;
+ padding: 4px 14px;
+ border: 1px #bbb solid;
+ border-radius: 2px;
+ color: #4d5258;
+ font-weight: bold;
+ font-size: 1.1em;
+ letter-spacing: 0.4px;
+ cursor: pointer;
+ padding-top: 0;
+ padding-bottom: 0;
+ line-height: 2.18181818181818em;
+}
+input[type='submit'].primary,
+button.primary {
+ border-color: #21799e;
+ background-image: linear-gradient(top, #00a9ec 0%, #009bd3 100%);
+ background-image: -o-linear-gradient(top, #00a9ec 0%, #009bd3 100%);
+ background-image: -moz-linear-gradient(top, #00a9ec 0%, #009bd3 100%);
+ background-image: -webkit-linear-gradient(top, #00a9ec 0%, #009bd3 100%);
+ background-image: -ms-linear-gradient(top, #00a9ec 0%, #009bd3 100%);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00a9ec), color-stop(1, 0, #009bd3));
+ color: #fff;
+}
+button.primary:hover,
+button.primary:focus {
+ background-color: #009BD3;
+}
+button.primary:enabled:active {
+ background-color: #0099d4;
+ box-shadow: inset 0 0 5px 3px #0074ae;
+}
+/* Code from Gabriel */
+.rcue-login-register.register .two-fields input[type="text"] {
+ width: 121px;
+ min-width: 0;
+}
+.rcue-login-register.register .two-fields input + input {
+ margin-left: 10px;
+}
+.search-comp {
+ position: relative;
+ display: inline-block;
+ font-size: 0.90909090909091em;
+}
+.search-comp input[type="text"] {
+ padding-right: 2.45454545454545em;
+}
+.search-comp .icon-search {
+ position: absolute;
+ right: 0.2em;
+ top: 0.4em;
+ opacity: 0.5;
+}
+.search-comp .icon-search:hover {
+ opacity: 1;
+ -webkit-transition: ease-in-out opacity 0.25s;
+ -moz-transition: ease-in-out opacity 0.25s;
+ -o-transition: ease-in-out opacity 0.25s;
+ transition: ease-in-out opacity 0.25s;
+}
+.search-comp .icon-search + .tooltip {
+ width: 20em;
+ font-weight: normal;
+}
+.feedback-aligner {
+ position: absolute;
+ top: 1.5em;
+ text-align: center;
+ width: 100%;
+ height: 0;
+ z-index: 100;
+}
+.feedback-aligner .feedback {
+ position: relative;
+ display: inline-block;
+ text-align: left;
+ border-width: 1px;
+}
+.feedback-aligner .feedback p {
+ border-width: 1px;
+}
.feedback {
position: absolute;
opacity: 0;
@@ -88,28 +226,463 @@ input[type="checkbox"] {
-moz-transition: opacity 0.33s ease-in-out;
-webkit-transition: opacity 0.33s ease-in-out;
}
+.feedback p {
+ padding: 0.90909090909091em 3.63636363636364em;
+ border-style: solid;
+ border-width: 1px 1px 0px 1px;
+ background-repeat: no-repeat;
+ background-position: 1.27272727272727em center;
+ font-size: 1.1em;
+ line-height: 1.4em;
+ border-radius: 2px;
+ color: #4d5258;
+ margin-bottom: 0;
+}
.feedback.show {
opacity: 1;
}
-.feedback.error {
- background-image: url(img/feedback-error-arrow-down.svg);
+.feedback.bottom-left {
background-position: left bottom;
background-repeat: no-repeat;
padding-bottom: 1em;
}
+.feedback.bottom-left p {
+ background-position: 1.27272727272727em 1.63636363636364em;
+}
+.feedback.error {
+ background-image: url(img/feedback-error-arrow-down.svg);
+}
.feedback.error p {
border-color: #b91415;
background-image: url(img/feedback-error-sign.svg);
background-color: #f8e7e7;
- color: #4d5258;
}
-.feedback p {
- padding: 1em 3.63636363636364em;
+.feedback.success {
+ background-image: url(img/feedback-success-arrow-down.svg);
+}
+.feedback.success p {
+ border-color: #4b9e39;
+ background-image: url(img/feedback-success-sign.svg);
+ background-color: #e4f1e1;
+}
+.feedback.warning p {
+ border-color: #f17528;
+ background-image: url(img/feedback-warning-sign.svg);
+ background-color: #fef1e9;
+}
+button,
+a.button {
+ background-color: #eeeeee;
+}
+a.button {
+ display: inline-block;
+}
+a.button:hover {
+ color: #4D5258;
+ text-decoration: none;
+}
+button[class^="icon-"] {
+ border: none;
+ box-shadow: none;
+ background-color: transparent;
+ padding: 0;
+ line-height: 1em;
+}
+button[class^="icon-"]:hover {
+ background-image: url(img/sprites.png);
+}
+legend {
+ font-size: 1em;
+ border-width: 1px 0 0 0;
border-style: solid;
- border-width: 1px 1px 0px 1px;
+ border-color: #e9e8e8;
+ padding-top: 2em;
+ display: block;
+ margin-bottom: 0;
+ padding-bottom: 0.8em;
+ cursor: pointer;
+}
+legend .icon-collapse {
+ vertical-align: baseline;
+}
+legend .text {
+ font-weight: bold;
+ font-size: 1.25em;
+}
+legend .icon-info {
+ background-image: url(img/sprites-gray.png);
+ margin-left: 1em;
+ vertical-align: baseline;
+}
+legend .icon-info:hover {
+ background-image: url(img/sprites.png);
+}
+.form-group {
+ display: block;
+ margin-bottom: 1em;
+ position: relative;
+}
+.form-group > label {
+ font-size: 1.1em;
+ font-weight: 300;
+ width: 10em;
+ margin-right: 0.90909090909091em;
+ margin-bottom: 0;
+ float: left;
+ margin-top: 0.45454545454545em;
+}
+.form-group > label.two-lines {
+ margin-top: -2px;
+}
+.form-group > label + span {
+ font-size: 1.1em;
+ display: inline-block;
+ margin-top: 0.454545454545455em;
+}
+.form-group > label + .onoffswitch {
+ float: left;
+}
+.form-group > label.pull-left {
+ margin-top: 4px;
+}
+.form-group .required {
+ position: absolute;
+ left: 10em;
+ font-size: 1.1em;
+ color: #CB2915;
+}
+legend + .form-group {
+ padding-top: 1em;
+}
+legend + table {
+ margin-top: 1em;
+}
+.code {
+ font-family: Courier, monospace;
+}
+.onoffswitch {
+ -moz-user-select: none;
+ height: 26px;
+ position: relative;
+ width: 62px;
+}
+.onoffswitch .onoffswitch-checkbox {
+ display: none;
+}
+.onoffswitch .onoffswitch-label {
+ border: 1px solid #bbb;
+ border-radius: 2px;
+ cursor: pointer;
+ display: block;
+ overflow: hidden;
+ width: 62px;
+}
+.onoffswitch .onoffswitch-inner {
+ display: block;
+ margin-left: -100%;
+ transition: margin 0.3s ease-in 0s;
+ width: 200%;
+}
+.onoffswitch .onoffswitch-inner > span {
+ -moz-box-sizing: border-box;
+ color: white;
+ float: left;
+ font-size: 11px;
+ font-family: "Open Sans", sans-serif;
+ font-weight: bold;
+ height: 24px;
+ line-height: 24px;
+ padding: 0;
+ width: 50%;
+}
+.onoffswitch .onoffswitch-switch {
+ background-image: linear-gradient(top, #fafafa 0%, #ededed 100%);
+ background-image: -o-linear-gradient(top, #fafafa 0%, #ededed 100%);
+ background-image: -moz-linear-gradient(top, #fafafa 0%, #ededed 100%);
+ background-image: -webkit-linear-gradient(top, #fafafa 0%, #ededed 100%);
+ background-image: -ms-linear-gradient(top, #fafafa 0%, #ededed 100%);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(1, 0, #ededed));
+ border: 1px solid #aaa;
+ border-radius: 2px;
+ bottom: 0;
+ margin: 0;
+ position: absolute;
+ right: 39px;
+ top: 0;
+ transition: all 0.3s ease-in 0s;
+ -webkit-transition: all 0.3s ease-in 0s;
+ width: 23px;
+}
+.onoffswitch .onoffswitch-inner .onoffswitch-active {
+ background-image: linear-gradient(top, #00a9ec 0%, #009bd3 100%);
+ background-image: -o-linear-gradient(top, #00a9ec 0%, #009bd3 100%);
+ background-image: -moz-linear-gradient(top, #00a9ec 0%, #009bd3 100%);
+ background-image: -webkit-linear-gradient(top, #00a9ec 0%, #009bd3 100%);
+ background-image: -ms-linear-gradient(top, #00a9ec 0%, #009bd3 100%);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00a9ec), color-stop(1, 0, #009bd3));
+ color: #FFFFFF;
+ padding-left: 10px;
+}
+.onoffswitch .onoffswitch-inner .onoffswitch-inactive {
+ background: linear-gradient(#fefefe, #e8e8e8) repeat scroll 0 0 transparent;
+ color: #4d5258;
+ padding-right: 10px;
+ text-align: right;
+}
+.onoffswitch .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
+ margin-left: 0;
+}
+.onoffswitch .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
+ right: 0;
+}
+input[type="text"].tiny,
+input[type="password"].tiny,
+input[type="email"].tiny {
+ min-width: 40px;
+ width: 40px;
+}
+.select-rcue,
+.select2-container .select2-choice {
+ height: 26px;
+ border: 1px #b6b6b6 solid;
+ border-radius: 2px;
+ box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
+ color: #333;
+ background: #ffffff url(img/select-arrow.png) no-repeat right center;
+ overflow: hidden;
+ min-width: 75px;
+ padding: 0 0.9em 0 0;
+ display: inline-block;
+ font-family: "Open Sans", sans-serif;
+}
+.select-rcue:hover {
+ border-color: #62afdb;
+}
+.select-rcue:focus {
+ border-color: #62afdb;
+ box-shadow: #62afdb 0 0 5px;
+}
+.select-rcue.error {
+ border-color: #ba1212;
+ background-color: #f8e7e7;
+ transition: all 0.33s ease-in-out;
+ -moz-transition: all 0.33s ease-in-out;
+ -webkit-transition: all 0.33s ease-in-out;
+}
+.select-rcue.error:focus {
+ box-shadow: 0 0 5px #ba1212;
+}
+.select-rcue select {
+ height: 30px;
+ line-height: 30px;
+ margin-top: -2px;
+ margin-left: -2px;
+ font-size: 1.1em;
+ padding: 5px 0.545454545454545em;
+ background-color: transparent;
+ border: none;
+ width: 150%;
+ font-family: "Open Sans", sans-serif;
+}
+.select-rcue option {
+ line-height: 2em;
+ padding-left: 0.90909090909091em;
+}
+.select-rcue option:hover {
+ background-color: #d5ecf9;
+}
+.select2-container {
+ float: left;
+ margin-top: 0.3em;
+ margin-bottom: 0.3em;
+}
+.select2-container .select2-choice > .select2-chosen {
+ line-height: 2.1em;
+ padding-left: 0.90909090909091em;
+ margin-right: 0;
+ font-size: 1.1em;
+ padding-right: 2.36363636363636em;
+ padding-right: 26px;
+}
+.select2-container .select2-choice .select2-arrow {
+ display: none;
+}
+.select2-dropdown-open {
+ background-color: #fff;
+}
+.select2-dropdown-open .select2-choice,
+.select2-dropdown-open .select2-choices {
+ border-bottom: none;
+ border-radius: 2px 2px 0 0;
+ background-image: url(img/chosen-arrow-down.png);
+ background-color: transparent;
background-repeat: no-repeat;
- background-position: 1.27272727272727em 1.63636363636364em;
+ background-position: right top;
+ box-shadow: none;
+}
+.select2-dropdown-open .select2-choice,
+.select2-dropdown-open.select2-drop-above .select2-choice,
+.select2-dropdown-open .select2-choices,
+.select2-dropdown-open.select2-drop-above .select2-choices {
+ border-color: #62AFDB;
+}
+.select2-search input {
+ min-width: 0;
+}
+.select2-drop-active {
+ border-radius: 0 0 2px 2px;
+ margin-top: -1px;
+ padding-top: 4px;
+}
+.select2-container.select2-drop-above .select2-choice {
+ border-radius: 0 0 2px 2px;
+ background-image: url(img/chosen-arrow-up.png);
+ background-repeat: no-repeat;
+ background-position: right 0;
+ box-shadow: none;
+}
+.select2-drop.select2-drop-above {
+ border-radius: 2px 2px 0 0;
+ padding-top: 0;
+ margin-top: 2px;
+}
+.select2-drop.select2-drop-above.select2-drop-active,
+.select2-drop-active {
+ border-color: #62AFDB;
+}
+.select2-results {
+ padding-left: 0;
+ margin-right: 0;
+}
+.select2-results li {
+ border-top: 1px solid transparent;
+ border-bottom: 1px solid transparent;
+}
+.select2-results .select2-result-label,
+.select2-results .select2-no-results,
+.select2-results .select2-searching,
+.select2-results .select2-selection-limit {
font-size: 1.1em;
- line-height: 1.27272727272727em;
+ padding-left: 1.09090909090909em;
+}
+.select2-results .select2-no-results,
+.select2-results .select2-searching,
+.select2-results .select2-selection-limit {
+ color: #838383;
+ padding-top: 3px;
+ padding-bottom: 4px;
+}
+.select2-results .select2-highlighted {
+ background-color: #d5ecf9;
+ border-top: 1px solid #a7d7f1;
+ border-bottom: 1px solid #a7d7f1;
+ color: #4d5258;
+}
+.input-group input + .select-rcue {
+ border-radius: 0 2px 2px 0;
+ border-left: 0;
+ display: inline-block;
+}
+.input-select .input-group input {
+ float: left;
+}
+.tokenfield.form-control {
+ width: 40em;
+ float: left;
+ min-height: 2.6em;
+ border: 1px #b6b6b6 solid;
border-radius: 2px;
+ box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
+ padding: 0 0.7em;
+ margin-bottom: 0;
+ font-size: 1em;
+ height: auto;
+ outline: 0 none;
+}
+.tokenfield.form-control .token {
+ display: inline-block;
+ background-color: #d4ecf8;
+ border: 1px solid #a3d7f0;
+ border-radius: 1px;
+ padding: 0 0.3em 0 0.7em;
+ margin-right: 0.7em;
+ margin-top: 0.3em;
+ margin-bottom: 0.3em;
+ outline: 0 none;
+}
+.tokenfield.form-control .token span {
+ float: left;
+ font-size: 1.1em;
+ line-height: 1.45454545454545em;
+}
+.tokenfield.form-control .token .close {
+ text-indent: -9999999em;
+ width: 1.6em;
+ height: 1.6em;
+ line-height: 1.6em;
+ background: url(img/btn-close-blue.png) no-repeat center center;
+ margin-left: 0.3em;
+ padding: 0;
+ border: none;
+ font-size: 1em;
+ opacity: 1;
+}
+.tokenfield.form-control input {
+ padding: 0;
+ border: none;
+ font-size: 1.1em;
+ line-height: 1.63636363636364em;
+ height: 1.63636363636364em;
+ margin: 0.272727272727273em 0;
+ box-shadow: none;
+ outline: 0 none;
+ float: left;
+}
+.tokenfield.form-control:hover {
+ border-color: #62afdb;
+}
+.tokenfield.form-control:focus {
+ border-color: #62afdb;
+ box-shadow: #62afdb 0 0 5px;
+}
+.token {
+ float: left;
+ background-color: #d4ecf8;
+ border: 1px solid #a3d7f0;
+ border-radius: 1px;
+ padding: 0 0.3em 0 0.7em;
+ margin-right: 0.7em;
+ margin-top: 0.3em;
+ margin-bottom: 0.3em;
+ outline: 0 none;
+}
+.token span {
+ float: left;
+ font-size: 1.1em;
+ line-height: 1.45454545454545em;
+}
+.token .close {
+ text-indent: -9999999em;
+ width: 1.6em;
+ height: 1.6em;
+ line-height: 1.6em;
+ background: url(img/btn-close-blue.png) no-repeat center center;
+ margin-left: 0.3em;
+ padding: 0;
+ border: none;
+ font-size: 1em;
+ opacity: 1;
+}
+.form-actions {
+ float: right;
+ margin-top: 3em;
+ margin-bottom: 5em;
+}
+.form-actions .primary {
+ float: right;
+ margin-left: 0.90909090909091em;
+}
+.form-actions a {
+ font-size: 1.1em;
+ margin-right: 0.90909090909091em;
}
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/css/header.css b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/header.css
new file mode 100644
index 0000000..c3b1bd7
--- /dev/null
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/header.css
@@ -0,0 +1,543 @@
+@font-face {
+ font-family: 'OpenSansLight';
+ font-style: normal;
+ font-weight: normal;
+ src: url('../font/OpenSans-Light-webfont.eot');
+ src: url('../font/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), url('../font/OpenSans-Light-webfont.woff') format('woff'), url('../font/OpenSans-Light-webfont.ttf') format('truetype'), url('../font/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
+}
+@font-face {
+ font-family: 'OpenSansRegular';
+ font-style: normal;
+ font-weight: normal;
+ src: url('../font/OpenSans-Regular-webfont.eot');
+ src: url('../font/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../font/OpenSans-Regular-webfont.woff') format('woff'), url('../font/OpenSans-Regular-webfont.ttf') format('truetype'), url('../font/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
+}
+@font-face {
+ font-family: 'OpenSansSemibold';
+ font-style: normal;
+ font-weight: normal;
+ src: url('../font/OpenSans-Semibold-webfont.eot');
+ src: url('../font/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'), url('../font/OpenSans-Semibold-webfont.woff') format('woff'), url('../font/OpenSans-Semibold-webfont.ttf') format('truetype'), url('../font/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
+}
+@font-face {
+ font-family: 'OpenSansBold';
+ font-style: normal;
+ font-weight: normal;
+ src: url('../font/OpenSans-Bold-webfont.eot');
+ src: url('../font/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('../font/OpenSans-Bold-webfont.woff') format('woff'), url('../font/OpenSans-Bold-webfont.ttf') format('truetype'), url('../font/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
+}
+@font-face {
+ font-family: 'OpenSansExtrabold';
+ font-style: normal;
+ font-weight: normal;
+ src: url('../font/OpenSans-ExtraBold-webfont.eot');
+ src: url('../font/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), url('../font/OpenSans-ExtraBold-webfont.woff') format('woff'), url('../font/OpenSans-ExtraBold-webfont.ttf') format('truetype'), url('../font/OpenSans-ExtraBold-webfont.svg#OpenSansExtrabold') format('svg');
+}
+body {
+ font-family: OpenSansRegular, Arial, Helvetica, sans-serif;
+}
+.header.rcue {
+ border-top: 3px solid #c00;
+ position: relative;
+}
+.header.rcue .brand {
+ color: #fff;
+ padding: 7px 0;
+ margin: 0 0 0 20px;
+ text-shadow: none;
+}
+.ie8 .header.rcue .brand {
+ background: url(../img/brand.png) no-repeat 0 50%;
+ min-width: 300px;
+}
+.header.rcue .brand img {
+ display: block;
+ font-size: 11px;
+}
+.ie8 .header.rcue .brand img {
+ height: 10px;
+ width: 0;
+}
+.header.rcue .navbar {
+ margin-bottom: 0;
+}
+.header.rcue .navbar.primary {
+ font-size: 13px;
+}
+.header.rcue .navbar.primary.persistent-secondary .nav {
+ position: static;
+}
+.header.rcue .navbar.primary.persistent-secondary .nav .dropup .dropdown-menu {
+ bottom: 0;
+ top: auto;
+}
+.header.rcue .navbar.primary.persistent-secondary .nav > li.active {
+ margin-bottom: 32px;
+}
+.header.rcue .navbar.primary.persistent-secondary .nav > li.active > .persistent {
+ display: block;
+}
+.header.rcue .navbar.primary.persistent-secondary .nav > li > a {
+ position: static;
+}
+.header.rcue .navbar.primary.persistent-secondary .nav > li > .persistent {
+ background: #f6f6f6;
+ border-bottom: 1px solid #cecdcd;
+ display: none;
+ float: left;
+ left: 0;
+ margin: 0;
+ position: absolute;
+ width: 100%;
+}
+.header.rcue .navbar.primary.persistent-secondary .nav > li > .persistent a {
+ text-decoration: none !important;
+}
+.header.rcue .navbar.primary.persistent-secondary .nav > li > .persistent > .dropdown-submenu.active > a:after {
+ border-top-color: #0080af !important;
+}
+.header.rcue .navbar.primary.persistent-secondary .nav > li > .persistent > .dropdown-submenu:hover > .dropdown-menu {
+ display: none;
+}
+.header.rcue .navbar.primary.persistent-secondary .nav > li > .persistent > .dropdown-submenu.open:before {
+ background: #aaa;
+ bottom: -1px;
+ content: '';
+ display: block;
+ height: 2px;
+ left: 20px;
+ position: absolute;
+ right: 3px;
+ z-index: 1;
+}
+.header.rcue .navbar.primary.persistent-secondary .nav > li > .persistent > .dropdown-submenu.open:hover > .dropdown-menu {
+ display: block;
+}
+.header.rcue .navbar.primary.persistent-secondary .nav > li > .persistent > .dropdown-submenu.open > a {
+ color: #222222;
+}
+.header.rcue .navbar.primary.persistent-secondary .nav > li > .persistent > .dropdown-submenu.open > a:after {
+ border-top-color: #222222;
+}
+.header.rcue .navbar.primary.persistent-secondary .nav > li > .persistent > .dropdown-submenu > a:after {
+ border-left-color: transparent;
+ border-top-color: #4d5258;
+ border-width: 5px 5px 0 5px;
+ margin-right: -17px;
+ margin-top: 4px;
+ opacity: 0.8;
+}
+.header.rcue .navbar.primary.persistent-secondary .nav > li > .persistent > .dropdown-submenu > a:before {
+ background: transparent!important;
+ border-color: #f6f6f6 transparent transparent transparent;
+ border-style: solid;
+ border-width: 5px 5px 0 5px;
+ content: '';
+ display: block;
+ float: right;
+ height: 0;
+ margin-right: -17px;
+ margin-top: 2px;
+ position: relative;
+ right: 0;
+ width: 0;
+ z-index: 2;
+}
+.header.rcue .navbar.primary.persistent-secondary .nav > li > .persistent > .dropdown-submenu > .dropdown-menu {
+ border-top-color: transparent;
+ left: 21px;
+ top: 100%;
+}
+.ie8 .header.rcue .navbar.primary.persistent-secondary .nav > li > .persistent > .dropdown-submenu > .dropdown-menu {
+ margin-top: 1px;
+}
+.header.rcue .navbar.primary.persistent-secondary .nav > li > .persistent > li {
+ float: left;
+ list-style: none;
+ position: relative;
+ white-space: nowrap;
+}
+.header.rcue .navbar.primary.persistent-secondary .nav > li > .persistent > li.active:before,
+.header.rcue .navbar.primary.persistent-secondary .nav > li > .persistent > li.active:hover:before {
+ background: #409cd3!important;
+ bottom: -1px;
+ content: '';
+ display: block;
+ height: 2px;
+ left: 20px;
+ position: absolute;
+ right: 20px;
+ z-index: 1;
+}
+.header.rcue .navbar.primary.persistent-secondary .nav > li > .persistent > li.active.dropdown-submenu:before {
+ right: 3px;
+}
+.header.rcue .navbar.primary.persistent-secondary .nav > li > .persistent > li.active > a,
+.header.rcue .navbar.primary.persistent-secondary .nav > li > .persistent > li.active > a:hover,
+.header.rcue .navbar.primary.persistent-secondary .nav > li > .persistent > li.active:hover > a {
+ color: #0092c7 !important;
+}
+.header.rcue .navbar.primary.persistent-secondary .nav > li > .persistent > li.active .active > a {
+ color: #ffffff;
+}
+.header.rcue .navbar.primary.persistent-secondary .nav > li > .persistent > li:hover:before {
+ background: #aaa;
+ bottom: -1px;
+ content: '';
+ display: block;
+ height: 2px;
+ left: 20px;
+ position: absolute;
+ right: 20px;
+ z-index: 1;
+}
+.header.rcue .navbar.primary.persistent-secondary .nav > li > .persistent > li:hover.dropdown-submenu:before {
+ right: 3px;
+}
+.header.rcue .navbar.primary.persistent-secondary .nav > li > .persistent > li:hover > a {
+ color: #222222;
+}
+.header.rcue .navbar.primary.persistent-secondary .nav > li > .persistent > li:hover > a:after {
+ border-top-color: #222222;
+}
+.header.rcue .navbar.primary.persistent-secondary .nav > li > .persistent > li a {
+ color: #4d5258;
+ font-size: 12px;
+}
+.header.rcue .navbar.primary.persistent-secondary .nav > li > .persistent > li a:hover {
+ color: #ffffff;
+}
+.header.rcue .navbar.primary.persistent-secondary .nav > li > .persistent > li > a {
+ background-color: transparent!important;
+ background-image: none!important;
+ display: block;
+ line-height: 1;
+ padding: 10px 20px 9px;
+ filter: none !important;
+}
+.header.rcue .navbar.primary.persistent-secondary .nav > li > .persistent > li > a:hover {
+ color: #222222;
+}
+.header.rcue .navbar.primary.persistent-secondary .nav > li > .persistent > li li:hover > a {
+ color: #ffffff;
+}
+.header.rcue .navbar.primary .nav > li > a {
+ border-bottom: 1px solid transparent;
+ border-top: 1px solid transparent;
+ position: relative;
+ margin: -1px 0 0;
+ z-index: 1;
+}
+.header.rcue .navbar.primary .nav > li > a:hover {
+ background-color: #53595d;
+ background-image: -moz-linear-gradient(top, #5c6165, #4b5053);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5c6165), to(#4b5053));
+ background-image: -webkit-linear-gradient(top, #5c6165, #4b5053);
+ background-image: -o-linear-gradient(top, #5c6165, #4b5053);
+ background-image: linear-gradient(to bottom, #5c6165, #4b5053);
+ background-repeat: repeat-x;
+ border-top-color: #949699;
+}
+.header.rcue .navbar.primary .nav > li > a:hover.dropdown-toggle .caret:after {
+ border-top-color: #53595d;
+}
+.header.rcue .navbar.primary .nav > .active > a,
+.header.rcue .navbar.primary .nav > .active > a:hover,
+.header.rcue .navbar.primary .nav > .active > a:focus,
+.header.rcue .navbar.primary .nav > .open > a,
+.header.rcue .navbar.primary .nav > .open > a:hover,
+.header.rcue .navbar.primary .nav > .open > a:focus {
+ background-color: #6b6f74;
+ background-image: -moz-linear-gradient(top, #72757a, #64686c);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#72757a), to(#64686c));
+ background-image: -webkit-linear-gradient(top, #72757a, #64686c);
+ background-image: -o-linear-gradient(top, #72757a, #64686c);
+ background-image: linear-gradient(to bottom, #72757a, #64686c);
+ border-top-color: #949699;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+ color: #ffffff;
+}
+.header.rcue .navbar.primary .nav > .active > a.dropdown-toggle .caret:after,
+.header.rcue .navbar.primary .nav > .active > a:hover.dropdown-toggle .caret:after,
+.header.rcue .navbar.primary .nav > .active > a:focus.dropdown-toggle .caret:after,
+.header.rcue .navbar.primary .nav > .open > a.dropdown-toggle .caret:after,
+.header.rcue .navbar.primary .nav > .open > a:hover.dropdown-toggle .caret:after,
+.header.rcue .navbar.primary .nav > .open > a:focus.dropdown-toggle .caret:after {
+ border-top-color: #6b6f74;
+}
+.header.rcue .navbar.primary .nav li.dropdown.context > a {
+ background-color: #54595d;
+ background-image: -moz-linear-gradient(top, #585d61, #505458);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#585d61), to(#505458));
+ background-image: -webkit-linear-gradient(top, #585d61, #505458);
+ background-image: -o-linear-gradient(top, #585d61, #505458);
+ background-image: linear-gradient(to bottom, #585d61, #505458);
+ border-bottom-color: #65696d;
+ border-right: 1px solid #65696d;
+ border-top-color: #64696d;
+ font-family: OpenSansSemiBold, Arial, Helvetica, sans-serif;
+ z-index: 0;
+}
+.header.rcue .navbar.primary .nav li.dropdown.context > a.dropdown-toggle .caret:after {
+ border-top-color: #54595d;
+}
+.header.rcue .navbar.primary .nav li.dropdown.context > a:hover {
+ background-color: #5e6367;
+ background-image: -moz-linear-gradient(top, #62676b, #5a5e62);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62676b), to(#5a5e62));
+ background-image: -webkit-linear-gradient(top, #62676b, #5a5e62);
+ background-image: -o-linear-gradient(top, #62676b, #5a5e62);
+ background-image: linear-gradient(to bottom, #62676b, #5a5e62);
+ border-bottom-color: #6e7276;
+ border-right-color: #6e7276;
+ border-top-color: #6c7276;
+}
+.header.rcue .navbar.primary .nav li.dropdown.context > a:hover.dropdown-toggle .caret:after {
+ border-top-color: #5e6367;
+}
+.header.rcue .navbar.primary .nav li.dropdown.context.open > a {
+ background-color: #686e72;
+ background-image: -moz-linear-gradient(top, #6b7175, #65696d);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6b7175), to(#65696d));
+ background-image: -webkit-linear-gradient(top, #6b7175, #65696d);
+ background-image: -o-linear-gradient(top, #6b7175, #65696d);
+ background-image: linear-gradient(to bottom, #6b7175, #65696d);
+ border-bottom-color: #6e7276;
+ border-right-color: #777a7e;
+ border-top-color: #767a7e;
+}
+.header.rcue .navbar.primary .nav li.dropdown.context.open > a.dropdown-toggle .caret:after {
+ border-top-color: #686e72;
+}
+.header.rcue .navbar.utility {
+ font-size: 11px;
+ line-height: 1;
+}
+.header.rcue .navbar.utility .nav > .active > a,
+.header.rcue .navbar.utility .nav > .active > a:hover,
+.header.rcue .navbar.utility .nav > .active > a:focus,
+.header.rcue .navbar.utility .nav > .open > a,
+.header.rcue .navbar.utility .nav > .open > a:hover,
+.header.rcue .navbar.utility .nav > .open > a:focus {
+ background: #5b6165;
+ color: #ffffff;
+}
+.header.rcue .navbar.utility .nav > .active > a.dropdown-toggle .caret:after,
+.header.rcue .navbar.utility .nav > .active > a:hover.dropdown-toggle .caret:after,
+.header.rcue .navbar.utility .nav > .active > a:focus.dropdown-toggle .caret:after,
+.header.rcue .navbar.utility .nav > .open > a.dropdown-toggle .caret:after,
+.header.rcue .navbar.utility .nav > .open > a:hover.dropdown-toggle .caret:after,
+.header.rcue .navbar.utility .nav > .open > a:focus.dropdown-toggle .caret:after {
+ border-top-color: #5b6165;
+}
+.header.rcue .navbar.utility .nav > li > a {
+ border-left: 1px solid #53565b;
+ color: #fff;
+ padding: 7px 10px;
+}
+.header.rcue .navbar.utility .nav > li > a:hover {
+ background: #4a5053;
+ border-left-color: #636466;
+}
+.header.rcue .navbar.utility .nav > li.open > a {
+ border-left-color: #6c6e70;
+}
+.header.rcue .navbar.utility .nav li.dropdown.open > .dropdown-toggle .caret:after,
+.header.rcue .navbar.utility .nav li.dropdown.open > .dropdown-toggle:hover .caret:after {
+ border-top-color: #5b6165;
+}
+.header.rcue .navbar.utility .nav li.dropdown > .dropdown-toggle:hover .caret:after {
+ border-top-color: #4a5053;
+}
+.header.rcue .navbar.utility .nav li.dropdown > .dropdown-toggle .caret {
+ border-bottom-color: #fff;
+ border-top-color: #fff;
+ border-width: 4px;
+}
+.header.rcue .navbar.utility .nav li.dropdown > .dropdown-toggle .caret:after {
+ border-top-color: #393f45;
+}
+/* .header.rcue .navbar.utility .nav li.dropdown>.dropdown-toggle .icon-user{background:url(../img/icon-user.svg) no-repeat;background-size:100%;display:block;float:left;margin:0 5px 0 0;height:11px;width:11px} */.ie8 .header.rcue .navbar.utility .nav li.dropdown > .dropdown-toggle .icon-user {
+ display: none;
+}
+.header.rcue .navbar .dropdown .dropdown-menu .nav-header {
+ padding-left: 10px;
+ padding-right: 10px;
+}
+.header.rcue .navbar .dropdown-menu {
+ border-color: #b6b6b6;
+ -webkit-border-radius: 0!important;
+ -moz-border-radius: 0!important;
+ border-radius: 0!important;
+ border-top-width: 0;
+ -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.15);
+ -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.15);
+ box-shadow: 0 3px 7px rgba(0, 0, 0, 0.15);
+ font-size: 11px;
+ left: -1px;
+ margin-top: 0;
+}
+.header.rcue .navbar .dropdown-menu .divider {
+ margin: 4px 1px;
+}
+.header.rcue .navbar .dropdown-menu li > a {
+ line-height: 22px;
+ padding: 0 10px;
+}
+.header.rcue .navbar .dropdown-menu > .active > a,
+.header.rcue .navbar .dropdown-menu > .active > a:hover,
+.header.rcue .navbar .dropdown-menu > .active > a:focus,
+.header.rcue .navbar .dropdown-menu > li > a:hover,
+.header.rcue .navbar .dropdown-menu > li > a:focus,
+.header.rcue .navbar .dropdown-submenu:hover > a,
+.header.rcue .navbar .dropdown-submenu:focus > a {
+ background-color: #2b99c0;
+ background-image: -moz-linear-gradient(top, #2ea1ca, #2792b6);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2ea1ca), to(#2792b6));
+ background-image: -webkit-linear-gradient(top, #2ea1ca, #2792b6);
+ background-image: -o-linear-gradient(top, #2ea1ca, #2792b6);
+ background-image: linear-gradient(to bottom, #2ea1ca, #2792b6);
+ background-repeat: repeat-x;
+ color: #fff;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2ea1ca', endColorstr='#2792b6', GradientType=0);
+}
+.header.rcue .navbar .dropdown-submenu.pull-left > .dropdown-menu {
+ left: auto;
+ right: 100%;
+}
+.header.rcue .navbar .dropdown-submenu.active > a:after {
+ border-left-color: #ffffff;
+}
+.header.rcue .navbar .dropdown-submenu > a:after {
+ margin-right: -5px;
+}
+.header.rcue .navbar .dropdown-submenu > .dropdown-menu {
+ border-top-width: 1px;
+ left: 100%;
+}
+.header.rcue .navbar .nav > li > a {
+ color: #dbdada;
+ line-height: 1;
+ padding: 14px 20px;
+ text-shadow: none;
+}
+.header.rcue .navbar .nav > li .dropdown-menu:after,
+.header.rcue .navbar .nav > li .dropdown-menu:before {
+ display: none;
+}
+.header.rcue .navbar .nav li.dropdown > .dropdown-toggle .caret {
+ border-bottom-color: #dbdada;
+ border-top-color: #dbdada;
+ border-width: 5px;
+ margin-left: 5px;
+ margin-top: 5px;
+ position: relative;
+}
+.header.rcue .navbar .nav li.dropdown > .dropdown-toggle .caret:after {
+ border: 4px solid transparent;
+ border-bottom: 0;
+ border-top-color: #44494d;
+ content: '';
+ display: block;
+ height: 0;
+ left: -4px;
+ position: absolute;
+ top: -6px;
+ width: 0;
+}
+.header.rcue .navbar .nav li.dropdown li + .nav-header {
+ margin-top: 4px;
+}
+.header.rcue .navbar .nav li.dropdown.open > .dropdown-toggle .caret {
+ border-bottom-color: #fff;
+ border-top-color: #ffffff;
+}
+.header.rcue .navbar .pull-right > li > .dropdown-menu,
+.header.rcue .navbar .nav > li > .dropdown-menu.pull-right {
+ left: auto;
+ right: -1px;
+}
+.header.rcue .navbar-inner {
+ background: #393f45;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ border: 0;
+ -moz-border-radius: 0;
+ -webkit-border-radius: 0;
+ border-radius: 0;
+ min-height: 0;
+ padding: 0;
+ filter: none;
+}
+.header.rcue .primary .navbar-inner {
+ background-image: -moz-linear-gradient(top, #474c50, #383f43);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#474c50), to(#383f43));
+ background-image: -webkit-linear-gradient(top, #474c50, #383f43);
+ background-image: -o-linear-gradient(top, #474c50, #383f43);
+ background-image: linear-gradient(to bottom, #474c50, #383f43);
+ background-repeat: repeat-x;
+}
+.header.rcue .utility .navbar-inner {
+ border-bottom: 1px solid #53565b;
+}
+/* Styles from Gabriel */
+.header.rcue {
+ font-family: "Open-sans", sans-serif;
+}
+.header.rcue .navbar {
+ border: none;
+ border-radius: 0;
+ min-height: inherit;
+}
+.header.rcue .navbar .navbar-inner {
+ width: 100%;
+ display: block;
+}
+.header.rcue .navbar h1 {
+ margin: 0;
+ font-family: "Overpass", sans-serif;
+ font-size: 1em;
+ text-transform: uppercase;
+ letter-spacing: 0;
+ line-height: 2.18181818181818em;
+ padding-left: 1.36363636363636em;
+ float: left;
+}
+.header.rcue .navbar h1 a {
+ color: #fff;
+}
+.header.rcue .navbar h1 a:hover {
+ text-decoration: none;
+}
+.header.rcue .navbar .nav li.separator {
+ border-top: 1px solid #e5e5e5;
+ display: block;
+ margin-top: 0.4em;
+ padding-top: 0.4em;
+}
+.header.rcue .navbar .nav > li > a {
+ font-size: 1em;
+}
+.header.rcue .navbar.utility .nav > li > a {
+ padding: 0 1.36363636363636em;
+ line-height: 2.18181818181818em;
+}
+.header.rcue .navbar .navbar.utility .nav > li > a:focus {
+ background-color: #4D5258;
+}
+.header.rcue .navbar .icon-user {
+ background-image: url(img/sprites-white.png);
+ margin-top: -3px;
+}
+.header.rcue .navbar .nav li.dropdown > .dropdown-toggle .caret {
+ margin-top: 0;
+}
+.header.rcue .navbar.primary .nav > li {
+ float: left;
+}
+.header.rcue .navbar.primary .nav > li a:focus {
+ background-color: #41474b;
+}
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/css/img/sprites-white.png b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/img/sprites-white.png
new file mode 100755
index 0000000..cf70cf1
Binary files /dev/null and b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/img/sprites-white.png differ
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/css/login-register.css b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/login-register.css
index 2847592..36dec13 100644
--- a/forms/src/main/resources/META-INF/resources/forms/theme/default/css/login-register.css
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/login-register.css
@@ -1,8 +1,11 @@
body {
+ font-size: 62.5%;
min-height: 60em;
+ min-width: 120em;
}
.rcue-login-register {
background-color: #1D2226;
+ background-image: url("img/login-screen-background.jpg");
background-position: top left;
background-size: auto;
background-repeat: no-repeat;
@@ -66,6 +69,11 @@ body {
background-image: url(img/login-register-social-separators.svg);
background-position: 39.6em center;
}
+.rcue-login-register section > p {
+ font-size: 1.3em;
+ margin-bottom: 1.53846153846154em;
+ line-height: 1.3em;
+}
.rcue-login-register section.app-form {
padding-left: 0;
position: relative;
@@ -86,9 +94,7 @@ body {
}
.rcue-login-register label.two-lines {
float: left;
- margin-top: -0.28571428571429em;
- /* -4px */
-
+ margin-top: -0.14285714285714em;
line-height: 1.1em;
}
.rcue-login-register input[type="text"],
@@ -118,7 +124,7 @@ body {
}
.rcue-login-register form > input[type="button"],
-.rcue-login-register form > input[type="submit"] {
+.rcue-login-register form > input[type="submit"]{
float: right;
margin-top: 0.76923076923077em;
/* 10px */
@@ -131,11 +137,16 @@ body {
right: 4.09090909090909em;
top: -0.636363636363636em;
}
-.rcue-login-register .feedback {
+.rcue-login-register .feedback.bottom-left {
left: 32.7em;
top: -9.2em;
min-width: 35em;
}
+.rcue-login-register input.error[type="text"],
+.rcue-login-register input.error[type="password"],
+.rcue-login-register input.error[type="email"] {
+ background-color: #F8E7E7;
+}
.rcue-login-register section.social-login > span {
display: none;
}
@@ -164,8 +175,6 @@ body {
.rcue-login-register section.info-area li {
font-size: 1.4em;
margin-bottom: 1.64285714285714em;
- /* 23px */
-
}
.rcue-login-register section.info-area li {
color: #999;
@@ -258,6 +267,10 @@ a.zocial:before {
.rcue-login-register.register form > div.aside-btn p {
line-height: 1.3em;
}
+/* Customer login */
+.rcue-login-register.customer {
+ background-image: url("img/customer-login-screen-bg2.jpg");
+}
.rcue-login-register p.powered {
font-size: 1.1em;
margin-top: 1.27272727272727em;
@@ -270,3 +283,79 @@ a.zocial:before {
.rcue-login-register p.powered a:hover {
color: #0099D3;
}
+/* Forgot Password page */
+.rcue-login-register.reset .background-area section {
+ padding-top: 0;
+ padding-bottom: 0;
+}
+.rcue-login-register.reset .background-area section.app-form {
+ width: 43.2em;
+}
+.rcue-login-register.reset .feedback {
+ left: 35.7em;
+}
+.rcue-login-register.reset .form-area {
+ background-image: none;
+}
+.rcue-login-register.reset .form-area p.instruction {
+ font-size: 1.3em;
+ line-height: 1.3em;
+ margin-bottom: 1.81818181818182em;
+}
+.rcue-login-register.reset label {
+ width: 8.21428571428571em;
+}
+.rcue-login-register.totp {
+ min-height: 0;
+}
+.rcue-login-register.totp ol li {
+ margin-bottom: 3em;
+ width: 100%;
+}
+.rcue-login-register.totp ol li p {
+ font-size: 1.3em;
+ margin-bottom: 1.92307692307692em;
+}
+.rcue-login-register.totp ol li p strong {
+ text-indent: -1em;
+ float: left;
+ font-size: 1.84615384615385em;
+ font-weight: normal;
+ margin-top: -0.20833333333333em;
+ color: #999;
+}
+.rcue-login-register.totp ol li img {
+ border: 7px solid #fff;
+ width: 150px;
+}
+.rcue-login-register.totp ol li .code {
+ font-size: 1.3em;
+ margin-left: 1.53846153846154em;
+}
+.rcue-login-register.totp ol li form {
+ width: 357px;
+}
+.rcue-login-register.totp ol li:last-child {
+ margin-bottom: 0;
+}
+.rcue-login-register.totp .content {
+ position: inherit;
+ margin-top: 16em;
+}
+.rcue-login-register.email .background-area section {
+ width: 41.2em;
+}
+.rcue-login-register.email .background-area section.email {
+ width: 45.8em;
+}
+.rcue-login-register.email label {
+ width: 6.78571428571429em;
+}
+.rcue-login-register.email .form-area.email {
+ background-position: 40.6em center;
+ background-image: url(img/login-register-email-separator.svg);
+ background-repeat: no-repeat;
+}
+.rcue-login-register.email .feedback.bottom-left {
+ left: 38.3em;
+}
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/css/sprites.css b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/sprites.css
new file mode 100755
index 0000000..fcfb0cc
--- /dev/null
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/sprites.css
@@ -0,0 +1,1381 @@
+.icon-home,.icon-home2,.icon-home3,.icon-office,.icon-newspaper,.icon-pencil,.icon-pencil2,.icon-quill,.icon-pen,.icon-blog,.icon-droplet,.icon-paint-format,.icon-image,.icon-image2,.icon-images,.icon-camera,.icon-music,.icon-headphones,.icon-play,.icon-film,.icon-camera2,.icon-dice,.icon-pacman,.icon-spades,.icon-clubs,.icon-diamonds,.icon-pawn,.icon-bullhorn,.icon-connection,.icon-podcast,.icon-feed,.icon-book,.icon-books,.icon-library,.icon-file,.icon-profile,.icon-file2,.icon-file3,.icon-file4,.icon-copy,.icon-copy2,.icon-copy3,.icon-paste,.icon-paste2,.icon-paste3,.icon-stack,.icon-folder,.icon-folder-open,.icon-tag,.icon-tags,.icon-barcode,.icon-qrcode,.icon-ticket,.icon-cart,.icon-cart2,.icon-cart3,.icon-coin,.icon-credit,.icon-calculate,.icon-support,.icon-phone,.icon-phone-hang-up,.icon-address-book,.icon-notebook,.icon-envelop,.icon-pushpin,.icon-location,.icon-location2,.icon-compass,.icon-map,.icon-map2,.icon-history,.icon-clock,.icon-clock2,.icon-alarm,.icon-alarm2,.icon-bell,.icon-stopwatch,.icon-calendar,.icon-calendar2,.icon-print,.icon-keyboard,.icon-screen,.icon-laptop,.icon-mobile,.icon-mobile2,.icon-tablet,.icon-tv,.icon-cabinet,.icon-drawer,.icon-drawer2,.icon-drawer3,.icon-box-add,.icon-box-remove,.icon-download,.icon-upload,.icon-disk,.icon-storage,.icon-undo,.icon-redo,.icon-flip,.icon-flip2,.icon-undo2,.icon-redo2,.icon-forward,.icon-reply,.icon-bubble,.icon-bubbles,.icon-bubbles2,.icon-bubble2,.icon-bubbles3,.icon-bubbles4,.icon-users,.icon-user,.icon-users2,.icon-user2,.icon-user3,.icon-quotes-left,.icon-busy,.icon-spinner,.icon-spinner2,.icon-spinner3,.icon-spinner4,.icon-spinner5,.icon-spinner6,.icon-binoculars,.icon-search,.icon-zoom-in,.icon-zoom-out,.icon-expand,.icon-contract,.icon-expand2,.icon-contract2,.icon-key,.icon-key2,.icon-lock,.icon-lock2,.icon-unlocked,.icon-wrench,.icon-settings,.icon-equalizer,.icon-cog,.icon-cogs,.icon-cog2,.icon-hammer,.icon-wand,.icon-aid,.icon-bug,.icon-pie,.icon-stats,.icon-bars,.icon-bars2,.icon-gift,.icon-trophy,.icon-glass,.icon-mug,.icon-food,.icon-leaf,.icon-rocket,.icon-meter,.icon-meter2,.icon-dashboard,.icon-hammer2,.icon-fire,.icon-lab,.icon-magnet,.icon-remove,.icon-remove2,.icon-briefcase,.icon-airplane,.icon-truck,.icon-road,.icon-accessibility,.icon-target,.icon-shield,.icon-lightning,.icon-switch,.icon-power-cord,.icon-signup,.icon-list,.icon-list2,.icon-numbered-list,.icon-menu,.icon-menu2,.icon-tree,.icon-cloud,.icon-cloud-download,.icon-cloud-upload,.icon-download2,.icon-upload2,.icon-download3,.icon-upload3,.icon-globe,.icon-earth,.icon-link,.icon-flag,.icon-attachment,.icon-eye,.icon-eye-blocked,.icon-eye2,.icon-bookmark,.icon-bookmarks,.icon-brightness-medium,.icon-brightness-contrast,.icon-contrast,.icon-star,.icon-star2,.icon-star3,.icon-heart,.icon-heart2,.icon-heart-broken,.icon-thumbs-up,.icon-thumbs-up2,.icon-happy,.icon-happy2,.icon-smiley,.icon-smiley2,.icon-tongue,.icon-tongue2,.icon-sad,.icon-sad2,.icon-wink,.icon-wink2,.icon-grin,.icon-grin2,.icon-cool,.icon-cool2,.icon-angry,.icon-angry2,.icon-evil,.icon-evil2,.icon-shocked,.icon-shocked2,.icon-confused,.icon-confused2,.icon-neutral,.icon-neutral2,.icon-wondering,.icon-wondering2,.icon-point-up,.icon-point-right,.icon-point-down,.icon-point-left,.icon-warning,.icon-notification,.icon-question,.icon-info,.icon-info2,.icon-blocked,.icon-cancel-circle,.icon-checkmark-circle,.icon-spam,.icon-close,.icon-checkmark,.icon-checkmark2,.icon-spell-check,.icon-minus,.icon-plus,.icon-enter,.icon-exit,.icon-play2,.icon-pause,.icon-stop,.icon-backward,.icon-forward2,.icon-play3,.icon-pause2,.icon-stop2,.icon-backward2,.icon-forward3,.icon-first,.icon-last,.icon-previous,.icon-next,.icon-eject,.icon-volume-high,.icon-volume-medium,.icon-volume-low,.icon-volume-mute,.icon-volume-mute2,.icon-volume-increase,.icon-volume-decrease,.icon-loop,.icon-loop2,.icon-loop3,.icon-shuffle,.icon-arrow-up-left,.icon-arrow-up,.icon-arrow-up-right,.icon-arrow-right,.icon-arrow-down-right,.icon-arrow-down,.icon-arrow-down-left,.icon-arrow-left,.icon-arrow-up-left2,.icon-arrow-up2,.icon-arrow-up-right2,.icon-arrow-right2,.icon-arrow-down-right2,.icon-arrow-down2,.icon-arrow-down-left2,.icon-arrow-left2,.icon-arrow-up-left3,.icon-arrow-up3,.icon-arrow-up-right3,.icon-arrow-right3,.icon-arrow-down-right3,.icon-arrow-down3,.icon-arrow-down-left3,.icon-arrow-left3,.icon-tab,.icon-checkbox-checked,.icon-checkbox-unchecked,.icon-checkbox-partial,.icon-radio-checked,.icon-radio-unchecked,.icon-crop,.icon-scissors,.icon-filter,.icon-filter2,.icon-font,.icon-text-height,.icon-text-width,.icon-bold,.icon-underline,.icon-italic,.icon-strikethrough,.icon-omega,.icon-sigma,.icon-table,.icon-table2,.icon-insert-template,.icon-pilcrow,.icon-left-to-right,.icon-right-to-left,.icon-paragraph-left,.icon-paragraph-center,.icon-paragraph-right,.icon-paragraph-justify,.icon-paragraph-left2,.icon-paragraph-center2,.icon-paragraph-right2,.icon-paragraph-justify2,.icon-indent-increase,.icon-indent-decrease,.icon-new-tab,.icon-embed,.icon-code,.icon-console,.icon-share,.icon-mail,.icon-mail2,.icon-mail3,.icon-mail4,.icon-google,.icon-google-plus,.icon-google-plus2,.icon-google-plus3,.icon-google-plus4,.icon-google-drive,.icon-facebook,.icon-facebook2,.icon-facebook3,.icon-instagram,.icon-twitter,.icon-twitter2,.icon-twitter3,.icon-feed2,.icon-feed3,.icon-feed4,.icon-youtube,.icon-youtube2,.icon-vimeo,.icon-vimeo2,.icon-vimeo3,.icon-lanyrd,.icon-flickr,.icon-flickr2,.icon-flickr3,.icon-flickr4,.icon-picassa,.icon-picassa2,.icon-dribbble,.icon-dribbble2,.icon-dribbble3,.icon-forrst,.icon-forrst2,.icon-deviantart,.icon-deviantart2,.icon-steam,.icon-steam2,.icon-github,.icon-github2,.icon-github3,.icon-github4,.icon-github5,.icon-wordpress,.icon-wordpress2,.icon-joomla,.icon-blogger,.icon-blogger2,.icon-tumblr,.icon-tumblr2,.icon-yahoo,.icon-tux,.icon-apple,.icon-finder,.icon-android,.icon-windows,.icon-windows8,.icon-soundcloud,.icon-soundcloud2,.icon-skype,.icon-reddit,.icon-linkedin,.icon-lastfm,.icon-lastfm2,.icon-delicious,.icon-stumbleupon,.icon-stumbleupon2,.icon-stackoverflow,.icon-pinterest,.icon-pinterest2,.icon-xing,.icon-xing2,.icon-flattr,.icon-foursquare,.icon-foursquare2,.icon-paypal,.icon-paypal2,.icon-paypal3,.icon-yelp,.icon-libreoffice,.icon-file-pdf,.icon-file-openoffice,.icon-file-word,.icon-file-excel,.icon-file-zip,.icon-file-powerpoint,.icon-file-xml,.icon-file-css,.icon-html5,.icon-html52,.icon-css3,.icon-chrome,.icon-firefox,.icon-IE,.icon-opera,.icon-safari,.icon-IcoMoon,.icon-rainy,.icon-rainy2,.icon-windy
+, .icon-collapse {
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ background-image: url(img/sprites.png); /* Modified by Gabriel */
+ background-repeat: no-repeat;
+ text-indent: -9999999em;
+ margin-right: 0.5em;
+ vertical-align: text-top;
+}
+.icon-home {
+ background-position: 0 0;
+}
+.icon-home2 {
+ background-position: -32px 0;
+}
+.icon-home3 {
+ background-position: -64px 0;
+}
+.icon-office {
+ background-position: -96px 0;
+}
+.icon-newspaper {
+ background-position: -128px 0;
+}
+.icon-pencil {
+ background-position: -160px 0;
+}
+.icon-pencil2 {
+ background-position: -192px 0;
+}
+.icon-quill {
+ background-position: -224px 0;
+}
+.icon-pen {
+ background-position: -256px 0;
+}
+.icon-blog {
+ background-position: -288px 0;
+}
+.icon-droplet {
+ background-position: -320px 0;
+}
+.icon-paint-format {
+ background-position: -352px 0;
+}
+.icon-image {
+ background-position: -384px 0;
+}
+.icon-image2 {
+ background-position: -416px 0;
+}
+.icon-images {
+ background-position: -448px 0;
+}
+.icon-camera {
+ background-position: -480px 0;
+}
+.icon-music {
+ background-position: -512px 0;
+}
+.icon-headphones {
+ background-position: -544px 0;
+}
+.icon-play {
+ background-position: -576px 0;
+}
+.icon-film {
+ background-position: -608px 0;
+}
+.icon-camera2 {
+ background-position: 0 -32px;
+}
+.icon-dice {
+ background-position: -32px -32px;
+}
+.icon-pacman {
+ background-position: -64px -32px;
+}
+.icon-spades {
+ background-position: -96px -32px;
+}
+.icon-clubs {
+ background-position: -128px -32px;
+}
+.icon-diamonds {
+ background-position: -160px -32px;
+}
+.icon-pawn {
+ background-position: -192px -32px;
+}
+.icon-bullhorn {
+ background-position: -224px -32px;
+}
+.icon-connection {
+ background-position: -256px -32px;
+ width: 20px;
+}
+.icon-podcast {
+ background-position: -288px -32px;
+}
+.icon-feed {
+ background-position: -320px -32px;
+}
+.icon-book {
+ background-position: -352px -32px;
+}
+.icon-books {
+ background-position: -384px -32px;
+}
+.icon-library {
+ background-position: -416px -32px;
+}
+.icon-file {
+ background-position: -448px -32px;
+}
+.icon-profile {
+ background-position: -480px -32px;
+}
+.icon-file2 {
+ background-position: -512px -32px;
+}
+.icon-file3 {
+ background-position: -544px -32px;
+}
+.icon-file4 {
+ background-position: -576px -32px;
+}
+.icon-copy {
+ background-position: -608px -32px;
+}
+.icon-copy2 {
+ background-position: 0 -64px;
+}
+.icon-copy3 {
+ background-position: -32px -64px;
+}
+.icon-paste {
+ background-position: -64px -64px;
+}
+.icon-paste2 {
+ background-position: -96px -64px;
+}
+.icon-paste3 {
+ background-position: -128px -64px;
+}
+.icon-stack {
+ background-position: -160px -64px;
+}
+.icon-folder {
+ background-position: -192px -64px;
+}
+.icon-folder-open {
+ background-position: -224px -64px;
+}
+.icon-tag {
+ background-position: -256px -64px;
+}
+.icon-tags {
+ background-position: -288px -64px;
+ width: 17px;
+}
+.icon-barcode {
+ background-position: -320px -64px;
+}
+.icon-qrcode {
+ background-position: -352px -64px;
+}
+.icon-ticket {
+ background-position: -384px -64px;
+}
+.icon-cart {
+ background-position: -416px -64px;
+}
+.icon-cart2 {
+ background-position: -448px -64px;
+}
+.icon-cart3 {
+ background-position: -480px -64px;
+}
+.icon-coin {
+ background-position: -512px -64px;
+}
+.icon-credit {
+ background-position: -544px -64px;
+}
+.icon-calculate {
+ background-position: -576px -64px;
+}
+.icon-support {
+ background-position: -608px -64px;
+}
+.icon-phone {
+ background-position: 0 -96px;
+}
+.icon-phone-hang-up {
+ background-position: -32px -96px;
+}
+.icon-address-book {
+ background-position: -64px -96px;
+}
+.icon-notebook {
+ background-position: -96px -96px;
+}
+.icon-envelop {
+ background-position: -128px -96px;
+}
+.icon-pushpin {
+ background-position: -160px -96px;
+}
+.icon-location {
+ background-position: -192px -96px;
+}
+.icon-location2 {
+ background-position: -224px -96px;
+}
+.icon-compass {
+ background-position: -256px -96px;
+}
+.icon-map {
+ background-position: -288px -96px;
+}
+.icon-map2 {
+ background-position: -320px -96px;
+}
+.icon-history {
+ background-position: -352px -96px;
+ width: 17px;
+}
+.icon-clock {
+ background-position: -384px -96px;
+}
+.icon-clock2 {
+ background-position: -416px -96px;
+}
+.icon-alarm {
+ background-position: -448px -96px;
+}
+.icon-alarm2 {
+ background-position: -480px -96px;
+}
+.icon-bell {
+ background-position: -512px -96px;
+}
+.icon-stopwatch {
+ background-position: -544px -96px;
+}
+.icon-calendar {
+ background-position: -576px -96px;
+}
+.icon-calendar2 {
+ background-position: -608px -96px;
+}
+.icon-print {
+ background-position: 0 -128px;
+}
+.icon-keyboard {
+ background-position: -32px -128px;
+ width: 18px;
+}
+.icon-screen {
+ background-position: -64px -128px;
+}
+.icon-laptop {
+ background-position: -96px -128px;
+}
+.icon-mobile {
+ background-position: -128px -128px;
+}
+.icon-mobile2 {
+ background-position: -160px -128px;
+}
+.icon-tablet {
+ background-position: -192px -128px;
+}
+.icon-tv {
+ background-position: -224px -128px;
+}
+.icon-cabinet {
+ background-position: -256px -128px;
+}
+.icon-drawer {
+ background-position: -288px -128px;
+}
+.icon-drawer2 {
+ background-position: -320px -128px;
+}
+.icon-drawer3 {
+ background-position: -352px -128px;
+}
+.icon-box-add {
+ background-position: -384px -128px;
+}
+.icon-box-remove {
+ background-position: -416px -128px;
+}
+.icon-download {
+ background-position: -448px -128px;
+}
+.icon-upload {
+ background-position: -480px -128px;
+}
+.icon-disk {
+ background-position: -512px -128px;
+}
+.icon-storage {
+ background-position: -544px -128px;
+}
+.icon-undo {
+ background-position: -576px -128px;
+}
+.icon-redo {
+ background-position: -608px -128px;
+}
+.icon-flip {
+ background-position: 0 -160px;
+}
+.icon-flip2 {
+ background-position: -32px -160px;
+}
+.icon-undo2 {
+ background-position: -64px -160px;
+}
+.icon-redo2 {
+ background-position: -96px -160px;
+}
+.icon-forward {
+ background-position: -128px -160px;
+}
+.icon-reply {
+ background-position: -160px -160px;
+}
+.icon-bubble {
+ background-position: -192px -160px;
+}
+.icon-bubbles {
+ background-position: -224px -160px;
+ width: 18px;
+}
+.icon-bubbles2 {
+ background-position: -256px -160px;
+ width: 18px;
+}
+.icon-bubble2 {
+ background-position: -288px -160px;
+}
+.icon-bubbles3 {
+ background-position: -320px -160px;
+ width: 18px;
+}
+.icon-bubbles4 {
+ background-position: -352px -160px;
+ width: 18px;
+}
+.icon-users {
+ background-position: -384px -160px;
+}
+.icon-user {
+ background-position: -416px -160px;
+}
+.icon-users2 {
+ background-position: -448px -160px;
+}
+.icon-user2 {
+ background-position: -480px -160px;
+}
+.icon-user3 {
+ background-position: -512px -160px;
+}
+.icon-quotes-left {
+ background-position: -544px -160px;
+}
+.icon-busy {
+ background-position: -576px -160px;
+}
+.icon-spinner {
+ background-position: -608px -160px;
+}
+.icon-spinner2 {
+ background-position: 0 -192px;
+}
+.icon-spinner3 {
+ background-position: -32px -192px;
+}
+.icon-spinner4 {
+ background-position: -64px -192px;
+}
+.icon-spinner5 {
+ background-position: -96px -192px;
+}
+.icon-spinner6 {
+ background-position: -128px -192px;
+}
+.icon-binoculars {
+ background-position: -160px -192px;
+}
+.icon-search {
+ background-position: -192px -192px;
+}
+.icon-zoom-in {
+ background-position: -224px -192px;
+}
+.icon-zoom-out {
+ background-position: -256px -192px;
+}
+.icon-expand {
+ background-position: -288px -192px;
+}
+.icon-contract {
+ background-position: -320px -192px;
+}
+.icon-expand2 {
+ background-position: -352px -192px;
+}
+.icon-contract2 {
+ background-position: -384px -192px;
+}
+.icon-key {
+ background-position: -416px -192px;
+}
+.icon-key2 {
+ background-position: -448px -192px;
+}
+.icon-lock {
+ background-position: -480px -192px;
+}
+.icon-lock2 {
+ background-position: -512px -192px;
+}
+.icon-unlocked {
+ background-position: -544px -192px;
+}
+.icon-wrench {
+ background-position: -576px -192px;
+}
+.icon-settings {
+ background-position: -608px -192px;
+}
+.icon-equalizer {
+ background-position: 0 -224px;
+}
+.icon-cog {
+ background-position: -32px -224px;
+}
+.icon-cogs {
+ background-position: -64px -224px;
+}
+.icon-cog2 {
+ background-position: -96px -224px;
+}
+.icon-hammer {
+ background-position: -128px -224px;
+}
+.icon-wand {
+ background-position: -160px -224px;
+}
+.icon-aid {
+ background-position: -192px -224px;
+}
+.icon-bug {
+ background-position: -224px -224px;
+}
+.icon-pie {
+ background-position: -256px -224px;
+}
+.icon-stats {
+ background-position: -288px -224px;
+}
+.icon-bars {
+ background-position: -320px -224px;
+}
+.icon-bars2 {
+ background-position: -352px -224px;
+}
+.icon-gift {
+ background-position: -384px -224px;
+}
+.icon-trophy {
+ background-position: -416px -224px;
+}
+.icon-glass {
+ background-position: -448px -224px;
+}
+.icon-mug {
+ background-position: -480px -224px;
+}
+.icon-food {
+ background-position: -512px -224px;
+}
+.icon-leaf {
+ background-position: -544px -224px;
+}
+.icon-rocket {
+ background-position: -576px -224px;
+}
+.icon-meter {
+ background-position: -608px -224px;
+}
+.icon-meter2 {
+ background-position: 0 -256px;
+}
+.icon-dashboard {
+ background-position: -32px -256px;
+}
+.icon-hammer2 {
+ background-position: -64px -256px;
+}
+.icon-fire {
+ background-position: -96px -256px;
+}
+.icon-lab {
+ background-position: -128px -256px;
+}
+.icon-magnet {
+ background-position: -160px -256px;
+}
+.icon-remove {
+ background-position: -192px -256px;
+}
+.icon-remove2 {
+ background-position: -224px -256px;
+}
+.icon-briefcase {
+ background-position: -256px -256px;
+}
+.icon-airplane {
+ background-position: -288px -256px;
+}
+.icon-truck {
+ background-position: -320px -256px;
+}
+.icon-road {
+ background-position: -352px -256px;
+}
+.icon-accessibility {
+ background-position: -384px -256px;
+}
+.icon-target {
+ background-position: -416px -256px;
+}
+.icon-shield {
+ background-position: -448px -256px;
+}
+.icon-lightning {
+ background-position: -480px -256px;
+}
+.icon-switch {
+ background-position: -512px -256px;
+}
+.icon-power-cord {
+ background-position: -544px -256px;
+}
+.icon-signup {
+ background-position: -576px -256px;
+}
+.icon-list {
+ background-position: -608px -256px;
+}
+.icon-list2 {
+ background-position: 0 -288px;
+}
+.icon-numbered-list {
+ background-position: -32px -288px;
+}
+.icon-menu {
+ background-position: -64px -288px;
+}
+.icon-menu2 {
+ background-position: -96px -288px;
+}
+.icon-tree {
+ background-position: -128px -288px;
+}
+.icon-cloud {
+ background-position: -160px -288px;
+}
+.icon-cloud-download {
+ background-position: -192px -288px;
+}
+.icon-cloud-upload {
+ background-position: -224px -288px;
+}
+.icon-download2 {
+ background-position: -256px -288px;
+}
+.icon-upload2 {
+ background-position: -288px -288px;
+}
+.icon-download3 {
+ background-position: -320px -288px;
+}
+.icon-upload3 {
+ background-position: -352px -288px;
+}
+.icon-globe {
+ background-position: -384px -288px;
+}
+.icon-earth {
+ background-position: -416px -288px;
+}
+.icon-link {
+ background-position: -448px -288px;
+}
+.icon-flag {
+ background-position: -480px -288px;
+}
+.icon-attachment {
+ background-position: -512px -288px;
+}
+.icon-eye {
+ background-position: -544px -288px;
+}
+.icon-eye-blocked {
+ background-position: -576px -288px;
+}
+.icon-eye2 {
+ background-position: -608px -288px;
+}
+.icon-bookmark {
+ background-position: 0 -320px;
+}
+.icon-bookmarks {
+ background-position: -32px -320px;
+}
+.icon-brightness-medium {
+ background-position: -64px -320px;
+}
+.icon-brightness-contrast {
+ background-position: -96px -320px;
+}
+.icon-contrast {
+ background-position: -128px -320px;
+}
+.icon-star {
+ background-position: -160px -320px;
+}
+.icon-star2 {
+ background-position: -192px -320px;
+}
+.icon-star3 {
+ background-position: -224px -320px;
+}
+.icon-heart {
+ background-position: -256px -320px;
+}
+.icon-heart2 {
+ background-position: -288px -320px;
+}
+.icon-heart-broken {
+ background-position: -320px -320px;
+}
+.icon-thumbs-up {
+ background-position: -352px -320px;
+}
+.icon-thumbs-up2 {
+ background-position: -384px -320px;
+}
+.icon-happy {
+ background-position: -416px -320px;
+}
+.icon-happy2 {
+ background-position: -448px -320px;
+}
+.icon-smiley {
+ background-position: -480px -320px;
+}
+.icon-smiley2 {
+ background-position: -512px -320px;
+}
+.icon-tongue {
+ background-position: -544px -320px;
+}
+.icon-tongue2 {
+ background-position: -576px -320px;
+}
+.icon-sad {
+ background-position: -608px -320px;
+}
+.icon-sad2 {
+ background-position: 0 -352px;
+}
+.icon-wink {
+ background-position: -32px -352px;
+}
+.icon-wink2 {
+ background-position: -64px -352px;
+}
+.icon-grin {
+ background-position: -96px -352px;
+}
+.icon-grin2 {
+ background-position: -128px -352px;
+}
+.icon-cool {
+ background-position: -160px -352px;
+}
+.icon-cool2 {
+ background-position: -192px -352px;
+}
+.icon-angry {
+ background-position: -224px -352px;
+}
+.icon-angry2 {
+ background-position: -256px -352px;
+}
+.icon-evil {
+ background-position: -288px -352px;
+ height: 16px;
+}
+.icon-evil2 {
+ background-position: -320px -352px;
+ height: 16px;
+}
+.icon-shocked {
+ background-position: -352px -352px;
+}
+.icon-shocked2 {
+ background-position: -384px -352px;
+}
+.icon-confused {
+ background-position: -416px -352px;
+}
+.icon-confused2 {
+ background-position: -448px -352px;
+}
+.icon-neutral {
+ background-position: -480px -352px;
+}
+.icon-neutral2 {
+ background-position: -512px -352px;
+}
+.icon-wondering {
+ background-position: -544px -352px;
+}
+.icon-wondering2 {
+ background-position: -576px -352px;
+}
+.icon-point-up {
+ background-position: -608px -352px;
+}
+.icon-point-right {
+ background-position: 0 -384px;
+}
+.icon-point-down {
+ background-position: -32px -384px;
+}
+.icon-point-left {
+ background-position: -64px -384px;
+}
+.icon-warning {
+ background-position: -96px -384px;
+}
+.icon-notification {
+ background-position: -128px -384px;
+}
+.icon-question {
+ background-position: -160px -384px;
+}
+.icon-info {
+ background-position: -192px -384px;
+}
+.icon-info2 {
+ background-position: -224px -384px;
+}
+.icon-blocked {
+ background-position: -256px -384px;
+}
+.icon-cancel-circle {
+ background-position: -288px -384px;
+}
+.icon-checkmark-circle {
+ background-position: -320px -384px;
+}
+.icon-spam {
+ background-position: -352px -384px;
+}
+.icon-close {
+ background-position: -384px -384px;
+}
+.icon-checkmark {
+ background-position: -416px -384px;
+}
+.icon-checkmark2 {
+ background-position: -448px -384px;
+}
+.icon-spell-check {
+ background-position: -480px -384px;
+}
+.icon-minus {
+ background-position: -512px -384px;
+}
+.icon-plus {
+ background-position: -544px -384px;
+}
+.icon-enter {
+ background-position: -576px -384px;
+}
+.icon-exit {
+ background-position: -608px -384px;
+}
+.icon-play2 {
+ background-position: 0 -416px;
+}
+.icon-pause {
+ background-position: -32px -416px;
+}
+.icon-stop {
+ background-position: -64px -416px;
+}
+.icon-backward {
+ background-position: -96px -416px;
+}
+.icon-forward2 {
+ background-position: -128px -416px;
+}
+.icon-play3 {
+ background-position: -160px -416px;
+}
+.icon-pause2 {
+ background-position: -192px -416px;
+}
+.icon-stop2 {
+ background-position: -224px -416px;
+}
+.icon-backward2 {
+ background-position: -256px -416px;
+}
+.icon-forward3 {
+ background-position: -288px -416px;
+}
+.icon-first {
+ background-position: -320px -416px;
+}
+.icon-last {
+ background-position: -352px -416px;
+}
+.icon-previous {
+ background-position: -384px -416px;
+}
+.icon-next {
+ background-position: -416px -416px;
+}
+.icon-eject {
+ background-position: -448px -416px;
+}
+.icon-volume-high {
+ background-position: -480px -416px;
+ width: 17px;
+}
+.icon-volume-medium {
+ background-position: -512px -416px;
+}
+.icon-volume-low {
+ background-position: -544px -416px;
+}
+.icon-volume-mute {
+ background-position: -576px -416px;
+}
+.icon-volume-mute2 {
+ background-position: -608px -416px;
+}
+.icon-volume-increase {
+ background-position: 0 -448px;
+}
+.icon-volume-decrease {
+ background-position: -32px -448px;
+}
+.icon-loop {
+ background-position: -64px -448px;
+}
+.icon-loop2 {
+ background-position: -96px -448px;
+}
+.icon-loop3 {
+ background-position: -128px -448px;
+}
+.icon-shuffle {
+ background-position: -160px -448px;
+}
+.icon-arrow-up-left {
+ background-position: -192px -448px;
+}
+.icon-arrow-up {
+ background-position: -224px -448px;
+}
+.icon-arrow-up-right {
+ background-position: -256px -448px;
+}
+.icon-arrow-right {
+ background-position: -288px -448px;
+}
+.icon-arrow-down-right {
+ background-position: -320px -448px;
+}
+.icon-arrow-down {
+ background-position: -352px -448px;
+}
+.icon-arrow-down-left {
+ background-position: -384px -448px;
+}
+.icon-arrow-left {
+ background-position: -416px -448px;
+}
+.icon-arrow-up-left2 {
+ background-position: -448px -448px;
+}
+.icon-arrow-up2 {
+ background-position: -480px -448px;
+}
+.icon-arrow-up-right2 {
+ background-position: -512px -448px;
+}
+.icon-arrow-right2 {
+ background-position: -544px -448px;
+}
+.icon-arrow-down-right2 {
+ background-position: -576px -448px;
+}
+.icon-arrow-down2 {
+ background-position: -608px -448px;
+}
+.icon-arrow-down-left2 {
+ background-position: 0 -480px;
+}
+.icon-arrow-left2 {
+ background-position: -32px -480px;
+}
+.icon-arrow-up-left3 {
+ background-position: -64px -480px;
+}
+.icon-arrow-up3 {
+ background-position: -96px -480px;
+}
+.icon-arrow-up-right3 {
+ background-position: -128px -480px;
+}
+.icon-arrow-right3 {
+ background-position: -160px -480px;
+}
+.icon-arrow-down-right3 {
+ background-position: -192px -480px;
+}
+.icon-arrow-down3 {
+ background-position: -224px -480px;
+}
+.icon-arrow-down-left3 {
+ background-position: -256px -480px;
+}
+.icon-arrow-left3 {
+ background-position: -288px -480px;
+}
+.icon-tab {
+ background-position: -320px -480px;
+}
+.icon-checkbox-checked {
+ background-position: -352px -480px;
+}
+.icon-checkbox-unchecked {
+ background-position: -384px -480px;
+}
+.icon-checkbox-partial {
+ background-position: -416px -480px;
+}
+.icon-radio-checked {
+ background-position: -448px -480px;
+}
+.icon-radio-unchecked {
+ background-position: -480px -480px;
+}
+.icon-crop {
+ background-position: -512px -480px;
+}
+.icon-scissors {
+ background-position: -544px -480px;
+}
+.icon-filter {
+ background-position: -576px -480px;
+}
+.icon-filter2 {
+ background-position: -608px -480px;
+}
+.icon-font {
+ background-position: 0 -512px;
+}
+.icon-text-height {
+ background-position: -32px -512px;
+}
+.icon-text-width {
+ background-position: -64px -512px;
+}
+.icon-bold {
+ background-position: -96px -512px;
+}
+.icon-underline {
+ background-position: -128px -512px;
+}
+.icon-italic {
+ background-position: -160px -512px;
+}
+.icon-strikethrough {
+ background-position: -192px -512px;
+}
+.icon-omega {
+ background-position: -224px -512px;
+}
+.icon-sigma {
+ background-position: -256px -512px;
+}
+.icon-table {
+ background-position: -288px -512px;
+}
+.icon-table2 {
+ background-position: -320px -512px;
+}
+.icon-insert-template {
+ background-position: -352px -512px;
+}
+.icon-pilcrow {
+ background-position: -384px -512px;
+}
+.icon-left-to-right {
+ background-position: -416px -512px;
+}
+.icon-right-to-left {
+ background-position: -448px -512px;
+}
+.icon-paragraph-left {
+ background-position: -480px -512px;
+}
+.icon-paragraph-center {
+ background-position: -512px -512px;
+}
+.icon-paragraph-right {
+ background-position: -544px -512px;
+}
+.icon-paragraph-justify {
+ background-position: -576px -512px;
+}
+.icon-paragraph-left2 {
+ background-position: -608px -512px;
+}
+.icon-paragraph-center2 {
+ background-position: 0 -544px;
+}
+.icon-paragraph-right2 {
+ background-position: -32px -544px;
+}
+.icon-paragraph-justify2 {
+ background-position: -64px -544px;
+}
+.icon-indent-increase {
+ background-position: -96px -544px;
+}
+.icon-indent-decrease {
+ background-position: -128px -544px;
+}
+.icon-new-tab {
+ background-position: -160px -544px;
+}
+.icon-embed {
+ background-position: -192px -544px;
+}
+.icon-code {
+ background-position: -224px -544px;
+}
+.icon-console {
+ background-position: -256px -544px;
+}
+.icon-share {
+ background-position: -288px -544px;
+}
+.icon-mail {
+ background-position: -320px -544px;
+}
+.icon-mail2 {
+ background-position: -352px -544px;
+}
+.icon-mail3 {
+ background-position: -384px -544px;
+}
+.icon-mail4 {
+ background-position: -416px -544px;
+}
+.icon-google {
+ background-position: -448px -544px;
+}
+.icon-google-plus {
+ background-position: -480px -544px;
+}
+.icon-google-plus2 {
+ background-position: -512px -544px;
+}
+.icon-google-plus3 {
+ background-position: -544px -544px;
+}
+.icon-google-plus4 {
+ background-position: -576px -544px;
+}
+.icon-google-drive {
+ background-position: -608px -544px;
+}
+.icon-facebook {
+ background-position: 0 -576px;
+}
+.icon-facebook2 {
+ background-position: -32px -576px;
+}
+.icon-facebook3 {
+ background-position: -64px -576px;
+}
+.icon-instagram {
+ background-position: -96px -576px;
+}
+.icon-twitter {
+ background-position: -128px -576px;
+}
+.icon-twitter2 {
+ background-position: -160px -576px;
+}
+.icon-twitter3 {
+ background-position: -192px -576px;
+}
+.icon-feed2 {
+ background-position: -224px -576px;
+}
+.icon-feed3 {
+ background-position: -256px -576px;
+}
+.icon-feed4 {
+ background-position: -288px -576px;
+}
+.icon-youtube {
+ background-position: -320px -576px;
+}
+.icon-youtube2 {
+ background-position: -352px -576px;
+}
+.icon-vimeo {
+ background-position: -384px -576px;
+}
+.icon-vimeo2 {
+ background-position: -416px -576px;
+}
+.icon-vimeo3 {
+ background-position: -448px -576px;
+}
+.icon-lanyrd {
+ background-position: -480px -576px;
+}
+.icon-flickr {
+ background-position: -512px -576px;
+}
+.icon-flickr2 {
+ background-position: -544px -576px;
+}
+.icon-flickr3 {
+ background-position: -576px -576px;
+}
+.icon-flickr4 {
+ background-position: -608px -576px;
+}
+.icon-picassa {
+ background-position: 0 -608px;
+}
+.icon-picassa2 {
+ background-position: -32px -608px;
+}
+.icon-dribbble {
+ background-position: -64px -608px;
+}
+.icon-dribbble2 {
+ background-position: -96px -608px;
+}
+.icon-dribbble3 {
+ background-position: -128px -608px;
+}
+.icon-forrst {
+ background-position: -160px -608px;
+}
+.icon-forrst2 {
+ background-position: -192px -608px;
+}
+.icon-deviantart {
+ background-position: -224px -608px;
+}
+.icon-deviantart2 {
+ background-position: -256px -608px;
+}
+.icon-steam {
+ background-position: -288px -608px;
+}
+.icon-steam2 {
+ background-position: -320px -608px;
+}
+.icon-github {
+ background-position: -352px -608px;
+}
+.icon-github2 {
+ background-position: -384px -608px;
+}
+.icon-github3 {
+ background-position: -416px -608px;
+}
+.icon-github4 {
+ background-position: -448px -608px;
+}
+.icon-github5 {
+ background-position: -480px -608px;
+}
+.icon-wordpress {
+ background-position: -512px -608px;
+}
+.icon-wordpress2 {
+ background-position: -544px -608px;
+}
+.icon-joomla {
+ background-position: -576px -608px;
+}
+.icon-blogger {
+ background-position: -608px -608px;
+}
+.icon-blogger2 {
+ background-position: 0 -640px;
+}
+.icon-tumblr {
+ background-position: -32px -640px;
+}
+.icon-tumblr2 {
+ background-position: -64px -640px;
+}
+.icon-yahoo {
+ background-position: -96px -640px;
+}
+.icon-tux {
+ background-position: -128px -640px;
+}
+.icon-apple {
+ background-position: -160px -640px;
+}
+.icon-finder {
+ background-position: -192px -640px;
+}
+.icon-android {
+ background-position: -224px -640px;
+}
+.icon-windows {
+ background-position: -256px -640px;
+}
+.icon-windows8 {
+ background-position: -288px -640px;
+}
+.icon-soundcloud {
+ background-position: -320px -640px;
+}
+.icon-soundcloud2 {
+ background-position: -352px -640px;
+}
+.icon-skype {
+ background-position: -384px -640px;
+}
+.icon-reddit {
+ background-position: -416px -640px;
+}
+.icon-linkedin {
+ background-position: -448px -640px;
+}
+.icon-lastfm {
+ background-position: -480px -640px;
+}
+.icon-lastfm2 {
+ background-position: -512px -640px;
+}
+.icon-delicious {
+ background-position: -544px -640px;
+}
+.icon-stumbleupon {
+ background-position: -576px -640px;
+}
+.icon-stumbleupon2 {
+ background-position: -608px -640px;
+}
+.icon-stackoverflow {
+ background-position: 0 -672px;
+}
+.icon-pinterest {
+ background-position: -32px -672px;
+}
+.icon-pinterest2 {
+ background-position: -64px -672px;
+}
+.icon-xing {
+ background-position: -96px -672px;
+}
+.icon-xing2 {
+ background-position: -128px -672px;
+}
+.icon-flattr {
+ background-position: -160px -672px;
+}
+.icon-foursquare {
+ background-position: -192px -672px;
+}
+.icon-foursquare2 {
+ background-position: -224px -672px;
+}
+.icon-paypal {
+ background-position: -256px -672px;
+}
+.icon-paypal2 {
+ background-position: -288px -672px;
+}
+.icon-paypal3 {
+ background-position: -320px -672px;
+}
+.icon-yelp {
+ background-position: -352px -672px;
+}
+.icon-libreoffice {
+ background-position: -384px -672px;
+}
+.icon-file-pdf {
+ background-position: -416px -672px;
+}
+.icon-file-openoffice {
+ background-position: -448px -672px;
+}
+.icon-file-word {
+ background-position: -480px -672px;
+}
+.icon-file-excel {
+ background-position: -512px -672px;
+}
+.icon-file-zip {
+ background-position: -544px -672px;
+}
+.icon-file-powerpoint {
+ background-position: -576px -672px;
+}
+.icon-file-xml {
+ background-position: -608px -672px;
+}
+.icon-file-css {
+ background-position: 0 -704px;
+}
+.icon-html5 {
+ background-position: -32px -704px;
+}
+.icon-html52 {
+ background-position: -64px -704px;
+}
+.icon-css3 {
+ background-position: -96px -704px;
+}
+.icon-chrome {
+ background-position: -128px -704px;
+}
+.icon-firefox {
+ background-position: -160px -704px;
+}
+.icon-IE {
+ background-position: -192px -704px;
+}
+.icon-opera {
+ background-position: -224px -704px;
+}
+.icon-safari {
+ background-position: -256px -704px;
+}
+.icon-IcoMoon {
+ background-position: -288px -704px;
+}
+.icon-rainy {
+ background-position: -320px -704px;
+}
+.icon-rainy2 {
+ background-position: -352px -704px;
+}
+.icon-windy {
+ background-position: -384px -704px;
+}
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/login.ftl b/forms/src/main/resources/META-INF/resources/forms/theme/default/login.ftl
index e74b40f..ffdf394 100755
--- a/forms/src/main/resources/META-INF/resources/forms/theme/default/login.ftl
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/login.ftl
@@ -14,7 +14,7 @@
<form action="${url.loginAction?default('')}" method="post">
<div>
<label for="username">${rb.getString('username')}</label>
- <input id="username" name="username" value="${login.username?default('')}" type="text" />
+ <input id="username" name="username" value="${login.username!''}" type="text" />
</div>
<#list login.requiredCredentials as c>
@@ -26,7 +26,7 @@
<div class="aside-btn">
</div>
- <input type="submit" value="Log In" />
+ <input class="btn-primary" type="submit" value="Log In"/>
</form>
</div>
@@ -34,7 +34,7 @@
<div name="info">
<#if realm.registrationAllowed>
- <p>${rb.getString('noAccount')} <a href="${url.registrationUrl?default('')}">${rb.getString('register')}</a>.</p>
+ <p>${rb.getString('noAccount')} <a href="${url.registrationUrl!''}">${rb.getString('register')}</a>.</p>
</#if>
<a href="${url.passwordResetUrl}">Reset password</a>
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/login-reset-password.ftl b/forms/src/main/resources/META-INF/resources/forms/theme/default/login-reset-password.ftl
index 2e3a715..c315a35 100755
--- a/forms/src/main/resources/META-INF/resources/forms/theme/default/login-reset-password.ftl
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/login-reset-password.ftl
@@ -21,7 +21,7 @@
<input type="text" id="email" name="email" />
</div>
- <input type="submit" value="Submit" />
+ <input class="btn-primary" type="submit" value="Submit" />
</form>
</div>
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/login-update-password.ftl b/forms/src/main/resources/META-INF/resources/forms/theme/default/login-update-password.ftl
index fdfcb2c..51954e8 100755
--- a/forms/src/main/resources/META-INF/resources/forms/theme/default/login-update-password.ftl
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/login-update-password.ftl
@@ -21,7 +21,7 @@
<input type="password" id="password-confirm" name="password-confirm" />
</div>
- <input type="submit" value="Submit" />
+ <input class="btn-primary" type="submit" value="Submit" />
</form>
</div>
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/login-update-profile.ftl b/forms/src/main/resources/META-INF/resources/forms/theme/default/login-update-profile.ftl
index 84bab40..237faf4 100755
--- a/forms/src/main/resources/META-INF/resources/forms/theme/default/login-update-profile.ftl
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/login-update-profile.ftl
@@ -28,7 +28,7 @@
<div class="aside-btn">
</div>
- <input type="submit" value="Submit" />
+ <input class="btn-primary" type="submit" value="Submit" />
</form>
</div>
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/password.ftl b/forms/src/main/resources/META-INF/resources/forms/theme/default/password.ftl
index bbb8569..3b8b3d4 100755
--- a/forms/src/main/resources/META-INF/resources/forms/theme/default/password.ftl
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/password.ftl
@@ -1,29 +1,33 @@
<#import "template-main.ftl" as layout>
-<@layout.mainLayout ; section>
+<@layout.mainLayout active='password' bodyClass='password'; section>
<#if section = "header">
-
Change Password
- <#elseif section = "content">
-
+ <#elseif section="content">
+ <p class="subtitle">All fields required</p>
<form action="${url.passwordUrl}" method="post">
- <div>
- <label for="password">${rb.getString('password')}</label>
- <input type="password" id="password" name="password" />
- </div>
- <div>
- <label for="password-new">${rb.getString('passwordNew')}</label>
- <input type="password" id="password-new" name="password-new" />
- </div>
- <div>
- <label for="password-confirm">${rb.getString('passwordConfirm')}</label>
- <input type="password" id="password-confirm" name="password-confirm" />
+ <fieldset class="border-top">
+ <p class="info">Password updated 2 days ago by Admin.</p>
+ <div class="form-group">
+ <label for="password">${rb.getString('password')}</label>
+ <input type="password" id="password" name="password" autofocus>
+ </div>
+ <div class="form-group">
+ <label for="new-password">${rb.getString('passwordNew')}</label>
+ <input type="password" id="password-new" name="password-new" placeholder="At least 6 characters" class="error">
+ </div>
+ <div class="form-group">
+ <label for="new-password-confirm" class="two-lines">${rb.getString('passwordConfirm')}</label>
+ <input type="password" id="password-confirm" name="password-confirm" class="error">
+ </div>
+ </fieldset>
+ <div class="form-actions">
+ <a href="#">« Back to my application</a>
+ <button type="submit" class="primary">Save</button>
+ <button type="submit">Cancel</button>
</div>
-
- <input type="button" value="Cancel" />
- <input type="submit" value="Save" />
</form>
-
</#if>
+
</@layout.mainLayout>
\ No newline at end of file
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/register.ftl b/forms/src/main/resources/META-INF/resources/forms/theme/default/register.ftl
index a8f1eed..5bf3f47 100755
--- a/forms/src/main/resources/META-INF/resources/forms/theme/default/register.ftl
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/register.ftl
@@ -38,7 +38,7 @@
<p>By registering you agree to the <a href="#">Terms of Service</a> and the <a href="#">Privacy Policy</a>.</p>
</div>
- <input type="submit" value="Register" />
+ <input class="btn-primary" type="submit" value="Register"/>
</form>
<#elseif section = "info">
@@ -46,4 +46,5 @@
<p>${rb.getString('alreadyHaveAccount')} <a href="${url.loginUrl}">${rb.getString('logIn')}</a>.</p>
</#if>
+
</@layout.registrationLayout>
\ No newline at end of file
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/social.ftl b/forms/src/main/resources/META-INF/resources/forms/theme/default/social.ftl
index 97e51c4..09b770e 100755
--- a/forms/src/main/resources/META-INF/resources/forms/theme/default/social.ftl
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/social.ftl
@@ -1,5 +1,5 @@
<#import "template-main.ftl" as layout>
-<@layout.mainLayout ; section>
+<@layout.mainLayout active='social' bodyClass='social'; section>
<#if section = "header">
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/template-login.ftl b/forms/src/main/resources/META-INF/resources/forms/theme/default/template-login.ftl
index 2ad1c19..0dc2539 100644
--- a/forms/src/main/resources/META-INF/resources/forms/theme/default/template-login.ftl
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/template-login.ftl
@@ -9,7 +9,7 @@
</title>
<link href="${template.themeConfig.styles}" rel="stylesheet" />
<style>
- body {
+ body.rcue-login-register {
background-image: url("${template.themeConfig.background}");
}
</style>
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/template-login-action.ftl b/forms/src/main/resources/META-INF/resources/forms/theme/default/template-login-action.ftl
index 2b6074b..b0762b6 100644
--- a/forms/src/main/resources/META-INF/resources/forms/theme/default/template-login-action.ftl
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/template-login-action.ftl
@@ -9,7 +9,7 @@
</title>
<link href="${template.themeConfig.styles}" rel="stylesheet" />
<style>
- body {
+ body.rcue-login-register {
background-image: url("${template.themeConfig.background}");
}
</style>
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/template-main.ftl b/forms/src/main/resources/META-INF/resources/forms/theme/default/template-main.ftl
index 411191a..2b3591e 100644
--- a/forms/src/main/resources/META-INF/resources/forms/theme/default/template-main.ftl
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/template-main.ftl
@@ -1,46 +1,79 @@
-<#macro mainLayout>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html">
-
+<#macro mainLayout active bodyClass>
+<!doctype html>
+<html>
<head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <title>Keycloak Account Management</title>
- <link href="${template.formsPath}/lib/bootstrap/css/bootstrap.css" rel="stylesheet" />
- <style>
-body {
- padding-top: 50px;
-}
-</style>
+ <meta charset="utf-8">
+ <title>Edit Account</title>
+ <link rel="icon" href="img/favicon.ico">
+
+ <!-- Frameworks -->
+ <link rel="stylesheet" href="${template.formsPath}/theme/${template.theme}/css/reset.css">
+ <!--link rel="stylesheet" href="bootstrap-3.0.0-wip/css/bootstrap.css"-->
+ <link href="${template.formsPath}/lib/bootstrap/css/bootstrap.css" rel="stylesheet" />
+
+ <link rel="stylesheet" href="${template.formsPath}/theme/${template.theme}/css/sprites.css">
+ <link rel="stylesheet" href="${template.formsPath}/theme/${template.theme}/css/select2.css">
+ <link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic'>
+
+ <!-- RCUE styles -->
+ <link rel="stylesheet" href="${template.formsPath}/theme/${template.theme}/css/base.css">
+ <link rel="stylesheet" href="${template.formsPath}/theme/${template.theme}/css/forms.css">
+ <link rel="stylesheet" href="${template.formsPath}/theme/${template.theme}/css/header.css">
+ <link rel="stylesheet" href="${template.formsPath}/theme/${template.theme}/css/tabs.css">
+ <link rel="stylesheet" href="${template.formsPath}/theme/${template.theme}/css/icons.css">
+ <link rel="stylesheet" href="${template.formsPath}/theme/${template.theme}/css/tables.css">
+
+ <!-- Page styles -->
+ <link rel="stylesheet" href="${template.formsPath}/theme/${template.theme}/css/admin-console.css">
+
+ <script src="${template.formsPath}/lib/jquery/jquery-2.0.3.min.js"></script>
+ <script src="${template.formsPath}/lib/bootstrap/js/bootstrap.js"></script>
+
</head>
+<body class="admin-console user ${bodyClass}">
+
+ <#if error?has_content>
+ <!--div class="feedback success show"><p><strong>Success!</strong> Your changes have been saved.</p></div-->
+ <div class="feedback-aligner">
+ <div class="alert alert-danger">${rb.getString(error.summary)}</div>
+ </div>
+ </#if>
+
+<div class="header rcue">
+ <div class="navbar utility">
+ <div class="navbar-inner clearfix">
+ <h1><a href="#"><strong>Keycloak</strong> Central Login</a></h1>
+ <ul class="nav pull-right">
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="icon-user">Icon: user</span>
+ ${user.firstName!''} ${user.lastName!''}</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+</div><!-- End .header -->
-<body>
-
- <div class="navbar navbar-inverse navbar-fixed-top">
- <div class="container">
- <div class="collapse navbar-collapse">
- <ul class="nav navbar-nav">
- <li><a href="${url.accountUrl}">Account</a></li>
- <li><a href="${url.passwordUrl}">Password</a></li>
- <li><a href="${url.totpUrl}">Authenticator</a></li>
- <li><a href="${url.socialUrl}">Social Accounts</a></li>
- <li><a href="${url.accessUrl}">Authorized Access</a></li>
- </ul>
- </div>
- </div>
- </div>
-
- <div class="container">
- <h1>
- <#nested "header">
- </h1>
-
- <#if error?has_content>
- <div class="alert alert-danger">${rb.getString(error.summary)}</div>
- </#if>
-
- <#nested "content">
- </div>
+<div class="container">
+ <div class="row">
+ <div class="bs-sidebar col-md-3 clearfix">
+ <ul>
+ <li class="<#if active=='account'>active</#if>"><a href="${url.accountUrl}">Account</a></li>
+ <li class="<#if active=='password'>active</#if>"><a href="${url.passwordUrl}">Password</a></li>
+ <li class="<#if active=='totp'>active</#if>"><a href="${url.totpUrl}">Authenticator</a></li>
+ <li class="<#if active=='social'>active</#if>"><a href="${url.socialUrl}">Social Accounts</a></li>
+ <li class="<#if active=='access'>active</#if>"><a href="${url.accessUrl}">Authorized Access</a></li>
+ </ul>
+ </div>
+ <div id="content-area" class="col-md-9" role="main">
+ <div id="content">
+ <h2 class="pull-left"><#nested "header"></h2>
+ <#nested "content">
+ </div>
+ </div>
+ <div id="container-right-bg"></div>
+ </div>
+</div>
</body>
</html>
</#macro>
\ No newline at end of file
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/totp.ftl b/forms/src/main/resources/META-INF/resources/forms/theme/default/totp.ftl
index 84c8da7..cc81705 100755
--- a/forms/src/main/resources/META-INF/resources/forms/theme/default/totp.ftl
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/totp.ftl
@@ -1,5 +1,5 @@
<#import "template-main.ftl" as layout>
-<@layout.mainLayout ; section>
+<@layout.mainLayout active='totp' bodyClass='totp'; section>
<#if section = "header">
@@ -11,24 +11,28 @@
<#if totp.enabled>
Google Authenticator enabled
<#else>
- <h2>To setup Google Authenticator</h2>
+ <h2>Google Authenticator Setup</h2>
<ol>
- <li>Install Google Authenticator to your device</li>
- <li>Set up an account in Google Authenticator and scan the QR code below or enter the key<br />
- <img src="${totp.totpSecretQrCodeUrl}" /> ${totp.totpSecretEncoded}
+ <li>
+ <p><strong>1</strong>Download the <a href="http://code.google.com/p/google-authenticator/" target="_blank">Google Authenticator app</a> in your device.</p>
</li>
- <li>Enter a one-time password provided by Google Authenticator and click Save to finish the setup
-
+ <li class="clearfix">
+ <p><strong>2</strong>Create an account in Google Authenticator and scan the barcode or the provided key below.</p>
+ <img src="${totp.totpSecretQrCodeUrl}" alt="Figure: Barcode">
+ <span class="code">${totp.totpSecretEncoded}</span>
+ </li>
+ <li class="clearfix">
+ <p><strong>3</strong>Enter the one-time-password provided by Google Authenticator below and click Submit to finish the setup.</p>
<form action="${url.totpUrl}" method="post">
- <div>
- <label for="totp">${rb.getString('authenticatorCode')}</label>
+ <div class="form-group">
+ <label for="otp">${rb.getString('authenticatorCode')}</label>
<input type="text" id="totp" name="totp" />
<input type="hidden" id="totpSecret" name="totpSecret" value="${totp.totpSecret}" />
</div>
-
- <input type="button" value="Cancel" />
- <input type="submit" value="Save" />
+ <div class="form-actions">
+ <button type="submit" class="primary">Submit</button>
+ </div>
</form>
</li>
</ol>
diff --git a/testsuite/src/test/java/org/keycloak/testsuite/pages/ChangePasswordPage.java b/testsuite/src/test/java/org/keycloak/testsuite/pages/ChangePasswordPage.java
index 3b17f9a..f655f4b 100644
--- a/testsuite/src/test/java/org/keycloak/testsuite/pages/ChangePasswordPage.java
+++ b/testsuite/src/test/java/org/keycloak/testsuite/pages/ChangePasswordPage.java
@@ -22,7 +22,7 @@ public class ChangePasswordPage {
@FindBy(id = "password-confirm")
private WebElement passwordConfirmInput;
- @FindBy(css = "input[type=\"submit\"]")
+ @FindBy(css = "button[type=\"submit\"].primary")
private WebElement submitButton;
public void changePassword(String password, String newPassword, String passwordConfirm) {
diff --git a/testsuite/src/test/java/org/keycloak/testsuite/pages/TotpPage.java b/testsuite/src/test/java/org/keycloak/testsuite/pages/TotpPage.java
index 171df79..f01e812 100644
--- a/testsuite/src/test/java/org/keycloak/testsuite/pages/TotpPage.java
+++ b/testsuite/src/test/java/org/keycloak/testsuite/pages/TotpPage.java
@@ -19,7 +19,7 @@ public class TotpPage {
@FindBy(id = "totp")
private WebElement totpInput;
- @FindBy(css = "input[type=\"submit\"]")
+ @FindBy(css = "button[type=\"submit\"]")
private WebElement submitButton;
public void configure(String totp) {
diff --git a/testsuite/src/test/java/org/keycloak/testsuite/pages/UpdateProfilePage.java b/testsuite/src/test/java/org/keycloak/testsuite/pages/UpdateProfilePage.java
index 4233041..94feb0e 100644
--- a/testsuite/src/test/java/org/keycloak/testsuite/pages/UpdateProfilePage.java
+++ b/testsuite/src/test/java/org/keycloak/testsuite/pages/UpdateProfilePage.java
@@ -22,7 +22,7 @@ public class UpdateProfilePage {
@FindBy(id = "email")
private WebElement emailInput;
- @FindBy(css = "input[type=\"submit\"]")
+ @FindBy(css = "button[type=\"submit\"]")
private WebElement submitButton;
public void updateProfile(String firstName, String lastName, String email) {
