/home/ivoiecob/email.hirewise-va.com/modules/StandardLoginFormMobileWebclient/styles/login.less
.LoginLayout {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
//workaround for show background only on login screen
html.mobile & {
.theme-main-background();
}
.vhelper {
display: inline-block;
display: none;
height: 100%;
vertical-align: middle;
width: 0px;
}
}
.login_panel {
.theme-login-panel();
@borderColor: #cac7c7;
@focusedBorderColor: #cfbf8e;
.box-sizing;
color: #929292;
display: inline-block;
font-size: 9pt;
padding: 20px;
vertical-align: middle;
width: 280px;
.header {
height: 95px;
margin-bottom: 30px;
&.custom_logo {
background: none;
height: auto;
}
.icon {
display: inline-block;
line-height: 1;
vertical-align: middle;
}
.text {
display: none;
}
.theme-login-header();
}
.welcome {
margin-bottom: 20px;
font-size: 14px;
.name {
font-style: italic;
font-size: 17px;
color: #6d5454;
}
}
.login_panel_content {
.perspective(4000px);
position: relative;
.col {
.perspective(4000px);
&.left {
margin-right: 276px;
padding-right: 20px;
text-align: center;
}
&.right {
position: absolute;
right: 0px;
width: 276px;
}
}
.content {
box-shadow: 0px 0px 0px #ffffff;
float: left;
margin-top: 0px;
opacity: 1;
visibility: visible;
width: 100%;
@animDuration: 600ms;
-webkit-transition: -webkit-transform @animDuration ease-in-out, opacity @animDuration*0.2 linear @animDuration*0.4, visibility 1ms linear @animDuration/2, margin-top 0ms linear @animDuration/2;
-moz-transition: -moz-transform @animDuration ease-in-out, opacity @animDuration*0.2 linear @animDuration*0.4, visibility 1ms linear @animDuration/2, margin-top 0ms linear @animDuration/2;
transition: transform @animDuration ease-in-out, opacity @animDuration*0.2 linear @animDuration*0.4, visibility 1ms linear @animDuration/2, margin-top 0ms linear @animDuration/2-10;
&.register,
&.changepass,
&.social_register {
left: 50%;
margin-left: -130px;
position: relative;
width: 260px;
}
&.send_question {
.transform(rotateY(0deg));
.question {
.box-sizing;
border: 1px solid #d7d7d7;
border-radius: 4px;
box-shadow: 0 1px 1px #dddddd inset;
color: #000000;
font-size: 11pt;
height: 214px;
padding: 6px 8px;
resize: none;
width: 100%;
}
}
&.forgot .row {
border-radius: 4px !important;
}
&.register,
&.changepass,
&.social_register {
text-align: center;
}
&.social_register .question_title,
&.send_question .question_title {
color: #929292;
display: block;
font-size: 11pt;
}
&.forgot,
&.changepass,
&.register,
&.signin,
&.activation,
&.changepass,
&.social_register {
.transform(rotateY(180deg));
margin-top: -100000px;
opacity: 0;
visibility: hidden;
}
&.activation {
.transform(rotateY(180deg));
font-size: 12pt;
text-shadow: 0px 1px 0px #f3f3f3;
white-space: normal;
width: 240px;
}
}
}
&.flipForgot .content.login,
&.flipChangepass .content.send_question,
&.flipRegister .content.login,
&.flipRegister .content.send_question,
&.flipRegister.flipForgot .content.forgot,
&.flipSignin .content.login,
&.flipSocialRegister .content.login,
&.flipSocialRegister .content.send_question,
&.flipActivation .content.login,
&.flipChangepass .content.login {
.transform(rotateY(180deg));
margin-top: -100000px;
opacity: 0;
visibility: hidden;
}
&.flipForgot .content.forgot,
&.flipChangepass .content.changepass,
&.flipRegister .content.register,
&.flipSignin .content.signin,
&.flipSocialRegister .content.social_register {
.transform(rotateY(360deg));
margin-top: 0px;
opacity: 1;
visibility: visible;
}
&.flipActivation .content.activation {
.transform(rotateY(0deg));
margin-top: 0px;
opacity: 1;
visibility: visible;
}
.description {
color: #929292;
margin-top: 20px;
}
.social_description {
background: #d7dcdf;
border: 1px solid #c7cccf;
border-radius: 4px;
color: #464646;
margin: 20px;
margin-left: -85px;
padding: 10px;
width: 400px;
}
.row {
background:#ffffff;
border: 1px solid @borderColor;
margin: -1px 0px 0px;
padding: 10px;
padding-left: 30px;
text-align: right;
white-space: nowrap;
&.focused {
background: @focused-background;
border-color: @focusedBorderColor;
position: relative;
}
&.shake {
.animation(shake 0.8s linear);
}
&:first-child {
border-radius: 4px 4px 0px 0px;
box-shadow: 0 1px 1px #dddddd inset;
}
&:last-child {
border-radius: 0px 0px 4px 4px;
border-width: 1px;
}
.value {
vertical-align: middle;
&.suffix {
margin-left: 16px;
.text {
color: #777777;
font: 12pt Helvetica,Tahoma,Arial,sans-serif;
}
}
}
.placeholder {
display: inline-block;
cursor: text;
float: none;
font-size: 12pt;
height: 20px;
margin-left: -20px;
position: relative;
text-indent: 0px;
vertical-align: middle;
width: 20px;
zoom: 1;
html.rtl & {
margin-left: 0px;
margin-right: -20px;
}
.init-icon-font();
&:before {
color: #d5d4d2;
display: inline-block;
font-size: 22px;
height: 20px;
margin-right: 4px;
margin-top: -6px;
vertical-align: middle;
width: 20px;
html.rtl & {
margin-left: 4px;
margin-right: 0px;
}
}
}
&.filled .placeholder:before,
&.focused .placeholder:before {
color: #cbc9c6;
}
&.email > .placeholder:before {
content: "\e627";
}
&.password > .placeholder:before {
content: "\e625";
}
&.name > .placeholder:before,
&.login > .placeholder:before {
content: "\e626";
}
&.question,
&.answer {
padding-left: 10px;
html.rtl {
padding-right: 10px;
}
.placeholder {
width: 0px;
}
}
.input {
background: transparent;
border: 0px !important;
border-radius: 0px;
box-shadow: none;
color: #444;
display: inline-block;
font: 12pt Helvetica,Tahoma,Arial,sans-serif;
outline: none;
padding: 1px 0px;
text-align: left;
text-indent: 3px;
width: 100%;
&:focus {
box-shadow: none;
}
&:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
&:focus {
-webkit-box-shadow: 0 0 0 1000px #fff3ce inset !important;
}
}
}
}
.custom_checkbox.focus {
box-shadow: 0px 4px 3px -3px #e5e5e5 inset, 0 0 2px 0 #1d67cd;
.icon {
border: 1px solid #ffffff;
}
}
.signme,
.links {
background: none;
border: 0px;
border-radius: 0px;
font-size: 9pt;
margin-bottom: 14px;
padding: 0px;
text-align: left;
html.rtl & {
text-align: right;
}
}
.signme {
.signme_label {
cursor: pointer;
font-size: 9pt;
height: auto;
text-indent: 0px;
width: auto;
}
input {
vertical-align: middle;
}
}
.links .forgot {
float: right;
margin-left: 16px;
}
&.login .row.login {
border-radius: 4px 4px 0px 0px;
}
&.login.email .row.login {
border-radius: 0px;
}
}