KEYCLOAK-74 applying new design to existing forms
This commit is contained in:
vrockai
parent
5786087d7b
commit
790f09c46f
25 changed files with 3129 additions and 138 deletions
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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()));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<#import "template-main.ftl" as layout>
|
||||
<@layout.mainLayout ; section>
|
||||
<@layout.mainLayout active='access' bodyClass='access'; section>
|
||||
|
||||
<#if section = "header">
|
||||
|
||||
|
|
|
|||
|
|
@ -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('')}" />
|
||||
<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="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('')}" />
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
.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-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: 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;
|
||||
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;
|
||||
}
|
||||
.feedback p {
|
||||
padding: 1em 3.63636363636364em;
|
||||
border-style: solid;
|
||||
border-width: 1px 1px 0px 1px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 1.27272727272727em 1.63636363636364em;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.27272727272727em;
|
||||
border-radius: 2px;
|
||||
.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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
1381
forms/src/main/resources/META-INF/resources/forms/theme/default/css/sprites.css
Executable file
1381
forms/src/main/resources/META-INF/resources/forms/theme/default/css/sprites.css
Executable file
File diff suppressed because one or more lines are too long
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
<div class="aside-btn">
|
||||
</div>
|
||||
|
||||
<input type="submit" value="Submit" />
|
||||
<input class="btn-primary" type="submit" value="Submit" />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
<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>
|
||||
<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" />
|
||||
</div>
|
||||
|
||||
<input type="button" value="Cancel" />
|
||||
<input type="submit" value="Save" />
|
||||
</form>
|
||||
|
||||
</#if>
|
||||
|
||||
</@layout.mainLayout>
|
||||
|
|
@ -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>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<#import "template-main.ftl" as layout>
|
||||
<@layout.mainLayout ; section>
|
||||
<@layout.mainLayout active='social' bodyClass='social'; section>
|
||||
|
||||
<#if section = "header">
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}">
|
||||
|
||||
<body>
|
||||
<#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="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="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 -->
|
||||
|
||||
<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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue