%PDF-
%PDF-
Mini Shell
Mini Shell
/* ----------------------------------------------------------------------------
Login window
*/
.white-popup-block {
position: relative;
margin: 0 auto;
max-width: 500px;
min-height: 500px;
font-family: @font1;
text-align: center;
color: #fff;
vertical-align: top;
.box-shadow(0px 0px 20px 0px rgba(0,0,0,0.2));
padding: 0 0 24px;
overflow: hidden;
// gradient
&:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: block;
background: rgba(0, 69, 130, 0.8);
background: -moz-linear-gradient(45deg, rgba(0, 69, 130, 0.8) 0%, rgba(38, 134, 146, 0.8) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(0, 69, 130, 0.8)), color-stop(100%, rgba(38, 134, 146, 0.8)));
background: -webkit-linear-gradient(45deg, rgba(0, 69, 130, 0.8) 0%, rgba(38, 134, 146, 0.8) 100%);
background: -o-linear-gradient(45deg, rgba(0, 69, 130, 0.8) 0%, rgba(38, 134, 146, 0.8) 100%);
background: -ms-linear-gradient(45deg, rgba(0, 69, 130, 0.8) 0%, rgba(38, 134, 146, 0.8) 100%);
background: linear-gradient(45deg, rgba(0, 69, 130, 0.8) 0%, rgba(38, 134, 146, 0.8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a80cb', endColorstr='#42bdcd', GradientType=1 );
z-index: -2;
}
// image background
&:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: block;
background-size: cover;
background-position: top;
background-repeat: no-repeat;
z-index: -3;
}
}
.mfp-content {
/* wrapper */
.td-login-wrap {
position: relative;
}
.td-back-button {
visibility: hidden;
.opacity(0);
.transition(all 0.5s cubic-bezier(.79,.14,.15,.86) 0s);
position: absolute;
top: 13px;
left: 8px;
color: #fff;
width: 50px;
height: 50px;
z-index: 99;
i {
line-height: 50px;
font-size: 16px;
}
}
.td-login-inputs {
width: 100%;
display: inline-block;
position: relative;
margin-bottom: 30px;
font-size: 15px;
font-weight: 400;
color: #fff;
label {
position: absolute;
top: 8px;
left: 0;
text-transform: uppercase;
.transition(all 0.2s ease);
pointer-events: none;
}
&:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: #fff;
.opacity(0.3);
}
}
.td-login-input {
position: relative;
background-color: transparent !important;
height: 40px;
margin: 0 !important;
padding: 0;
box-shadow: none !important;
font-size: 15px;
color: #fff;
outline: none;
border: 0;
&:focus,
&:valid {
~ label {
top: -18px;
font-size: 11px;
.opacity(0.6);
}
}
&:invalid {
font-style: italic;
}
}
.td-login-button {
width: 100%;
height: 50px;
background-color: #fff;
padding: 5px 12px 6px;
margin-top: 20px;
margin-bottom: 0;
text-transform: uppercase;
text-shadow: none;
font-size: 13px;
font-weight: 600;
color: #000;
.box-shadow(1px 1px 4px 0px rgba(0, 0, 0, 0.2));
border: 0;
border-radius: 0;
.transition_important(background-color 0.2s ease);
&:active,
&:hover {
.box-shadow(1px 1px 4px 0px rgba(0, 0, 0, 0.2));
background-color: #deea4b;
}
}
.td-login-info-text {
display: block;
margin-top: 3px;
font-size: 11px;
color: #fff;
a {
color: inherit;
&:hover {
text-decoration: underline;
}
}
}
#register-link {
width: 100%;
display: block;
padding: 13px;
margin-top: 24px;
font-size: 13px;
text-transform: uppercase;
color: #fff;
cursor: pointer;
position: relative;
&:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 1px solid #fff;
opacity: 0;
.transition(opacity 0.2s ease);
}
&:hover {
&:before {
opacity: 0.2;
}
}
}
.td-login-form-div {
width: 100%;
position: absolute;
top: 0;
padding: 0 20%;
/* responsive portrait phone */
@media (max-width: 480px) {
padding: 0 5%;
}
}
// modal animation
#td-login-div {
.transform(translate3d(0, 0, 0));
.transition(all 0.5s cubic-bezier(.79,.14,.15,.86) 0s);
&.td-display-none {
visibility: hidden;
.opacity(0);
.transition(all 0.3s cubic-bezier(.79,.14,.15,.86) 0s);
}
}
.td-login-animation {
#td-login-div {
.transform(translate3d(-300px, 0, 0));
}
.td-back-button {
visibility: visible;
.opacity(1);
}
}
#td-register-div,
#td-forgot-pass-div {
visibility: hidden;
.opacity(0);
.transition(all 0.5s cubic-bezier(.79,.14,.15,.86) 0s);
.transform(translate3d(300px, 0, 0));
&.td-display-block {
visibility: visible;
.opacity(1);
.transition(all 0.3s cubic-bezier(.79,.14,.15,.86) 0s);
.transform(translate3d(0, 0, 0));
}
}
#login-form {
.mfp-close {
position: absolute;
top: 26px;
width: 20px;
height: 20px;
line-height: 0;
font-size: 0;
color: #fff;
font-family: @font4;
&:before {
position: absolute;
top: 50%;
left: 50%;
.transform(translate(-50%, 50%));
font-size: 16px;
vertical-align: bottom;
color: #fff;
}
}
#login-link {
position: absolute;
left: 26px;
top: 28px;
cursor: pointer;
}
.mfp-close {
right: 27px;
left: auto;
.opacity(1);
&:before {
content: '\e902';
}
}
}
/* the panel title */
.td-login-panel-title {
padding: 26px 0 22px 0;
line-height: 20px;
font-size: 17px;
text-transform: uppercase;
color: #fff;
pointer-events: none;
}
.td-login-panel-descr {
margin-bottom: 77px;
font-size: 13px;
line-height: 1;
}
/* error message */
.td_display_err {
color: #fff;
padding: 14px 30px;
display: none;
position: absolute;
top: 93px;
left: 0;
right: 0;
font-size: 11px;
text-transform: uppercase;
margin: 0 -40%;
line-height: 1;
&:before {
content: '';
width: 100%;
height: 100%;
background-color: #000;
position: absolute;
top: 0;
left: 0;
opacity: 0.8;
z-index: -1;
}
}
.td_display_msg_ok {
&:before {
background-color: #fff;
opacity: 0.1;
}
}
}
/**
tagdiv animations
-
- mfp-with-anim - has to be on the wrapper
*/
.mpf-td-login-effect {
/* start state */
.mfp-with-anim {
opacity: 0;
-webkit-transition: all 400ms cubic-bezier(.55,0,.1,1);
-moz-transition: all 400ms cubic-bezier(.55,0,.1,1);
-o-transition: all 400ms cubic-bezier(.55,0,.1,1);
transition: all 400ms cubic-bezier(.55,0,.1,1); /* custom */
.transform (~"perspective( 600px ) scale(0.4)");
}
&.mfp-bg {
opacity: 0;
transition: all 0.3s ease-out;
}
/* animate in */
&.mfp-ready {
.mfp-with-anim {
opacity: 1;
.transform (~"perspective( 600px ) scale(1)");
}
&.mfp-bg {
opacity: 0.8;
}
}
/* animate out */
&.mfp-removing {
.mfp-with-anim {
.transform (~"perspective( 600px ) scale(0.4)");
opacity: 0;
}
&.mfp-bg {
opacity: 0;
}
}
}
// fix password field - not secure issue on chrome
#login_pass-mob,
#login_pass {
display: none !important;
}
.td-login-show #login_pass-mob,
.mfp-ready #login_pass {
display: inline-block !important;
}
Zerion Mini Shell 1.0