app/resources/login_styles.css
body {
background: #ffffff;
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif;
font-size: 15px;
color: #1B2F59;
}
ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
.right {
text-align: right;
}
#topHeader {
padding: 0 0 60px;
}
#container {
width: 400px;
padding: 0 0 10px;
background: #f3f3f3;
color: #1B2F59;
margin: 0 auto;
border: 1px solid #c4cddb;
/*border-radius: 10px;*/
box-shadow: 0 1px 1px #ccc;
position: relative;
}
h1 {
margin: 0;
padding: 10px 0;
font-size: 24px;
text-align: center;
background: #eff4f7;
border-bottom: 1px solid #dde0e7;
box-shadow: 0 -1px 0 #fff inset;
border-radius: 5px 5px 0 0; /* otherwise we get some uncut corners with container div */
text-shadow: 1px 1px 0 #fff;
}
form ul li {
margin: 10px 20px;
}
form ul li:last-child {
text-align: center;
margin: 20px 0 25px 0;
}
.inputs {
padding: 10px 10px;
border: none;
border-bottom: 1px solid #1B2F59;
#border-radius: 5px;
#box-shadow: 0 0 5px #e8e9eb inset;
width: 328px; /* 400 (#container) - 40 (li margins) - 10 (span paddings) - 20 (input paddings) - 2 (input borders) */
font-size: 1.3em;
outline: 0; /* remove webkit focus styles */
transition: all 0.4s;
background: #f3f3f3;
color: #1B2F59;
}
.inputs:focus {
width: 318px;
padding: 15px 15px;
border: none;
border-bottom: 1px solid #26DB8D;
}
label {
font-size: 1.3em;
color: #1B2F59;
}
#container span {
/*background: #f6f6f6;*/
padding: 3px 5px;
display: block;
/*border-radius: 5px;*/
margin-top: 5px;
}
.buttons {
padding: 8px 15px;
width: 50%;
outline: none;
border: 1px #26DB8D solid;
background-color: transparent;
color: #1B2F59;
font-size: 1em;
transition: all 0.2s;
/*border-radius: 5px;*/
/*box-shadow: 0 1px 1px #aaa;*/
}
.buttons:hover {
border: 1px #1B2F59 solid;
background: #26DB8D;
color: #1B2F59;
}
.buttons:active {
border: 1px #26DB8D solid;
background-color: transparent;
color: #1B2F59;
}
.buttons:focus {
border: 1px #26DB8D solid;
background-color: transparent;
color: #1B2F59;
width: 50%;
}
#username_info {
position: absolute;
z-index: 2;
top: 30px;
right: -292px;
width: 250px;
padding: 15px;
background: #f3f3f3;
font-size: .875em;
border: 1px solid #1B2F59;
}
#username_info h4 {
margin: 0 0 10px 0;
padding: 0;
font-weight: normal;
}
#username_info::before {
content: "\25C0";
position: absolute;
left: -12px;
top: 45%;
font-size: 14px;
line-height: 14px;
color: #26DB8D;
text-shadow: none;
display: block;
}
#pswd_info {
position: absolute;
top: 80px;
right: -292px;
width: 250px;
padding: 15px;
background: #f3f3f3;
font-size: .875em;
border: 1px solid #1B2F59;
}
#pswd_info h4 {
margin: 0 0 10px 0;
padding: 0;
font-weight: normal;
}
#pswd_info::before {
content: "\25C0";
color: #26DB8D;
position: absolute;
top: 45%;
left: -12px;
font-size: 14px;
line-height: 14px;
text-shadow: none;
display: block;
}
#login_corrupted_file {
position: absolute;
bottom: 220px;
right: -292px;
width: 250px;
padding: 15px;
background: #f3f3f3;
font-size: .875em;
border: 1px solid #1B2F59;
}
#login_corrupted_file h4 {
margin: 0 0 10px 0;
padding: 0;
font-weight: normal;
}
#login_corrupted_file::before {
content: "\25C0";
color: #26DB8D;
position: absolute;
top: 45%;
left: -12px;
font-size: 14px;
line-height: 14px;
text-shadow: none;
display: block;
}
#login_wrong_credentials {
position: absolute;
bottom: 140px;
right: -292px;
width: 250px;
padding: 15px;
background: #f3f3f3;
font-size: .875em;
border: 1px solid #1B2F59;
}
#login_wrong_credentials h4 {
margin: 0 0 10px 0;
padding: 0;
font-weight: normal;
}
#login_wrong_credentials::before {
content: "\25C0";
color: #26DB8D;
position: absolute;
top: 45%;
left: -12px;
font-size: 14px;
line-height: 14px;
text-shadow: none;
display: block;
}
#login_nonexistent_wallet_name {
position: absolute;
bottom: 60px;
right: -292px;
width: 250px;
padding: 15px;
background: #f3f3f3;
font-size: .875em;
border: 1px solid #1B2F59;
}
#login_nonexistent_wallet_name h4 {
margin: 0 0 10px 0;
padding: 0;
font-weight: normal;
}
#login_nonexistent_wallet_name::before {
content: "\25C0";
color: #26DB8D;
position: absolute;
top: 45%;
left: -12px;
font-size: 14px;
line-height: 14px;
text-shadow: none;
display: block;
}
#pswd_identical_info {
position: absolute;
top: 220px;
right: -292px;
width: 250px;
padding: 15px;
background: #f3f3f3;
font-size: .875em;
border: 1px solid #1B2F59;
}
#pswd_identical_info h4 {
margin: 0 0 10px 0;
padding: 0;
font-weight: normal;
}
#pswd_identical_info::before {
content: "\25C0";
position: absolute;
left: -12px;
top: 45%;
font-size: 14px;
line-height: 14px;
color: #26DB8D;
text-shadow: none;
display: block;
}
#wallet_creation_info_area {
position: absolute;
bottom: 40px;
right: -292px;
width: 250px;
padding: 15px;
background: #f3f3f3;
font-size: .875em;
border: 1px solid #1B2F59;
}
#wallet_creation_info_area h4 {
margin: 0 0 10px 0;
padding: 0;
font-weight: normal;
}
#wallet_creation_info_area::before {
content: "\25C0";
position: absolute;
left: -12px;
top: 45%;
font-size: 14px;
line-height: 14px;
color: #26DB8D;
text-shadow: none;
display: block;
}
.invalid {
background: url(invalid.png) no-repeat 0 50%;
padding-left: 22px;
line-height: 24px;
color: #ec3f41;
}
.valid {
background: url(valid.png) no-repeat 0 50%;
padding-left: 22px;
line-height: 24px;
color: #3a7d34;
}
#username_info {
display: none;
}
#pswd_info {
display: none;
}
#pswd_identical_info {
display: none;
}
#wallet_creation_info_area {
display: none;
}
/* Login.html only */
.create_wallet_link {
color: #1B2F59;
padding: 10px;
margin: 10px;
font-size: 16px;
text-decoration: none;
}
.create_wallet_link:hover {
color: #244972;
}